ホームぺージ構成図の作り方を解説！サイトマップ・ワイヤーフレームなど

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

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

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

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

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

それではどうぞ！

ホームページの構成とは

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

たとえば「家づくり」では、最初に建築士が「設計図」を作りますよね。無計画なプロジェクト進行は、予算オーバーやスケジュールの遅延を招いてしまいます。

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

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

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

全体の構成（サイトマップ）

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

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

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

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

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

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

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

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

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

サイトマップ同様、ワイヤーフレームを作れって、頭の中のイメージを視覚化しましょう。

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

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

サイトマップを作るメリットは、以下のとおりです。

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

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

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

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

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

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

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

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

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

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

以下、当社『エックスサーバー』のヘッダーメニューを例にしましょう。

サイトマップで作った階層構造に合わせて、リンクを設置しています。

ホームぺージ閲覧中に不明点が出たとしても、「サポート」のカテゴリに何かしら解決策があると想像できます。

ユーザーは悩みを解決するために、関連線の高いページにダイレクトでアクセスできるでしょう。

作業の巻き戻しを防げる

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

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

もう一度、「家づくり」を例に考えてみましょう。

デザインまでの工程を建築士の仕事とするなら、コーディングは大工の仕事。

大工が家を建てている途中に、「やっぱり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（エクセル）

ビジネスパーソンであれば、「パソコンにExcel入ってるよ！」という方も多いのではないでしょうか。

すでに『Excel』がパソコンにインストールされているなら、使わない手はありません。

「挿入 ＞ 図 ＞ SmartArt ＞ 階層構造」から簡単に作れます。

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

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

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

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

ポイント

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

Microsoft PowerPoint（パワーポイント）

『PowerPoint』にも「SmartArt」機能があります。

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

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

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

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

Xmind

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

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

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

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

以下、「ロジック図」を用いてサイトマップを作成したので、ご覧ください。

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

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

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

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

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

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

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

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

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

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

たとえば「電話番号」の優先度を考えてみましょう。

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

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

ユーザーは「ファーストビュー」で求める情報があるか判断し、なければホームぺージから離脱してしまいます。

残念ながらどんなホームぺージでも、ページが下にいくにつれ、閲覧される可能性は低くなります。

STEP3.レイアウトを決める

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

とくに、「1.シングルカラムレイアウト」と「2.マルチカラムレイアウト」が人気です。

詳しくは以下の記事で解説していますので、ご覧ください。

ホームページレイアウトの基本！目的別の選び方をわかりやすく解説

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

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

コンテンツを配置するときに意識したいのは、ユーザーの視線誘導（目の動き）。

基本的にホームぺージでは、「Z型」と呼ばれる視線誘導が利用されます。

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

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

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

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

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

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

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

それぞれ解説します。

作るページを絞る

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

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

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

以下参考例です。

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

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

ワイヤーフレームを作るとき、見た目にこだわってしまい、思わずデザインまでしてしまう方もいます。

ただ、ワイヤーフレームはあくまでも「デザインの下書き」であって、清書ではありません。

ワイヤフレームの見た目にこだわると、時間がかかります。

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

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

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

クロージングを意識する

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

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

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

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

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

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

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

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

繰り返しになりますが、デザイン性の高いワイヤーフレームを作る必要はありません。

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

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

Microsoft Excel（エクセル）

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

Microsoft PowerPoint（パワーポイント）

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

Cacoo（カクー）

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

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

料金は1,980円（税込）／月額（3ユーザー）から使え、14日間なら無料で試用可能。

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

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

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

まとめ

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

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

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

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

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

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

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

※ 2022年10月時点、hostadvice.com調べ。

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

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

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

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