【2023年7月07日更新】より記事の理解度が深まるよう、関連記事を設定しました。

こんにちは、編集長のカワウソです！

「ホームぺージの構成って何？」「どうやって作るの？」と、お悩みではありませんか？

そこで今回は、ホームページ制作で構成を練るメリットや作り方について解説します。

この記事を読めば、誰でも簡単にホームぺージの構成図を作れますよ。

おすすめのツールも複数紹介しているので、ご自身に合うものを選んでください。

それではどうぞ！

ホームページの構成とは

ホームぺージ制作は複数の工程を経るため、事前の企画・設計が重要です。

たとえば「家づくり」では、最初に建築士が「設計図」を作りますよね。
もし、設計図を作らずに進行してしまうと、予算オーバーやスケジュールの遅延などを招いてしまうかもしれません。

ホームぺージも同じ。
事前に「構成図」を作れば、計画性を持ってプロジェクトを進行可能です。

なお、ホームぺージの「構成図」は、以下の2種類があります。

それぞれ詳しく解説します。

ホームページ全体の構成（サイトマップ）

ホームぺージ全体の構成図を「サイトマップ」と呼びます。

サイトマップを作れば、頭の中のイメージを視覚化できるでしょう。

以下、サイトマップの例です。

サイトマップに似たものに、「ディレクトリマップ」があります。

以下、ディレクトリマップの例です。

サイトマップとディレクトリマップの違いは、次のとおりです。

※この記事では便宜上、ホームぺージ全体の構成を「サイトマップ」として解説します。

ページ単位の構成（ワイヤーフレーム）

ページ単位の構成図を「ワイヤーフレーム」と呼びます。

サイトマップ同様、ワイヤーフレームは頭の中のイメージを視覚化することが可能。

以下、ワイヤーフレームの例です。

サイトマップ作成のメリット

サイトマップ（ホームページ全体の構成図）を作るメリットは、以下のとおりです。

以下、詳しく解説します。

必要なページの内容や数を決められる

ホームぺージを作るにも、どんなページがどのくらい必要か決まっていないと、作業が前に進みません。

サイトマップを作れば、必要なページの「内容」や「数」を決められます。

ホームぺージを自作する方はもちろん、Web制作会社に依頼する方も作りましょう。

ページの内容や数が決まっていると、Web制作会社に見積もりや納期を算出してもらいやすくなりますよ。

情報が探しやすいホームぺージを作れる

サイトマップを作れば、情報が探しやすいホームぺージを作れます。

トップぺージにすべての情報を掲載すると、とてつもなく長くなり、情報が探しづらくなってしまいますよね。

そのため、ホームページには「階層構造」を用いるのが基本です。
トップぺージを第一階層として、他のページは第二階層、第三階層と繋がっていきます。

トップページとは？ホームぺージ作りで意識すべきポイント

参考に、弊社『エックスサーバー』のサービスサイトをご覧ください。

ヘッダーにあるグローバルナビゲーションでは、階層構造に合わせてリンクを設置しています。

これなら、ユーザーがホームページ閲覧中に疑問を持っても、「サポート」のカテゴリから解決できそうなページを見つけることが可能です。

さらに、フッターのリンクも階層構造に合わせて設置していますよ。

このように、それぞれのページがカテゴリごとにまとまっていると、情報を探しやすいですよね。

なお、ヘッダー、グローバルナビゲーション、フッターについては、以下の記事で詳しく解説しています。

【2023年最新版】参考にしたいヘッダーデザイン集

グローバルナビゲーションとは？作り方のポイントやデザイン例を解説

【2023年最新版】参考にしたいフッターデザイン集

作業の巻き戻しを防げる

一般的に、ホームぺージは以下の工程で作ります。

サイトマップなしに、ホームぺージ制作を進めるのは危険です。

もう一度、「家づくり」を例に考えてみましょう。
デザインまでの工程を建築士の仕事とするなら、コーディングは大工の仕事。

