ホームページを作ろうと思っても、白い画面を前に「どこに何を置けばいいのか」と手が止まってしまうことはありませんか。
実は、多くのWebページは、ヘッダー・メインビジュアル・コンテンツ・サイドバー・フッターという、ほぼ共通の基本構造でできています。
この記事では、Webページの基本構造とは何か、各部位の役割、そしてホームページのワイヤーフレーム(どこに何を置くかを箱で描いた設計図)で構造を組み立てる方法を、見本を使って初心者向けに解説します。
Webページの基本構造とは
まずは、Webページの基本構造を作る5つの部位と、それぞれの役割を押さえましょう。
Webページの基本構造とは
Webページの基本構造とは、1つのページを作っている代表的な区画の組み合わせのことです。
区画とは、ページを役割ごとに区切った1つひとつのまとまりのことで、一般的には次の5つがあります。
- ヘッダー
ページの一番上にある区画で、ロゴやメニューを置きます。 - メインビジュアル
ヘッダーのすぐ下に置く、大きな画像とキャッチコピーの区画です。 - コンテンツ
そのページで伝えたい本文や商品の情報など、ページの中心になる区画です。 - サイドバー
コンテンツの横に置く細長い区画で、関連リンクや検索窓などの補助的な情報を置きます。 - フッター
ページの一番下にある区画で、会社情報や問い合わせ先、コピーライト(著作権の表示)などを置きます。
この5つを、色の付いた箱で並べると次のようになります。
見本では、一番上にヘッダー、その下にメインビジュアル、中段にコンテンツとサイドバーを横に並べ、一番下にフッターを置いています。
すべてのページにこの5つが必ずそろうわけではありませんが、まずはこの形を「基本の型」として覚えておくと、ほかのサイトを見たときにも構造が読み取りやすくなります。
各部位の役割
5つの部位には、それぞれ決まった役割があります。
役割が分かっていると、「この情報はどこに置くべきか」を迷わずに決められます。
| 部位 | 主な役割 | 置くものの例 |
|---|---|---|
| ヘッダー | 何のサイトかを伝え、ほかのページへの入り口になる | ロゴ、メニュー(グローバルナビ)、問い合わせボタン |
| メインビジュアル | ページを開いた瞬間に、そのページの内容や雰囲気を伝える | 大きな写真、キャッチコピー、申し込みボタン |
| コンテンツ | そのページで一番伝えたい情報を届ける | 本文、商品やサービスの説明、事例、よくある質問 |
| サイドバー | コンテンツを補い、ほかのページへ回遊してもらう | カテゴリの一覧、人気の記事、検索窓、広告 |
| フッター | ページの終わりを示し、困ったときの情報をまとめる | 会社情報、問い合わせ先、サイトマップ、プライバシーポリシー、コピーライト |
グローバルナビとは、サイトの主要なページへのリンクを並べたメニューのことで、多くのサイトでどのページにも同じ内容で表示されます。
回遊とは、見る人がサイト内のほかのページへ移動しながら読み進めること、つまり、いろいろなページを見て回ってもらうことです。
なぜどのサイトも似た構造なのか
多くのサイトが似た構造になっているのは、見る人がほかのサイトで慣れた形を前提に、新しいサイトも操作しようとするからです。
「メニューは上にある」「会社の住所や問い合わせ先は一番下にある」と多くの人が知っているので、同じ場所に置いておけば、初めて訪れた人でも迷わずに情報を見つけられます。
使いやすさの研究者ヤコブ・ニールセンは、これを「ユーザーはほとんどの時間をほかのサイトで過ごしているので、あなたのサイトにもほかのサイトと同じように動いてほしいと思っている」という「ヤコブの法則(Jakob’s Law)」としてまとめています(Jakob’s Law of Internet User Experience(英語))。
基本構造は個性を消すための決まりではなく、見る人が迷わないための「共通の約束」だと考えるとよいでしょう。
Webページの基本構造の組み立て方
ここからは、基本構造を自分のページに当てはめて組み立てる方法を見ていきます。
すべての部位を必ず使うのではなく、ページの目的に合わせて選ぶことがポイントです。
ページの目的に合わせて必要な部位を選ぶ
基本構造の5つの部位は、どのページにも全部そろえる必要はありません。
ページの目的によって、必要な部位と、ないほうがよい部位が変わるためです。
たとえば、記事を次々に読んでもらいたいブログでは、関連記事を並べるサイドバーが役に立ちます。
一方、1つの商品の申し込みに集中してもらいたいLP(ランディングページ:広告などから訪れた人に、1つの行動をしてもらうための縦長のページ)では、ほかのページへのリンクが並ぶサイドバーは気が散る原因になるので、置かないことがよくあります。
会社のホームページが、いろいろなページを見て回れる「総合カタログ」だとすると、LPは、1つの商品やサービスの紹介と申し込みのボタンを、1枚の長いチラシのように上から下へまとめたページです。
ほかのページへのリンクを少なくして、そのページの中で申し込みまで進んでもらうことを目的にしています。
バー
見本Aのブログの記事ページでは、メインビジュアルを省いてすぐに本文を読めるようにし、サイドバーでほかの記事へ案内しています。
見本Bのランディングページでは、サイドバーをなくし、コンテンツを上から順に読み進めて最後に申し込む流れにしています。
どちらも基本構造から必要な部位を選んで組み立てたもので、「何をしてほしいページか」によって形が変わっています。
コンテンツは内容のまとまりごとにセクションに分ける
コンテンツの区画は、内容のまとまりごとに「セクション」に分けて並べます。
セクションとは、「サービスの特徴」「料金」「よくある質問」のように、1つのテーマでまとまった区画のことです。
長いコンテンツを1つのかたまりのまま置くと、どこに何が書いてあるのか分からず、読みたい情報を探しにくくなります。
セクションごとに見出しを付け、セクションの間を広めに空けると、ページの区切りがはっきりします(セクションの間の空け方はセクション間の余白とは?で解説しています)。
スマートフォンでは縦1列に並べ替える
スマートフォンでは、画面の幅が狭いため、パソコンで横に並べていた区画を縦1列に並べ替えるのが一般的です。
コンテンツとサイドバーを横に並べたまま縮めると、どちらも細くなりすぎて文字が読みにくくなるからです。
同じ基本構造を、パソコンとスマートフォンで比べてみましょう。
バー
パソコンの見本では、コンテンツとサイドバーが横に並び、ヘッダーにはメニューの項目がそのまま並んでいます。
スマートフォンの見本では、サイドバーをコンテンツの下に移して全部を縦1列にし、メニューは三本線のアイコン(ハンバーガーメニュー)にまとめています。
パソコンでは右側にあったサイドバーが、スマートフォンではコンテンツの真下に来ている、と2つの見本を見比べると、並び替えの様子が分かりやすいでしょう。
ハンバーガーメニューという名前は、3本の横線がパン・具・パンを重ねたハンバーガーのように見えることから付いたもので、押すとメニューが開く仕組みです。
並び順は変わっても、「上にヘッダー、下にフッター、中心にコンテンツ」という基本構造そのものは変わっていない点に注目してください。
パソコンとスマートフォンでの余白の変え方はPCとスマホの余白の違いとは?で解説しています。
ワイヤーフレームで基本構造を描いてみる
基本構造を自分のページに当てはめるときは、いきなり色や写真を入れずに、まずワイヤーフレームを描くのがおすすめです。
ワイヤーフレームとは、色や装飾を入れる前に、どこに何を置くかだけを線や箱で描いたページの設計図のことです。
構造だけに集中して考えられるので、あとから「この情報を入れる場所がない」と組み直す手間を減らせます。
次の手順で描いてみましょう。
- ページの目的(読んでもらう、申し込んでもらう、など)を1行で書きます。
- 載せたい情報を書き出し、ヘッダー・メインビジュアル・コンテンツ・サイドバー・フッターのどこに入るかを振り分けます。
- 目的に合わせて、使わない部位(LPならサイドバーなど)を決めます。
- 紙やデザインツールに、各部位を四角い箱で上から順に描き、箱の中に部位の名前と入れる情報を書き込みます。
- 同じ内容で、スマートフォンの縦長の画面用にも描き、並び順を確かめます。
Figmaのようなデザインツールを使う場合も、最初は灰色の四角と文字だけで十分です。
まだデザインツールを触ったことがなければ、ノートやコピー用紙に四角を手描きするところから始めても問題ありません。
紙のほうが、いくつもの並べ方を素早く試せます。
コーディングでは役割に合ったHTML要素を使う
ここからは、Webページを自分でコーディングする人向けの補足です。
デザインツールだけで作る場合は、「部位ごとに役割がある」ということを押さえておけば十分です。
HTML(Webページの骨組みを書く言語)には、基本構造の部位に対応する要素が用意されています。
<body>
<header>ロゴ・グローバルナビ</header>
<main>
メインビジュアル・コンテンツ
</main>
<aside>サイドバー</aside>
<footer>会社情報・コピーライト</footer>
</body><header>は導入的な内容やナビゲーションのまとまり、<main>はページの主要なコンテンツ、<aside>はメインのコンテンツと間接的に関係する部分(サイドバーなど)、<footer>は著作権情報や関連リンクなどをまとめる部分を表します(MDN: header、MDN: main、MDN: aside、MDN: footer)。
グローバルナビの部分は、ナビゲーションのリンクのまとまりを表す<nav>で囲みます(MDN: nav)。
なお、<main>は、表示されているものを1ページに1つだけ置けます。
役割に合った要素を使うと、画面読み上げソフトなどの支援技術にもページの構造が伝わりやすくなります(アクセシビリティについてはアクセシビリティとは?で解説しています)。
実践のポイント
Webページの基本構造で陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 個性を出そうとして、メニューをページの下に置くなど、見慣れた構造から大きく外れてしまうことがあります。
見る人がメニューや問い合わせ先を見つけられなくなるので、基本構造の位置は守ったうえで、色や写真で個性を出しましょう。 - 区画の役割を考えずに、空いている場所へ情報を詰め込んでしまうことがあります。
どこに何があるページなのか分かりにくくなるので、情報ごとに「どの区画の役割か」を決めてから配置しましょう。 - どのページにも同じようにサイドバーを付けてしまうことがあります。
申し込みに集中してほしいページでは気が散る原因になるので、ページの目的に合わせて必要かどうかを判断しましょう。 - パソコンの画面だけで構造を考え、スマートフォンで並び順がおかしくなっていることがあります。
ワイヤーフレームの段階で、スマートフォンの縦1列の並び順も描いておきましょう。
よくある質問
- Q. メインビジュアルやサイドバーは、なくてもいい?
A. はい、ページの目的によっては置かなくて構いません。
記事ページではメインビジュアルを省いてすぐに本文を見せたり、LPではサイドバーを置かなかったりするのは、よくある組み立て方です。
目安として、トップページやサービス紹介のページのように、最初に内容や雰囲気を伝えたいページにはメインビジュアルを置き、記事や会社概要のように文章や情報を読んでもらうページでは省いて、すぐに本文を見せると読む人を待たせません。
一方、ヘッダーとフッターは、ほとんどのサイトでどのページにも置かれています。 - Q. 基本構造は、トップページと下層ページで同じにするべき?
A. ヘッダーとフッターは、どのページでも同じ内容・同じ見た目にそろえるのが基本です。
下層ページとは、トップページから階層をたどってたどり着く個別のページ(会社概要や記事のページなど)のことです。
メインビジュアルやコンテンツの中身はページごとに変わって構いませんが、外枠がそろっていると、見る人は同じサイトの中にいると安心できます(ページをまたいで配置や見た目をそろえる考え方はレイアウトの一貫性とは?で解説しています)。 - Q. ワイヤーフレームは手書きでもいい?
A. 構造を考える段階なら、手書きでも十分です。
紙なら素早く何パターンも描けるので、並び順を比べたいときに向いています。
形が決まってから、デザインツールで清書しましょう。
まとめ
Webページの基本構造とは、ヘッダー・メインビジュアル・コンテンツ・サイドバー・フッターといった区画の組み合わせのことで、それぞれに「何のサイトかを伝える」「内容を届ける」「補助する」「締めくくる」といった役割があります。
すべての部位を必ず使うのではなく、ページの目的に合わせて必要な部位を選び、スマートフォンでは縦1列に並べ替えて考えるのがポイントです。
まずはよく見るWebサイトを1つ開き、そのページを5つの部位に分けて、紙にワイヤーフレームとして描き写してみてください。
