デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインのルール・テクニックを紹介する。
1. 便利な1/3法則を覚えよう
レイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点（図の丸点）に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。
2. 端をそろえて線をつくろう
写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。
3. 左右対称 or 非対称 ？
- 左右対称のデザインは、見る人が情報を処理しやすい
- 左右非対象のデザインは、見る人の目を引きつけやすい
例えば、ユーザーが素早く欲しい情報にたどり着けるようなWebサイトにしたければ、左右対称のデザインにしよう。逆に、見る人の目を引きつけるインパクトのあるデザインにしたければ左右非対称にしてみよう。「ユーザーに何を伝えたいのか」を考えた上でデザインを決めることが重要だ。
▼左右対称
▼左右非対称
4. 視線の流れを意識したデザインにしよう
情報がたくさん詰め込まれている横書きコンテンツの場合、見る人の視線は左上から右上へと流れていくことが多い。右上と左下は注目されづらいゾーンだ。そのため重要なメッセージは、左上もしくは右下に配置するのが良いだろう。
5. シンプルなデザインで効果的に伝えよう
シンプルなデザインほど、1つ1つのコンテンツが記憶に残りやすい。見る人に伝えたいメッセージが明確なのであれば、それにフォーカスしたシンプルな表現をしよう。上の画像はAppleのApple Watchの商品説明ページだ。キャッチフレーズはない。しかし、Appleが最も伝えたい「防水であること」は視覚的にすぐに理解できる。
6. 強調の手法を知っておこう
強調の方法には、フォント種類を変える（種類・太さ）、色を変える、サイズを変える、アニメーションを加える、装飾を加える（下線など）、余白をうまく使うなどがある。なるべく効果的かつ、見る人が疲れてしまわないような方法を取るように気をつけたい。下にいくつかのパターンとその注意事項をまとめておく。
強調例1）フォント色を変える
ここで注意したいことはあまりにたくさんの種類の色を使わないことだ。
強調例2）サイズを変える
重要なのは、大胆に変えること。他の文字に比べて相対的にどれだけ違いがあるか、が重要だ。レイアウトが意図せず崩れてしまわないように注意。
強調例3）下線など装飾を加える
ただ、下線を引くだけでなく、傾向ペンのようにカラーで表現するのも効果的。
強調例4）余白をうまく使う
余白をうまく使えば、同じフォントサイズやフォント色でも効果的に目立たせることができる。この場合も重要になるのは、かたまりをしっかりと作ること。当然だが、全ての行の間に余白が大きく入っていれば、強調効果は薄くなる。
7. あえてはみ出してみよう
人は不自然なものに気をそそられる。あえて、不自然に、大胆にはみ出すことで、目を引きやすくなる。たとえば、上の画像のWebサイトでは、文字が画面右端にはみ出し、左側からはみ出した部分がちょこっと見えている。違和感たっぷりで二度見してしまうようなデザインだ。ただし、注意したいのは、あくまでも他が綺麗に整列されている中ではみ出すことで効果的に違和感を感じさせられる。他もバラバラなら、おしゃれなデザインには見えないだろう。
8. とことん大きくしてみよう
上のデザインでは、1ページの半分以上を占めるほど大きく男性の顔が配置されている。何かの要素を他と比べてとことん大きくすることで、見る人にインパクトを与えられる。
9. 写真の上に文字をのせよう
写真上に白抜きなどで文字をのせると、美しく見える。上のWebデザインのように、写真のど真ん中に小さく、さりげなくのせれば、洗練された印象を与えることができる。
10. 手書き文字を一部に使ってみよう
とくに手書き文字を見ることの少ないインターネット上では、一部に手書きフォントを使うと目を引きやすい。丸い手書きフォントを使えばかわいく見せられるし、上のWebデザインのように流れるような手書きフォントを使えばおしゃれに見せることができる。
11. 使う色の数は3〜4色におさえよう
デザイナーであれば、カラフルに美しいデザインができるかもしれないが、そうでないのであれば、使う色の数は絞るのがベターだ。配色についてよく分からないのであれば、次の3〜4色にするのが無難だったりする。
- 黒
- 系統色1（青系のデザインと決めたら青系メイン色）
- 系統色2（青系サブ色。より明るい水色など）
- 差し色（アクセントで少し使う色。メインが青系ならオレンジや赤系で1つ）
配色については、近いうちに別記事でまとめることにする。
12. テキスト ＜ 図・写真・イラスト
言葉による記憶は短期的にしか続かない。画像や映像、イラストによる記憶は、長期的に記憶される。記憶に残るインパクトのあるデザインをしたければ、文字をなるべく減らし、視覚的表現を増やそう。
13. 文章で伝えたいことでも、写真・イラストを1枚入れよう
上の話と重なるが、写真や図を1枚でも入れておくと、文章情報まで記憶しやすくなる。たとえば長文の中に1枚写真を入れておけば、その写真に文章の内容を紐付けておき、後からキーとして文章内容を呼び出しやすくなるのだ。雑誌で読んだ内容は思い出しやすく、文字しかない文庫本の内容がいまいち思い出せない理由の1つがこれだ。
14. デザインでも第1印象の大切さを知っておこう
デザインでも、第1印象はその後に影響し続ける。例えば、本の装丁（表紙）により人が感じ取った印象は、本の内容の理解にも大きな影響を与える。Webサイトでも同様だ。アクセスするといきなり広告が大きくポップアップ表示されるメディアが増えているが、これは長期的に考えるとリスキーと言える。
15. 広告やパッケージは味も錯覚させると知っておこう
上の話と重なるが、デザインは味覚まで錯覚させる。いかにも美味しそうな料理写真を載せたグルメ広告や、洗練されたデザインの食材パッケージを見た後に食べることで、実際の味より美味しく感じられる。
参考にした本など
- Design Rule Index
デザインの法則について論文のように淡々と書かれている本。高いし買う必要はないかも。図書館なんかに置いてあるんじゃないでしょうか。 - LITERALLY管理人おすすめのデザイン本はこちら
*1:黄金比とは、ものすごくざっくりというと「左右（or上下）の比が1 : 1.618のとき美しく見える」「自然界や古代芸術でも取り入れられている」というような法則だ。しかし、一体誰がいちいちデザインするときに1 : 1.618の比を測るのだろうか。