大工が家を建てている途中に、「やっぱり1階にゲストルームが欲しい」「2階にもトイレが欲しい」と追加要望を出しても、なかなか難しいですよね。

ホームぺージも同じです。
コーディング進行後に修正が必要になった場合、作業を大幅に巻き戻さなければなりません。

仮にコーディング進行後に「ページが不足している」と気付いた場合、デザインのみならず、サイトマップやワイヤーフレームから練り直す必要が出てきます。

サイトマップを作り終えたら、ページに「不足」や「重複」がないか、入念に確認しましょう。

ワイヤーフレーム作成のメリット

ワイヤーフレーム（ページ単位の構成図）を作る目的は、以下のとおりです。

それぞれ詳しく解説します。

ページに掲載する内容を整理できる

ワイヤーフレームを作れば、ページに掲載するコンテンツ（情報）を整理できます。

コンテンツとは？意味や種類を分かりやすく解説

コンテンツの整理で確認するポイントは、以下の3つです。

ページに掲載するコンテンツについて、「不足がないか」「重要なものが分かりやすい位置にあるか」など、目で確認しましょう。

完成後のホームぺージをイメージできる

ホームぺージのデザインでは、まず「レイアウト」と呼ばれる骨組みを検討する必要があります。

レイアウトによって、ホームぺージの印象や使い勝手は大きく変わりますよ。

ワイヤーフレームを作るときにレイアウトを決めておけば、完成後のホームぺージがイメージしやすくなりますよ。

作ろうとしているホームぺージが「使いやすいか」、「正しくユーザーを案内できるか」など、ワイヤーフレームである程度判断できるでしょう。

なお、レイアウトについては、のちほど詳しく解説します。

デザイン作業を効率化できる

ワイヤーフレームは、ホームぺージのデザインを起こすときに役立ちます。

ワイヤーフレームは、いわば「デザインの下書き」。
下書きがあれば「肉付け」に集中できるため、デザイン作業をスムーズに進めることが可能です。

もし、デザインやコーディングの工程に進んだあとで、ページに修正が入ると「作業の巻き戻し」が発生してしまいます。

無駄な時間やコストをかけないためにも、ワイヤーフレームを作りましょう。

サイトマップ作成の4ステップ

サイトマップは、以下の4ステップで作成します。

以下、詳しく解説します。

STEP1. 目的を明確化する

まずホームぺージの目的（種類）を明確化しましょう。

ホームぺージの目的によって、必要なページの「内容」や「数」が異なります。

以下、ホームぺージの目的の一例です。

「まだホームぺージの目的が定まっていない……」という方は、以下の記事を参考にしてください。

【初心者向け】企業ホームページの目的と役割を解説

以下の記事では、ホームぺージの種類ごとに、目的について詳しく解説しています。

ホームページとは？Webサイトとの違いや種類を分かりやすく解説

STEP2. 必要なページの洗い出し

次に、ホームぺージの目的を達成するために必要なページを洗い出します。

以下、ページの一例です。

この時点ではまだ、階層を気にする必要はありません。

ひとまず思いついたものをリストアップしましょう。

STEP3. ページを分類する

必要なページを洗い出したら、グループごとに分けます。

今回は、コーポレートサイトのページを以下のように分類しました。

※今回はIR情報、取扱い商品、沿革は除外しました。

ページによっては、どのグループにも属さないものも出てくるでしょう。

その場合、無理に特定のグループにまとめる必要はありません。

STEP4. ページの階層を決める

最後に、ページの階層を決めます。

以下の基本ルールを参考にしてください。

これでサイトマップは完成です。

サイトマップ作成のポイント

サイトマップを作成するときに、押さえておきたいポイントを紹介します。

以下の3つのポイントを知っていれば、より確度の高いサイトマップが作れますよ。

それぞれ解説します。

他社のホームぺージを参考にする

必要なページを洗い出すときは、他社のホームぺージを参考にしましょう。

何もないところから、必要なページを決めていくのは困難です。

