【現役WEBデザイナーが解説】WEBデザイン学習の完全ロードマップ

私自身、現在はWEBデザイナーをしていますが、未経験で独学していた際そのように感じた経験が何度もありました。

そこで、今回はWEBデザインを具体的に学習する手順についてまとめました。この記事を読めば、どのサイトのどこのページを開いて学習していくかが明確にわかります。WEBデザイン学習の参考になれば幸いです。

WEBデザイン学習する前に

大前提として、WEBデザインを学習する目的を考えておきましょう。

なんでWEBデザインを学習するのか。なんでWEBデザイナーになりたいのか。WEBデザイナーになってどうありたいのか。そのあたりを考えないと、いざ学習しても継続できなかったり、就業しても思っていたのと違うくて辞めたりしてしまいます。

まず、自分なりにWEBデザインを学習する目的やWEBデザイナーになる理由を言語化しましょう。

もっと具体的にどうやって考えるか知りたいという方はWEBデザイナー転職5ステップという記事で紹介しているのでぜひ読んでもらえたら嬉しいです。

　

WEBデザイン学習の完全ロードマップ

まず、WEBデザインを学習するうえで、具体的な学習のロードマップ（全体像）について紹介します。

ざっくりWEBデザインの学習全体像は以下のようになります。

それぞれ解説していきます。

　

コーディングから学習する理由

まず、そもそもなぜコーディングから学習するのかについて解説します。

最初はコーディングから学習することがおすすめな理由としては、主に3つあります。

• 学習分野的に時間がかかりやすい
• グラフィックデザイン系のソフトの値段が高い
• コーディングは割とアレルギーの人いる

1つ目の理由は時間面。コーディングは覚えることが少ない一方で、考え方の部分で結構時間がかかりやすいです。どうやったらサイトが出来上がるのかとかの仕組みで頭を結構使うので、できたら早いうちに触れるのがおすすめ。

2つ目の理由としては、金銭面。グラフィックデザインで使用するソフトは月額課金のものがほとんどで、使っても使わなくてもお金がかかります。なので、ちょっとでも後回しにしてもいいかなと。

3つ目の理由が適正面。これはWebデザイナーとしてはいいのかわからないのですが、コーディングに対してアレルギー的なものを持つ人もいます。意味のわからない言葉が並んでいるのが無理！というならまだしも、黒い画面をみるだけで頭痛になる人もいました。

ある程度学習してもしんどいようなら、多分コーディング業務をしてもしんどいだけなので、ここで適正を見極めてグラフィックデザイナーになるのも一手です。

　

コーディングの基礎学習

コーディングの基礎での学習内容を具体的に紹介するとこんな感じ。

1. インターネットの仕組み理解
2. Progateで基礎の理解
3. HTML・CSSの概要理解
4. レイアウトを軽く作成する
5. Tech Academy無料体験で実践を増やす

私もこんな感じで学習しました。ここまですべて無料でできます。

　

インターネットの仕組み理解

まず、そもそもコーディングする理由から学びましょう。

なぜサイトが動くのか？なぜコードを書く必要があるのか？そのあたりについて覚える必要はないですが、理解しておきましょう。

マコなり社長のこちらの動画が一番わかりやすいです。

こちらの動画を見ながら、サイトがどういう仕組みで動いているのか理解しておくと、コーディングする際にも理解がはやくなります。

　

Progateで基礎の理解

次に、Progateで基礎的な内容をインプットしていきましょう。

スライド形式で基本的な知識面を解説されており、その後すぐにアウトプットとして軽くコードを書けるような構成になっています。

本来、コードを書くとなるとソフトをダウンロードしたり、環境構築したり面倒なんですが、Progateはそういった準備無しで学習ができておすすめ。

無料版で学習できるHTML/CSSの初級編でも十分基礎は抑えられます。

HTMLとCSSを軽く触っていきましょう。

　

環境の準備

