HOME > ホームページのレイアウトを考える
自分のホームページを持とう

ホームページのレイアウトを考える

ホームページのレイアウトについての解説

このページではサイトのレイアウトを作っていく時に知っておいたほうがいい事柄、基本的なホームページのレイアウトについて解説していきます。

レイアウトを考える前に

どんなジャンルのホームページを作るかが決まったら、ホームページをどういった構成にするかをノート等に書き出してみましょう。
ノートなどにサイトの構成を書かずに頭の中だけで考えながらホームページを作り出しても必ずどこかで行き詰ります。
そうならないためにも、トップページからどのようなカテゴリーを作り、そこからどういったコンテンツを発信していくのか、などをフロー図としてノートに書き出してみます。
ノートに書いておけばどこからどういった経路でサイトができていっているかがひと目でわかりますし、今後サイトを管理していく上でも役に立ちます。

フロー図の例
ホームページ作成のフロー図

レイアウトを考える

フロー図を作ってサイトの構成がある程度固まったらサイトの基本的なレイアウトを決めましょう。ホームページのレイアウトにはある程度基本となる形がすでに確立されています。
ここではどのようなレイアウトがあるのかを紹介していきます。

AとBのレイアウトは2カラムと言われているレイアウトです。カラムとは列や欄という意味があるんですが、他の言い方をすれば2段組とも言われています。
この2カラムが一番よく利用されているのレイアウトです。人間の目は左上から右下に見ていく傾向があるようで、上のふたつのレイアウトが無難と言えるでしょう。

上ふたつのうちどちらかがいいかですが、人は横書き文字を読む場合左から読む、右利きの人が多い、などの理由からメニュー右配置のほうがユーザビリティにおいて優れていると言われています。
次にCのレイアウトですが、3カラムと言われる3段組レイアウトです。これはよくブログなどで使われているので、見たことがある人も多いのではないでしょうか。
Dのレイアウトはメニューを上に配置した1カラムです。一般のサイトではあまり見かけないレイアウトですが、グーグルやヤフーなどはこのレイアウトです。シンプルなレイアウトは多くの人に受け入られやすいという利点があります。

A.基本レイアウト(2カラム)
2カラム(2段組)のレイアウト
B.メニュー右配置(2カラム)
2カラム(2段組)右メニュー配置レイアウト
C.3カラム
3カラム(3段組)
D.1カラム
1カラム(段組なし)