はじめに
本資料の目的
この資料は、ホームページ制作の初期段階で役立つ「図」の作り方と使い方をわかりやすく解説します。サイト全体の設計を視覚化することで、制作の手戻りを減らし、作業をスムーズに進められるようにすることが目的です。
誰に向けた資料か
これからホームページを作る方、担当者とデザイナー・エンジニアの間で構成を共有したい方、また小規模な会社や個人事業主の方に向けています。専門知識が少なくても読み進められるよう配慮しています。
本資料で学べること
- サイトマップやワイヤーフレームの基本概念
- ページの階層構造の考え方
- 実践的な作成手順とおすすめツール
具体例として、店舗の新規サイトや会社のコーポレートサイト、ブログを想定して説明します。
使い方
章ごとに実例と手順を示します。まずは第2章から、全体の構成をつかんでください。
ホームページ構成図の基本概念
概要
ホームページ全体の構成図は「サイトマップ」と呼びます。頭の中にあるページや関係性を図にして見える化すると、設計がぐっと楽になります。特に複数ページのサイトでは全体像を把握することが重要です。
主な構成要素
- ページ（トップ、会社案内、サービス、ブログ、問い合わせなど）
- 階層（親ページと子ページの関係）
- ナビゲーション（メニューやパンくず）
- URL構造（分かりやすい階層を意識）
作成するメリット
- 無関係・重複ページを防げます。コンテンツの抜けや重複を早期に見つけやすくなります。
- サイトの目的や導線が明確になり、訪問者に優しい設計ができます。
- SEO対策が取りやすくなります。検索エンジンに伝わる構造を作れます。
作るときのポイント
- 目的を定める（例：商品紹介、情報発信、集客など）。
- 主要なページを洗い出す。まずは大きなカテゴリを先に決めます。
- 関係性を図にする。親子関係や内部リンクの方向を記します。
- 実際のURLやメニュー名を仮で付けると現実的になります。
簡単な例
会社サイトなら「トップ > 会社案内 > 代表メッセージ」「トップ > サービス > サービスA > 紹介ページ」のように階層化します。これでサイト全体の流れが見えます。
以上が基本概念です。次章では具体的な階層構造の作り方を詳しく見ていきます。
ホームページの階層構造
はじめに
ホームページは階層構造を使うと分かりやすくなります。訪問者が迷わず目的の情報にたどり着けるよう、ページを整理します。
階層の基本構造
- 第1階層：トップページ（サイトの入口）
- 第2階層：会社案内、事業内容、サービス一覧、お問い合わせなどの主要ページ
- 第3階層：サービス詳細、製品ページ、採用情報の個別ページ
この流れで深さを作ると直感的に移動できます。
具体例
例：トップ→事業内容→製品Aの詳細。URLは /service/product-a のように分かりやすくします。
ナビゲーションの工夫
- グローバルナビは主要ページを並べます
- パンくずリストで現在地を示します
- フッターに補助リンクやサイトマップを置きます
これらにより移動が簡単になります。
ユーザー目線の設計ポイント
- 重要な情報は2〜3クリック以内で到達できるようにします
- 見出しやURLは内容と一致させます
- 内部リンクで関連ページへ誘導します
よくある注意点
- 階層を深くしすぎると離脱が増えます
- 同じ内容を別ページに分けすぎないようにします
- モバイルでも階層が分かる設計を心掛けます
ワイヤーフレーム作成の4ステップ
ワイヤーフレームは、ページごとの設計図です。ここでは実務で使える4つのステップを具体例とともに説明します。
STEP1：ページに必要な情報を書き出す
目的（例：商品購入、問い合わせ、情報提供）を明確にし、必要な要素を列挙します。例：見出し、リード文、商品画像、価格、口コミ、CTA（購入ボタン）、フッター情報。
STEP2：情報の優先度を決める
ユーザーの行動を想像し、重要度の高い要素を上に置きます。ファーストビューに必要な情報を3つ程度に絞ると分かりやすくなります。例：商品名、価格、購入ボタン。
STEP3：レイアウトを決める
グリッドやカラムで配置を決めます。ヘッダー、メイン、サイドバー、フッターの役割を明確にします。モバイル優先で考えると優先順位が崩れません。
STEP4：コンテンツを配置する
ダミー（プレースホルダ）で仮置きし、実際の文章や画像に差し替える余地を残します。ボタン文言やキャプションは短く具体的に書き、視覚的な強弱（大きさ・余白）で導線を作ります。
サイトマップ作成の実践的な方法
はじめに
サイトマップはサイト構成を視覚化する道具です。ここでは手軽に作れる3つの方法と実務で役立つポイントをわかりやすく紹介します。
方法1：Microsoft WordのSmartArt
- 「挿入」→「SmartArt」→「階層構造」を選びます。
- 必要なノードを追加し、ページ名を入力します（例：トップ、サービス、会社情報、問い合わせ）。
- 枝をドラッグで並べ替え、階層を整えます。
- 図を画像やPDFで保存すれば共有しやすくなります。
ポイント：初めての人ほどWordが扱いやすいです。操作が直感的なので素早く試作できます。
方法2：Googleスプレッドシートの組織図機能
- Googleスプレッドシートでデータを表形式（ページ名、親ページ）で作ります。
- 「挿入」→「図形描画」または組織図のアドオンを使うと自動で図になります。
- リアルタイムで共同編集できるため、チーム作業に便利です。
ポイント：複数人で編集する際に変更履歴が残るため管理が楽になります。
方法3：Web用PowerPointのSmartArt
- PowerPoint OnlineでSmartArtの「階層」を選びます。
- デザインを整え、色やフォントで優先順位を示します。
- スライドとして保存すれば発表資料にも使えます。
実務での注意点とコツ
- ページ名は短く具体的に（例：「料金プラン」より「月額プラン」）。
- 各ノードにURLや担当者欄を付けると引き継ぎが楽になります。
- 優先度や導線を色分けで示すと理解が速くなります。
- 変更が多いならスプレッドシートでマスタ管理し、図は都度出力しましょう。
これらの方法を使えば、無料ツールだけで実務に耐えるサイトマップが短時間で作成できます。
サイトマップとディレクトリマップの使い分け
定義と役割
- サイトマップ: 視覚的にページの階層やリンク関係を示す図です。全体像をつかみやすく、関係者の合意形成に向きます。
- ディレクトリマップ: ページを一覧で並べ、URLやファイルパス、担当者などを付記した表です。実装や運用で使いやすい仕様書になります。
使い分けの指針
- 設計の初期段階や関係者への説明はサイトマップを優先してください。見た目で構造を伝えやすく、抜けや重複を見つけやすいです。
- URL決定やCMSへの投入、運用ルール作成時はディレクトリマップを使ってください。ページ単位で項目を管理でき、更新履歴を残しやすいです。
作成の簡単な手順
- サイトマップ: 主要なページ（トップ、カテゴリ、詳細ページなど）をまず配置し、階層とリンク矢印でつなぎます。
- ディレクトリマップ: スプレッドシートでページ名、想定URL、テンプレート、担当、公開予定日を列にして一覧化します。
管理と運用のコツ
- サイトマップは変更が頻繁にある設計段階で素早く更新します。可視化で設計合意を得たら、ディレクトリマップに反映してください。
- ディレクトリマップはバージョン管理を行い、URL変更や削除の履歴を残します。
実務上の注意点
- 両者を併用すると効果的です。まずサイトマップで全体像を確認し、ディレクトリマップで詳細と運用情報を詰めます。
Webサイト構成図作成の推奨ツール
概要
目的や規模に応じてツールを選ぶと作業が速くなります。ここでは代表的な5つを使い方と利点で紹介します。
Excel
ページ数が多いサイトで便利です。シートをページ一覧にして階層を列で表現します。フィルターや色分けで管理しやすく、CSVでの書き出しも可能です。
PowerPoint
ページ数や階層が少ない場合に向きます。スライドごとに構成図を作りやすく、発表用資料としても使えます。SmartArtや図形の整列で見た目を整えます。
XMind（マインドマップ）
アイデア出しやサイト構造の俯瞰に向きます。枝分かれで直感的に構成を作れ、画像やリンクで補足できます。構成を確定した後で他ツールへ移すのが効率的です。
Adobe XD
デザインやプロトタイピングに最適です。アートボード間にリンクを設定して動きを確認できます。実機確認や共有も容易で、本格的な検証に向きます。
Googleスプレッドシート
無料で協働しやすいのが利点です。コメントや履歴でチームレビューがスムーズに進みます。リアルタイム編集で遠隔チームと相性が良いです。
選び方の目安
規模が大きければExcel、共同編集ならGoogleスプレッドシート、構想段階はXMind、プレゼンや簡易図はPowerPoint、実装検証やデザインはAdobe XDを使うと効率的です。ツールを組み合わせる運用もおすすめします。
