ノンデザイナーのためのデザイン入門・第2回「デザインの基本的な法則を学んで、わかりやすく情報を伝えるコツをつかむ」

「ノンデザイナーのためのデザイン入門」第2回は、デザインの基本的な法則をご紹介します。知っておくと、何か迷ったときの軸になってくれるかもしれません。それでは、早速はじめたいと思います。

グラフィックデザインに関する法則は、色々な人が色々な法則を唱えているのですが、今回はRobin Williamsという人が提唱した4つの基本的な法則を紹介します。

前提として、法則というものは法則が先にあるわけではなく、わかりやすいもの、美しいものを分析したらこのような共通点があった、というものです。一つの答えに早くたどりつくためのコツであり、その通りやらなければいけないことではなく、知っておくと役立つもの、としてご紹介します。

グラフィックデザインの4つの法則

  • 近接の法則
  • 整列の法則
  • 反復の法則
  • コントラストの法則

私たちの会社のブログのデザインを実例にして、4つの法則を説明していきます。

デザイン前:文字情報を並列に並べた状態

以下はブログの文字情報を並列に並べたものです。これでは、全く読む気がしませんね。

1:意味のまとまりで区切ってみる[近接の法則]

次はブログの記事ごとに段落をわけたものです。段落で区切ること(=グルーピング)によって、3つの意味のまとまりがあることがわかるので、少し見やすくなりました。

次の例は、3つのグループの中でさらに意味あいによってグルーピング(=情報の分類)がされています。大グループ(記事)同士の空きが一番大きくて、小グループ(記事内の日付や本文などの各要素)同士の空きがそれより小さくなっています。

このように関係の深い情報同士を近づけると、ひとつの意味のまとまりになって見えます。これを「近接の法則」といいます。この法則を使って情報を並べると、情報を素早く正確に伝えることができます。グルーピングの手法には、このように余白を設ける以外にも、罫線を引いて区切ったり、色分けしたりという応用もあります。

2:揃えることでわかりやすくなる[整列の法則]

以下の例は文章の頭がずれている上、余白の空き方に全く法則性がありません。余分で、しかも不規則な空きによって意味がわかりにくくなっています。

これを次のように文章の頭を揃えただけで、一気にわかりやすくなりました。これが2つ目の法則「整列の法則」です。

しかしこの状態では、まだ各記事内におけるグルーピングの方法や空きの入れ方に法則性がありませんね。そこで3つ目の法則「反復の法則」の出番です。

3:ルールを作って繰り返す[反復の法則]

各記事のグルーピングと空き方にルールを作って、それを繰り返すことで、よりわかりやすくなり、同時に心地よいリズムが生まれました。これが「反復の法則」です。

4:優先順位の高いものを目立たせる[コントラスト]

「近接の法則」、「整列の法則」、「反復の法則」によって情報が整理されましたが、まだ、一番伝えたい情報である記事のタイトルに、目がいきづらい印象があります。

そこで記事のタイトルの文字を大きくします。 意味をしっかりと伝えるときには、情報に優先順位をつける必要があり、コントラストをつけることによって優先順位の高いものを目立たせることができます。

これが4つ目の法則「コントラスト」です。主役である記事タイトルがパッと目に入りやすくなりました。

要素の配置とコントラスト

コントラストというのは相対的なものです。たとえば「文字のジャンプ率」といって本文の文字に対する記事タイトルの大きさをどれぐらいにするかを意識することによって、コントラストをつけることができます。

以下の2つの例(A・B)は、記事タイトルの文字サイズは同じですが、Bのほうがタイトルに目がいきやすいと思います。それは、記事タイトルの前後に空きをつくっているためです。

- A -

- B -

空きが広いとそれだけで目がいきやすくなり、逆に空きが少ないと目立たせたい文字のジャンプ率を高めないといけないことがわかります。

配置とコントラストを付けるための適切な文字ジャンプ率は、双方が密接に関わっているため、配置を工夫すれば文字を大きくしなくても、伝えたい情報を目立たせることができます。しかしそれには広大なスペースが必要となり、Webは紙と違い、モニタ画面という限られたスペースでのデザインのため、文字のジャンプ率で目立たせることが必要な場面が多くなります。

仕上げ

そろそろ仕上げの段階に入ります。文字の色づけにも法則性をもたせました。
日付はグレー、文字は黒、記事のカテゴリーは茶色をつけています。ここまででだいぶ見やすくなりましたね。

完成型

このような調整を経て、さらに画像をいれてみたものが以下です。画像は文字より情報が早く伝わりやすいので、私たちの会社のブログでは、何かしら画像は入れるようにしています。

長くなりましたが、以上がグラフィックデザインの基本的な法則を活用した、実例の紹介でした。次回はこれまでnon-standard worldでアートディレクター佐藤がデザインしたものをみながら、実際のテクニックやちょっとしたコツをご紹介します。


参考文献:"The Non-Designer's Design Book", Robin Williams, Pearson Education, 1994.

記事カテゴリー