Webページの構成｜5つの領域の役割と決める順番

Webページを作ろうとして、真っ白な画面の前で手が止まったことはありませんか？

止まる原因は、センスでも経験でもありません。どこに何を置くかの型を知らないだけです。
Webページの構成は、どのサイトもだいたい同じ5つに分かれています。ヘッダー・ヒーローエリア・コンテンツ・サイドバー・フッター。この5つに名前を付けて呼べるようになると、参考サイトを見たときに「ここを真似しよう」と言えるようになります。

このレッスンでは、5つの領域の役割、それぞれに何を入れるか、そして決める順番を見ていきます。最後に好きなサイトへ名前を振る観察の練習もあります。

Webページは5つの領域でできている

まず全体像から見ましょう。上から順に、ヘッダー・ヒーローエリア・コンテンツ・サイドバー・フッターです。

領域	役割	ページごとに変わるか
ヘッダー	ロゴと主要メニューを置く	全ページ共通
ヒーローエリア	何のサイトかを最初に伝える	ページごとに変わる
コンテンツ	そのページの本文	ページごとに変わる
サイドバー	他のページへの補助リンク	ほぼ共通
フッター	運営者情報や規約をまとめる	全ページ共通

共通の部分と、ページごとに変わる部分に分かれているのが分かりますか？ヘッダーとフッターは全ページで同じにします。ページごとに位置や中身が変わると、読む人は毎回さがし直すことになります。

5つ全部を必ず置く決まりはありません。サイドバーのないサイトはたくさんあります。迷ったら、置かない。領域が少ないほど本文が読まれます。

ヘッダー：全ページで同じ位置に置く

ヘッダーはページのいちばん上、横幅いっぱいの帯です。入れるものは3つだけで足ります。

ロゴを左上に置くのは、横書きの文章と同じで、目が左上から動き始めるからです。慣習に合わせておくと、それだけで探す時間がなくなります。YouTubeでもAmazonでも、ロゴは左上にあって、押すとトップページに戻りますよね。
Amazonと楽天のヘッダーを並べて見ると、入れる量の差も分かります。Amazonは検索欄とカートが中心で項目が少なく、楽天は上部にリンクを多く並べます。どちらも、いちばん使ってほしい機能を一等地に置いている点は同じです。

高さは、パソコンで60〜80pxくらいが目安です。厚くすると、そのぶん本文が下に押し出されます。スクロールしても上に貼り付いたまま動かない作りにするなら、もう少し薄くしてください。

ヒーローエリア：開いて最初に見える範囲

ヘッダーのすぐ下、画面を開いた瞬間に見えている大きな領域がヒーローエリアです。ファーストビュー、略してFVとも呼びます。現場ごとに言い方は違いますが、指しているものは同じです。

ここに入れるものは4つです。

下までスクロールしない人にも用件が伝わる状態を作ってください。ヒーローエリアだけで何のサイトか分からないと、その先は読まれません。

Appleの製品ページを開いてみてください。大きな写真、短い言葉、ボタンが1つ。4つに絞った形の見本になっています。

画像の上に白い文字を重ねる作りをよく見かけますが、写真の明るい部分と重なると読めなくなります。重ねるなら、写真を暗くする加工を入れるか、文字の下だけ色を敷いてください。
いちばん確実なのは、左に文字・右に画像と分けることです。

コンテンツとサイドバー：本文と、その横

コンテンツは本文の領域です。そのページの主役で、ページごとに中身が変わります。
サイドバーはコンテンツの横に置く細い列で、他の記事へのリンクや検索窓、プロフィールを入れます。

サイドバーを置くかどうかで、ページの作りが2種類に分かれます。この縦の列のことをカラムと呼びます。

	1カラム	2カラム
作り	本文が横幅いっぱい	本文＋サイドバー
向いているページ	LP、サービス紹介、申し込み	ブログ、記事の多いサイト
読ませ方	上から順に最後まで読ませる	途中で他の記事にも移ってもらう
注意点	本文の横幅を広げすぎない	スマホではサイドバーが下に回る

迷ったら1カラムにしてください。理由は2つあります。スマホで見る人のほうが多く、スマホではどちらも結局1列になること。そして読ませたい順番を作りやすいことです。
InstagramやXの画面を思い出すと分かります。スマホでは1列に並び、パソコンで開くと横に補助の列が出ます。中身は同じで、幅に応じて列の数だけを変えているわけです。

1カラムにするときは、本文の横幅を700〜800pxくらいで止めます。画面いっぱいに広げると、1行が長くなりすぎて、次の行の頭を見失います。読みやすい1行は35〜45字くらいです。

フッター：探しに来た人のための場所

