センス不要で資料を見やすく｜デザインの4原則

2024年10月8日 12:13

センスがあって、いいですね

って言われたことのあるデザイナーの方、多いんじゃないでしょうか？

でも、ルールさえ覚えれば、誰だって見やすい資料を作ることが出来ます。そのルールというのが、

です。

ひとつひとつみていきましょう。

関連する要素を近づけてグルーピングすることで、
各要素の関連性が明確になります。

上記例はECサイトなどでよくある商品一覧のレイアウトです。
構成要素は

です。

これらは関連性が強いので、各要素間の余白を狭く取ります。
逆に各商品コンポーネント同士は関連性が弱いので、余白を広く取ります。

基準となる見えない線に沿って要素をレイアウトすることで、
情報の視認性を高くします。

実際にラインを装飾として引いても良いですが、
装飾だらけになるとゴチャついて視認性が低くなってしまうので、
見えない線を意識するのがコツです。

要素の一貫性を持たせて繰り返すことで、
情報の取得にかける労力を軽減します。

要素の重要度に合わせて、装飾に一貫性を持たせます。

大見出し
文字サイズ：30px　文字色：ブラック　装飾：アンダーライン

中見出し
文字サイズ：20px　文字色：グリーン　装飾：左側に矢印アイコン

のように、ルールを定義します。

要素の優先度によって大胆に強弱をつけることで、
重要な情報に素早くアクセスできるようにします。

強弱をつける方法には様々あります。

これらを駆使して、重要度の高い情報、重要度の低い情報にメリハリをつけて、情報の取得の手助けをします。

これらは単純なルールなので、覚えるだけで見やすいデザインの実現が可能になります。