【非デザイナー必見!】知っておくべきデザインの基礎法則6つ

非デザイナーだからこそ、知っておきたいデザインの基礎法則6つ

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

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

1 繰り返しの法則

繰り返しの法則

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

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

繰り返しの法則2

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

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

2. リズムを作る法則

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

リズムを作る法則

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

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

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

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

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

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

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

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

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

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

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

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

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

補色

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

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

あえて文字だけにする

6. 立体的にする

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

立体的にする

まとめ

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

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

このニュースを読んだあなたにおすすめ

LPOカリキュラム
ランディングページ(LP)はファーストビューで興味を惹こう
ランディングページ(LP)の構成について

このニュースに関連するカリキュラム

LPOカリキュラム
LPO(ランディングページ最適化)で最も重要なランディングページの構成をユーザーの心理やノウハウを元に説明します。さらに、LPOの効果を高めるために必要なA/Bテストの方法も併せてどうぞ。
Profile

臼井 翼

Webマーケティング事業部 編集ディレクター Webサイト制作会社、SEOコンサルタントを経て、ferretでは編集・執筆に従事。 「分かり易くて、今日から活用できる情報発信を目指します!」

期間限定!無料資料ダウンロード
「Ferretマーケティングプロセス」で売上げアップ!

  • ・売上が上がらない
  • ・何をすればいいか分からない
  • ・忙しくてWebの優先順位が低い

このような悩みを抱えていませんか?

そのような問題は「Ferretマーケティングプロセス」を読んで解決しましょう!今なら、このノウハウの詰まった資料を無料公開中!

Netmarketing

関連まとめニュース

Normal

あなたもやってない!?ビジネスメールでよくある間違い10選

メールはビジネスにおいて、必須の連絡ツールであり、会社の内外を問わず、様々な相手にメールを送る機会があります。 とても重要なビジネスメールですが、気づかないうちに相手に対して失礼な言葉や、間違った言葉を使っていませんか。よくある間違い10選をまとめました。

まとめニュースView : 6779飯高悠太
Normal

完全無料!記事作成の時に使える文章校正・リライトツール4選

今回は、誤字脱字のチェックを簡単に行える無料の校正ツールと記事作成時に便利な無料ツールも合わせてご紹介します。 記事を作成されている方、記事作成は外注してるけど最終チェックを行わなければいけない方は参考にしてみてください。

まとめニュースView : 3191水落 絵理香
Side baner

もっとferretを活用する

ウィークリーランキング

1Thumb
Googleアナリティクスのビジュアル分析11選!ここまで出来る、Tableauに負けてない!
2Thumb
あなたもやってない!?ビジネスメールでよくある間違い10選
3Thumb
マンガで楽しく学べるWebマーケティングのジャンル別9選
4Thumb
【基礎・図解付き】Googleアナリティクスのページ抽出テクニック!ドリルダウンから正規表現まで。
5Thumb
クックパッドに学ぶ事業戦略!こんな事業もやっていた。