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

「デザインの関わるすべての人むけ入門コース」の初めに今回お伝えするのは、「デザインの4つの基本原則」です。
やはりWebサイトであってもチラシやポスターであっても、すべてのデザインにおいて目指すべきは「見やすい」「分かりやすい」レイアウトであること。 原理原則を無視してむやみやたらに文字や画像を配置してしまっては分かりづらくなってしまい、結果的に「伝わる」デザインにはなりません。
そこで、その「レイアウト」に大きく関わるのが今回紹介する「デザインの4つの基本原則」。 基本原則をしっかりマスターし、これからのレッスンにつなげていきましょう。


デザインの4つの基本原則とは?

file

4つの基本原則とは、情報を分かりやすく整理し、伝わりやすいデザインを作成する上で守るべき「整列」「近接」「強調」「反復」の4つの原則のことです。

  • 上手く伝わらない

  • どこか違和感がある

  • 重要な情報がどれかわからない

  • など、デザインに関する課題があるときは、「整列」「近接」「強調」「反復」の4つの原則が守られていないケースが多いです

    これら4つの原則を1つひとつ理解していくことで、デザインを作成するときに「どういう課題があるのか」「課題をどうしたら改善できるのか」についてのイメージを持つことができるようになります。

    整列

    「整列」とは、並べて強い線を出すことで意味をつくる手法です。 しっかりと要素をそろえて配置されていることで情報が整理されて、分かりやすくなります。

    file

    上記のデザインだと、デザイン前はテキスト要素がそろっておらず、関連している情報であることが見たときに分かりづらくなってしまっています。
    そこで、縦に垂直に伸びる一本の線にテキストの左端を寄せるようなイメージで配置してあげることで、分かりやすくなります。
    file
    (ちょうど画面左側に引いた赤線に沿うような形です)


    近接

    「近接」とは、まとめることで強い意味をつくる手法です。 関連のある要素同士をまとめる(グループ化する)ことで、内容を直感的に理解することができます。

    file

    上記のデザインだと、デザイン前は全ての要素が縦に等間隔で並んでおり、どの要素同士が関連があるのかが分かりづらくなってしまっています。
    そこで、

  • 「Webデザインコース」と「デザインの4つの基本原則」
  • 「②近接」とその詳細説明
  • などと、関連のある要素同士の間隔を詰めてあげることで、“まとまり”が分かりやすくなります。


    強調

    「強調」とは、優先度で強弱をつけて意味をつくる手法です。 1つの要素のサイズを大きくしたり色にメリハリをつけることで他の要素との相対的な大きさが強調され、目立たせたい情報を印象づけることができます。

    file

    上記のデザインだと、デザイン前はどのテキストもほぼ同じサイズになっていて、「重要な情報が何か」がパッと目に入ってきません。
    今回目立たせたいのは「整列」「近接」「強調」「反復」のキーワード。
    なので、それぞれのキーワードのテキストサイズを大きくして、他のテキストと差をつけてあげることで、
    見るべき情報の優先度が整理されて、分かりやすくなります。


    反復

    「反復」とは、同じ意味の見た目を統一して意味をつくる手法です。 同じ位置にくり返し配置することで見た目に統一感が生まれ、安定感のある印象を与えることができます。

    file

    上記のデザインだと、デザイン前は下線や左線が入っているもの、キーワードだけ角丸四角形で囲われているものがあったりと、「見た目のルール」が統一されていません。
    そうするとそれぞれの要素が同じ粒度のことを言っているにも関わらず「違うもの」として見られてしまう恐れがあります。
    そこで、キーワードと説明部分のまとまりごとに同じサイズの角丸四角形で囲ってあげることで、統一感を生む必要があります。


    →次からのレッスンでは、それぞれの要素について詳しく解説していきます!

    おめでとうございます!🎉
    このチュートリアルはこれで終了です。
    次のコースを探す