デザイン初心者向け｜デザインレベルが劇的に上がる練習方法

デザインを上達させるために、バナー、チラシ、名刺、ロゴなど、いろいろなものを作っている人は多いと思います。

もちろん、数を作ることは必要です。しかし、毎回違うものを何となく作っているだけでは、自分の得意なレイアウトや配色を繰り返すことになります。作品は増えても、判断できることはそれほど増えません。

デザイン初心者が短期間で総合的な力を身につけたいなら、私はスマホ版サイトのファーストビューを作り続ける方法がよいと考えています。

理由は単純です。

スマホ版のファーストビューには、ターゲット、訴求、文字組、レイアウト、写真、配色、余白、視線誘導、ブランドイメージ、CTAまで、仕事で必要なデザイン要素が小さな画面の中に凝縮されているからです。

スマホ版ファーストビューはごまかしが利かない

デザインがうまく見えない原因は、色やフォントのセンスよりも、何を優先するか決められていないことにあります。

たとえば整体院のファーストビューで、院名、肩こり、腰痛、骨盤矯正、自律神経、施術実績、初回料金、予約ボタンをすべて目立たせても、見る人には何も残りません。

腰痛の人に来てもらいたいなら、最初に腰痛の悩みと施術を受けるメリットを見せる。院名や実績は、その内容を理解した後に信頼してもらうための情報として扱う。

スマホ版では、こうした情報の優先順位が、そのままデザインに現れます。

一枚の中で「興味・理解・行動」を設計する

ファーストビューは、単にサイトの一番上にある画像ではありません。

初めて見た人に興味を持ってもらい、何のサービスかを理解してもらい、続きを見る、予約する、問い合わせるといった行動につなげる場所です。

私はデザインを見るとき、まず「誰に、どんなメリットがあるのか一目で伝わるか」を確認します。

きれいな写真が入っていても、雰囲気のよい英語が添えられていても、何を提供しているのか分からなければ、良いファーストビューとは考えません。

練習するときは、制作ソフトを開く前に、次の一文を作ります。

「誰に、どんなメリットを伝え、何をしてもらうファーストビューなのか」

たとえばパーソナルジムなら、「運動が続かなかった40代に、無理なく体を動かせることを伝え、体験予約につなげる」と決めます。

この一文があれば、最初に見せる言葉は「パーソナルトレーニングジム」ではなく、「運動が続かなかった40代へ」や「無理なく、動ける体を取り戻す」になります。

写真も、筋肉質な男性の写真ではなく、対象者が自分の利用場面を想像できる写真を選ぶことになるでしょう。

ターゲットと目的を決めると、言葉、写真、配色、レイアウトの判断に理由が生まれます。この判断を繰り返すことが、仕事で使えるデザインの練習になります。

同じ題材で三つのファーストビューを作る

練習では、一つ作って終わりにしないことです。

同じ商品と同じ基本情報を使い、ターゲットや訴求を変えて、三つのスマホ版ファーストビューを作ります。

先ほどのパーソナルジムなら、次のように分けられます。

• 運動が続かなかった40代向け
• 体重を落としたい30代向け
• 本格的に筋力を高めたい20代向け

同じジムでも、相手が違えば、伝えるメリットも写真も変わります。

40代向けなら「無理なく続けられる」、30代向けなら「体型を見直す」、20代向けなら「効率よく鍛える」という訴求が考えられます。

ここで、コピーだけを差し替えてはいけません。

写真の人物、表情、運動の強度、色の印象、文字の太さ、余白の取り方まで、ターゲットに合わせて変えます。そのうえで、どのような意図で変更したのかを説明できるようにします。

「青のほうが格好いいから」では説明になりません。

「40代が無理なく続けられる印象を持てるように、強い黒ではなく明るく落ち着いた青を使った」というように、ターゲットと結びつけて説明します。

この練習をすると、自分の好きなデザインを作る段階から、相手に合わせたデザインを作る段階へ進めます。

練習では毎回一つの課題を決める

ファーストビューを作りまくるといっても、数だけを目標にしてはいけません。

毎回、練習する課題を一つ決めます。

最初は、文字の優先順位だけに集中する。次は、写真から体験を想像させることに集中する。その次は、余白によって情報を整理する。さらに、同じ内容を異なるブランドイメージで作り分ける。

一枚の中ですべてを完璧にしようとすると、どこが改善したのか分からなくなります。

参考デザインを見る場合も、「おしゃれだから真似する」ではなく、何を学ぶために見るのかを決めてください。

文字組を練習するなら、フォント、サイズ、太さ、行間、文字の周囲にある余白を見る。写真の使い方を練習するなら、人物の向き、切り取り方、文字を置く場所、写真が与える印象を見る。

参考デザインの表面ではなく、なぜその形になっているのかを観察します。

完成後は第一印象から確認する

完成したファーストビューは、細部より先に全体を確認します。

最初に、スマートフォンの実際の表示サイズで見てください。制作画面を拡大したままでは、文字の読みにくさや情報の窮屈さに気づけません。

次に、数秒だけ見て画面を閉じます。

誰向けのサービスだったか。どんなメリットがあるのか。次に何をすればよいのか。この三つが答えられるかを確認します。

伝わらなければ、すぐに装飾を足すのではなく、訴求と情報の優先順位へ戻ります。

その後で、文字の行間は適切か、要素の端は揃っているか、関連する情報は近くにあるか、余白の幅は統一されているかを見ます。

確認する順番は、第一印象、わかりやすさ、デザインの基本です。

細部をきれいに整えても、誰に何を伝えるデザインなのか分からなければ、仕事では使えません。

ファーストビューを作ればデザイン全体を見る力が育つ

スマホ版ファーストビューには、デザインの総合力が出ます。

限られた画面の中で、情報を選び、順番を決め、文字と写真に役割を与え、ブランドの印象を作り、次の行動まで設計しなければならないからです。

だから、初心者がバラバラな課題へ手を出すより、スマホ版ファーストビューを繰り返し作ったほうが、問題を見つける力と判断する力を鍛えられます。

毎回違うものを作る必要はありません。

同じ商品でターゲットを変える。訴求を変える。写真を変える。ブランドイメージを変える。そして、なぜ変えたのかを説明する。

デザインレベルを上げるのは、作品数そのものではありません。一枚ごとに何を考え、何に気づき、次の制作で何を変えたかです。

スマホ版ファーストビューを作り続ける練習は、単にWebデザインが上達する方法ではありません。デザインに必要な要素を、小さな画面の中で何度も考え直す訓練なのです。