デザインも上達！WEBデザイン勉強法６ステップ
WEBデザイナーを目指す方や、若手デザイナーから「勉強法がわからない」と言うコメントをかなり聞きます。
そこで、会社の後輩を教育していた方法を思い出しながら、デザインとコーディングをどんな順番で勉強したら良いかを考えて見ました。
※WEBデザイナーを想定した内容ですが、グラフィックの方はコーディングを除外すれば内容はあまり変わりません。
以下、本編に入る前に２つの留意点を最初に説明します。
留意点１：勉強を進める３つのポイント
WEBデザインを勉強するときに、迷うのは以下の３つだと思います。
１．「コーディング」と「デザイン」をどんな順番で勉強するか？
２．学校ではコーディングメインで「デザイン自体を教わってない」
３．「模写」をするのが良いとよく聞くけど、どうやるの？
勉強法６ステップはこれが組み込まれた内容になっています。
割とよく聞くのが、デザインとコーディングを別々に勉強しているケースです。
全く別々に進めると上手く行かないので、これを連携して行きます。
また、「デザインの勉強」については、やらない学校も多いようです。そこで、いつどんな方法でデザインを勉強するかを紹介します。
３つ目の「模写」については、いつどんな方法でやるのがいいのか、迷っている人が多いので、オススメの順番で紹介します。
この記事の一番最後では、自分がトーレーニングで行っている「究極の模写」を紹介します。
留意点２：「基礎の勉強」より、「やる気が維持」できるステップ
デザインを勉強すると考えると、「基礎の勉強」を先に勧められる場合が多いと思います。確かに「基礎」は重要ですが、しかし最初から基礎だけやっていると「やる気の維持」が難しいし、実は基礎も身につきません。
・下手でも良いのでオリジナルのデザインをする
・完成度の高いものを真似してみる「模写」
そこで、やる気を維持しつつ、インプットとアウトプットを連動させるため、上記の２つの考え方を「WEBデザイン勉強法６ステップ」には組み込んでいます。
まず「下手でも良いのでオリジナルデザイン」を作りましょう。そして、自分の作ったデザインをベースにコーディングする、勉強と実践の連携が重要ですね。
そして、レベルの高いデザインをベースに「模写」の練習を重ねるのも効果的です。
本編：WEBデザイン勉強法の６ステップ
本編は６ステップになっています。ステップごとにどんな内容なのかを説明します。デザインとコーディングは別々に進みますが、それを上手く連動させるのもポイントです。そして、所々で「模写」を練習していきます。
ステップ１：デザインソフトの習得
目的：デザインソフトの操作ができるようになること
内容：イラストレーターやフォトショップなどのデザインソフトの習得
・イラストレーター：サイトのデザインやレイアウト、パーツのデザイン
・フォトショップ：サイトのデザインやレイアウト、写真の加工
どちらでもサイトのデザインはできるので、イラストレーターとフォトショップのどっちをを勉強すればいいかは、好みで決めて良いです。
このステップではどちらかの、ごく基本を習得しましょう。（ちなみに、結局両方やることはなります、）
イラストレーターだとペンツール（ベジェ曲線）に苦戦する人が多いと思いますが、このステップではできなくても問題ありません。
※XDやFigmaなどのUIデザインツールもまだ覚えなくても良いです
イラストレーターやフォトショップの練習教材
Adobeのソフトについては、様々な書籍が出てきますが。最近は公式チュートリアルがお勧めです。有料級の動画で、入門から中級までの勉強が出来ます。
illustrator チュートリアル
https://helpx.adobe.com/jp/illustrator/tutorials.html
Photoshopチュートリアル
https://helpx.adobe.com/jp/photoshop/tutorials.html
ステップ２：デザインの模写とコーディングの基礎
このステップでは、デザインソフトの応用編としてデザインの模写を行います。また、コーディングも基礎レベルを勉強します。
■ Design２：デザインの模写 ■
目的：デザインソフトの操作に慣れること
内容：バナーやWEBサイトの模写
イラストレーターかフォトショップの基本が習得できたら、操作に慣れるために、デザインの「模写」を行いましょう。
いきなりWEBサイトを「模写」するのはハードルが高いので、バナーぐらいから始めるのがおすすめです。良いと思うバナーをテーマに、そっくり再現する模写を行います。
ここで、ステップ１では飛ばしたベジェ曲線などの難し目の操作も習得しましょう。デザインソフトの扱いに慣れてきたら、シンプルなWEBサイトの「模写」を行います。
■ Coding２：コーディングの基礎 ■
目的：コーディングの基礎を勉強しサイトが作れるようになる
内容：HTMLとCSSの基礎
ここでは、コーディングの基礎を勉強します。勉強するのはHTMLとCSSのごく基礎で大丈夫です。最初からjQueryとかSassとかWordpressとか、難しい事はしなくて良いです。（必要な時に覚えましょう）
最近では、「ドットインストール」や「Progate」のようなWEBサービスがあるので、基本的なサイトが作れるまでは、以下の勉強方法をお勧めしています。
注意点としてはコーディングの勉強にハマりすぎて、これだけに時間を費やさない事です。デザイナーのコアは「デザイン」なので、実現するための手段として「コーディング」が必要だと考えた方が良いと思います。
（専門家であるマークアップエンジニアを目指す場合は、また別になります）
コーディング基礎の勉強方法
１．ProgateのHTML/CSS中級まで（一部有料）
https://prog-8.com/courses/html
※中級に加えて、「HTML & CSS Flexbox編」もやった方が良いです。
２．ドットインストールの「WEBサイトを作れるようになろう」（無料）
https://dotinstall.com/lessons
３．Codestep 初級〜中級のコーディング練習素材がある（無料）
https://code-step.com/portfolio1-menu/
※Progateとドットインストールは重なる内容が多いです。ただ、全く初めての人はProgateから始めて、ドットインストールで復習を兼ねて勉強を進めるのがおすすめです。
ステップ３：オリジナルサイトをデザインしてコーディングしてみる
ステップ２までて、デザインとコーディングの基礎はできたと思います。そこで、このステップでは、オリジナルのバナーを作るのと、サイトをデザインしてコーディングしてみましょう。
最初に書いておきますが、デザインもコーディイングも上手くできないと思います。その経験を糧にして、次のステップ４ではデザイン自体を勉強します。
■ Design３：オリジナルサイトのデザイン ■
目的：オリジナルバナーやサイトをデザインする
内容：バナーやサイトデザインをゼロから行うプロセスを学ぶ
ここでは、バナーやオリジナルサイトのデザインを行います。デザインソフトで画像を作るのがゴールですが。
サイトを作る場合は、デザイン会社で行っている制作プロセスに倣って以下の進め方で作りましょう。
１：どんなサイトにするか企画コンセプトを考える（目的やターゲットの設定）
２：サイトの構成案をワイヤーフレームで考える
３：ワイヤーからデザイン案を手書きのサムネールに起こす
４：デザインソフトでデザインを画像データにする
追記
特に、デザインをいきなりデジタルデータにしないで、ラフスケッチにするのは重要なプロセスです。
ワイヤーはあくまで構成なので、デザイン会社では、デザイン案を検討するためにデザイン案をそこそこ書き込んだラフスケッチに書き起こします。
その段階でデザインの方向性をディレクターなどの上位者が承認して、データを作っていい状態になりますよ。
■ Coding３：オリジナルサイトをコーディング ■
目的：コーディングを基礎から応用への発展
内容：基礎だけだと出来ない部分を調べながらコーディングする
オリジナルサイトだとやりたいことが増えてきます。この段階で、基礎だけだと足りなくなります。
コーディングの応用方は大体調べれば出てくるので、ここで調査しながらコーディングするノウハウを積みましょう。ちなみに、あまり動的な仕組みを入れると、コーディングで止まってしますので、ここではHTMLとCSSだけで作れるシンプルなものが良いと思います。
ステップ４：デザインとコーディングの勉強
ここからは、デザインの勉強に入ります。前のステップでオリジナルデザインのサイトを作ると「デザインが全然出来ない」と思う人が多いと思います。
それは、デザインソフトが使えることと、デザインができる事は全然別だからです。日本語はみんな書けるけど、小説を書くのは難しいことと同じですね。
また、前のステップでコーディングもレベルアップの必要があるのが分かると思います。レスポンシブやCSSのより深い機能を使っていきましょう。
■ Design４：デザインを勉強する ■
目的：デザインの技法を勉強します
内容：サイトデザインをゼロから行うプロセスを学ぶ
デザインには、様々な定石があり誰でも学ぶことができます。特に「レイアウト」と「配色」については定石を学ぶことで、かなり上達します。
それぞれが勉強しやすい参考書籍を紹介します。
また、身近な広告でデザインの技法を紹介する「広告で学ぶ！デザインの基本原則」を書いたnoteも参考になるので貼っておきます。
デザイン勉強の参考図書
＜レイアウトの概念を理解＞レイアウト・デザインの教科書
＜レイアウトの練習＞
＜配色の概念を理解＞配色デザイン良質見本帳
＜日々のデザイントレーニング方法＞
■ Coding４：コーディングの応用編を勉強する ■
目的：コーディングの応用編
内容：HTMLやCSSの応用やレスポンシブ
今まで勉強していたHTMLやCSSの基本的な使い方で、解決できなかった部分の学習を始めるステップです。スマホ版では必要になるレスポンシブデザインもこの辺で行いましょう。（レスポンシブ のためにBootstrapのようなフレームワークは、まだ覚えなくて良いです。基本のメディアクエリで行きましょう。）
また、CSSセレクタ を使った開閉式のハンバーガーメニューなど、ある程度動的なコーディングを学習サイトで学びましょう。コーディング好きな方はこの辺でjQueryを使っても良いと思います。
ステップ５：再びオリジナルデザインに挑戦
ここでは、ステップ３に続いて再びオリジナルデザイン＆コーディングにチャレンジします。デザインとコーディングの勉強の成果が試される部分です。
■ Design５：オリジナルデザイン2回目 ■
目的：オリジナルデザインでサイトを作る＋スマホ版
内容：デザインの勉強の成果を試す
オリジナルデザインのサイトを作りましょう。デザインを考えるプロセスは、ステップ３と同様です。
１：どんなサイトにするか企画コンセプトを考える（目的やターゲットの設定）
２：サイトの構成案をワイヤーフレームで考える
３：ワイヤーからデザイン案を手書きのサムネールに起こす
４：デザインソフトでデザインを画像データにする
特にデザイン案をサムネール（手書き）で書くのが結構重要です。デザイン会社では社内コンセンサスを得たり、提案を説明するのに使います。
また、サムネールはスマホ版も作りましょう。
■ Coding５：オリジナルデザインをコーディングする2回目 ■
目的：オリジナルデザインのコーディング＋スマホ版
内容：HTMLやCSSが実用レベルで使えるようにする
オリジナルデザインをコーディングしようとすると、コーディングもかなりレベルアップが必要です。
スマホ版を作るレスポンシブのコーディングも行いましょう。
ステップ６：究極の模写と、コーディングの模写
■ Design６：究極の模写 ■
目的：デザインのレイアウトと文字組の技術を高める
内容：良いデザインを題材にオリジナル素材で模写する
定石を学んでも、実際にデザインが出来るようになるのは、かなりのトレーニングが必要です。「わかる」と「できる」の距離はかなり長いですね。
特に、みんな苦手なのが、レイアウトと文字組です。
デザイン会社の後輩にトレーニングを兼ねて行っていたのが「究極の模写」です。
レイアウトや文字組が優れているデザインを下敷きに、要素や文字などを入れ替えて、デザインの練習をします。
１．最初はほぼそのまま模写する
２．慣れてきたら写真やコピーなどの要素を入れ替える
３．出来たものをディレクターにレビューしてもらう
良いデザイン模写することで、プロのレイアウトと文字組を身につけるコトができます。しかも、写真や文字などの要素を入れ替えるので、微調整はかなり学ぶことができます。
これを1年ぐらい続けると、かなりのレベルアップになりますね。
トレーニングの具体例として、noteのマガジン「新人WEBデザイナー成長日記」を紹介します。
実在する新人WEBデザイナーが、模写を通してデザインを上達させる連載記事です。
■ Coding６：世の中のサイトを色々模写してみる ■
目的：コーディングのレベルアップ
内容：世の中の色々なサイトをコードで模写してみる
コーディングのレベルを上げるために、世の中の色々なサイトを模写します。
ただ、この段階は、コーディングのレベルを上げたい人向けです。デザイン会社だとそこまで必要ないと思います。
最後に：未経験から就職に向けて
ここで紹介した６ステップの勉強法ですが、デザイン会社2年〜3年目ぐらいの若手の到達レベルがゴールです。なので、数週間とかで簡単にできるものではなかったります。
特に、デザインは一人ではなかなか上達が難しく、ステップ６で紹介した「究極の模写」は、上位者からのフィードバックが不可欠です。（そこをカバーするため、マガジンではフィードバックを細かく書いています）
未経験でWEBデザイナーを目指している人からみると、かなり遠い道に見えてしまうかもしれないです。
でも、ステップ５ぐらいまで行うと、就職できるレベルになると思いますよ。（この時点でかなりポートフォリオも賑わっているはずです。）
自分が今どのステップにいるかも意識して読むと、より活用できると思います。
また、デザインがなかなか上手くならないと悩んでいる人も多いと思いますが
正直未経験者のポートフォリオは、クオリティはそんなにみていません。
参考図書に載っている定石が押さえてあれば十二分です。
それよりは、作ることへのモチベーションや、ターゲットや課題解決が考えられて作っているかが重要です。
まずは、作る事自体を楽しめるように、どんどんオリジナルで作っていくのがおすすめですよ。
最後に、未経験の方の仕事の探し方「【成功者から聞いた】未経験デザイナーの仕事の探し方」のnoteも紹介しておきます。