デザインを基本から学び直す。 #09Before / After――「何となく変」を、理由をつけて直してみる
これまでDESIGN BASICでは、
4大原則。
余白。
文字。
色。
写真。
レイアウト。
視線誘導。
と、一つずつデザインの基本を学んできました。
でも、実際のデザインでは、それらを別々に使うわけではありません。
文字だけを直せば完成、余白だけを整えれば完成、写真だけを変えれば完成、ということではなく、
いくつもの基本を組み合わせて、一つの画面をつくります。
そこで今回は、これまでとは少し違います。
新しい知識を増やすのではなく、
これまで学んだ基本を、一つのBeforeデザインを読み解き、改善するために使ってみます。
今回は、ゼロからデザインをつくる回ではありません。
すでにあるデザインを見て、
問題を見つける。
理由を考える。
基本を使って改善する。
そしてBeforeとAfterを比べる。
そんな、
DESIGN BASICの「総合演習」
です。
テーマは、
「何となく変」を、理由をつけて直してみる。さあ、これまで学んだことを一つにつなげてみましょう。
1｜まずは「直さずに」見てみる
ここに、一枚の広告があるとします。
タイトル。
写真。
説明文。
価格。
ボタン。
必要な情報は、すべて入っています。
でも、
何となく見づらい。
どこか落ち着かない。
何を見ればいいのか分かりにくい。
こんなとき、すぐに、
「色を変えよう」
「文字を大きくしよう」
「写真を変えよう」
と、手を動かしたくなります。
でも、その前にやることがあります。
それが、
観察すること。
まずは、
「何が変なんだろう？」
と考えてみます。
例えば、
・何が一番大切なのか分からない
・文字の位置がバラバラ
・情報同士の間隔がほとんど同じ
・色が多すぎる
・写真と文字が競争している
・ボタンが目立たない
など、いくつかの問題が見つかるかもしれません。
ここでは、まだ直しません。
まず、
問題を言葉にする。
これが最初のステップです。
「何となく変」で終わらせず、
「なぜ変なのか？」
を探してみましょう。
2｜最初に「何を伝えるデザインなのか」を確認する
問題が見つかったら、次に考えるのは、
「このデザインで、一番伝えたいものは何？」
です。
例えば旅行の広告なら、
旅行先そのものを魅力的に見せたいのか。
安さを伝えたいのか。
期間限定であることを伝えたいのか。
最終的に申し込みにつなげたいのか。
ここが決まらないままデザインを直しても、
どこを目立たせればいいのか決まりません。
今回は、
「美しい自然の中で過ごす旅行に興味を持ってもらい、詳細ページを見てもらう」
ことを目的にしてみましょう。
すると、
主役＝旅行の魅力
補足＝日程や価格
最後の行動＝詳細を見る
という関係が見えてきます。
ここで、第1回から続いてきた考え方が戻ってきます。
デザインは、
「飾ること」ではなく、「目的を達成するために考えること」。
まず目的。
そのあとに見た目。
まずは、この順番を意識してみましょう。
3｜情報を「近づける・揃える」から始める
では、少しずつ直していきます。
最初に手をつけたいのは、色でも写真でもありません。
いわば「デザインの間取り」である、
情報のまとまりと位置です。
第2回で学んだ、
近接と整列
を使います。
例えば、
タイトルとキャッチコピーは近づける。
価格と日程は一つのグループにする。
説明文は説明文としてまとめる。
ボタンは最後の行動として少し離す。
さらに、
タイトルの左端。
本文の左端。
ボタンの左端。
などに、共通する基準をつくります。
これだけでも、
「どれとどれが関係しているのか」
がかなり分かりやすくなります。
ここで大切なのは、
最初から細かな装飾を直さないこと。
まず、
大きな構造を整える。
そのあとで、細部を直します。
4｜余白で「情報のまとまり」をつくる
次は、
余白
を見てみます。
Beforeでは、
タイトルと説明文。
説明文と価格。
価格とボタン。
すべての間隔が、ほとんど同じだったとします。
すると、
何と何が一つのまとまりなのか分かりにくくなります。
そこで、
関係するものは近づける。
違う情報は少し離す。
というルールを使います。
例えば、
タイトルとキャッチコピーは近く。
その下の説明文までは少し離す。
説明文と価格の間には、さらに余白をつくる。
すると、
情報のグループが見えてきます。
第3回で学んだ、
余白は「何もない場所」ではない。
という考え方が、ここで実際に使われます。
余白は、
情報同士の関係を見せるためのスペース
です。
「余ったから空ける」のではありません。
意味が違うから、離す。
関係があるから、近づける。
理由を持って余白をつくります。
5｜文字に「読む順番」をつくる
構造が整ったら、次は文字を見ます。
Beforeでは、
タイトル。
説明文。
価格。
すべてが似た大きさ、似た太さだったとします。
これでは、
何から読めばいいのか分かりません。
そこで、第4回で学んだ、
文字の優先順位
を使います。
タイトルは大きく。
キャッチコピーは少し小さく。
本文はさらに控えめに。
価格は、必要な強さだけ持たせる。
重要なのは、
全部を目立たせないこと。
目立たせたい情報があるから、
目立たせない情報も必要になります。
大きい文字が大きく見えるのは、
小さい文字があるからです。
太い文字が強く見えるのは、
細い文字があるからです。
こうして強弱をつくることで、
読む順番
が生まれます。
6｜色と写真を「目的に合わせて」整理する
次は、
色と写真
です。
Beforeでは、
タイトルが赤。
価格が青。
ボタンが緑。
装飾が黄色。
のように、いろいろな色が使われていたとします。
色が多いと、
「どの色に意味があるのか」
が分かりにくくなります。
そこで、
ベースカラー。
文字色。
アクセントカラー。
くらいに、役割を整理します。
アクセントカラーは、
本当に目立たせたい場所
に使います。
次に、写真。
写真も、
「きれいだから」
だけで選びません。
主役が分かるか。
文字を置ける余白があるか。
トリミングは適切か。
写真の中の線や向きは、どこへ向かっているか。
第6回で学んだことを確認します。
ここまで来ると、
色と写真も単なる装飾ではなく、
情報を伝えるための役割を持った要素
として見えてきます。
7｜最後に「見る順番」を確認する
ここまで直したら、最後に画面全体を見ます。
最初にどこを見るでしょう。
タイトル。
次に写真。
そのあと説明文。
価格。
そして最後にボタン。
自然に、
タイトル → 写真 → 説明 → 価格 → ボタン
と進めているでしょうか。
ここで、
第7回「レイアウト」と、
第8回「視線誘導」
がつながります。
レイアウトで、
情報をどこに置くか
を整える。
そして視線誘導で、
どんな順番で見てもらうか
を確認する。
もし途中で、
「次はどこ？」
と迷う場所があれば、
文字の強さ。
色。
余白。
位置。
写真。
のどこかを、もう一度確認します。
最後のボタンまで自然につながれば、
デザインの目的にもつながりやすくなります。
8｜Before / Afterを比べてみる
では、最初のデザインと完成後を並べてみましょう。
BeforeもAfterも、
使っている情報そのものは、大きく変わっていません。
タイトル。
写真。
説明。
日程。
価格。
ボタン。
必要なものは、最初からありました。
変わったのは、
情報同士の関係です。
Beforeでは、
何が大切なのか分かりにくかった。
Afterでは、
主役が分かる。
情報がまとまっている。
読む順番が分かる。
最後に何をすればいいか分かる。
では、何をしたのでしょう。
整理すると、
・目的を確認した
・情報の優先順位を決めた
・近接と整列でまとめた
・余白で関係をつくった
・文字に強弱をつけた
・色と写真を整理した
・レイアウトを整えた
・視線の流れを確認した
だけです。
特別な装飾を、たくさん加えたわけではありません。
基本を、一つずつ使った。
それだけです。
デザインを直すときは「順番」が大切
今回の総合演習でもう一つ覚えておきたいのが、
直す順番
です。
初心者のうちは、
「なんとなく格好よくしたい」
と思うと、すぐに、
色。
フォント。
装飾。
写真。
を変えたくなるかもしれません。
でも、その前に、
目的は何か。
主役は何か。
情報は整理されているか。
を確認します。
大きな構造が崩れているのに、細かな装飾だけ直しても、問題はなかなか解決しません。
例えば家を建てるときも、
家具を選ぶ前に、
間取りを考えます。
デザインも同じです。
目的 → 情報 → 構造 → 見た目という順番で考える。
この順番を覚えておくと、
「どこから直せばいいの？」
と迷いにくくなります。
今日からできる、小さな練習
今回は、自分でデザインをつくらなくてもできます。
身の回りにある、
チラシ。
広告。
Webサイト。
SNSの投稿画像。
どれか一つを選びます。
そして、
「もし自分が直すなら、最初にどこを直す？」
と考えてみてください。
すぐに、
「色を変える」
「写真を変える」
と考えるのではなく、まず5つ確認します。
何を伝えるデザイン？
一番大切なものは何？
関係する情報はまとまっている？
読む順番は分かる？
最後に何をしてほしい？
一つでも、
「ここが問題かもしれない」
と言葉にできれば十分です。
そして、
「なぜ、そう思った？」
まで考えてみます。
例えば、
「文字が小さいから」
ではなく、
「一番大切なタイトルなのに、本文と強さがほとんど同じだから」
と言えたら、かなり具体的になっています。
ここまでできれば、
すでにデザインを、
感覚だけではなく、理由を持って見る
ことができています。
「何となく変」を言葉にできれば、直し方が見えてくる
今回、一枚のデザインを少しずつ直してきました。
大切なのは、
Afterの見た目を覚えることではありません。
「なぜ、そこを直したのか」
を理解することです。
余白が狭いから広げた。
ではなく、
違う情報のグループだから離した。
タイトルを大きくした。
ではなく、
最初に見せたい情報だから強くした。
色を減らした。
ではなく、
本当に目立たせたい場所を分かりやすくするため。
ボタンを目立たせた。
ではなく、
最後の行動へ導くため。
こうして理由を説明できるようになると、
デザインは、
「何となく」から少しずつ離れていきます。
そしてこれは、DESIGN BASICで最初から目指してきたことでもあります。
「何となく良い」を、
「なぜ良いのか説明できる」へ。
次回、DESIGN BASIC最終回
ここまで9回、
デザインとは何か。
4大原則。
余白。
文字。
色。
写真。
レイアウト。
視線誘導。
そして今回の総合演習。
と進んできました。
次回はいよいよ、最終回。
これまでバラバラだった知識が、あなたの中で一つの「確信」に変わる回です。
デザインを基本から学び直す。 #10
「何となく良い」を、「なぜ良いのか説明できる」へ。
DESIGN BASIC全体を振り返ります。
何を学んだのか。
デザインを見る目は、どう変わったのか。
そして、
これから何を学んでいけばいいのか。
10回の学びを、一つにつなげます。
DESIGN BASICの、その先へ
DESIGN BASIC全10回を終えた、その次のシリーズでは、
DESIGN PRACTICE
実際にデザインしてみる
へ進みます。
ここまでは、
「なぜ良いのか」を理解する。
その次は、
「では、自分ならどうつくるか」
を考える段階です。
まず、基本を知る。
次に、基本を使って判断する。
そして、そのあとに、
自分でつくる。
DESIGN BASICも、いよいよ次回が最終回です。
