デザインの基本!4つの基本原則

私はデザインの学習は、「デザインの基本4原則」

を学ぶことから始めました。

この4つの原則を取り入れることで、見やすく綺麗なものになります。

デザインをこれから勉強したいという方が最初に学ぶべきことだと思います。

デザインをする上でとても大事な基礎なので、知っている方も復習しましょう。

 

            

 

          [目次]             

  1. 近接
  2. 整列
  3. コントラスト
  4. 反復
  5. まとめ

 

 

 

 

1.近接

近接とは、「関連するもの同士を近くに配置し、関係の薄いものは遠ざける原則」

です。

 

 

下のメニューを見て、皆さんはどう思われますか?

f:id:tamesue:20170721173437p:plain

 

上のメニューの写真と下のメニューの写真、どちらが300円かわかりにくいですよね。

 

 

 

では、近接の原則に従って、関連する情報を近づけると…

f:id:tamesue:20170721173750p:plain

メニューが一気にわかりやすくなりました。

このように、関係するもの同士を近づけて、さらに一つ一つを四角で囲み、

グループ化するとより見やすくなります。

 

 

 

2.整列

整列は、「決めた基準に合わせて位置を揃える原則」です。

 

 

クロスセル株式会社のホームページの一部を例にして、説明します。

 

 

こちらは、左揃えになっています。↓

f:id:tamesue:20170721175146p:plain

(クロスセル株式会社ホームページ  SITEMAP抜粋)

 

 

 

 

こちらは、中央揃えになっています。↓

f:id:tamesue:20170721175402p:plain

(クロスセル株式会社ホームページ メニューアイコン抜粋)

 

 

オレンジ色の線は、文字やアイコンがきちんと揃っていることがわかるように

私が付け加えたものです。

 

このように、実際は見えないある線を基準として全体を揃えることで、

整列の原則が活かされます。

 

 

 

 

3.コントラスト

コントラストは、「ある違い(色、フォント、形、サイズなど)を出すことで、

強弱・メリハリをつける原則」です。

 

 見出しだけを太字にしたり、色を付けて目立たせているのをよく見ますよね。

それは、コントラストの原則を使っています。

 

 

 

下のナビゲーションメニュ―に選択中のメニューに色がついていると、

一目でどのページを今開いているのかわかりますね。

 

f:id:tamesue:20170721175941p:plain

 

一つだけ違いを出すことで、見る人に印象付けることができます。

 

 

 

4.反復

 反復は、「作品を通して、ある特徴(色、フォント、整列など)を繰り返すことで、

統一感・一貫性を保つ原則」です。

 

 

 

こちらは、クロスセル企業情報ページの一部で、メニューアイコンです。

(整列の例と同じものです)↓

 

 

f:id:tamesue:20170721182458p:plain

f:id:tamesue:20170721182428p:plain

 

 

円の色と円の中のアイコンの色、文字のデザイン、表示位置と、

3つのアイコンとも同じデザインを繰り返しています。

 

反復は、繰り返すことで統一感を出すのがポイントです。

 

 

 

5.まとめ

デザインの基本原則を学び、以前はあまり気にしていなかった細かい点にも気を付けて、見やすく作ることを意識しながらデザインを作成するようになりました。

 

4つの原則のうちのどれか一つだけではなく、うまく組み合わせることで

相乗効果を生み、より良いデザインとなります。

 

また、原則はあくまでも基本であるので、原則を破ったデザインにすることも可能です。

でもその場合は、4原則とも知っている上で意識的に原則を破るようにしましょう。

 

今回は、ホームページのデザインをメインに例に挙げましたが、良いデザインは

原則をうまく取り入れたものになっています。

4原則がどのように使われているか注意しながら色々見てみると参考になると

思います。

 

 

 

 

【参考文献】

Robin Williams(2016)『ノンデザイナーズ・デザインブック [第4版] 』