ある程度基礎的なコーディングが理解できたら、環境構築をしましょう。WEBデザイナー・コーダーにとっての環境構築はさほど難しくありません。

ソフトをダウンロードすれば大体OKです。

こちらの動画で、ソフトのダウンロードから初心者向けのカスタマイズまで網羅されています。

動画を見つつ、環境を準備していきましょう。

　

HTML・CSSの概要を学ぶ

環境が整ったら、こちらの動画リストでHTML・CSSの概要を学びましょう。

HTML・CSSの復習にもなり、かつかなりなぜ？の部分まで深く解説されているため納得感が段違いです。

ざっと動画を見てきつつ、少しずつコードも書いてみましょう。

とはいえ、量がかなり多いので最初は何となく理解で大丈夫ですよ。

　

レイアウトを軽く作成してみる

軽くHTML・CSSがわかれば、サイトやワイヤーフレームを軽く作成してみましょう。

私はこちらの動画リストで学習していました。

動画で解説されているため、動画の通りに動かすだけでサイトをつくれます。

　

TechAcademy無料体験で実践を増やす

これらの学習と並行しつつ、1週間のTech Academy無料体験をやってみるのもおすすめ。

HTML・CSS・JavaScriptの基礎的な部分が学べて、かつ質問や相談もできます。私も実際ドットインストールやProgateの学習と並行して利用しましたが、とても無料とは思えない充実した内容でした。
HTML・CSSの復習に学習してきましょう。

このあたりを学習すれば大体コーディングの基礎は完了と言っていいでしょう。

おさらいすると、

1. インターネットの仕組み理解
2. Progateで基礎の理解
3. HTML・CSSの概要理解
4. レイアウトを軽く作成する
5. TechAcademy無料体験で実践を増やす

ということでした。

タグとか書き方とかは決して覚える必要はありません。
まずは理解すること。覚えてなくても調べたら大丈夫という状態を目指しましょう。

　

コーディングで模写サイトの作成

コーディングである程度慣れてきたら、サイトを模写コーディングしてみましょう。

模写とは言っても、やたら難しいサイトをつくろうとしても挫折するだけです。

個人的におすすめしたいのが、クリスタデザインというサイト。初心者向けのコーディング教材が無料で学べます。

まずは、初級編。「コーディング課題初級編」をやってみましょう。解説はこちらの「コーディング課題初級解説編」で紹介されています。解説をチラ見しながらでもコーディングしましょう。

それが終えれば、中級編。「コーディング課題中級編」です。正直、このレベルまでサイトのコーディングができたら基本大丈夫です。余裕のある方は上級編もあるので、やってみてもいいかなと。

　

模写コーディングのコツはとにかくコードの構造理解と実践。

まず、サイトのどこがどういう構造なのかを理解しましょう。このタグは何の意味で、どういう役割をしていて、どう見えているのか？

なぜ・どうやってをとにかく理解しながらコーディングしていくことが模写によるコーディングスキル上達のコツになります。

　

Adobeのソフトを契約する

コーディングがある程度勉強できたら、グラフィックデザインも学習していきましょう。

ただ、厄介なのがソフトの値段。デザイナーが一般的に使うAdobeコンプリートプラン（AdobeCC）の月額は6000円弱。年間にすると7万円以上します。

なので、おすすめは

• 使うソフトだけをセール時に契約
• スクール通って学割させる

という2パターン。
特に、Adobe認定スクールに通うとAdobeコンプリートプラン＋スクール講座で年間39980円に。3万円近く安く契約できて、かつオンライン授業も受けられるという。

認定スクールのため学割がきくということもあってこの値段で契約できるんですね。
デジタルハリウッドだと他のスクールと比べても安く契約できておすすめです。

　

Adobeチュートリアルで基本操作学習

グラフィックデザインの学習は基本的にAdobeチュートリアルでほぼ十分です。

