【比較で理解】デザイン4原則を取り入れたバナーデザイン4選

実は、私たちが普段見ている大半の広告、チラシ、YouTubeのサムネイルにバッチリ取り入れられているので、デザインを学ぶ上では欠かせない知識になります。

逆に、デザイン４原則を蔑ろにしてしまうと、制作物の違和感に気づかなかったり、上手く表現できない理由がわからず、修正ループにハマる可能性が出てきます。

感覚も大事ですが、「この部分は、こういう目的でデザインされているから、見る人にこんな印象を与えられる」と理論的に言語化できた方が、「お、この人スゲーな」ってなりませんかね？（実際、そう言われたことも…）

この記事では、クライアントに「チビネさんは何でこのデザインが良いと感じたの？」と聞かれた時に、納得感ある返答ができるようになるので、きっとデザイナーとしての信頼感もグッと上がるはずです！

ぜひ一緒に学んでいきましょう！

デザイン4原則

近接

• 一緒になるものはくっつける
• 一見して何がセットか分かる
• 読むのがラクになる

近接性は関連性を視覚的に示す効果があります。

• SNSプロフィールページ
  アイコン、名前、自己紹介テキストがひとまとまりになっている。これによりユーザーは一目でその人の基本情報を理解できます。
• ウェブサイトのメニューバー
  関連する情報（ホーム、お問い合わせ、商品情報など）が一箇所にまとめられていて、探しやすくなっています。
• 漫画の吹き出し
  同じキャラクターのセリフが一つの吹き出し内にまとめられていることで、誰が何を話しているかがわかりやすくなります。

整列

整列はデザイン要素が他の要素に対してどのように位置づけられるかを示す原則です。

• きれいに揃えて統一感
• すっきりした見た目
• 見つけやすく読みやすい

• スクールの時間割
  時間や科目、教室がきれいに揃っていて、一目で何時に何の授業がどこであるかがわかります。
• ブログの見出し
  見出しやサブ見出しが左揃えになっていることで、文章の構造がわかりやすくなります。
• メニューリスト
  料理名と値段がきちんと整列していることで、価格を比較しやすくなります。

反復

反復原則は一貫性と認識性を強化します。

• ブランドのイメージがパッとわかる
• 一貫性があると安心感
• 何がどうなるか予測できる

• ブランドロゴ
  どのページでもブランドロゴの色や形は同じ。これによりブランドの一貫性が保たれています。
• ウェブサイトのボタン
  「購入する」ボタンが全て同じ色と形状であることで、どこをクリックすればいいのかがわかりやすくなります。
• スライドプレゼンテーション
  全てのスライドに同じフォントや色を使用することで、全体の一貫性が保たれ視聴者にとって親しみやすくなります。

対比

対比は視覚的な違いを強調することで、情報を際立たせる原則です。

• 目を引くビジュアル
• 何が大切かが一目瞭然
• 分かりやすさがアップ

• セールのポスター
  「SALE」という文字を大きく赤色で描くことで、他の情報と対比させて目立たせています。
• 書籍のタイトル
  本のタイトルや著者名を大きく、または太字にすることで、他のテキストと対比させ、目立たせています。
• ウェブサイトのCTAボタン
  購入や問い合わせ等、ユーザーに特定のアクションを促すボタンを他の部分と色を変えるなどして目立たせています。

これらの原則は単独で使うだけでなく、複数組み合わせて使うことで、より効果的なデザインを作り出すことが可能です。デザインは視覚的なコミュニケーションの一形態なので、これらの原則を使ってメッセージを明確に伝えることが重要です。