• サイトマップ

レイアウト・4つの原則

出版物のデザインにおいて、とても有名な4つの原則があります。 以下に示すこの原則は、誌面上での要素にあてはまり、 レイアウトにおける大原則となっています。

1. 近接の原則
2. 整列の原則
3. 対比の原則
4. 反復の原則

Webデザインにもこの4つの原則はそのまま当てはまります。 これらの原則を守るだけで、あなたのWebサイトは劇的に変わるでしょう！

近接の原則

関連が強い情報は近くに、逆に関連の弱い情報は遠く、 同列の情報ならば等間隔に配置しましょう。 要素と要素の間にある距離はその情報の関連性を判断するための重要な手がかりになります。

上記の関係を強調するためには余白をきちんととることが重要です。 ページの周辺、要素と要素の間の余白を意識して配置しなければ関係がぼやけてしまいます。

fig.1 fig.2

上のfig.1とfig.2を見てください。黒い四角が画像、その下の数字がテキスト、 番号が関連を表しています。

fig.1は画像とテキストが等間隔なのでその関連がぼやけています。 特に1と2の文字は上の画像と下の画像のどちらに関係しているのかわかりません。 fig.2では関連する画像とテキストの距離を近めました。 ことらの方がわかりやすいですよね。

整列の原則

スッキリとしたレイアウトを実現するためには視線の基準線 を引かなければなりません。 基準線といっても実際に線を引くわけではなく、 要素の端をそろえることで視覚的に基準線をユーザに意識させることをいいます。

この基準線は簡単に設定できます。 グリッドシステムを活用しようで紹介したように そのグリッドの左や右、上や下に要素をそろえるだけでよいのです。 要素の画面全体の配置はグリッドの調整で行うのがよいでしょう。

fig.1 fig.2

上のfig.1とfig.2を見てください。黒い四角が画像、線がテキストを表しています。

fig.1ではタイトルの部分の真ん中に一本。2つの画像の真ん中に一本、 その画像に揃えてテキストがくっついているだけのレイアウトです。 よく見るレイアウトですが、基準線がはっきりしないため雑然とした感じです。 fig.2では縦の基準線を意識してタイトルとその下の要素を揃えました。 fig.2の方がすっきりしていますよね。

対比の原則

重要な要素は目立たせるようにしましょう。フォントの大きさや形、 色などで要素を目立たせることでユーザに直感的に情報を与えることができます。 また、メリハリをつけたデザインはWebサイトを引き締め、 1つのWebサイトとしてのまとまりを生む結果となります。

fig.1 fig.2

上のfig.1とfig.2を見てください。黒い四角が見出し、線がテキストを表しています。

fig.1では同じような配置なので情報の中身を判断しないと重要度を確認できません。 しかし、fig.2のように重要な要素にコントラストをつければ そのページ内の情報の全体像を伝えることができます。

反復の原則

色や形などに特定のルールをつくり、 ページ内で繰り返すことでユーザに視線のリズムを与えることができます。 これによって、要素の関連性などを強調することができます。

fig.1 fig.2

上のfig.1とfig.2を見てください。黒い四角が見出し、線がテキストを表しています。

fig.1では同じ性質をもつ要素をバラバラのレイアウトで表示しています。 これでは同じ要素なのかどうかわかりません。 fig.2では同じレイアウトを適用しているのでよりスッキリ、 同じリズムで情報を並べています。

よく考えたら当たり前のこと

これらの原則はよく考えたら当たり前のことです。 あなたもここまで読んで、そういえばそうだよなぁと思いませんでしたか？ でもこの当たり前のことを実践できていないWebサイトが多い！ 私も例外ではありません(^^;) これらの原則を常に意識してレイアウトしてみてください。 あなたのWebサイトは劇的に変わるでしょう！