「見えない線」に沿ってページをレイアウトしよう:: ウェブデザインの基本マナー

見やすく整ったデザインに絶対不可欠なのが、「目に見えない線」に沿ったページレイアウト。これをおろそかにすると、せっかくの情報も非常に伝わりにくくなってしまいます。

見えない線に沿ってページ内の要素をレイアウトすることはとても重要。ただ、なにぶん「目に見えない」ので（笑）、その心をご説明するのが難しい・・・（^ ^；）

そこで、百聞は一見にしかず！

例として、架空の会社「ZZZ商事株式会社」のシンプルなトップページを複数パターン作ってみました。
見えない線を意識したデザインと無視したデザインとでは、見やすさにどれほどの違いが出てくるか。実際に見くらべてみてください。

見えない線を完全に無視したページレイアウト
分かりやすくするために多少誇張してありますが、このレイアウトだと非常に見づらくないですか？　ページ内の要素が無秩序に配置されていて、どこを見てよいのか分からなくなります。

画像を拡大する>>

見えない線を意識したページレイアウト
メニューやロゴ、本文を「見えない線」にピッタリと沿う形でレイアウトしてあります。それぞれの要素が左寄せで整然と並び、上のデザインにくらべてはるかに見やすくなっています。

画像を拡大する>>

ページ内にハッキリ存在する「見えない線」
このレイアウトの中に何本の「見えない線」を見つけられましたか？
このようにシンプルなページの中にも、タテ・ヨコに伸びる複数の見えない線が存在します。

画像を拡大する>>

企業のサイトには、「見えない線」に沿ったデザインが必ず適用されています。そもそも、Webデザインに限らずおおよそすべてのデザインに当てはまる大原則だからです。
試しに、以下のサイトで「見えない線」を探してみてください。たくさん見つかるはずです。

このエントリーのトラックバックURL :

メルマガ「嫌われないWebデザイン」
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る

Powered by

「見えない線」に沿ってページをレイアウトしよう