Webふぉれすと
Web制作、Webデザインのスキルアップに役立つ情報をお届けします!
みんなが癒され、元気になるWebを目指します。
サイトマップはこちら
PI-chicc,PA-chicc
うぇぶ実験室
ふぉれすとCafe
NANAKORO*BEANS
くりっくりんく
イベント・セミナーを探せ!
ふぉれすとかわらばん
がしがし通信
今日のスタッフ
スタッフプロフィール
ご意見ご感想フォーム
トップページにもどる
Webふぉれすとトップ > うぇぶ実験室

 レイアウト5つの法則

【実験準備】サンプルページ
今回実験に使うページは横幅を650px、背景は白(#FFFFFF)で作成。
サンプルページはテキストサイズの指定無し。ただし、テキストの色は指定。


【実験1】グループ化する
内容から関連のある情報をグループに分ける。
それぞれのグループが見た目にわかりやすいように距離を近づける。文字の大きさを変える。

グループ化

今回は2つのグループに分ける。
○グループ1 → タイトル+画像
今回タイトルと画像はページ全体のイメージを決めるものとして、ひとまとまりに表示する。
○グループ2 → メニュー
メニューはさらにインデックスとメニューに分け、文字の大きさを指定して区別する。さらに、全体が混ざって見えないようにひとまとまりごとにある程度の間隔をもたせる。

▼グループ化するに当たって、それぞれのグループ間の距離がけっこう大切であると感じました。<p>や<br>を意識的に使って、一定の法則(例えばメニューの間は<br>を2つ入れるのような)を決めて間隔をとっていくと見やすく、グループ化もわかりやすくなります。
▼サンプルページでただ何気なく作ってしまった画像もタイトルとグループ化したことによって生きてきました 。


【実験2】揃える
見やすいように、また、情報を理解しやすいように文字、画像などを整列させる。

○メニューがバラバラに並んでいて見づらいので縦のラインを揃える。

○見やすいように幅を狭くしてページの左側に余白を作る。
○余白に合わせて画像のサイズを変える(揃える)

メニューを揃える 画像を揃える

▼縦の列が揃っていないと雑然として見づらいものが出来上がってしまい、文字を追っていくことにストレスを感じやすくなるので、まず、縦のラインを意識して揃えていくといいと思います。
▼揃えることと同時に読みやすい幅や間隔を意識することが大切だと思います。
▼とにかくなんでもかんでも揃えてしまうというのは私のようなWebデザインの駆出しにとっては、まず覚えておくといいコツだと思いました。


【実験3】メリハリをつける
メリハリをつけて見る人の注意をひきつける

○タイトルは単純に大きく表示する。
○左側の余白も使って、タイトル(タイトル+画像)をより印象的なものに変える。

メリハリをつける
メリハリをつける

▼目立たせたいものは大胆に大きく表示すると目が迷わず見やすくなると思います。
▼タイトルを大きく表示したことによって、トップページとして存在感とインパクトがでたのと同時に、安心感も生まれたように思いました。
▼特に派手な装飾しなくても、少し大きく表示するだけで随分印象が変わるものだと思いました。


前のページへ
うぇぶ実験室トップ
続きを読む

Copyright(c)2002-2004 Step-First All rights reserved. [About WebForest]
E-Mail:webforest@step-first.com