読者です 読者をやめる 読者になる 読者になる

LITERALLY

知っておくと楽しい知識をまとめて紹介

全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選

デザイン

f:id:tsukuruiroiro:20161022115940j:plain

デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。

 

1.デザインの基本原則を覚えよう

1-1.「1/3ルール」を覚えよう

f:id:tsukuruiroiro:20161021223607j:plain

レイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点(図の丸点)に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。

f:id:tsukuruiroiro:20161021223957j:plain

 

1-2.端をそろえて線をつくろう

f:id:tsukuruiroiro:20161020205008j:plain

写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。

 

1-3.視線の流れを意識したデザインにしよう

f:id:tsukuruiroiro:20161020171534j:plain

情報がたくさん詰め込まれている横書きコンテンツの場合、見る人の視線は左上から右上へと流れていくことが多い。右上と左下は注目されづらいゾーンだ。そのため重要なメッセージは、左上もしくは右下に配置するのが良いだろう。

 

1-4. 基本的な強調の手法を知っておこう

f:id:tsukuruiroiro:20161101092641j:plain

The Refinery

強調の方法には、フォント種類を変える(種類・太さ)、色を変える、サイズを変える、アニメーションを加える、装飾を加える(下線など)、余白をうまく使うなどがある。なるべく効果的かつ、見る人が疲れてしまわないような方法を取るように気をつけたい。下にいくつかのパターンとその注意事項をまとめておく。

強調例1)フォント色を変える
ここで注意したいことはあまりにたくさんの種類の色を使わないことだ。

強調例2)サイズを変える
重要なのは、大胆に変えること。他の文字に比べて相対的にどれだけ違いがあるか、が重要だ。レイアウトが意図せず崩れてしまわないように注意。

強調例3)下線など装飾を加える
ただ、下線を引くだけでなく、蛍光ペンのようにカラーで表現するのも効果的。

 

強調例4)余白をうまく使う

 

余白をうまく使えば、同じフォントサイズやフォント色でも効果的に目立たせることができる。この場合も重要になるのは、かたまりをしっかりと作ること。当然だが、全ての行の間に余白が大きく入っていれば、強調効果は薄くなる。

  

1-5. 使う色の数は3〜4色におさえよう

f:id:tsukuruiroiro:20161020195600j:plain

デザイナーであれば、カラフルに美しいデザインができるかもしれないが、そうでないのであれば、使う色の数は絞るのがベターだ。配色についてよく分からないのであれば、次の3〜4色にするのが無難だったりする。

  1. 白&黒
  2. メイン色(青系のデザインと決めたら青系メイン色)
  3. サブ色(メイン色と同系統の色。より明るい水色など)
  4. 差し色(アクセントで少し使う色。メインが青系ならオレンジや赤系で1つ) 

配色については、こちらの記事にまとめてある。


2.すぐに実践できるデザイン・テクニック

2-1.左右対称と非対称を使い分けよう

  • 左右対称のデザインは、見る人が情報を処理しやすい
  • 左右非対象のデザインは、見る人の目を引きつけやすい

これは少しテクニック的な話になる。例えば、ユーザーが素早く欲しい情報にたどり着けるようなWebサイトにしたければ、左右対称のデザインにしよう。逆に、見る人の目を引きつけるインパクトのあるデザインにしたければ左右非対称にしてみよう。「ユーザーに何を伝えたいのか」を考えた上でデザインを決めることが重要だ。

▼左右対称

TeamGrid

f:id:tsukuruiroiro:20161101092610j:plain

 

▼左右非対称

Good Morning Sunshine

f:id:tsukuruiroiro:20161101092623j:plain

 

2-2. シンプルなデザインで効果的に伝えよう

f:id:tsukuruiroiro:20161101092634j:plain

Watch - Apple

シンプルなデザインほど、1つ1つのコンテンツが記憶に残りやすい。見る人に伝えたいメッセージが明確なのであれば、それにフォーカスしたシンプルな表現をしよう。上の画像はAppleのApple Watchの商品説明ページだ。キャッチフレーズはない。しかし、Appleが最も伝えたい「防水であること」は視覚的にすぐに理解できる。

 

2-3. (テクニック)あえてはみ出してみよう

f:id:tsukuruiroiro:20161101092649j:plain

