ワタナベウェブ初めての方へ > ホームページのレイアウト

ホームページのレイアウト

ホームページは、チラシや印刷物のように歴史は長くはないですが、いろいろなホームページ制作者が長年試行錯誤して、機能性と見た目の面などで好ましいレイアウトというのが作られてきました。長い年月の中で、ホームページのレイアウトの基本型が確立されました。
もちろん、今日現在も、新進気鋭の制作者さんが新しいレイアウトを試していますが、それらは、検索エンジン対策を考えなくてもよいホームページや、ホームページの更新を制作会社で行う場合であることがほとんどのため(制作者だけが分かるように作っても大丈夫)、ビジネス、ご商売のホームページでは、基本型のオーソドックスなレイアウトを使用するのがよいと思います。

ワタナベウェブでのホームページ制作は、基本型のレイアウトで作成することがほとんどになりますが、テンプレートを使用しませんため、レイアウトはお客様のご希望で多少カスタマイズして制作可能です。

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

下記のようなレイアウトが基本的なレイアウトになります。


ヘッダー

左側にサイト名(会社名・屋号)を置きます。
右側には、通常はお問い合わせ電話番号やお問い合わせメールフォームへのリンクを置きます。

上部メニュー(メインメニュー)

メニュー項目を置きます。
トップページ、サービス内容、会社概要、お問い合わせ、などの項目を置きます。この項目名は、ホームページにより異なりますが、多くはこのような項目を配置します。

左側メニュー(サブメニュー)

上部メニューは、MAX6ヶ〜7ヶ程度置けますが、上部メニューに置ききれないものを左側メニューに配置します。
また、左下には、会社概要(会社名、住所、電話番号)などを記載しておくとよいです。
TwitterやFacebookの埋め込みもこの個所に配置することが多いです。

ホームページによっては、このメニューが右側にある場合もあります。もちろん右側に配置で制作も可能です。
左側と右側のどちらがよいかですが、これは現在でも、まだ統一されていなく、好みになる面が大きいです。どちらかというと左側のほうがベーシックなため多いです。右側は利用する人が若干少ないため新鮮さがあると思います。

コンテンツ

ホームページの内容部分になります。
トップページには、大きなメイン画像を置くと見た目がきれいに見えますのでおすすめになります。

フッター

著作権情報などを記載します。

以上になります。

私のこのホームページもこのレイアウトを元に作成されています。

ホームページの横幅

ホームページの横幅(上記ですと、ヘッダーの横幅がホームページの横幅になります)は、基準がありまして、目安はYahoo! JAPANのホームページの横幅950pxが基準になります。
基本的にこの横幅で作成しております。

これより横幅が広いと古いモニタ(スクエア、ワイドモニタでないモニタ)などで見た場合、画面がはみ出てしまうことがありますので、あまり広くしすぎないほうがベターになります。
2014年現在では、最大に横幅が広いホームページで横幅1000px程度になります。

その他のレイアウト

1カラムのレイアウト


左側メニューがないレイアウトになります。
先ほどのレイアウトは、左側にメニュー、右側にコンテンツがありました。左右にブロックが分かれていました。このようなレイアウトを2カラムと呼びます。左に1カラム、右に1カラムの2カラムです。

このレイアウトは、左側にメニューがないコンテンツ部分のみの1カラムのため、1カラムのレイアウトと呼ばれます。

上部メニューで全てのページに行けるようになりますので、ページ数が少ないホームページにはこのレイアウトが使用されます。
しかし、検索エンジン対策の面では、ページ数が多いほうが有利になりますので、出来ればページ数が多くなる2カラムのレイアウトのほうがベターになります。

見た目的には1カラムのこのレイアウトが一番きれいに見えるのはありますね。

3カラムのレイアウト


左側にも、右側にもサブメニューがあるレイアウトです。左側、中央、右側で3つのカラムがありますので、3カラムレイアウトと呼ばれます。

Yahooのトップページや、楽天などポータルサイトによく使用されます。情報量の多い、大規模なホームページに向いています。

欠点ですが、3カラムの場合、内容部分の真ん中の部分の横幅が狭くなってしまい、見づらくなってしまうのと、スマートフォン対応(レスポンシブWebデザイン)の場合、レイアウトが変になってしまう(向いていない)のがあります。

内容部分の真ん中の部分の横幅が狭くなってしまうデメリットがあるため、近年は3カラムは一部例外を除き、使用されなくなりました。ほとんどのケースで2カラムで作成されるようになりました。

斬新なレイアウト

格子状のボックスが敷き詰められたレイアウト(可変グリッドレイアウト)や縦にスクロールすると背景画像が入れ替わったりする縦長のホームページ(パララックス)などあります。
これらは、一時的な流行かもしれなく、また検索エンジン対策の面でもあまりおすすめでなかったりしますので、いろいろと実験出来る大企業さんのホームページ向けかなと思います。

↑