お知らせのチラシを作ったけど、伝わるかなぁ～
こんなふうに、チラシや案内を作るときに思ったことありませんか？
実は、ちょっとした配置や見せ方を変えるだけで、ぐっと見やすくなります。
そのカギが、ロビン・ウィリアムズ著『ノンデザイナーズ・デザインブック』で紹介されているデザインの4原則。
この記事では、私が実際に作った「イベント告知」の例を使って、
- 近接（Proximity）
- 整列（Alignment）
- 反復（Repetition）
- コントラスト（Contrast）
の順に改善していきます！
それでは、４つのステップで「見やすさ」を作っていきましょう♪
ビフォー（元画像）
このイベント告知を見て、どうでしょうか？
私は、とにかく見にくい！
一見、必要な情報は揃っていますが、どこから読んでいいのか迷いやすく、文字のまとまりも分かりづらい状態です。
これでは、見てくれることなく素通りされてしまいます。
それでは、デザインをスタート！
まずは、「近接」という作業から始まります。
Step 1：近接
近接は、まず、同じ種類の情報を集めてグループにすることから始まります。
具体例のイベント告知の内容を見ると、イベント名や日時、場所などの情報があります。
それらの情報のなかで関連性のあるものをグループにすると、たとえば、以下のようになります。
・ タイトルと副題
・ 開催日時
・ 定員・参加費
・ 開催場所と住所
・ 主催者名
・ 申込先
開催日時と主催者名、申込先は、1つの情報を1つのグループとしました。
次に、まとめた情報をグループと分かるようにしたいので、それぞれを離して配置してあげます。
余白で情報を分ける作業です。
実際に、具体例をデザインしてみました。
情報をグループにまとめて離して配置して、少し情報が整理されています。
それでは、次に「整列」という作業に入ります。
Step 2：整列
整列は、文字や要素の端をそろえることです。文書作成でも、中央ぞろえ、左ぞろえなどがあり、それと同じイメージです。
文章は、左揃えにするだけでも整った印象に。
具体例も以下のように情報を整列しました。
- 全てのテキストを左揃え
- メールアドレスも左端にそろえる
どうでしょうか？
少し見やすくなったと思います。
整列させると、情報の端が見えない直線を描いてくれます。こういうふうに…
左端に揃えると、読み始めるポイントを目が探さなくていいので、素早く次の行へと読み進められますね。
それでは、次に「反復」の作業をしていきます。
Step 3：反復
反復は、見出しや強調部分のフォント・色・スタイルを統一することです。
反復によりパターン化されると、見る人の視線の迷いを減らし、情報のもつ意味を認識しやすくなり、記憶に残る効果をもたらします。
たとえば、日清のカップヌードルは、色々な味がたくさんでていますが、一目見てカップヌードルシリーズとわかります。それは、基本となるデザインの型が同じだからですね
具体例は、以下のように反復してみました。
- 見出し部分は太字＋同じ色
- 各項目のラベル部分（開催日時、定員など）を同じフォーマットで
- ラベル部分を同じ色にする
- 中身の情報を同じ色にする
- フォントを揃える
どうでしょうか？
色の統一感があるだけで、目のチラつきや視線の迷いがなくなります。
ちなみに、整列できる箇所がもう一個ありました。
それでは、最後に「コントラスト」をつけていきます。
Step 4：コントラスト
コントラストは、重要な情報を目立たせるために、大きさ・太さ・色で差をつけることです。
デザインで情報の強弱をつけると、見ている人が自分の頭で情報を取捨選択をせずに見られるので、思考の負担が軽くなります。
ただ見るだけで、大事な情報が入ってくる。
こうしたデザインは、目にも頭にも優しい「見やすい」デザインです。
具体例も以下のようにコントラストをつけてみました。
- タイトルは大きく
- 参加費「無料」を目立たせる
- 枠や色で視線を誘導
どうでしょうか？
調整しながら、グループを少し変え、項目の上下を変えました。
情報が見やすく整理され、パッと見ただけで親子ワークショップのことが分かるようになりました。
一番知ってほしい情報を、一番先に届ける。
そのためには、デザインする側が情報を整理して、伝わりやすい形にすること。
それが、デザイン。
というのが、ロビンウィリアムズさんの『ノンデザイナーズ・デザインブック』には書かれています。
見比べてみましょう！
情報は同じなのに、見やすさが全然ちがいます！
まとめ
装飾やセンスを足す前に、並べ方のルール（4原則）を整えるだけで、読みやすさが増します。
今回の具体例は、カラフルな装飾的な柄も加えましたが、4原則を整えたデザインなら白地に黒文字だけでもかっこよくなります。
4つの原則は、1つだけで使うよりもいくつか一緒に使ったほうが、グッと見やすくなります。迷ったら 近接→整列→反復→コントラスト の順に。
ぜひ、試してみてください♪
