ki-hi-ro.com WEB制作フリーランスエンジニア
  • Service
    • WEBサイトの更新サポート
    • 新規サイトコーディング
  • Introduce
    • メッセージ
    • 自宅兼事務所
    • Twitter
  • Blog
    • 技術ブログ
    • 学習ブログ
    • 雑記ブログ
  • Others
    • スケジュールのお知らせ
    • お問い合わせ
    • WEBに関する無料相談
  • Top
  • Service
  • Introduce
  • Blog
  • Contact

デザイン4原則

ノンデザイナーズブックで学んだ「デザイン4原則」について、実際のサイトを例に挙げながら解説していきます。

デザイン4原則とは、以下です。

  • 近接
  • 整列
  • 反復
  • コントラスト

近接

関連している要素同士は近くに置くことで、関連性を示すことができます。

例えば、画像の赤枠部分は、キャッチコピー・タイトル・価格が近くにあることで、その商品について説明していることが分かります。

出典: 神戸牛の通販サイト

また、それぞれの商品の隙間は、お互いに別の商品であることを表しています。

整列

目に見えない線を意識するのが整列です。

例えば、こちらの京都タワーのサイトのフッター部分は、黒い線のように真っ直ぐの線を引くことができます。

出典: 京都タワー

反復

要素を繰り返すことで、同じサイトのパーツであることをユーザーに伝えることができます。

例えば、MUJI HOTEL GINZAのトップページにあるお知らせコンテンツは、
同じデザインを3回繰り返しています。

出典: MUJI HOTEL GINZA

同じデザインで統一することで、NEWSのコンテンツということをユーザーに伝えることができます。

コントラスト

ユーザーを飽きさせないための工夫がコントラストです。

例えば、こちらの赤枠で囲った引用部分は、グレーの背景に太字のダークグレーの文字が書いてあり、コントラストがはっきりとしています。

出典: 【公式】Makonari Inside Stories(インサイドストーリーズ)

関連記事

2022.04.23 WEBデザイン デザインカンプを作ってみます

サービス一覧

  • WEBサイトの更新サポート
  • 新規サイトコーディング

自己紹介

  • メッセージ
  • 自宅兼事務所
  • Twitter

ブログ

  • 技術ブログ
  • 学習ブログ
  • 雑記ブログ

その他

  • スケジュールのお知らせ
  • お問い合わせ