今人気の職種となっているWebデザイナーですが、独学で転身された方も多くいらっしゃいますよね。
独学でWebデザイナーになるのはもちろん可能ですが、勉強方法を間違えると、私のように数年の時間を費やしてしまったり、挫折したり残念な結果となることも多いです。
私が実際に行った勉強方法と挫折についてはこちらに詳しく書いているので、よかったら見てみてください。
今回は、何度も挫折を繰り返し、遠回りながらも独学でWebデザイナーになった私が思う、本当に必要な勉強することリストを解説します。
【結論】初学者が勉強するべきことリスト
Webデザイナーを目指す完全初心者が勉強するべきことをリストアップしました。
- HTML・CSS
- JavaScript（jQuery）
- WordPress
- Photoshop・Illustrator・XD
- ドメイン・サーバー
- デザインの基礎
上記がコーディングも含むWebデザイナーになるために必要な勉強内容です。
Webデザイナーにも様々な種類がありますが、今回はコーディングも含めた業務内容を想定しています。
HTML・CSSはとにかく書いて覚えるのが大事
HTML・CSSはwebサイトを構築していく上でなくてはならないマークアップ言語です。
コーディングをしないデザイナーでも、ある程度の知識を身につけておくことによって、コーダーとの連携もスムーズにいきます。
必須ではないかもしれませんが、HTMLとCSSのスキルがあるのとないのでは仕事の量も、単価もだいぶ変わってきますので、身につけておいて損はないと思います。個人的には必須と言いたい。
初心者はProgateで書いて覚える！
おすすめの勉強方法はProgateです。
Progateは比較的どのまとめサイトを見ても名前が上がっているくらい有名なプログラミング学習サイトです。
無料で学習することもできますし、月額会員になっても1000円ほどで学べるので、プログラミング学習サイトの中でも安価な部類に入ります。
環境構築も必要なく、実際にコードを書いて身につけることができるのでとても効率的です。
Progateで一通りHTMLとCSSを学べば基礎は大丈夫でしょう。
中級者は自分の好きなデザインを模写しまくる！
基礎を一通り学べたら、自分の好きなデザインを模写で再現していきましょう。
Progateで学ばなかったタグや書き方も、身についてきます。
好きなデザインを模写するので、モチベーションも維持できて、完成した時の達成感も得られます。
とにかく回数をこなしてHTMLとCSSと仲良くなりましょう。
JavaScriptはjQueryがある程度使えればOK
JavaScriptは、Webサイトに動きをつけるために必要なプログラミング言語です。
jQueryとは、JavaScriptが簡単にまとまったパックのようなものです。（チンしてできる冷凍食品のようなもの）
私の話ですが、JavaScriptをいちから学ぼうとして挫折した経験があります。
Webデザイナーになるには、ひとまずJavascriptはjQueryのみの勉強で大丈夫です。
調べながら実装して、できるようになればとりあえずクリアでいいと思います。
私が学習した本はこちらです↓
jQueryで実装できる動きのレシピ集です。実務でも使える再現性の高いおすすめの本です。
WordPressは挫折しやすいので動画学習がおすすめ！
いよいよwebサイトを構築できるようになってきて、ここまででも十分仕事をとることができますが実際の案件のほとんどはWordPressが絡んでくると言っても過言ではありません。
実際私もWebデザイナーとしてお仕事を開始して感じたのですが、いちからコードを書いてサイトを作る案件より、WordPressのテーマをカスタマイズする案件の方が多かったです。
クライアントとしても後々手を加えやすいですし、ブログ機能もあり更新がしやすいのでweb業界ではとても重宝されているツールです。
WordPressの学習は大きく分けて二つです。
- オリジナルテーマの作成
- 既存テーマのカスタマイズ
特に躓きやすいのがオリジナルテーマ作成です。
ここまでのフローで、ある程度自分でwebサイトを作れるようになったかと思いますが、今度はそれをWordPressに組み込んでいく作業が発生します。
いわゆる静的サイトから動的サイトへの移行というものです。
そのためにはPHPというプログラム言語をある程度覚える必要があります。WordPressに関連するPHPだけで大丈夫なのですが、これが個人的にかなり難しかったです！
本を読んだりサイトを見て学んだり様々なことをしましたが何度も挫折しました。
最終的に私が一番わかりやすかったと感じたのが、UdemyのたにぐちまことさんのWordPress講座です。動画で学ぶのが一番手っ取り早く、理解もしやすいです。
基本的なところはUdemyで学び、復習・追加の知識としてYouTuberのアキユキさんの動画を見て学びました。
ポートフォリオも兼ねてサーバーにアップロードしてみる
ここまで勉強したら、作成したサイトをサーバーにアップロードしてみましょう。
私は上記のUdemyの講座でここまで一気に学んでしまいました。
サーバー、ドメインの取得は実務でもクライアントに教えることがあるので、練習がてらアップロードもマスターしましょう。
この時、模写サイトを無断でアップロードするのはやめましょう！トラブルになる可能性があります。
Adobeデザインソフトはどれを学べばいいの？
Webデザイナーになるために必要不可欠な主なデザインソフトとして名前が上がるのが以下の3つです。
- Photoshop
- Illustrator
- XD
どれを学べばいいのか迷いますよね。
個人的には最低限のPhotoshopの知識と、深掘りしたXDの知識を学ぶのがいいのではないかと思います。
画像編集にはPhotoshopを使用しますが、Photoshopの機能は全て学ぶと途方もない時間と労力がかかってしまうため、画像のリサイズや文字入れ、グラデーション、マスクなどの必要最低限の知識があればいいと思います。
Webサイトのデザインカンプを作成するなら私はXDが一番効率的だと考えているため、XDに関してはある程度しっかり学んでいくのがおすすめです。
ただ、XDは機能も少なくシンプルなので、触っていくうちに自然と覚えれるレベルです。
XDでデザインカンプを作成、画像の編集が発生したときにPhotoshopに移って制作、というのが一番いい流れだと思います。
デザインの引き出しはたくさん持っておきたい
最後にデザインの勉強について触れておきます。
私はwebクリエイター能力検定試験のエキスパートを受験し、保有しています。その受験勉強の際に、Webサイトデザインについての基礎知識を学びました。
ですが、正直デザインはたくさん見て時間をかけて引き出しを増やしていく以外近道はないと思っています。
たくさんのサイトを見たり、デザイン本を読んだり、好きなデザインを実際に作ってみたり、この勉強に関しては終わりがないものです。
私が実際に読んだデザイン本を載せておきますので参考にされてください。
[kattene] { “image”: “https://images-na.ssl-images-amazon.com/images/I/41k6HyeHPPL._SX351_BO1,204,203,200_.jpg”, “title”: “なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉”, “description”: “筒井 美希 (著)”, “sites”: [ { “color”: “orange”, “url”: “https://amzn.to/39DcdYR”, “label”: “Amazon”, “main”: “true” }, { “color”: “red”, “url”: “https://a.r10.to/haU9bN”, “label”: “楽天” } ] } [/kattene] [kattene] { “image”: “https://images-na.ssl-images-amazon.com/images/I/514iV1akJwL._SX352_BO1,204,203,200_.jpg”, “title”: “Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集”, “description”: “久保田 涼子 (著)”, “sites”: [ { “color”: “orange”, “url”: “https://amzn.to/3FneQKk”, “label”: “Amazon”, “main”: “true” }, { “color”: “red”, “url”: “https://a.r10.to/haJ4PS”, “label”: “楽天” } ] } [/kattene]効率良い勉強でWebデザイナーに
以上、実際に回り道をした私から見た最短ルートの勉強手順をご説明いたしました。
最後のデザインの項目でも書きましたが、この業界の勉強に終わりはありません。
だからこそ勉強勉強と詰めすぎると、ある程度できている自分に気づかず、いつまでも次のステップに進めない現象にぶち当たります。
勉強はそこそこにどんどん次のステップへ進んでいきましょう。
私もとにかく勉強勉強と詰めていましたが、今振り返ってみても、実案件を通して学ぶことの方が多かったです。
今回ご説明したリスト通りに進めれば、半年ほどでなんとなくスタートラインに立てるかと思います。
この記事があなたの一歩踏み出すきっかけになれれば嬉しいです。