カリキュラムは充実し過ぎるがゆえに迷いがちなので、おすすめのチュートリアルを紹介するとこんな感じ。

　

Photoshop

正直、ことはじめだけでも十分なボリュームがあります。ただ、バリエーションを増やすならチラシ作成やバナーの作成もしておくといいと思います。

• Photoshopことはじめ
• チラシ作成
• WEBバナー作成

他にも様々なチュートリアルがあるので、興味があるチュートリアルがあればどんどん学習していきましょう！

　

Illustrator

Illustratorに関しても、ほとんどことはじめで十分にボリューム満点です。余裕があれば名刺やアイコン、ロゴなどの作成も慣れておくとよりいいかなと。

• Illustratorことはじめ
• 名刺の作成
• アイコンの作成

　

やり方としては、

1. チュートリアルで学習
2. わからない点を調べる

の繰り返し。
これで結構操作自体は慣れるかなと思います。

　

グラフィックデザインのトレース練習

ツールの基本操作が理解できてくれば、実際に模写してみましょう。デザインの業界用語？でトレースといいます。

とはいえ、ネットで適当に拾った下手なバナーを模写しても変な癖がつくかもしれません。初心者のうちは、参考書などを活用してデザイン原則に乗っ取ったバナートレースをおすすめします。

おすすめの書籍は、ソシムのトレース&模写で学ぶ デザインのドリルです。

トレースするために必要なフォントの種類や配色が載っており、公式サイトではアイコンや写真のダウンロードもできます。

また、トレースするうえで、重要になってくる「どういう工夫をしたデザインか」を結構詳しく解説されており、ただ真似するだけにならない内容でした。

デザインしながらどうデザイナーが考えているかを学ぶにも打ってつけです。

　

グラフィックデザイン・コーディングそれぞれアレンジ

コーディングやグラフィックデザインの模写にも慣れてきたら、少しずつアレンジしていきましょう。

与える印象を変えるために、コンセプトカラーを変えてみたり。
自分で宣伝したいものを紹介するサイトやバナーにしてみたり。

今までは模倣・模写に偏りがちでしたが、徐々に自分なりにアレンジも加えていきましょう。

　

ポートフォリオの制作

徐々にデザインのアレンジも慣れてくれば、ポートフォリオを実際に一からつくっていきましょう。

手順としては、以下の通り。

1. デザインの目的設定
2. ユーザーの設定
3. コンセプト決定
4. ラフスケッチ
5. 制作・運用する

要するに、

• 入社したい企業や求人を分析して、
• 自分はどんなスキルがあるのか
• デザインの一連の流れを個人単位でやったこと
• 仮説を立てて検証し試行錯誤したこと
• これらが証明できるようなポートフォリオにする

これらを念頭に置いて作成していきましょう。
こういった流れで作成すると、ポートフォリオの説明の際もストーリー性があって説得力があります。

　

ポートフォリオをまとめる

ポートフォリオが作成できれば、提出用にポートフォリオサイトなどにポートフォリオをまとめましょう。

ポートフォリオサイトには、

• ポートフォリオ
• 作成した目的
• 制作時間
• リンク
• 成果

などをしっかり書きましょう。面接では、ポートフォリオそのものよりもポートフォリオを作成した意図やストーリーを聞かれることが多いです。

現場では、どんなデザインをつくったか以上になぜそのデザインにしたのか？を問われることが多いです。面接や現場で問い詰められる練習として、ポートフォリオサイトでしっかり言語化しておきましょう。

ここまで来たら、あとは志望したい企業に対して職務経歴書や面接の準備もしていきつつ、感覚が鈍らないよう学習を継続していきましょう！

　

最後に

ということで、WEBデザインの具体的な学習手順完全ロードマップでした。

まとめると以下の手順になります。

こちらの記事はいいなと思うサイトやサービスがあれば、どんどん紹介して随時更新していきます。

皆さんのWEBデザイン学習の参考になれば幸いです。