1. ホーム > 
  2. 制作について > 
  3. レイアウトについて

レイアウトについて

ホームページの制作において大切なデザインのレイアウトにつてご説明いたします。

基本的なレイアウト

一般的にホームページのデザインのレイアウトは、ヘッダー、メイン、フッターの領域があり、以下の図のようになります。

ヘッダー

メイン

ヘッダーは、ホームページの名前やナビゲーションメニューなど全てのページで同一のものを表示します。ナビゲーションメニューはヘッダー以外にもメインの左側や右側に表示する事もできます。

メインは、ホームページの内容が表示されます。ページ毎に内容が変わります。

フッターは、コピーライトやナビゲーションメニューで表示していないメニューなど全てのページで同一のものを表示します。

カラム(段組)について

メインの領域を縦に区切って使用することもできます。
区切らない場合は1カラムまたはシングルカラムと言い、2つに区切ると2カラム、3つに区切ると3カラムとそれぞれ言います。2つ以上に分けた場合はメイン以外をサイドバーと言い、サイドバーが右にあれば、右サイドバーとなります。

1カラム

ヘッダー

メイン
2カラム

ヘッダー

左サイドバー
メイン
2カラム

ヘッダー

メイン
右サイドバー
3カラム

ヘッダー

左サイドバー
メイン
右サイドバー

目的に応じてカラムを選びます

ホームページの目的によってカラムの数を選択します。左から始まる横書きの場合は視点の開始ポイントは左になりますので、左側に特に注目して欲しいものを配置します。その事を念頭においてカラムの数を選択します。

1カラム

メインの内容をじっくり読んで欲しい場合や写真を大きく見せたい時に使用するレイアウトです。また表示領域の狭いスマートフォンでは1カラムになります。

メニューやバナー(広告)などを表示したりすると目移りしてしまい、内容に集中できなくなるのを防ぎます。そのため商品の購入やお問い合わせをもらうなど訪問者にアクションを起こさせるのが目的の場合に適しています。
シンプルで見やすのですが、他のページに注意を引く情報を表示していないため、読み終えたら帰ってしまうと言うデメリットもあります。

2カラム右サイドバー

このレイアウトは1カラムの特徴に近いです。まずはメインの内容をじっくり読んで、読み終えたら右サイドバーの情報に注意を引き、多くのページを読んで長く滞在してほしい場合に適したレイアウトです。

ブログに多いレイアウトで、メインに記事を表示して右サイドバーに最近投稿した記事や関連記事を表示したりして関心を促します。

2カラム左サイドバー

左サイドバーにメニューやバナーを表示して目的のものを探しやすくして操作性を良くしたレイアウトです。

通販サイトに多いレイアウトで、左側に商品のメニューを表示して目的の商品を探しやすくしています。
メニューやバナーが目に入ってしまうため、メインの内容をじっくり読んでもらうには向いていません。

3カラム

一度に多くの情報を表示したい時に使用するレイアウトです。

メインの領域が狭くなり、全体として窮屈な感じになってしまいますし、逆に情報が少なすぎるとスカスカな感じになってしまいます。

スマートフォンに適したレイアウト

スマートフォンやタブレットなど画面の横幅が小さい場合は、ヘッダーのナビゲーションメニューは3本線のマーク(ハンバーガーメニュー)になり、クリックするとメニューが表示されます。

レスポンシブデザインでスマートフォンに対応するには、シングルカラムか2カラムで右サイドバーのレイアウトが良いと思います。例えば2カラムの場合は、メインの下に右サイドバーが表示され、以下の図のようになります。

ヘッダー

メイン
右サイドバー