ferret編集部:2015年1月23日に公開された記事を再編集しています。

非デザイナーであれば、デザインの世界はセンスであったり、感性の問題だから自分にはできない。あるいは苦手意識があると思われている方も少なくないのではないでしょうか。
しかし、美しいデザインには法則というものが存在します。デザインの法則さえ、理解できていれば非デザイナーであっても基礎的なデザインは可能です。
今回は、非デザイナーが押さえておくべきデザインの基礎的な法則についてまとめました。

このニュースに興味のあるあなたにおすすめ

Webデザインに役立つ無料のツール・デザイン集まとめ
これだけ読めば大丈夫!デザインの基礎が学べる厳選5記事
【事例あり】ランディングページ作成の基礎記事2選+参考になるデザインサイト集8選

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

規則正しいデザインが必要な場合

1 繰り返しの法則

繰り返しの法則

上記のような形は同じでも2つ並んでいるだけの状態を見てどのように感じますか?
多くの人は、「2つ並んでるだけ、よくわからない」と感じるかと思います。

それでは、続いて数を増やしてみましょう。

繰り返しの法則2

先ほどとは違い、「同じ形・サイズが一列に並んでいる、繰り返されている」と感じるのではないでしょうか。
なぜかというと、同じ形・サイズで複数並べることで規則性が生まれたことにより、一直線に並ぶ法則が一目で分るようになったからです。

このように、人間は視覚的に見た情報に規則性があったほうが認識しやすい傾向にあります。

2. リズムを作る法則

先ほどの「繰り返す法則」を行うことで統一感がでるものの、単調で物足りなく感じる事もあります。
さらに、繰り返す中にも強調したいものがある場合、「リズムを作る法則」がおすすめです。

リズムを作る法則

先ほどのサイズと同じ画像の中に、大きなサイズの画像を加えて配列を変えてみました。
あえてサイズを大きくしたり、色・角度を変えてリズムを作ることによって、視覚的に優先順位が明確になり目に留まりやすくなります。

3. 見えない線に沿って左揃えの法則

見えない線に沿って左揃えの法則

上記の画像は、文字が上下左右と不規則にレイアウト(配置)されています。
特に、読むための文章が不規則なレイアウトの場合、「読む・認識する」ために目線を頻繁に移動しなければいけません。

そのため読みにくいと感じたり、違和感を覚えてしまいます。
そこで、先ほどのように規則性を加えてみました。

見えない線に沿って左揃えの法則2

不規則だったレイアウトを規則正しく左揃えに整列させました。
左揃えにしただけで、情報が整理され見やすなったのではないでしょうか。
「見えない線に沿って左揃えの法則」は規則性が生まれ、視線移動が軽減される基本のレイアウトです。

不規則なデザインが必要な場合

4.補色を使って目立たせる

色においては、規則性(同系色)を意識すると対象が目立たなくなってしまう場合があります。
そのため、補色を活用することで、強調したい対象を目立たせることができます。

図解_補色
画像参照:http://rock77.fc2web.com/main/color/color1-2.html

補色とは、「正反対に位置する関係の色の組合せ」のことです。
(「赤 / 青緑」「黄色 / 青紫」など)

例えば、ホームページが、オレンジのトーン多めであれば、バナーは補色の青・紺色を使うと正反対に位置する色(不規則性)ほど目立ちやすくなります。

補色

5. あえて文字だけにする

写真などのコンテンツが多く並んでいる際に有効なテクニックとして、あえて文字だけの不規則性を出すことでユーザーの目を引くポイントになります。

あえて文字だけにする

6. 立体的にする

先ほどの写真と同様に、デザインのパターンが多い場合、「立体感・質感」を出すと効果的です。
以下では、平面的なデザインの中に立体的なデザインを加えました。

立体的にする

まとめ

デザインは、その人の感性や経験だけでなく、今回のような規則性やルールに基づいて構成される場合が多いです。
その中で、デザインの基礎として規則性は不規則性を意識した「情報整理」が重要です。

運営者がアピールしたい情報を自然に協調するということを心がけたデザインにしましょう。