見出し画像

デザインも上達!WEBデザイン勉強法6ステップ

WEBデザイナーを目指す方や、若手デザイナーから「勉強法がわからない」と言うコメントをかなり聞きます。
そこで、会社の後輩を教育していた方法を思い出しながら、デザインとコーディングをどんな順番で勉強したら良いかを考えて見ました。

※WEBデザイナーを想定した内容ですが、グラフィックの方はコーディングを除外すれば内容はあまり変わりません。

以下、本編に入る前に2つの留意点を最初に説明します。

留意点1:勉強を進める3つのポイント

WEBデザインを勉強するときに、迷うのは以下の3つだと思います。

 1.「コーディング」と「デザイン」をどんな順番で勉強するか?
 2.学校ではコーディングメインでデザイン自体を教わってない
 3.「模写」をするのが良いとよく聞くけど、どうやるの?

勉強法6ステップはこれが組み込まれた内容になっています。

割とよく聞くのが、デザインとコーディングを別々に勉強しているケースです。
全く別々に進めると上手く行かないので、これを上手く絡めていきます。
また、「デザインの勉強」については、やらない学校も多いようです。そこで、いつどんな方法でデザインを勉強するかを紹介します。

3つ目の「模写」については、いつどんな方法でやるのがいいのか、迷っている人が多いので、オススメの順番で紹介します。
この記事の一番最後では、自分がトーレーニングで行っている「究極の模写」を紹介します。

留意点2:「基礎の勉強」より、「やる気が維持」できるステップ

デザインを勉強すると考えると、「基礎の勉強」を先に勧められる場合が多いと思います。確かに「基礎」は重要ですが、しかし最初から基礎だけやっていると「やる気の維持」が難しいし、実は基礎も身につきません。

 ・下手でも良いのでオリジナルのデザインをする
 ・完成度の高いものを真似してみる「模写」


そこで、やる気を維持しつつ、インプットとアウトプットを連動させるため、上記の2つの考え方を「WEBデザイン勉強法6ステップ」には組み込んでいます。

まず「下手でも良いのでオリジナルデザイン」を作りましょう。そして、自分の作ったデザインをベースにコーディングする、勉強と実践の連携が重要ですね。

そして、レベルの高いデザインをベースに練習を重ねるのも効果的です。

本編:WEBデザイン勉強法の6ステップ

本編は6ステップになっています。ステップごとにどんな内容なのかを説明します。デザインとコーディングは別々に進みますが、それを上手く連動させるのもポイントですよ。

画像2

ステップ1:デザインソフトの習得

目的:デザインソフトの操作ができるようになること
内容:イラストレーターやフォトショップなどのデザインソフトの習得


・イラストレーター:サイトのデザインやレイアウト、パーツのデザイン
・フォトショップ:サイトのデザインやレイアウト、写真の加工

どちらでもサイトのデザインはできるので、イラストレーターとフォトショップのどっちをを勉強すればいいかは、好みで決めて良いです。
このステップではどちらかの、ごく基本を習得しましょう。(ちなみに、結局両方やることはなります、)
イラストレーターだとペンツール(ベジェ曲線)に苦戦する人が多いと思いますが、このステップではできなくても問題ありません。

※XDやFigmaなどのUIデザインツールもまだ覚えなくても良いです

ステップ2:デザインの模写とコーディングの基礎

このステップでは、デザインソフトの応用編としてデザインの模写を行います。また、コーディングも基礎レベルを勉強します。

■ Design2:デザインの模写 ■
目的:デザインソフトの操作に慣れること
内容:バナーやWEBサイトの模写

イラストレーターかフォトショップの基本が習得できたら、操作に慣れるために、デザインの「模写」を行いましょう。
いきなりWEBサイトを「模写」するのはハードルが高いので、バナーぐらいから始めるのがおすすめです。良いと思うバナーをテーマに、そっくり再現する模写を行います。
ここで、ステップ1では飛ばしたベジェ曲線などの難し目の操作も習得しましょう。デザインソフトの扱いに慣れてきたら、シンプルなWEBサイトの「模写」を行います。
■ Coding2:コーディングの基礎 ■
目的:コーディングの基礎を勉強しサイトが作れるようになる
内容:HTMLとCSSの基礎