もちろん、「コーポレートサイト」や「サービスサイト」など、ホームぺージの種類で必要なページはある程度想像がつきます。

しかし、業種が違えば必要なページが異なるのも事実。
できる限り自社と同じか、近い業種のホームぺージを参考にしましょう。

以下の記事では、他社のホームぺージを一覧にして閲覧できる「ギャラリーサイト」を紹介しています。

業種から探せるギャラリーサイトも紹介しているため、ぜひご覧ください。

【2023年最新版】ホームページデザインの参考になるギャラリーサイト12選

1ページ1テーマにする

1ページの中に異なるテーマが混在すると、ユーザーは情報を見つけづらくなります。

たとえば、「トイレのリフォーム」を検討しているユーザーを例に考えてみましょう。

次のうち、ユーザーにとって情報が取得しやすいホームぺージはどちらでしょうか？

正解はBのホームぺージです。

A社のホームぺージは「リフォームのご提案」ページに「キッチン」「洗面所」「バスルーム」「トイレ」の情報が混在しています。

「トイレ」のリフォーム情報をユーザーが閲覧するには、「リフォームのご提案」ページを下部までスクロールしなければなりません。情報を見つけづらく、時間がかかりますよね。

一方でＢ社のホームぺージは、ユーザーが目的とする「トイレ」のリフォーム情報までダイレクトでアクセスできます。

できる限り、「1ページ1テーマ」になるように心がけましょう。
「1ページ1テーマ（キーワード）」は、SEO（検索エンジン最適化）の観点でも重要です。

詳しくは、以下の記事で解説しているので、ホームぺージのアクセスを増やしたい方はご覧ください。

SEO対策とは？ホームページ初心者が制作時に意識すべきポイント6つ

階層を深くしすぎない

ホームぺージの階層構造を深くしすぎるのもよくありません。

ユーザーが目的のページに到達するのに時間がかかるためです。

創業期のホームぺージであれば、ほとんど「3階層」で構成できます。

なるべく「4階層」「5階層」は使わないようにしましょう。

仮に使うとしても、「3階層目」の情報量が多すぎる場合など、用途を制限してください。

サイトマップ作成ツールの紹介

ここではサイトマップ作成におすすめのツールを紹介します。
前提として、デザイン性の高いサイトマップを作る必要はありません。

サイトマップ作成ツールの中には、有料かつ高機能なものもあります。

Web制作会社に在籍するWebデザイナーであれば、サイトマップを作る機会は多いので、高機能なツールを使用したとしても費用対効果は取れるでしょう。

しかし、自社のホームぺージを作る経営者やWeb担当者の方が、たびたびサイトマップを作るケースは考えづらいです。

サイトマップ作成ツールは、頭の中のイメージを視覚化できれば十分。
無料で利用できるものを中心に、一つずつ紹介します。

Microsoft Excel（エクセル）

ビジネスパーソンであれば、パソコンに『Microsoft Excel』がインストールされている方も多いのではないでしょうか。

『Microsoft Excel』なら、わずか2ステップでサイトマップを作れます。

「挿入 ＞ 図 ＞ SmartArt ＞ 階層構造」をクリックしてください。

あとは画面左側のリスト部分に文字を入力していけば、自動的にサイトマップが完成します。

なお、ページ数によっては、「横方向階層」のほうが見やすいかもしれません。
状況に応じて使い分けてください。

メモ

『Microsoft Excel』なら、ディレクトリマップも簡単に作成可能。
「列」で階層を分けて、「行」でページを記入するだけで作れます。

ページごとにURLを決めていくときは、「サイトマップ」より「ディレクトリマップ」のほうが管理しやすいです。

Microsoft Excelを持っていない方へ

『Microsoft Excel』持っていない方は、無料の『Google スプレッドシート』がおすすめ。
A列とB列にページを記載し、「挿入 ＞ グラフ ＞ 組織図」からサイトマップが作れます。

Microsoft PowerPoint（パワーポイント）

