2022.03.16(更新日: 2023.04.09)
デザイン4原則
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/design-1-768x512.png)
はじめに
ノンデザイナーズブックで学んだ「デザイン4原則」について、実際のサイトを例に挙げながら解説していきます。
デザイン4原則とは、以下です。
- 近接
- 整列
- 反復
- コントラスト
近接
関連している要素同士は近くに置くことで、関連性を示すことができます。
例えば、画像の赤枠部分は、キャッチコピー・タイトル・価格が近くにあることで、その商品について説明していることが分かります。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/スクリーンショット-2022-03-22-18.24.38-1024x582.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/スクリーンショット-2022-03-23-18.46.57-386x1024.png)
出典: 神戸牛の通販サイト
また、それぞれの商品の隙間は、お互いに別の商品であることを表しています。
整列
目に見えない線を意識するのが整列です。
例えば、こちらの京都タワーのサイトのフッター部分は、黒い線のように真っ直ぐの線を引くことができます。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/スクリーンショット-2022-03-22-18.46.16-1024x582.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/スクリーンショット-2022-03-23-18.52.15-586x1024.png)
出典: 京都タワー
反復
要素を繰り返すことで、同じサイトのパーツであることをユーザーに伝えることができます。
例えば、MUJI HOTEL GINZAのトップページにあるお知らせコンテンツは、
同じデザインを3回繰り返しています。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/スクリーンショット-2022-03-22-19.01.06-1024x408.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/スクリーンショット-2022-03-23-18.53.53-603x1024.png)
出典: MUJI HOTEL GINZA
同じデザインで統一することで、NEWSのコンテンツということをユーザーに伝えることができます。
コントラスト
ユーザーを飽きさせないための工夫がコントラストです。
例えば、こちらの赤枠で囲った引用部分は、グレーの背景に太字のダークグレーの文字が書いてあり、コントラストがはっきりとしています。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/スクリーンショット-2022-03-22-19.06.29-1024x582.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/03/スクリーンショット-2022-03-23-18.55.19-546x1024.png)
投稿ID : 1941
コメントを残す