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

この記事のレベル
初心者
(4.0)
重要度
(4.0)
難しさ
(3.0)

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

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

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

カワウソ

この記事はこんな人におすすめ!

  • はじめてホームぺージを作る人
  • ホームぺージの構成とは何か知りたい人
  • ホームぺージの構成図を作りたい人
  • おすすめのホームぺージ構成ツールを知りたい人

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

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

それではどうぞ!

目次

ホームページの構成とは

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

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

家づくりにおける設計図

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

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

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

全体の構成(サイトマップ)

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

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

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

サイトマップの例

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

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

ディレクトリマップの例

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

サイトマップ

ホームぺージの構造をツリー図にしたもの。カテゴリなど、コンテンツをおおまかに分類する目的で用いる。

ディレクトリマップ

ページの一覧表。必要なページをすべて洗い出す目的で用いる。また、URLを決定するときにも有効。

カワウソ

図に起こしたほうがイメージを視覚化しやすいため、初心者の方であれば、まず「サイトマップ」を作るのがおすすめです。

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

ページ単位の構成(ワイヤーフレーム)

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

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

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

ワイヤーフレームの例

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

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

サイトマップを作るメリット
  • 必要なページの内容や数を決められる
  • 情報が探しやすいホームぺージを作れる
  • 作業の巻き戻しを防げる

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

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

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

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

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

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

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

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

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

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

サイトマップで階層構造を説明

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

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

エックスサーバーのヘッダーナビゲーション

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

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

作業の巻き戻しを防げる

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

ホームぺージ制作の手順
  1. サイトマップの作成
  2. ワイヤーフレームの作成
  3. デザイン
  4. コーディング

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

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

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

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

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

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

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

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

ワイヤーフレームを作る目的は、以下のとおりです。

ワイヤーフレームを作るメリット
  • ページに掲載する内容を整理できる
  • 完成後のホームぺージをイメージできる
  • デザイン作業を効率化できる

ページに掲載するコンテンツを整理できる

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

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

コンテンツの整理で確認する3つのポイント
  • どんなコンテンツが必要か
  • 優先度が高いコンテンツはどれか
  • 各コンテンツをページのどこに配置するのか

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

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

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

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

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

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

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

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

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

また、デザインやコーディングの工程に進んだあとで、ページに修正が入ると「作業の巻き戻し」が発生。非効率と言わざるを得ない状況に陥ります。

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

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

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

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

STEP1. 目的を明確化する

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

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

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

ホームぺージの種類 目的
コーポレート
  • 会社のことを知ってもらう
ブランドサイト
  • ブランドのことを知ってもらう
  • ブランドの価値や信頼性を伝える
サービスサイト
  • サービスのことを知ってもらう
  • サービスに申し込んでもらう
リクルートサイト
  • 人材を獲得する

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

もう悩まない!初めて作る企業ホームページの目的と役割

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

ホームページとは?Webサイトとの違いや種類を徹底解説

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

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

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

種類 コーポレートサイト サービスサイト リクルートサイト
必要な
ページ例
トップぺージ トップぺージ トップぺージ
会社概要 自社の強み 求人情報一覧
代表挨拶 サービス説明 職種別求人情報
企業理念 料金 会社について
沿革 導入事例、お客様の声 企業理念
アクセス(事業所紹介) よくあるご質問 代表メッセージ
事業内容、サービス概要 お問い合わせフォーム 社員インタビュー
取扱い商品 資料請求フォーム 教育制度
ニュース お申し込みフォーム 社内風景
IR情報 利用規約 応募フォーム
採用情報 個人情報保護方針 個人情報保護方針
お問い合わせフォーム 企業情報  
個人情報保護方針    

 

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

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

思いついたものをリストアップ

STEP3. ページを分類する

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

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

思いついたものをグループ分け

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

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

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

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

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

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

ホームぺージ階層構造の基本ルール
  • 第一階層・・・トップぺージ
  • 第二階層・・・グループの概要(目次)
  • 第三階層・・・各グループに属する詳細ページ
完成したサイトマップ
完成したサイトマップ

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

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

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

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

それぞれ解説します。

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

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

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

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

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

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

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

ホームぺージデザインの参考になるギャラリー・企業サイト計20選

1ページ1テーマにする

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

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

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

A社とB社のホームページ階層構造の比較

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

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

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

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

できる限り、「1ページ1テーマ」になるように心がけましょう。

ちなみに「1ページ1テーマ(キーワード)」は、SEO(検索エンジン最適化)の観点でも推奨されています。

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

初心者がSEOに強いホームぺージを作る方法を解説

階層を深くしすぎない

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

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

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

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

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

ここではサイトマップ作成におすすめのツールを紹介します。

前提として、デザイン性の高いサイトマップを作る必要はありません。

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

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

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

サイトマップ作成ツールは、頭の中のイメージを視覚化できれば十分。

