知らないのはあなただけ!? デザイン入門① “デザインの4つの原則”

デザイン入門

こんにちは。
セブは雨季ですが、相変わらずの暑さです。

さて今日から数回に渡って最近僕が特に勉強しているデザインについての知識をまとめていきます。
僕がそうであるように、主に「デザイン初心者」が読んでためになるものを目指しています。
よって以下に当てはまる人に向けたものになります。

  • デザインってそもそも何?
  • 最近よく「デザイン」聞くけど、デザイナーがするものなんじゃないの?
  • 「デザインシンキング」って何?
  • 結局どうすれば「デザイン」してるって言えるの?

僕自身まだ勉強し始めたばかりですが、「デザイン」は表層的な装飾だけに留まらない、とても奥行きのある考え方・スキルだと思います。

それでは今日はデザインの大原則でもある「4つの基本原則」を見ていきましょう。

デザインとは

さて、そもそも「デザイン」とは何でしょうか。
ブリタニカ国際大百科事典によると以下のように説明されています。

企画立案を含んだ設計あるいは意匠。「指示する,表示する」という意味を表すラテン語 designareから出た語。

ここで言う「企画立案を含んだ」と言うのは「ある目的のために、それを達成するために立てた一連の企画を含む」と解釈します。

そうするとデザインとは、辞書的な意味で言うと、何か目的を達成するために設計されたものと解釈できますね。

以前、知り合いで「デザインは問題解決で、アートは問題提起だ」とおっしゃっていた方がいまして、確かになと共感しました。

アートは「表現」という言葉と近似性が高いことから分かるように、自己表現の一種として用いられることが多いですよね。
対してデザインは常に解決したい、達成したい目的があり、そのために表現・設計されているというわけですね。

4つの基本原則とは

ノンデザイナーズ・デザインブック』はRobin Williamsによる著書で、1998年に日本で第一版が出版されてから、現在に至るまで読まれ続けているデザインの基本書と言われるものです。
知人に「デザイン勉強したい」と言ったら「これ読んどけ」と勧められました。

「デザインの4つの基本原則」とは、本書の中で出てくるもので、筆者が「良いデザインの仕事なら実質的に必ず利用されている」と提言しているものです。

それらは以下の四つです。

  1. 近接
  2. 反復
  3. 整列
  4. コントラスト

覚えるより使いこなせるかの方が大事なので、どんどんこれらの原則を使ってデザインをしていきましょう。

近接

近接とは「関連する項目をまとめてグループ化する」という事です。
ばらばらになっている情報を一つにまとめる事で、読者に読みやすさを提供します。
例えば、以下の画像を見てみましょう。

近接1

読者はこれが部員募集を呼びかけるものだとは分かりますが、秩序立ってないため苛立ちを覚えることでしょう(笑)

あえて、極端に見辛いデザインにしましたが、
このデザインはどこが悪いと思いますか?

次にこちらの画像を見てください。
こちらは近接の原則を用いて作成したものです。

近接2

使用フォント HannnariMincho

先ほどの画像と比べて遥かに見やすくなったと思います。

ですが、それでも意識したのは「関連する項目をまとめてグループ化する」という事だけです。
ピクトグラムとそれを示す部名はセットにし、ピクトグラムそれ自体を見やすいように4つとも近くに置きました
また、「新入部員募集中!」のタイトルも中心に置くことで、全体的に読者の視線を中心だけで済むように設計しました。

最初の画像と比べて周りの余白が大きくなりましたが、
こちら(作り手)にとって大事なのは読者に「何を伝えたいもの」で「どの部活が募集しているのか」を一瞬で分かってもらうことです。

よって、余白があることは問題ではないと考えました。

整列

整列はページ上のすべてのものを意識的に配置しなければならないという事です。
ページ上の全ての項目が何か他のものと視覚的に関連するよう、ページを一体化させて組織化する事が必要です。

以下の画像を見てください。

整列1

使用フォント Helvatica Neue

一応名刺ですが、こんな名刺を渡されても困惑するのではないでしょうか(笑)

デザインは問題解決であると先ほど言いました。よって、「問題点を言語化」する事がとても大事だと考えます。
特に僕みたいなデザイン初心者はどこをどういう風に解決したくてこのデザインにしたのかを説明出来るようにならないといけません。

