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

基本的なレイアウト

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

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

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

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

カラム(段組)について

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

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

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

１カラム

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

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

２カラム右サイドバー

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

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

２カラム左サイドバー

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

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

３カラム

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

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

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

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

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