MENU

無料相談

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. デザインの基本となる「4大原則」

サイト職人スタッフブログ

デザインの基本となる「4大原則」

ac0c7c0cd0b79c687e2632cc0e1cb038_s見やすく、内容が伝わりやすいレイアウトを作成するために知っておきたい、デザインの「4 大原則」と呼ばれるものがあります。ホームページのデザインに限らず、紙のデザインやPowerPointで資料を作成する際にも役立つ、デザインの基本知識です。
この原則を押さえてデザインすれば、ユーザーの知識や視覚に対してインパクトを与えることができます。今回はこの「4大原則」について解説します。

4大原則とは?

まずは、4大原則とは具体的にどういった原則であるのか、その違いや概要に着目しながら一緒に学んでいきましょう。

近接によるレイアウト

kinsetsu
近接とは、関係性の類似するもの同士の距離を近づけて配置し、それぞれに関係性があるものとしてユーザーに認知させることを意味します。近接を意識することによって、デザインがどういった意味をもっているのか、ユーザーに対してストレートに伝えやすくなります。

近接による技術を利用する際、大切なのは余白の使い方です。類似する関係性をもつものであるからこそ、余白を利用し、それぞれのパーツを個々に表現することが大切です。同じグループの情報は、まとめて表示するのが近接の原則ですが、その内部の境界を明確に表現することを忘れてはいけません。

はじめて近接を使用する場合は、グループで情報をまとめつつも、余白を大きめにとってレイアウトを検討していくと良いでしょう。

整列によるレイアウト

seiretsu
整列とは、テキストや動画、画像情報を左や右、中央などに規則正しく配置することを意味します。今、あなたの近くに会社のパンフレットはありますか?またはホームページでも良いので、開いてみてください。
配置を見てみると、画像とテキスト情報がどちらかに明確に振り分けられており、レイアウトに統一性があるのではないでしょうか。
「このホームページは読みやすいな」と感じた場合は、それは整列が明確に意識されているデザインです。

逆に、読みづらいと感じるホームページは、透明な破線を用いてデザインにズレがないか、細かくチェックしていくと良いでしょう。配置する上で1番やってはいけないのは、「なんとなく」で並べることです。1ピクセルのズレも許されないという意識をもってレイアウトを考えると、整列によるデザインスキルが格段に伸びていきます。

反復によるレイアウト

hanpuku
反復とは、視覚的なデザインをあらゆる状況で同じように用いることで、統一感を表現することを意味します。これは、デザインの「4大原則」の中でももっとも基本的なことなので、ぜひ覚えておいてください。基本的に、同一のホームページには同一のデザインを用います。たとえば、下記についてどんなことを感じますか?

 

【ホームページA】

  • すべてのページで背景色が統一されている。
  • すべてのページで同一のヘッダーが表示される。
  • すべてのページで同一のメニューが表示される
  • すべてのページで同一のフッターが表示される。
  • すべてのページで規則性のある見出しデザインが表示される。

 

【ホームページB】

  • すべてのページで異なる背景色が表示される。
  • すべてのページで異なるヘッダーが表示される。
  • すべてのページで異なるメニューが表示される
  • すべてのページで異なるフッターが表示される。
  • すべてのページで異なる見出しデザインが表示される。

 

「ホームページAを意識することなんて、当たり前のことじゃないの?」と思いがちですが、できていないケースは意外とよく見かけます。同じホームページであるにもかかわらず、背景色が変わったり、ヘッダーがなくなったり、見出しのデザインがページごとに異なるなど、よく調べてみるとデザインのミスがたくさん見つかります。

少しの違いかもしれませんが、こういったことに目を背けることなく修正するだけでもデザインに統一感が出ます。

対比によるレイアウト

taihi
デザイナーによって言い方は異なりますが、対比は強弱とも言われます。これは、情報に優先順位を付け(対比させ)、強弱を付けてわかりやすく表現することを意味します。自分自身は、自社の商品やサービスについて詳しく知っていても、ユーザーは把握していませんよね。

たとえば、商品ページに「今から10日以内なら、10%オフで購入できる!」と小さな文字で書いていても、読まれていないことが多いです。ほとんどのユーザーは流し読みが基本なので、「ここは絶対に読んでほしい!」というポイントについては、文字を大きくしてあげましょう。

また、決済ページへとつながるリンクは、画像でボタンにしたり、矢印を動かしたり、他の文字と対比、もしくは強弱をつけてあげると、ユーザーを誘導しやすくなります。

まとめ

4大原則を意識すれば、統一感があって分かりやすいデザインを作成することができます。どの原則も誰でも理解できるものばかりなので、高度な技術やツールがなければ分析や実装ができない、ということはありません。
デザインに悩んでしまった際には、一度この原則を思い出してみてください。

PAGETOP