I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

I'll be NET BLOG

なにかの役には立つかもしれない。

トップページ > HP制作 > ホームページの基本的なページレイアウト

ホームページの基本的なページレイアウト

ホームページのデザインは日々刷新されていくものですが、トレンドに左右されないベーシックなデザインがあります。
ベーシックであるが故に閲覧者が操作しやすく、比較的見やすいデザインであるといえます。

どのようなレイアウトが基本であるかを確認することは、ユーザビリティの高い画面を作成する上で非常に重要です。

ベーシックなページレイアウトの代表例は以下のとおりです。

1カラムのページレイアウト

1カラムのページレイアウト

デモ画面

1カラムのレイアウトでは、シンプルでわかりやすく、コンテンツが読みやすいというメリットがあります。
ナビゲーションに邪魔されることなく、画面を大胆に利用できるので、大きな画像やボタンを配置することもできます。

クリックして別の画面に遷移するのではなく、1画面内でスクロールをさせることで閲覧者に多くの情報を伝える時に向いています。
最近では、1カラム内にサイト内で告知したい全ての情報を掲載するランディングページも多く見受けられます。

パソコンだけでなく、タブレットやスマートフォンでも見やすい画面を比較的構築しやすいのが1カラムデザインです。

2カラム左ナビゲーションのページレイアウト

2カラム左ナビゲーションのページレイアウト

デモ画面

2カラムのレイアウトでは、右と左のどちらにナビゲーションを配置するかによって、印象を大きく変えることができます。

ブラウザを縮小したとき、右側はスクロールバーをずらさないと見えなくなるため、主に利用させたいコンテンツは左に配置するのがベターです。
しかし、画面の趣旨ナビゲーションを利用すること(誘導)である場合は、左側にナビゲーションを配置した方が良いかも知れません。

誘導を第一に考えるとすると、実際のマウスの動きを気にする必要があります。
一般的に右利きの人が多く、マウスが右に置かれることを考えると、左側にナビゲーションがあるのと右側にナビゲーションがあるのとでは、右側にナビゲーションがあったほうがクリックしやすいという意見もあります。
しかし、手を動かすより先に画面を表示した時に働くのは、目の動きです。

横書きの画面(チラシ、リーフレット、書類、モニタ)を見た時、人の視線はZ型に動くと言われています。
左上から右上、右上から左下、左下から右下へ情報を収集していくのです。
つまり、下図のとおりです。

Zの法則で見る2カラム左ナビゲーション

この図から見て分かる通り、2カラム左ナビゲーションの画面では、視線の起点がナビゲーションに置かれます。
左側にナビゲーションが配置されていることにより、閲覧者は画面のを移動しやすくなると思われます。

2カラム右ナビゲーションのページレイアウト

2カラム右ナビゲーションのページレイアウト

デモ画面

2カラムのレイアウトでは、右と左のどちらにナビゲーションを配置するかによって、印象を大きく変えることができます。

ブラウザを縮小したとき、右側はスクロールバーをずらさないと見えなくなるため、主に利用させたいコンテンツは左に配置するのがベターです。
画面の趣旨コンテンツの紹介である場合は、左側にコンテンツを置き、右側にナビゲーションを配置した方が良いかも知れません。

一般的に右利きの人が多く、マウスが右に置かれることを考えると、右側にナビゲーションがあった方が次の画面へ遷移しやすいという意見もあります。
手の動きだけでなく、画面を見た時の目の動きも確認しておきましょう。

横書きの画面(チラシ、リーフレット、書類、モニタ)を見た時、人の視線はZ型に動くと言われています。
左上から右上、右上から左下、左下から右下へ情報を収集していくのです。
つまり、下図のとおりです。

Zの法則で見る2カラム右ナビゲーション

この図から見て分かる通り、2カラム右ナビゲーションの画面では、視線の起点がコンテンツに置かれます。
コンテンツをまず把握することにより、閲覧者はこのページの趣旨をすぐ理解することができます。
コンテンツを把握すると、次の画面への遷移もしやすくなり、右側に効果的なナビゲーションを配置することにより、自然とクリックも増加することが期待されます。

3カラムのページレイアウト

3カラムのページレイアウト

デモ画面

3カラムのレイアウトでは、中央にコンテンツを表示することが多いです。
2カラム左ナビゲーション、3カラム右ナビゲーションの利点をどちらも押さえたレイアウトといえます。

デメリットとしては、ナビゲーションが多いことで情報が煩雑になり、コンテンツの掲載スペースが狭いことでアピール力が落ちることです。
ナビゲーションに自然と重きが置かれてしまうので、他ページヘのリンクやクリックさせたいコンテンツの掲載など、ナビゲーションを有効に活用したい場合はこちらを選択するとよいでしょう。

 

 

記事移動

関連記事

メニュー位置から見るホームページの基本的なレイアウト(2)

メニュー位置から見るホームページの基本的なレイアウト(1)

スクロールすると特定の位置で固定されて更に スクロールすると固定が解除されるナビゲーションjQuery

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

日記検索

エントリー検索フォーム
キーワード

Feed

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】