『Microsoft PowerPoint』にも、サイトマップ作成に適した「SmartArt」機能があります。

まず、デフォルトで表示される「テキストボックス」は削除しましょう。

次に、「挿入 ＞ SmartArt ＞ 階層構造」と進みます。

あとは画面左側のリスト部分に文字を入力していけば、自動的にサイトマップが完成。

『Microsoft Excel』同様、ページ数によっては「横方向階層」のほうが見やすい場合もあるので、状況に応じて使い分けてください。

Xmind（エックスマインド）

『Xmind』は、仕事の効率化を図るために有効な「ブレーンストーミングツール」。
分かりやすく言うと、アイデアを視覚化するためのツールです。

機能に制限はあるものの、無料で試用版の利用が可能。
有料版だと4,400円（税込）／6ヵ月、もしくは6,800円（税込）／年の費用がかかります。

以下のような図を簡単に作れるため、ホームぺージ制作のみならず、仕事の効率化を図りたい方におすすめです。

サイトマップは「ロジック図」や「組織図」のテンプレートを使えば、簡単に作れます。

以下、「ロジック図」を用いて作ったサイトマップの例です。

気になる方は利用規約を確認したうえで、使ってみてください。

ワイヤーフレーム作成の4ステップ

ワイヤーフレームは、以下の4ステップで作成します。

以下、詳しく解説します。

STEP1.ページに必要な情報を書き出す

まず、ページの中にどんな情報が必要か洗い出してみましょう。

たとえば、コーポレートサイトのトップぺージだと、以下のような情報が考えられます。

「よく分からない……」という方は、サイトマップ同様、他社のホームぺージを参考にしましょう。

STEP2.情報の優先度を決める

次に、洗い出した情報の優先度を決めます。

たとえば、ユーザーから問い合わせを受け付ける場合、どのような方法を優先したいでしょうか。
「メール」ではなく「電話」で受け付けたい場合、「電話番号」の優先度は高いです。

優先度が高い情報は、ページの上部に掲載するのが鉄則。

というのも、ページが下にいくにつれ、基本的に閲覧される可能性は低くなるためです。
そのため、優先順位が高い情報は、できる限りページの上部に掲載しましょう。

STEP3.レイアウトを決める

前述のとおり、ワイヤーフレーム作成時にホームぺージのレイアウトを決めましょう。

よく利用されるレイアウトは、以下のとおりです。

ホームページのレイアウトに正解はありません。

以下の記事では、ホームページの種類ごとに、おすすめのレイアウトを紹介しているので、ぜひ参考にしてください。

ホームページレイアウトの基本！種類や選び方を分かりやすく解説

STEP4.コンテンツを配置する

それでは、レイアウト（骨組み）をもとに、コンテンツを配置していきましょう。

コンテンツを配置するときに意識したいのは、ユーザーの視線誘導（目の動き）。
ホームぺージでは、「Z型」と呼ばれる視線誘導が利用されることが多いです。

Z型のポイントは、ユーザーの目線は「左から右」に流れること。
優先度が高いコンテンツは、左に配置しましょう。

一例として、『エックスサーバー』のトップぺージのコンテンツの一部を紹介します。

「エックスサーバーが選ばれる3つの理由」と題して、以下の3つのコンテンツを配置しています。

「超高速で大量アクセスに強い」というコンテンツを一番左に配置し、ユーザーに見られる頻度を高めていますよ。

なお、Z型を参考に作ったワイヤーフレームが、以下のとおりです。

なお、視線誘導については、以下の記事でも解説しています。

見やすいホームページは何が違うのか!?押さえるポイントを紹介

ワイヤーフレーム作成のポイント

ワイヤーフレームを作成するときに、押さえておきたいポイントを紹介します。

それぞれ解説します。

作るページを絞る

すべてのページにワイヤーフレームが必要なわけではありません。

ワイヤーフレーム作成は、それなりに時間がかかります。

共通のレイアウトで作れるページも多いので、最低限必要なパターンのみ作りましょう。

