其の34 「集合」と「近接」でスッキリ見せる | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル中級其の34

「集合」と「近接」でスッキリ見せる


1ページに載せる画像の点数や情報量が多いと、それらの要素と見出しなどとの関係がわかりにくく、散漫になりがちだ。これは「近接の法則」がきちんと則られていない場合によく見られる【1】。

近接の法則とは、関連が強い情報は極力近くに、逆に関連の弱い情報は遠く配置するというもの。つまり、これらの情報の関係をわかりやすくするため、余白を意識してレイアウトするのである【2】。

画像とテキストの間が、すべて等間隔のレイアウト
【1】画像とテキストの間隔が等間隔になってしまっているため、その関連がわかりにくく、まとまりがない。とくに一段目は文字が上の画像とセットなのか、下の画像とセットなのかがわかりづらい





関連する商品画像とテキストを近づけて配置したもの

【2】それぞれの関連性をわかりやすくするため、商品の画像とそのテキストがセットになるように近づけた。一段目と二段目の間にマージンができたので、画像とテキストの関連性が濃くなった

これらは画像とテキストの関係だけではなく、見出しと本文にも同じことがいえる【3】。また、それぞれの要素に対して異なるマージンをとると落ち着かないイメージになるため、サイトを設計する際にあらかじめマージンを決めておき、統一するとよい。

関連のある見出しと本文を近くに配置したもの

【3】各見出しを1ブロックと考え、見出しと本文を近づけることで関連性が強くなる。


お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在