かつてDTPデザイナーを目指していたわたしは、新卒入社の会社でウェブの部署に配属され、デザインをやっていたつもりが気づいたら半分フロントエンドエンジニアに足をつっこんでいました。
そんなわたしが見る今のウェブ業界や、ウェブデザイナーがするべき今後のスキルアップについてお話します。
わたしをフロントエンドエンジニアの道へと導いてくれるあなたは誰？
Fireworksを経て、PhotoshopやAdobe XDでデザインをしています
コーディングではHTML・CSS・Javascript（jQuery）を使用し、PHPを編集してWordpressをカスタマイズしたりもします
わたしの知識が少しでもみなさまのお役に立てればうれしいです
どうして今フロントエンドエンジニアを目指すのか
無料サービスが素敵なデザインを用意してしまっている
近年、無料でホームページを作れるサービスは多くあり、そのサービス内容も充実しています。
WordPressは言わずと知れた世界的にも有名なブログソフトウェアです。その認知度のおかげでカスタマイズ性は高く、無料テーマの種類もとても豊富です。
Wix（ウィックス）やJimdo（ジンドゥー）は小規模のウェブサイトをつくるのに適しています。写真を大きく使った大胆なデザインや、最低限の装飾のみで見やすく読みやすいミニマルデザインなどトレンドのデザインも網羅しています。
さらに、ポートフォリオ※1にはTumblr（タンブラー）、ランディングページ※2にはペライチ、ネットショップサイトにはBASE（ベース）といった具合に、それぞれの特徴に合わせた最適なサービスが用意されています。
主にクリエイターやデザイナーが作成する、自分の成果物を集めた作品集
ひとつの商品やサービスについて説明するための単一のページ
今やデザインセンスを持ち合わせていなくても、おしゃれで見やすいホームページを無料で作れてしまう時代なのです。
ホームページが重要視されなくなってくる
上で書いたように、誰でも簡単に作れるようになったホームページですが、今後は自社サイトの重要性が低くなってくるのではないかと言われています。
突然ですが、あなたは友だちと飲み会をするお店を決めるときどのように探していますか？
食べログやホットペッパーを利用し、メニューや口コミを見ているのではないでしょうか。
旅行先で宿泊するホテルを探すときはどうでしょうか？
じゃらんやBooking.comなどで料金やサービスを比較してはいませんか。
このように独自のホームページは衰退していき、まとめサイトのような形で情報発信されていくのが主流になっていくことが予想されています。
生まれた頃からITと過ごしている世代がやってくる
実はわたしが最も恐れていることがこちらです。
あと数年もすると、生まれた頃からスマートフォンとお友だちだった世代が、会社に新人として入ってきてもおかしくありません。
デジタルネイティブと呼ばれたわたしですら、彼らの柔軟性は未知数です。
さらに、2020年からはとうとうプログラミング教育が小学校で必修化となります。
子どもたちのフレッシュな好奇心とスポンジのような吸収力でプログラミングを学ぶとどうなってしまうのか。
現代社会では収入のために、必ずしも会社へ行って働かなければいけないわけではありません。
YouTubeの動画投稿やライブ配信アプリによって収益を得ることができます。
そのような感覚で、社会に出る前から子どもたちはプログラミング技術をいかようにも売り物にできてしまうわけです。
そんな世の中で、デザイン一本だけでやっていけるでしょうか。否。
なので、まずは今のうちからプログラミングを始めることをおすすめしているわけなのです。
次からは、実際にフロントエンドエンジニアを目指すためのステップを紹介していきます。
ウェブデザイナーとフロントエンドエンジニアの違いを知ろう
詳しく書き出すともっと多くの職種がありますが、簡単にまとめると下の6つに分けられます。
| 企画・設計 | ウェブマーケター・プランナー |
|---|---|
| デザイン | ウェブデザイナー |
| 見た目の構築 | コーダー・マークアップエンジニア・フロントエンドエンジニア |
| システムの構築 | バックエンドエンジニア・システムエンジニア |
| 更新・運用 | ウェブオペレーター |
| 総括 | ウェブディレクター・プロジェクトマネージャー |
覚えられないほどの職種があるように思いますが、ひとりがひとつの職種に専念していることは稀です。
大企業で部署がしっかりと整っているようなところでない限り、いくつかの職種を兼任している人ばかりなのではないでしょうか。
それほど各職種同士のかかわり合いが強く、ウェブに関する知識は広いほど仕事を進める際に役立つことが分かります。
ウェブデザイナーはどんな仕事をしているの？
その名の通り、ウェブのデザインをします。
しかしすぐにPhotoshopなどを使ったデザインに取りかかれるわけではありません。
まずは手書きでラフスケッチを書いていきます。
人によってはこの工程を飛ばして次のワイヤーフレーム作成から始めることもありますが、どうもわたしは手書きをしないと頭の中整理できないマンなので必ずラフスケッチを行います。
デザイナーというとセンスや感覚の生き物と思われがちですが、実はどんなデザインをするにも理由や裏付けが必要で、理論的にデザインを説明できなければなりません。
「ただかっこいいと思ったから」ではお客様を納得させられるデザインは作れないのです。
情報を書き出し、整理し、理論的に構築し直すことは、わたしにとって良いデザインのために必要な手順となっています。
次にラフスケッチを元に、コンテンツのレイアウトやページ移動を明確にするためにワイヤーフレームというものを作ります。
この時点では写真の代わりに灰色の四角を置き、文章もダミーのものを入れておくことが多いです。
ワイヤーフレームで全体の方向性や画面遷移をお客様も含めたチーム全体で共有し、ウェブサイトとしてのゴールにズレがないように意識を合わせます。
こうしてやっとデザインを作り込む段階へと進むことができます。
企画から参加しウェブサイトの目指すゴールを共有できていたり、フロントエンドの作業効率を考えたデザインを提案できると、他の職種との連携がスムーズにいきます。
必須スキル
Adobe Illustrator
Adobe Photoshop
推奨スキル
Adobe XD
Adobe Animate
フロントエンドエンジニアはどんな仕事をしているの？
HTMLとCSS、Javascript、時にはPHPという言語を使用してウェブサイトを構築します。
構築もフロントエンドエンジニアにとって大きな作業ではありますが、最も大変な作業は検証ではないでしょうか。
新しいデバイスが出たり、ブラウザのバージョンアップがあったり、その度に表示の崩れやバグに悩まされるのはエンジニアあるあるです。
そういった不測の自体に対処するのもフロントエンドエンジニアの腕の見せどころです。
ウェブに関連する技術は日々変わっていくので、情報収集は欠かせません。
最新情報を取り込み、営業へ「こういう技術があるので、これを利用して問題解決ができそうなお客様がいたら提案していきましょう」と自ら発信までできると、優秀なフロントエンドエンジニアとして頼りにされるでしょう。
必須スキル
HTML
CSS
Javascript（jQuery）
PHP
推奨スキル
英語
※プログラミング言語は英語で書かれることと最新の情報や発表は英語のことが多いため
ウェブデザイナーがプログラムを書けるメリット・デメリット
メリット
デザインとプログラムで作業する人が違うと、認識合わせや質問と回答の繰り返しで時間を使ってしまいます。
その点ウェブデザイナーがフロントエンドエンジニアを兼任していると、仕様の変更などがあっても複数人で対応しているよりは簡単に対応することができます。
実作業で感じるメリットは、デザインの段階からコーディングの手順をイメージできることです。
複数の似たようなパーツが必要なときに、どのような共通点を持たせればコーディングが楽になるかを考えながらデザインできるのは非常に効率的です。
友人は転職の際に、デザインとプログラミングをできることは転職活動時の大きな強みになったとも話していました。
デメリット
会社員として感じるデメリットは、自分の仕事の範囲を決めにくいことです。
できてしまうがゆえに、他の部署がやるべき仕事もまとめて任されてしまうことがあり、本来の仕事に手を付けられなくなったり残業が増えてしまうことがあります。
ただこれは会社の分業として感じる悪い点なので、フリーランスになるのであれば色んな技術が身につくことは逆にメリットとなるでしょう。
プログラミング学習のオンラインサービスを利用しよう
おすすめのオンライン学習サービス3選
学習と実践で身につけていく「Progate」
Progateは自分でプログラミングのための環境を用意しなくても、オンライン上でコードを書きながら学習できるサービスです。
基礎的な内容は無料で学ぶことができ、実践的なレッスンは有料会員になると受けることができます。
Progate自体のホームページも大変きれいで、アイコンやキャラクターなどが可愛らしくそれだけで気分が上がります。
レッスンには学ぶ回と実際にやってみる回があり、ゲーム感覚で進めることができます。
動画を観ながら実践する「paizaラーニング」
paizaラーニングは動画を観ながらコードを書いて学びます。
こちらもプログラミングのための環境は構築不要で、オンライン上でコードを打つことができます。
動画は1本約3分と毎日続けやすい長さとなっています。
学びながら手を動かす勉強法が人気のポイントです。
講座は一部無料のものや完全無料のものもあるので、視聴してレッスンの雰囲気をつかむことができます。
特徴はなんと言っても、スキルによって書類選考なく書いたコードで面接まで行ける採用を行っている点です。
真似をすることで学ぶ「シラバス」
最後はシラバスという完全無料・登録不要の学習サイトです。
プログラミングをするツールは自分でインストールしなければなりませんが、その手順も分かりやすく載せてくれています。
真似をしながら学習することをコンセプトとしています。
無料で会員登録などせず始められるので、最初の一歩としてハードルが低いのはありがたいですね。
比較表
| サービス名 | 費用 | 特徴 |
|---|---|---|
| Progate | 980円（税別）/月 一部無料あり |
学習と実践を繰り返すので 知識がつきやすい |
| paizaラーニング | 1,078円（税込）/1ヵ月プラン
4,488円（税込）/6ヵ月プラン 7,200円（税込）/12ヵ月プラン 一部無料あり |
スキルを身につけると コード採用を受けることができる |
| シラバス | 無料 | 登録不要で始められる |
※2019年11月26日現在の情報です
実際に自分でウェブサイトを作ってみよう
おすすめのテキストエディタ3選
小学生の頃、ホームページ作成に興味を持ったわたしはメモ帳ソフトでひたすらコードを書き続けていました。
そんな原始時代から早20年弱、今や会社ではDreamweaverをバッチバチに使いこなすほどにまで成長しました。
しかしAdobe製品を個人で購入するのはハードルが高いため、まずは無料のものから始めたい方も多いはず。
そんな方におすすめの無料で使えるテキストエディタ、その中でも、MacとWindowsどちらでもダウンロード可能なものをご紹介します。
Visual Studio Code
Visual Studio Codeは、2015年11月にMicrosoft社が正式に公開したテキストエディタです。
Dreamweaver同様、HTMLやCSSのコードは頭文字を入力するとそれに続くコードの選択肢を出してくれます。
ダウンロードの初期段階ではメニューなどが英語になっていますが、簡単に日本語の拡張言語パックをインストールすることができます。
Brackets
BracketsはAdobe社が無料で提供しているテキストエディタです。
Dreamweaver CC 2017以降、コードエディター部分にBracketsをベースにしたものが採用されています。
そのため、Dreamweaverで使えるような機能が満載です。
html編集中に該当のcssをその場で変更できるクイック編集機能や、テキストを複数選択し一度に修正できるマルチセレクト、そして修正した内容がすぐにブラウザに反映されるライブビューもワンクリックで行えるという高性能っぷりです。
初期状態で日本語対応となっているため、ダウンロードしてきたらすぐに使い始めることができます。
Sublime Text
Sublime Textは有料ソフトですが、ライセンスなしでダウンロードが可能で、ときおりポップアップで有料版のお知らせが出てきますが無料で使い続けることができます。
こちらも日本語化は可能ですが、少し手順が複雑です。
複数行を一度に編集できる機能やオプション次第でより自分好みに、より便利にカスタマイズできる部分などがエンジニアからも人気を集めるテキストエディタです。
質問はteratailで
ひとりでコーディングをしているとつまづくことが必ずあります。
インターネットに情報はごまんとありますが、最初の頃は自分の知りたいことの検索も上手にできないかもしれません。
そんなとき手助けしてくれるのがteratailというプログラミングに特化したQ&Aサイトです。
回答率が90%以上と高く過去のQ&Aも豊富なので、類似の質問を検索することで回答を得られることもあるでしょう。
技術を外に発信しよう
自分のコードを保存・公開できるGitHub
GitHubとはGitというバージョン管理の機能を使用した、コードを保存・公開できるサービスです。
スライダーやアコーディオンメニューなどウェブサイトのパーツでJavascriptを使ったコードなどは、一昔前はzipでアップロードされているものをダウンロードする場合がほとんどでした。
最近は開発者がGitHubにコードを公開しているため、そこでコードの中身を見たりバージョンアップの履歴を追うことができます。
GitHubは無料で利用することができるので、上で書いたような開発者だけでなく、自分の勉強用やよく使うコードの保管用に利用している人も多数います。
世界中に公開されることを恐れずに、あくまで自分用に使いながらついでに誰かに見てもらえるかもしれないという心持ちで始めるといいかもしれません。
ウェブブラウザ上で編集とプレビューができるCodePen
CodePenとは、ウェブブラウザ上でHTML、CSS、Javascriptのコーディングができリアルタイムでプレビューまでできるサービスです。
コードの共有・公開もでき、さらにはWordpressなどの記事にコードとプレビューが一体になった画面を埋め込むことができます。
もし技術ブログを持っていれば、ただコードを挿入するだけよりもその場で結果までを見せることができるCodePenを使うことをおすすめします。
情報を発信していくうちに、見た人からの反応があれば万々歳です。
間違いの指摘があれば直すことができますし、誰かの役に立てればこれほどうれしいことはありません。
ひとりでは気づけなかったことを見つけられることは、外に技術をお披露目することで得られる最大の利点です。
さらにステップアップするためには
ここまでプログラミング未経験者がフロントエンドエンジニアになるためのステップを書いてきました。
デザイナーにしろフロントエンドエンジニアにしろ、仕事がただの流れ作業になってしまってはせっかく身につけた技術も活かしきれません。
「言われたことをやる」だけでは、世界にあふれる便利なサービスたちに置き換えられていきます。
あなただからできる仕事を目指してよりステップアップするために、まだまだ学んでおきたいスキルや考え方がたくさんあります。
ぜひ参考にしてみてください。
すべてを一度に身につける必要はありません。
興味のあるものや、今かかわっている仕事に役に立ちそうなものから一歩ずつ進んでいきましょう。
UI・UXデザインの考え方を学ぶ
UIとは「User Interface（ユーザーインターフェース）」の略で、ユーザーと製品・サービスをつなぐ部分を指します。
ユーザーが製品・サービスを使う際の動作に問題や悩むことがないようにデザインをする考え方で、簡単に言うと「使いやすい」「見やすい」を形にします。
UXとは「User Experience（ユーザーエクスペリエンス）」の略で、ユーザーが製品・サービスを使うときの体験をより良いものにします。
UIはUXという大きい概念の中のひとつの考え方です。
ウェブデザインの場合は、情報が整理され見やすいレイアウトやクリックできると分かりやすいボタンなどがUIの考え方で、スクロールやカーソルの動きと連動したコンテンツの見せ方で情報の発信だけではない楽しさを提供することなどがUXの考え方と言えます。
ブランディングを身につける
ブランディングとは企業のマーケティング戦略のひとつで、企業とユーザーが製品・サービスや会社自体に対して抱くイメージを同じにしていくための活動です。
会社のホームページをつくる、サービスを考える、PRをするなどの際に、共通の意識を根底に置いて考えることでブランド力を高め、ユーザーにブランドとしての価値やメッセージを伝えることができます。
企画の段階から参加できるのであれば、ホームページのことだけではなく、その会社が目指す方向性を一緒に考えブランディングし、それを成果物に反映することができると素晴らしい仕事となるでしょう。
アプリ開発も視野に入れてみる
日常生活でも肌で感じるのは、いろいろなサービスがアプリに変わっていっていることです。
ウェブサービスも残したままアプリ版が出ているものも多いですが、10代の若者はアプリ版しか知らない・使っていないという話もよく聞きます。
今のうちに「Java」「Ruby」「Swift」などの言語に馴染んでおくことは、今後のウェブ業界を生き抜くうえで必ず役に立ちます。
さいごに
ウェブ業界について少しこわい未来も書きましたが、そんな将来に対して漠然と不安を持って過ごすよりは、今できることを始めてみるだけで気分も変わってくると思います。
いろいろと学ばなければならないことがあって逆に不安になりましたか？
大丈夫です。
そんな不安を乗り越えてここまで読んだあなたなら、きっと一歩を踏み出せることでしょう。
わたしもまだまだ知らないことや覚えたいことでいっぱいです。
一緒にステップアップしていきましょうね。
デザイナーだけではやっていけないのでしょうか？