ここでは、コーディングの基礎を勉強します。勉強するのはHTMLとCSSのごく基礎で大丈夫です。最初からjQueryとかSassとかWordpressとか、難しい事はしなくて良いです。(必要な時に覚えましょう)
最近では、「ドットインストール」や「Progate」のようなWEBサービスがあるので、それの入門編ぐらいで十分だと思います。
注意点としてはコーディングの勉強にハマりすぎて、これだけに時間を費やさない事です。デザイナーのコアは「デザイン」なので、実現するための手段として「コーディング」が必要だと考えた方が良いと思います。
(専門家であるマークアップエンジニアを目指す場合は、また別になります)


ステップ3:オリジナルサイトをデザインしてコーディングしてみる

ステップ2までて、デザインとコーディングの基礎はできたと思います。そこで、このステップでは、オリジナルのバナーを作るのと、サイトをデザインしてコーディングしてみましょう。

最初に書いておきますが、デザインもコーディイングも上手くできないと思います。その経験を糧にして、次のステップ4ではデザイン自体を勉強します。

■ Design3:オリジナルサイトのデザイン ■

目的:オリジナルバナーやサイトをデザインする
内容:バナーやサイトデザインをゼロから行うプロセスを学ぶ

ここでは、バナーやオリジナルサイトのデザインを行います。デザインソフトで画像を作るのがゴールですが。
サイトを作る場合は、デザイン会社で行っている制作プロセスに倣って以下の進め方で作りましょう。
1:どんなサイトにするか企画コンセプトを考える(目的やターゲットの設定)
2:サイトの構成案をワイヤーフレームで考える
3:ワイヤーからデザイン案を手書きのサムネールに起こす
4:デザインソフトでデザインを画像データにする

追記
特に、デザインをいきなりデジタルデータにしないで、ラフスケッチにするのは重要なプロセスです。
ワイヤーはあくまで構成なので、デザイン会社では、デザイン案を検討するためにデザイン案をそこそこ書き込んだラフスケッチに書き起こします。
その段階でデザインの方向性をディレクターなどの上位者が承認して、データを作っていい状態になりますよ。
■ Coding3:オリジナルサイトをコーディング ■
目的:コーディングを基礎から応用への発展
内容:基礎だけだと出来ない部分を調べながらコーディングする

オリジナルサイトだとやりたいことが増えてきます。この段階で、基礎だけだと足りなくなります。
コーディングの応用方は大体調べれば出てくるので、ここで調査しながらコーディングするノウハウを積みましょう。ちなみに、あまり動的な仕組みを入れると、コーディングで止まってしますので、ここではHTMLとCSSだけで作れるシンプルなものが良いと思います。

ステップ4:デザインとコーディングの勉強

ここからは、デザインの勉強に入ります。前のステップでオリジナルデザインのサイトを作ると「デザインが全然出来ない」と思う人が多いと思います。

それは、デザインソフトが使えることと、デザインができる事は全然別だからです。日本語はみんな書けるけど、小説を書くのは難しいことと同じですね。

また、前のステップでコーディングもレベルアップの必要があるのが分かると思います。レスポンシブやCSSのより深い機能を使っていきましょう。

■ Design4:デザインを勉強する ■
目的:デザインの技法を勉強します
内容:サイトデザインをゼロから行うプロセスを学ぶ

デザインには、様々な定石があり誰でも学ぶことができます。特に「レイアウト」と「配色」については定石を学ぶことで、かなり上達します。

それぞれが勉強しやすい参考書籍を紹介します。

デザイン勉強の参考図書
<レイアウト>レイアウト・デザインの教科書

<配色>配色デザイン良質見本帳

■ Coding4:コーディングの応用編を勉強する ■
目的:コーディングの応用編
内容:HTMLやCSSの応用やレスポンシブ

今まで勉強していたHTMLやCSSの基本的な使い方で、解決できなかった部分の学習を始めるステップです。スマホ版では必要になるレスポンシブデザインもこの辺で行いましょう。(レスポンシブ のためにBootstrapのようなフレームワークは、まだ覚えなくて良いです。基本のメディアクエリで行きましょう。)
また、CSSセレクタ を使った開閉式のハンバーガーメニューなど、ある程度動的なコーディングを学習サイトで学びましょう。コーディング好きな方はこの辺でjQueryを使っても良いと思います。

ステップ5:再びオリジナルデザインに挑戦

