デザインの習得を始める前に、学び方のロードマップを確認しましょう。
まず最初にPhotoshopの基本的な使い方を習得しましょう。
Photoshopは画像加工ソフトですがWEBデザインにも使います。
今はSketchやXD、Figmaなど、様々なデザインツールが生まれてきました。
ただ、業界標準は未だにPhotoshopなので、使えるようにしましょう。
Photoshopをまだインストールしていない方は入手してから取り組んでください。
ひとまず980円月額のフォトプランで十分です。
インストールが終わったら「ボタンを作ってみよう」まで終わらせてください。
できれば、STEP4までの工程は3周ほど繰り返すと良いです。
3周くりかえせば、Photoshopの基本的な使い方はわかるはずです。
デザイン上達の基本は真似
Photoshopの使い方を覚えたら、いよいよデザインに入りましょう。
WEBデザインの上手な人と、下手な人、そこに何の違いがあるかご存知ですか？
一言で言うと「頭の中にあるデザインネタの多さ」です。
デザインの引き出しの多さ、ネタの多さこそ、そのままデザインの差になります。
どんなデザイナーもまったくのゼロからデザインを作るわけではありません。
過去に見たデザインやトレンドなどがあるから、デザインを作り出せています。
記憶の中に参考がたくさんあるからこそ、良いデザインを素早く作れます。
では、何が一番デザインを上達させるかというと、引き出しを増やすことです。
様々なデザインを見て、デザインのネタを増やしていくこと。
たくさんのデザインを模写し、マネて、何が良いデザインなのか把握すること。
真似をせずにデザインを作ろうとすると、むしろ上達は遅くなります。
なので、STARTOUTでは、とにかく真似して引き出しを増やします。
オリジナルでデザインを作るのはその後です。
ひとまず「デザインをブラッシュアップしよう」まで終わらせてください。
その過程で作るデザインは、全て「別のサイト」を参考にしましょう。
参考にする際は、下記2つのWEBデザインリンク集から参考サイトを選びましょう。
1サイトだけではなく3サイトくらい選び、エリアごとに真似しましょう。
WEBサイトには、1ページの中に様々な項目がありますよね。
例えばSTARTOUTのトップページを見ても、
- メインビジュアル
- ユーザーのお悩みリスト
- 機能リスト
- ユーザーの声
といったようにセクションごとに分かれています。
1サイトの全てを真似してはいけません。
それだと、ただコピーしているだけで自分で考えていないからです。
まず、複数のサイトから、ワイヤーフレームに沿ってバラバラに真似するセクションを選びましょう。
コンセプトエリアはAのサイトから真似る
ユーザーの声はBのサイトから真似る
といったニュアンスです。
もちろん、カラーやテイストがあったものを選んでください。
決して、何もない状態からオリジナルで作ろうとしてはいけません。
大事なことなので、もう一度いいます。
いきなりゼロからデザインを制作しようとすると逆に成長が遅くなります。
半模写WEBデザインでWEBサイトを作ってみる
一通りブラッシュアップまで終わったら「半模写WEBデザイン」に進みます。
半模写WEBデザインとは、既存のWEBサイトを参考にデザインを作るシンプルな方法です。
なお、ここで一旦、これまで作ったデザインは一旦終了します。
半模写WEBデザインで、もう1つWEBデザインを作ってください。
この項目を進めるにはワイヤーフレームが必要です。
ワイヤーフレームをお持ちであれば、そのまま半模写WEBデザインを実践してみてください。
ワイヤーフレームが無い方は「ディレクション」の項目を参考にワイヤーフレームを作りましょう。
真似をベースにしたデザイン方法は、デザインの基本です。
プロのデザイナーも「過去の記憶を参考にデザインを作る」とご説明しました。
その過程を、脳内ではなく実際に手を動かして形にしながら進めます。
最初はなかなか慣れないかもしれません。
ただ、繰り返していると、徐々に何も見なくてもできるようになります。
もっと慣れてくると、脳内でアレンジを加え、完全オリジナルで作れるようになります。
とにかく引き出しを増やすには、半模写WEBデザインは、最良の方法です。
そこまで終わったら、コーディングに向けパーツを切り出す最後の項目に進みます。
ロードマップのまとめ
なんとなく、学習の流れは把握できましたでしょうか。
では、おさらいです。
- Photoshopの使い方を学ぶために「ボタンを作ろう」まで実践
※ もし全然慣れない場合は何度も繰り返しやる。 - デザインの基本を学ぶために「デザインをブラッシュアップしよう」まで実践
※ 絶対にオリジナルでは作らず別サイトを参考にする - ワイヤーフレームを作って「半模写WEBデザインに挑戦しよう」を実践
- 最後にコーディングの準備としてパーツを切り出す
以上の流れで進めるようにしてください。
最後にもう一度言いますが「絶対にオリジナルで最初から作らないで」ください。
ネタが頭の中にない状態で作ると、逆に成長が遅くなります。
オリジナルで作るのは、ある程度脳内にデザインの引き出しができてからです。
それまでは我慢して、真似から作る形で練習してみてください。