Web制作会社でWebディレクターとして働いているaoと申します。
Web業界に転職して7年くらいが経ちました。
これまでの経験を踏まえて、効率的な勉強方法や習得すべきスキルについてご紹介いたします。
Webディレクター、Webデザイナーやコーダーを目指している人の参考になれば幸いです。
なお、未経験からWeb業界へ転職した際の経験談はこちらの記事にまとめています。興味がある方はご覧ください。
Web業界に入るために始めること
業界研究をする
Web業界に入る際、企画系の仕事がしたいのか、マーケティング系の仕事がしたいのか、制作系の仕事がしたいのかで進むべき方向性は異なってきます。さらに、制作系の仕事にも様々な職種が存在します。
Web業界にどのような職種があるのかご存知ない方は、別記事で職種をまとめておりますのでご覧ください。
次に、Web業界についての理解を深め、自分自身がどのような方向性に進んでいきたいのか整理することで、学ぶことが明確になっていきます。
Web業界の情報収集の方法は以下にまとめておりますのでご覧ください。
Web制作の勉強をする
どの職種につくにしても、そもそもWebサイトがどのように制作されているのかを事前に勉強しておくことが重要です。
企画やマーケティング、営業などの職種は制作する事がありませんが、仕組みを理解しない状態では仕事の精度・効率が下がります。
例えば企画するWebコンテンツが実現可能な仕様なのか否かの判断や、実現するための工数・スケジュールを想像することができません。
また、マーケティングでWebサイトの分析・改善箇所の洗い出しをする場合、Webサイトの仕様を把握して実現可能な改善内容を判断する必要があるため、仕組みを理解することで業務の精度が高まります。
勉強開始にあたって準備したいもの
・PC
・Photoshop
・Illustrator
・Adobe XD
・テキストエディタ
・ブラウザ
・教材
PC
PCは頻繁に買い換えることがないため、転職を前提に勉強を始めるのであれば初期投資として良いものを購入していても良いと思います。
制作会社ではMacを利用している会社が多いですが、デザインやコーディングを行う場合はMac book Proであれば安心です。
ディスプレイサイズは好みですが、作業効率を考えれば大きければ大きい方が良いと思います。
なお、自宅で作業をする場合は絶対にデュアルディスプレイがオススメです。
ユタ大学の調査によって、 ワーカーは、 シングルスクリーンか らデュアルモニタ構成に移行した結果、 テキスト作業において 44 % 生産性を向上し、 スプレッドシート作業において 29 % 生 産性を向上したことがわかりました。
ジョージア工科大学の調査によると（図 1 参照）、参加者は、デュ アルモニタ構成を使用した結果、与えられた作業を約 2 分半も早 く完了できたことがわかりました。2 分は短いように感じられ るかもしれませんが、作業と従業員の数に比例して、 すぐに十分 な量になります。1 時間に 5 分節約できるだけでも、従業員 1 人 が 1 日あたり 40 分を別の作業に費やすことができます。
https://www.dell.com/downloads/jp/support/pdf/WhitePaper%20Dell%20Dual-Monitors%20JA_HR.pdf
私も自宅作業環境を整備するにあたりデュアルディスプレイに変更をしました。実際に購入したディスプレイは以下です。
作業環境整備の様子は以下の記事にまとめています。
Photoshop、Illustrator
Webデザインを制作する場合、多くの現場ではPhotoshopとIllustratorを使用しています。
主にPhotoshopはWebサイトデザイン、画像加工に使用。
Illustratorはアイコン画像やイラスト作成に使用する人が多いですが、IllustratorでWebサイトデザインをする人たちもいるため、実際に使用しながら作業効率などから個人で判断して極めていけばいいと思います。
Adobe XD
Webディレクター、Webデザイナーを目指すのであればAdobe XDの学習を推奨します。
デザインを制作するための前段階として画面構成案（ワイヤーフレームとも呼びます）というWebサイトの設計図を作成する際に、Adobe XDを使用する会社が増えています。
以前はPowerPointを使用することが多かったのですが、Adobe XDでは複数の画面構成案をつなげることでモックアップ（プロトタイプとも呼びます）を作成することができ、実際のWebサイトのように操作感を確かめることができるのです。
さらに、Google Chromeなどのブラウザを使用して他の人に作成した画面構成案を共有することができます。クライアントや他のプロジェクトメンバーも設計の段階から操作感をイメージできることで、早い段階からブラッシュアップが可能になるため、制作効率が向上します。
また、Adobe XDではデザイン作成も可能です。凝った装飾などはPhotoshopやIllustratorに劣るものの、PhotoshopやIllustratorで作成したデザインをAdobe XDに読み込むことが可能です。
「わざわざ読み込むなら初めからPhotoshopやIllustratorで作成すれば良いのでは？」と思うかもしれませんが、デザインの段階でもモックアップを用意することで具体的なイメージを持ってチェックが可能になるため、Adobe XDでの作成を行う会社が多いという事実があります。
Web制作の進行において、設計やデザインの段階で気付けなかったことがコーディングを経てブラウザ上で確認している段階で気付いたがために、修正に多大な工数が発生してしまった、ということはよく聞く話です。
モックアップの導入により、この事象を未然に防ぐことがプロジェクト全体をスムーズに進める上で重要なのです。
テキストエディタ
デザイン作成をした後は、実際にWebサイトとして組み上げていくためにコーディングを行う必要があります。コーディングとは、HTML・CSSといったファイルをテキストエディタと呼ばれるツールを使用して作成していくことです。
テキスト・エディタには無料で利用できるSublime Textや、Visual Studio Code（VScode）といったものがあるため、ダウンロードしてみてください。
・Sublime Text
・Visual Studio Code
上記のテキストエディタは、AdobeのDreamweaverよりもサクサク動く印象があり、入力補完が優秀、ショートカットが便利など機能的にも充実しているため、制作現場でも利用している人が多いです。
ブラウザ
Webサイトを閲覧するために必要なものがブラウザです。
一昔前ならみんなが当たり前のようにIEを利用していましたが、最近はシェア率も随分と変わりましたね。
制作現場において最も活用されているブラウザはGoogle Chromeだと思います。
Google Chromeにはデベロッパーツールという機能があり、Webサイト制作を効率的に行うことができます。（Google Chrome以外のブラウザにも開発者向けツールは存在しますが、一番使い勝手がいいです。）
また、拡張機能が豊富に存在することも制作現場で活用されている要因だと思います。
一点注意いただきたいですが、Webサイトを制作の現場ではGoogle Chromeで確認して表示が崩れていなければOKということはありません。
様々なブラウザからWebサイトにアクセスされるため、主要なブラウザで一通り検証して表示崩れがあれば修正する必要があります。
主要ブラウザの一例を以下にご紹介しますので、頭の隅に置いていていただければ幸いです。
Windows：Google Chrome、edge、Firefox
Mac：Google Chrome、Safari
iOS：最新から３世代
Android：最新から３世代
教材
Web制作の勉強をする上で、必要となる知識は以下のような内容です。
・デザインの基礎
・デザインソフト（Photoshop・Illustrator・Adobe XD）の操作
・HTML・CSS
書籍を購入して学習することももちろん良いと思います。
ただし、正直私は本を読むことが苦手です。眠くなります。
しかもお金があまりない時、書籍の金額は結構ツライものがあります。
Web記事や、Youtubeなどの動画でノウハウを公開してくださっている方が多いため、それらを参考にするだけでも、初歩的な知識はある程度学習することが可能ですので、ぜひ活用してみてください。
書籍を購入するくらいの余裕はあるよ！という方は、とりあえずこれを読んでおけば間違いないかな、という書籍をいくつかピックアップしましたので参考までにご覧ください。
・デザイン関連書籍
・コーディング関連書籍
Web制作の勉強はどこまでやればいいの？
初歩的な知識を学習した後は、簡単なWebサイトを制作して公開するまで一連の流れをやってみることを推奨します。
・シンプルなデザインのWebサイトを探す
・模倣してデザインする
・模倣してコーディングする
・レンタルサーバを契約する
・コーディングしたデータをサーバにアップ（公開）する
この一連の流れをしたことがあるか否かで、知識量が大幅に変わります。
参考にするWebサイトは本当に簡単そうなシンプルなデザインのもので大丈夫です。
さらに言えば、調べていくとレスポンシブデザインやjQueryなど色々なこと知ると思いますが、初めてであれば無視していいと思います。まずは、PCのみの簡単なページだけで十分。
あくまでも目的はWebサイトがどのように制作されているのかを事前に勉強することです。
オシャレなWebサイトを制作するためのスキルは、制作側の職種に進みたいのであれば自主的に勉強すれば良いと思いますが、その他の職種の方は一連の流れを理解するだけで十分です。
ちなみに、「デザイナーになるつもりだからコーディングは勉強しなくていいや」と思わないでください。現場ではWebデザイナーも大半はコーディングをします。
というか、コーディングができないデザイナーは給料が上がりにくいです。
レンタルサーバを契約し、公開してみる
デザイン・コーディングをしたら、レンタルサーバーを借りてWEBサイトを公開してみましょう。
サーバへコーディングしたファイルを格納することで、インターネットを通じて全世界に公開することができるます。
サーバへコーディングファイルをアップしたり、サーバへアップしたファイルを削除するためには、SFTPクライアントというツールが必要になります。
私はWinSCPというツールを使用しています。無料でダウンロード可能なのでインストールしてみてください。
また、サーバにも様々な種類がありますが複雑な初期設定などが不要な以下がおすすめです。
ロリポップ！マネージドクラウド
ConoHa WING
なお、サーバにファイルをアップすることでブラウザから閲覧は可能ですが、URLにはIPアドレスが表示されます。
IPアドレスとはインターネットアドレスとも呼ばれる住所のようなものです。172.16.254.0のように数字で表記されます。
Webサイトを閲覧している時、URLバーにIPアドレスが表示されているWebサイトをみたことがある人はいないと思います。
それは、各サイトで独自ドメインを取得し、自分のWebサイトに取得したドメインが表示されるよう設定しているからです。
全体の流れを理解する上で、ぜひ独自ドメインを取得し、公開したWEBサイトに設定してみてください。ドメイン契約が可能なサービスは複数ありますが、以下がおすすめです。
お名前.com
まとめ
Web業界は今後も採用を活発に行う業界だと思いますし、実際に身を置いている私も需要に対して供給が追いついていないと感じています。
ただし、いくら需要が多い業界といえど、未経験で熱意だけ持っている人はあまり採用したくありません。育成するコストもただじゃありませんからね。。
事前に学習してきている人の方が、面接で熱く語るよりもよっぽど熱量を感じますし、採用したいです。
この記事が動き出すきっかけになれば幸いです。