以下参考例です。

どのページをどのパターンのレイアウトで作るかさえ決めておけば、デザイン完成後に「イメージと違う……」と後悔する可能性を減らせます。

見た目にこだわり過ぎない

ワイヤーフレームを作るときに、見た目にこだわってしまい、思わずデザインまで追求したくなるかもしれません。

ただ、ワイヤーフレームはあくまでも「デザインの下書き」であって、清書ではありません。
ワイヤフレームの見た目にこだわると、時間がかかります。

また、ホームぺージ制作をWeb制作会社に依頼する場合、下書きにクリエイティブ要素があり過ぎると、担当のWebデザイナーがデザインするときに、ワイヤーフレームに引っ張られてしまうかもしれません。

つまり、デザインの幅（可能性）を減らしてしまう原因になり得るのです。

あくまでも、メインの目的は「コンテンツの整理」だと考えてください。

クロージングを意識する

クロージングとは、ユーザーが商品やサービスを申し込むために、背中を押すこと。

ページを最後まで読んだユーザーは、商品やサービスに対する理解度やモチベーションが高まっている状態です。

ページの終わり部分には、「CTAボタン」を設置しましょう。

『エックスサーバー』のサービスサイトにも、CTAボタンを設置しています。

なお、CTAボタンの作成時は、「マイクロコピー」と「ラベリング」を意識するとよいですよ。

「マイクロコピー」は補足情報を記載するもの。ユーザーの心理的ハードルを下げたり、興味を引きつけたりするのが狙いです。

CTAボタンについては、以下の記事でも解説しているので、あわせてチェックしてみてください。

ホームページに使うボタンのポイント3つ！設置方法や素材も紹介

ワイヤーフレーム作成ツールの紹介

ここではワイヤーフレーム作成に、おすすめのツールを紹介します。

前述のとおり、デザイン性の高いワイヤーフレームを作る必要はありません。

サイトマップ同様、『Microsoft Excel』や『Microsoft PowerPoint』でもワイヤーフレームは作れます。

そのほか、『Cacoo（カクー）』という専用ツールも紹介しますので、気になる方はチェックしてください。

Microsoft Excel（エクセル）

『Microsoft Excel』の「罫線」や「セル結合」などを使えば、簡単にワイヤーフレームを作れます。

Microsoft PowerPoint（パワーポイント）

『PowerPoint』の「図形」を使えば、簡単にワイヤーフレームを作れます。

Cacoo（カクー）

『Cacoo』は図を使いながら、リアルタイムで頭のなかを共有し合える「オンライン作図ツール」。

チームで共同作業するための「コラボレーション機能」があるため、複数人でワイヤーフレームを作る方におすすめです。

14日間なら無料で試用可能。
個人向けプランだと660円（税込）／月、組織およびチーム向けプランだと1,980円（税込）／月です。

『Xmind』同様、さまざまなビジネス系テンプレートが使えます。

今回は、ワイヤーフレームのテンプレートを基に作りました。

気になる方は利用規約を確認したうえで、試してみてください。

まとめ

今回の記事では、ホームぺージ制作で構成を練るメリットや作り方について解説しました。

ぜひこの記事を参考に、サイトマップやワイヤーフレームを活用して、ホームページの構成を練ってみてください。

それでは、素敵なホームページの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、18万社の導入実績があります。

10月2日12時まで利用料金最大30%OFFキャンペーンを開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

さらに2023年9月29日12時まで、20周年記念プレゼントキャンペーンも開催中です！
PlayStation®5や星野リゾート宿泊ギフト券5万円分が当たるビッグチャンスです。

▶【10月2日まで】利用料金最大30%OFFキャンペーン詳細はこちら！

ぜひこのお得な機会にホームページ開設をご検討ください！

※ 2023年5月時点、hostadvice.com調べ。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

これから始める方はこちらのホームページの作り方をぜひご覧ください！

【初心者向け】会社ホームページの作り方を基礎から解説

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！