フッターはページのいちばん下です。ここは目立たせる場所ではありません。必要な人が探しに来る場所なので、地味で構いません。

ヘッダーのメニューは5〜7項目までですが、フッターは項目数が多くても大丈夫です。探しに来ている人は、一覧の中から目で拾ってくれます。
Amazonや楽天のページをいちばん下まで送ってみてください。リンクが何十本も並んでいます。ヘッダーには置けない項目を、まとめて引き受けている場所です。
ヘッダーに入りきらなかったリンクは、ここに逃がしてください。

構成を決める順番

上から順に作りたくなりますが、その順番だと手戻りが出ます。ヘッダーのメニューは、中身が決まらないと決められないからです。

1. 目的を1つ決める。このページで何をしてほしいか（問い合わせ・購入・登録・読み進めてもらう）を1つに絞ります
2. コンテンツを書き出す。載せたい内容を紙に並べて、読む順番に並べ替えます
3. ヒーローエリアを決める。2で並べた内容を1文に縮めたものがキャッチコピーになります
4. ヘッダーとフッターを決める。ページが何枚あるか見えてから、メニュー項目を選びます
5. サイドバーを置くか決める。ここまで来て「まだ足りない」と思わなければ、置かなくて大丈夫です

この順番で決めた紙が、そのまま構成案になります。清書は要りません。四角を描いて名前を書くだけで、他の人と話せる資料になります◎

ミニ実践：好きなサイトに名前を振る

10分の観察練習です。道具はスマホかパソコンと、紙とペンだけ。

1. 好きなサイトを1つ開きます。よく買い物をする店でも、毎日読むメディアでも構いません
2. パソコンの画面で、上から順に領域を線で区切ります。紙に四角を描いてもいいです
3. それぞれの四角に、ヘッダー・ヒーローエリア・コンテンツ・サイドバー・フッターの名前を書き込みます
4. ヘッダーのメニュー項目を数えます。何個ありましたか？
5. ヒーローエリアに入っている要素を数えます。4つに収まっていましたか？
6. 同じことをもう2サイトやって、3つを見比べます

3サイト分やると、共通点が見えてきます。ロゴは全部左上にあるはずです。メニューの数もだいたい同じ範囲に収まっているはずです。
共通しているところが、守ったほうがよい型です。違っているところは、そのサイトが目的に合わせて選んだ部分になります💡

次のチェックリストで、自分が作るページの構成も確認してみてください。

• ヘッダーとフッターが、全ページで同じ位置・同じ中身になっている
• ヒーローエリアだけを見て、何のサイトか分かる
• ボタンが1つに絞られている
• 本文の1行が35〜45字に収まっている
• サイドバーに、置く理由を説明できるものだけが入っている

よくある質問

Webページの構成要素は？

大きく5つです。ヘッダー、ヒーローエリア（ファーストビュー）、コンテンツ、サイドバー、フッター。
このうちヘッダーとフッターは全ページで共通、コンテンツはページごとに変わります。サイドバーは必須ではありません。

Webページの構成案はどう作りますか？

紙に四角を描いて、名前を書き込むだけで作れます。
順番は、ページの目的を1つ決める → 載せる内容を書き出して並べ替える → ヒーローエリアの言葉を決める → ヘッダーとフッターの項目を選ぶ、です。上から作らないのがコツです。

サイドバーは置いたほうがいいですか？

ブログのように記事が何本もあるサイトなら効果があります。それ以外は置かないほうが読まれます。
スマホでは本文の下に回り込むので、そこまで読まれる前提の内容だけを入れてください。

Webデザインの4大原則は何ですか？

近接・整列・反復・対比の4つです。関係のあるものを近づける、線に揃える、同じルールを繰り返す、大事なものに差をつける、という順で使います。
ページの構成を決めたあと、中身を並べる段階で使う考え方です。デザインの4原則で図つきで解説しています。

次に学ぶこと

このレッスンの要点をまとめます。

• Webページは5つの領域に分かれる（ヘッダー・ヒーローエリア・コンテンツ・サイドバー・フッター）
• ヘッダーとフッターは全ページ共通。位置も中身も変えない
• ヒーローエリアに入れるのは、キャッチコピー・補足・ボタン・画像の4つ
• 迷ったら1カラム。本文の1行は35〜45字
• 決める順番は、目的 → 内容 → ヒーローエリア → ヘッダーとフッター

次はナビゲーションの種類です。今回のヘッダーに入れたメニューを、どう並べて何項目にするかを決められるようになります。
そのあとUIパーツの名前と役割へ進むと、コンテンツの中に置く部品を名前で選べるようになりますよ。

ほかのレッスンはデザインの基本コース目次から選べます。順番に進めても、気になるところだけ読んでも大丈夫です。