Native Swinson | Gallery

人は不自然なものに気をそそられる。あえて、不自然に、大胆にはみ出すことで、目を引きやすくなる。たとえば、上の画像のWebサイトでは、文字が画面右端にはみ出し、左側からはみ出した部分がちょこっと見えている。違和感たっぷりで二度見してしまうようなデザインだ。ただし、注意したいのは、あくまでも他が綺麗に整列されている中ではみ出すことで効果的に違和感を感じさせられる。他もバラバラなら、おしゃれなデザインには見えないだろう。

 

2-4. (テクニック)とことん大きくしてみよう

f:id:tsukuruiroiro:20161020172958j:plain

Behance

こちらもうまく使えば、斬新で力強い印象を与えられるデザインテクニック。上のデザインでは、1ページの半分以上を占めるほど大きく男性の顔が配置されている。何かの要素を他と比べてとことん大きくすることで、見る人にインパクトを与えられる。

 

2-5. (テクニック)写真の上に文字をのせよう

f:id:tsukuruiroiro:20161101092659j:plain

Outpøst 

こちらは誰にでも簡単に実践でき、簡単にオシャレに見せることができる基本中の基本とも言えるデザインテクニックだ。写真上に白抜きなどで文字をのせると、美しく見える。上のWebデザインのように、写真のど真ん中に小さく、さりげなくのせれば、洗練された印象を与えることができる。

 

2-6. (テクニック)手書き文字を一部に使ってみよう

f:id:tsukuruiroiro:20161101092710j:plain

GREE Ventures

とくに手書き文字を見ることの少ないインターネット上では、一部に手書きフォントを使うと目を引きやすい。丸い手書きフォントを使えばかわいく見せられるし、上のWebデザインのように流れるような手書きフォントを使えばおしゃれに見せることができる。

 

3.デザインについて知っておきたい基本的なこと

3-1. テキスト < 図・写真・イラスト

f:id:tsukuruiroiro:20160924105902j:plain

言葉による記憶は短期的にしか続かない。画像や映像、イラストによる記憶は、長期的に記憶される。記憶に残るインパクトのあるデザインをしたければ、文字をなるべく減らし、視覚的表現を増やそう。

 

3-2. 文章で伝えたいことでも、写真・イラストを1枚入れよう

f:id:tsukuruiroiro:20161022112928j:plain

上の話と重なるが、写真や図を1枚でも入れておくと、文章情報まで記憶しやすくなる。たとえば長文の中に1枚写真を入れておけば、その写真に文章の内容を紐付けておき、後からキーとして文章内容を呼び出しやすくなるのだ。雑誌で読んだ内容は思い出しやすく、文字しかない文庫本の内容がいまいち思い出せない理由の1つがこれだ。

 

3-3.デザインでも第1印象の大切さを知っておこう

f:id:tsukuruiroiro:20161015141950j:plain

Kinfolk

デザインでも、第1印象はその後に影響し続ける。例えば、本の装丁(表紙)により人が感じ取った印象は、本の内容の理解にも大きな影響を与える。Webサイトでも同様だ。アクセスするといきなり広告が大きくポップアップ表示されるメディアが増えているが、これは長期的に考えるとリスキーと言える。

 

3-4. 広告やパッケージは味も錯覚させると知っておこう

f:id:tsukuruiroiro:20161020194239j:plain

Afterhours | Purearth

上の話と重なるが、デザインは味覚まで錯覚させる。いかにも美味しそうな料理写真を載せたグルメ広告や、洗練されたデザインの食材パッケージを見た後に食べることで、実際の味より美味しく感じられる。

 

参考にした本など

  • ノンデザイナーズ・デザインブック
    このブログでしつこいほど取り上げてる名著。
  • Design Rule Index 
    デザインの法則について論文のように淡々と書かれている本。高いし買う必要はないかも。図書館なんかに置いてあるんじゃないでしょうか。
  • その他、管理人おすすめのデザイン書籍はこちら 

 

関連記事

*1:黄金比とは、ものすごくざっくりというと「左右(or上下)の比が1 : 1.618のとき美しく見える」「自然界や古代芸術でも取り入れられている」というような法則だ。しかし、一体誰がいちいちデザインするときに1 : 1.618の比を測るのだろうか。