なぜなら、それが出来ないとその仮説が正しいかどうか判断できず、自分のデザイン力としての成長が望めないからです。

さて、それではこの名刺のどこが悪いのか。
僕なりに改良した以下の名刺をご覧ください。

整列2

「整列」を用いて字を右揃えにする事で、読者の視線の流れをシンプルなものにしました。
そうつまり、最初の名刺の問題点は「情報の煩雑さ」であり、「読者の視線の流れが不規則」であるという事です。

また、最近の企業の名刺は企業ロゴが入っている場合も多いので、以下のようなバージョンもつくってみました。

整列3

もちろん、あえて無秩序になるようロゴを配置していますが、問題は「どういう風に他の項目と視覚的な関連性を持たせるか」という事です。

ここで前項目の「近接」を使ってみます。

整列4

実際にラインを引いてみれば一目瞭然ですが、フォントとロゴが中央揃えになっています。
こうする事で企業プロフィールとロゴが密接に関係している事を示せます。

整列5

反復

次は反復です。反復は字の通り、デザイン上で同じ特徴を繰り返す事です。
ノンデザイナーズブックでは「一貫性」とも言われていますが、それはつまり「ページの一体化と視覚的なおもしろさ」です。

以下のデザインの酷い出来栄えのtodoリストをご覧ください。

反復1

使用フォント Helvatica Neue

冷蔵庫やラップトップに貼られているようなものならこれでいいのかもしれません。
しかし、より視覚的見やすさに重点を置けば、todoリストを見た時のストレスも軽減されるはずです。

反復2

白抜きの字を用いる事で、喫緊性の高いtodoを一目で分かるようにしました。
またカテゴリーの二つをボールド(太字)にする事でカテゴリーごとのまとまりを意識しやすいようにしました。
またチェックアイコンを入れる事でtodoリストの存在感を確保し、おもしろさを表現しています。

しかし、まだ見づらいですね。
このままではまだ大多数の人が使いたいとは思わないでしょう

反復3

反復4

整列を用いる事で、視線の流れを確保しつつ、フッターにラインを引く事でおもしろさを出してみました。

最初のと比べるとだいぶ見やすくなっている事が分かると思います。

コントラスト

コントラストは「読者の目をページに引き込むために、様々な対比をつけること」です。

著書では、コントラストは「本気になる事」と書いてあります。
つまり、中途半端に対比させるのではなく、思い切りよくコントラストをつける事が大事ということです。

コントラスト1

これは、僕が所属していた学生団体の採用期に配っていたビラです。
デザインのたたきを僕が担当し、イラレを用いた製本作業は別のイラストレーターが担当してくれました。

彼女の腕がとんでもなく良いので、僕のへっぽこデザイン力はあまり貢献していないのですが、このビラのページは僕のたたきがほとんどそのまま使われています。

このビラの中のコントラストは何でしょうか。
言うまでもないですが、それは「フォント」です。

「ようこそ、世界最大級へ」のキャッチコピーがひときわ目立つように、団体名とロゴの4倍近くの行数を用いていることが分かります。

また、これは当時の僕が考えていた事らしいですが、外人がたくさん映っている写真を用いる事で読者とのコントラストを生み出したかったらしい…と(笑)

浅はかな発想ですが、それでもこのビラを気に入ってくれた新入生もいてとても嬉しかった思い出があります。

コントラスト2

さて、最後はシンプルなものを例示します。
真っ白な背景ですが、二つのコントラストを用いる事で読者の視線を掴もうとしています。

このくらいシンプルでも、デザインの法則を使えばかなり見やすく、効果的に読者に情報を届けられることが分かっていただけたのではないでしょうか。


以上になります。
最後まで読んでいただきありがとうございました。

今回の記事に出てくる画像は全て僕がデザインしたものであり、まだまだ改良の余地があることは十分承知しています。

「ここはもっとこうしたら良くなるよ」などご指摘やアドバイスがあれば是非お願いいたします。

今回の記事、今後のシリーズで少しでもデザインへの障壁が低くなればいいなと思います。

それでは!