ここでは、ステップ3に続いて再びオリジナルデザイン&コーディングにチャレンジします。デザインとコーディングの勉強の成果が試される部分です。

■ Design5:オリジナルデザイン2回目 ■
目的:オリジナルデザインでサイトを作る+スマホ版
内容:デザインの勉強の成果を試す

オリジナルデザインのサイトを作りましょう。デザインを考えるプロセスは、ステップ3と同様です。

1:どんなサイトにするか企画コンセプトを考える(目的やターゲットの設定)
2:サイトの構成案をワイヤーフレームで考える
3:ワイヤーからデザイン案を手書きのサムネールに起こす
4:デザインソフトでデザインを画像データにする


特にデザイン案をサムネール(手書き)で書くのが結構重要です。デザイン会社では社内コンセンサスを得たり、提案を説明するのに使います。
また、サムネールはスマホ版も作りましょう。

■ Coding5:オリジナルデザインをコーディングする2回目 ■
目的:オリジナルデザインのコーディング+スマホ版
内容:HTMLやCSSが実用レベルで使えるようにする

オリジナルデザインをコーディングしようとすると、コーディングもかなりレベルアップが必要です。
スマホ版を作るレスポンシブのコーディングも行いましょう。

ステップ6:究極の模写と、コーディングの模写

■ Design6:究極の模写 ■
目的:デザインのレイアウトと文字組の技術を高める
内容:良いデザインを題材にオリジナル素材で模写する

定石を学んでも、実際にデザインが出来るようになるのは、かなりのトレーニングが必要です。「わかる」と「できる」の距離はかなり長いですね。
特に、みんな苦手なのが、レイアウトと文字組です。

デザイン会社の後輩にトレーニングを兼ねて行っていたのが「究極の模写」です。
レイアウトや文字組が優れているデザインを下敷きに、要素や文字などを入れ替えて、デザインの練習をします。

1.最初はほぼそのまま模写する
2.慣れてきたら写真やコピーなどの要素を入れ替える
3.出来たものをディレクターにレビューしてもらう

良いデザイン模写することで、プロのレイアウトと文字組を身につけるコトができます。しかも、写真や文字などの要素を入れ替えるので、微調整はかなり学ぶことができます。
これを1年ぐらい続けると、かなりのレベルアップになりますね。
トレーニングの具体例として、広告を使ったトレーニング事例を紹介します。

究極の模写トレーニング

スクリーンショット 2020-03-23 19.30.18

■ Coding6:世の中のサイトを色々模写してみる ■
目的:コーディングのレベルアップ
内容:世の中の色々なサイトをコードで模写してみる

コーディングのレベルを上げるために、世の中の色々なサイトを模写します。
ただ、この段階は、コーディングのレベルを上げたい人向けです。デザイン会社だとそこまで必要ないと思います。

最後に:未経験から就職に向けて

ここで紹介した6ステップの勉強法ですが、デザイン会社2年〜3年目ぐらいの若手の到達レベルがゴールです。なので、数週間とかで簡単にできるものではなかったります。

特に、デザインは一人ではなかなか上達が難しく、ステップ6で紹介した「究極の模写」は、上位者からのフィードバックが不可欠です。

未経験でWEBデザイナーを目指している人からみると、かなり遠い道に見えてしまうかもしれないです。
でも、ステップ5ぐらいまで行うと、就職できるレベルになると思いますよ。(この時点でかなりポートフォリオも賑わっているはずです。)
自分が今どのステップにいるかも意識して読むと、より活用できると思います。

また、デザインがなかなか上手くならないと悩んでいる人も多いと思いますが
正直未経験者のポートフォリオは、クオリティはそんなにみていません。

参考図書に載っている定石が押さえてあれば十二分です。
それよりは、作ることへのモチベーションや、ターゲットや課題解決が考えられて作っているかが重要です。

まずは、作る事自体を楽しめるように、どんどんオリジナルで作っていくのがおすすめですよ。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

やったー
373
グラフィックとWEBのデザイナーで、現在プロダクトデザイン会社を経営/ 未経験からデザイナーを目指す人や、デザインを学ぶ人を応援するため 「デザインの学習法」や「デザイナー向けマーケスキル」を紹介しています/ デザイナーでMBAホルダーの変人です

この記事が入っているマガジン