無料で利用できるものを中心に、一つずつ紹介します。

Microsoft Excel(エクセル)

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

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

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

エクセルのSmartArt機能から階層構造を選択

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

エクセルのSmartArt機能でページ目を入力

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

エクセルのSmartArt機能から階層構造について「横方向階層」を紹介

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

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

注意

無料で使える『Web用 Excel』には「SmartArt」機能はありません。

ポイント

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

Google スプレッドシートで作ったサイトマップ

Microsoft PowerPoint(パワーポイント)

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

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

パワーポイントのテキストボックスを削除

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

パワーポイントのSmartArt機能から階層構造を選択

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

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

パワーポイントのSmartArt機能からページ名を入力
メモ

無料で使える『Web 用 PowerPoint』にも「SmartArt」機能はあります。

Xmind

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

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

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

作れる図
  • マインドマップ
  • ロジック図
  • 組織図
  • ツリーチャート
  • タイムライン
  • フィッシュボーンチャート(魚骨図)
  • ツリーテーブル
  • マトリックス
    など

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

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

Xmindで作ったサイトマップ

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

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

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

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

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

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

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

トップぺージに必要な要素
  • ロゴ
  • キャッチコピー
  • イメージ画像
  • 下層ページへのリンク
  • お問い合わせや資料請求ボタン
  • ニュース(新着情報)
  • 当社の取り組み
  • 電話番号や住所 など

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

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

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

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

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

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

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

ファーストビューとは?

ホームぺージにアクセスしたときに最初に表示される領域。一般的にはスクロールしないで閲覧できる領域を指します。

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

STEP3.レイアウトを決める

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

ホームぺージレイアウトの代表例
  1. シングルカラムレイアウト
  2. マルチカラムレイアウト
  3. フルスクリーン型レイアウト
  4. グリッド型レイアウト

ホームページのレイアウトの種類を紹介

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

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

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

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

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

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

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

Z型の視線誘導を説明

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

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

エックスサーバーのサービスサイトにおけるZ型視線誘導の活用事例

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

エックスサーバーが選ばれる3つの理由
  1. 超高速で大量アクセスに強い
  2. 盛りだくさんの充実機能
  3. 安心の実績とサポート体制

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

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

Z型の視線誘導を意識して作ったワイヤーフレーム

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

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

それぞれ解説します。

作るページを絞る

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

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

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

以下参考例です。

共通で使えるワイヤーフレームのパターン例
  • パターンA・・・トップぺージ
  • パターンB・・・二階層目のページ
  • パターンC・・・三階層目のページ
  • パターンD・・・キャンペーンなど固有のレイアウトで作るページ

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

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

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

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

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

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

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

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

クロージングを意識する

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

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

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

CTAとは?

Call To Actionの略称で、「行動喚起」と訳されます。ユーザーが特定の行動をするように導く目的で設置される、テキストやボタンなどのまとまりのこと。

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

エックスサーバーのCTAボタン例

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

CTAボタンのマイクロコピーとラベリングの説明

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

カテゴリ マイクロコピー例
電話 「フリーダイヤル」「お電話なら即対応」
メール 「ご相談・見積もり無料」「24時間・365日受付中」
サンプル請求 「まずはお試し」「先着〇〇名様限定」
資料請求 「わずか1分」「無料でお申込み可能」
申し込み 「期間限定キャンペーン中」「今なら初期費用無料」
会員登録 「3ステップで完結」「〇〇ポイントもられる」
セミナー 「今ならまだ間に合う」「〇〇に役立つ情報満載」

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

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

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

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

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

Microsoft Excel(エクセル)

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

エクセルで作ったワイヤーフレーム
メモ

無料の『Web用 Excel』や『Google スプレッドシート』でも作れます。とくに違いはありません。

Microsoft PowerPoint(パワーポイント)

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

パワーポイントで作ったワイヤーフレーム
メモ

無料の『Web用 PowerPoint』でも作れます。とくに違いはありません。

Cacoo(カクー)

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

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

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

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

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

Cacooで作ったワイヤーフレーム

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

まとめ

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

まとめ
  • ホームぺージ制作ではまず、「全体」と「ページ単位」の構成を練る
  • 全体の構成図は「サイトマップ」、ページ単位の構成図は「ワイヤーフレーム」と呼ぶ
  • サイトマップやワイヤーフレームの目的は、「コンテンツの整理」や「イメージの視覚化」
  • サイトマップやワイヤーフレームは簡易的なものでOK!作りこみ過ぎない
安定度の高いレンタルサーバーをお探しの方へ

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

6月16日18時まで半額キャッシュバックキャンペーン開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

さらに、初夏のボーナスプレゼントキャンペーンも開催中です。
Amazonギフト券10,000円分が当たるビッグチャンス!

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

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

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

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

【超初心者向け】会社ホームページの作り方

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