コーポレートサイト制作

サイト設計とは?情報設計・SEO設計で決める8項目と6つの手順

公開 更新 読了 約17分

ホームページを新しく作るときやリニューアルするときに、制作会社から「まずサイト設計から進めます」と言われることがあります。ところが、設計で何を決めるのか、渡されたサイトマップやワイヤーフレームのどこを確認すればよいのかが分からないまま承認してしまい、デザインの段階になってから「載せたい情報が入らない」「問い合わせまでの流れが分かりにくい」と気づく例は少なくありません。

サイト設計とは、サイトの目的と成果指標を決め、それを達成するためのページ構成・導線・検索キーワード・計測方法を、デザインに入る前に文書で決めて合意する工程です。

この記事では、発注する側の立場から、サイト設計で決める8つのこと、6つの手順と各ステップの成果物、発注前に用意しておくもの、よくある失敗と防ぎ方を解説します。最後に当社の設計工程と期間も紹介します。

サイト設計とは:デザインの前に「何を・誰に・どの順番で」見せるかを決める工程

サイト設計は、見た目を作る前に、サイトに載せる情報とその並び、訪問者を問い合わせまで案内する道筋を決める工程です。

設計で作る主な資料は、サイト全体のページ一覧と階層を示す「サイトマップ」、各ページに載せる要素と順番を示す「ワイヤーフレーム」、ページごとに狙う検索語をまとめた「対策キーワード一覧」、何を成果として数えるかを決めた「計測の定義」の4つです。これらがそろうと、デザインや原稿の良し悪しを「設計書に沿っているか」で判断できるようになり、担当者の好みで議論が止まることが減ります。

大きな画面の上で、複数の人が文章・グラフ・画像のブロックを配置しているイラスト
サイト設計では、ページに載せる要素と順番をデザインの前に決めます

要件定義・デザインとの違い

要件定義は「何のために、いつまでに、いくらで、どんな機能のサイトを作るか」という前提条件を決める工程です。サイト設計はその前提の中で「情報をどう整理し、どう案内するか」を決め、デザインは設計を見た目に落とし込みます。順番は要件定義 → サイト設計 → デザイン → 実装で、前の工程が固まっていないと後の工程で手戻りが起きます。要件定義で決める項目は要件定義書の記載内容と必要な理由で解説しています。

工程決めること主な成果物
要件定義目的、対象となる顧客、予算、公開時期、必要な機能、CMS、更新体制の前提要件定義書
サイト設計ページ構成と階層、URL、ナビゲーションと導線、対策キーワード、計測方法、更新の分担サイトマップ、ワイヤーフレーム、対策キーワード一覧、計測の定義
デザイン配色、書体、写真、レイアウトの見た目(PC・スマートフォン)デザインデータ
実装CMS への組み込み、フォーム、構造化データ、計測タグの設置公開できる状態のサイト

設計を省くと起きること

  • デザインの確認の場で「このページも必要だった」と気づき、ページの追加やデザインのやり直しが発生する
  • 部署ごとに載せたい情報を並べた結果、顧客が知りたいこと(費用、実績、進め方など)が抜ける
  • どの検索語をどのページで受けるかが決まっておらず、似たテーマのページが複数でき、どれも検索結果の上位に入らない
  • 問い合わせの計測が設定されておらず、公開後に「どのページが成果につながったか」が分からない

サイト設計で決める8つのこと

サイト設計で決めるのは、目的と成果指標、ターゲット、情報設計、ナビゲーションと導線、ワイヤーフレーム、SEO 設計、計測設計、更新・運用体制の8つです。

1. 目的と成果指標(KPI)

最初に「このサイトで何が起きれば成功か」を数字で決めます。コーポレートサイトなら問い合わせ件数や資料ダウンロード数、採用サイトなら応募数、サービスサイトなら見積もり依頼数が代表的な指標です。目的が複数ある場合は優先順位をつけます。たとえば「新規取引先からの問い合わせ」を第一、「採用への応募」を第二と決めておくと、トップページで何を先に見せるかが決まります。

既存のサイトがある場合は、Google アナリティクス(GA4)や Search Console で現状の数字(月間の訪問数、問い合わせ件数、検索での表示回数など)を記録してから目標を立てます。公開後に同じ条件で比べられるようにするためです。

2. ターゲットと検討の流れ

次に「誰が、どの段階で、何を確認してから問い合わせるか」を書き出します。年齢や趣味まで細かい人物像を作るより、検討の流れを具体的にするほうが設計に使えます。

例:部品メーカーのサイトなら、現場の担当者が加工方法や対応できる材質を検索で調べて候補を絞り、そのあと購買担当や上司が会社概要・設備・品質認証を確認してから見積もり依頼に進む、という流れが考えられます。この場合、技術情報を載せたページと、会社の信頼性を示すページの両方が必要です。営業担当が商談でよく聞かれる質問や、問い合わせフォームに書かれた内容は、ターゲットが知りたいことをつかむ材料になります。

3. 情報設計:サイトマップ・ページ構成・階層・URL

情報設計は、載せる情報をグループに分けて階層をつくり、どのページに何を載せるかを決める作業で、成果物はサイトマップ(ページの一覧と親子関係の図)です。

  • グループの分け方:社内の組織図ではなく、顧客の疑問の単位で分けます。「第二事業部の紹介」より「小ロットの試作を相談したい方へ」のように、訪問者が自分に関係するページだと分かる分け方にします。
  • 階層の深さ:中小企業のサイトなら、トップ → 一覧 → 詳細の2〜3階層に収まる構成が目安です。Google のSEO スターター ガイドは、クリック数や階層の深さについて数値の基準を示していませんが、ページ同士の関係を論理的に整理し、似たトピックをまとめることを勧めています。
  • URL:ページの内容を表す短い英単語を使い、単語の区切りにはハイフンを使います。Google は、URL に意味のある単語を使うこと、区切りにはアンダースコアではなくハイフンを使うことを推奨しています(Google 検索における URL 構造のベスト プラクティス)。公開後に URL を変えると転送の設定や評価の引き継ぎに手間がかかるため、設計の段階で決めておきます。

コーポレートサイトで必要になるページの一覧と優先順位は、コーポレートサイトに必要なページ構成一覧で詳しく紹介しています。

4. ナビゲーションと導線

ナビゲーションはどのページからでも主要なページに移動できるようにするメニューの設計、導線は訪問者を目的の行動(問い合わせ、資料ダウンロード、応募など)まで案内する道筋の設計です。

  • 全ページ共通のメニュー(グローバルナビ)には、顧客がよく見るページに絞って置く
  • 現在地を示すパンくずリストを置き、一覧ページや上の階層に戻りやすくする
  • サービス詳細や事例のページの終わりに、問い合わせや資料請求のボタン(CTA)を置く
  • 「まだ問い合わせるほどではない」人向けに、資料ダウンロードや無料診断など一段手前の行動を用意する
  • スマートフォンでは、問い合わせボタンを画面下部に固定するなど、指で押しやすい位置を決める

5. ワイヤーフレーム

ワイヤーフレームは、各ページに載せる要素(見出し、文章、写真、表、ボタンなど)とその順番を、色や装飾を入れずに示した設計図です。発注者は見た目ではなく、「情報の順番が顧客の疑問の順番になっているか」「必要な情報が抜けていないか」「ボタンの位置と文言が適切か」を確認します。文章量の見込みもこの段階で決めておくと、原稿とデザインの食い違いを防げます。

6. SEO 設計:キーワードとページの対応・内部リンク・構造化データ

SEO 設計は、顧客が検索する言葉を調べ、どの言葉をどのページで受けるかを決める作業です。デザインの後からキーワードを当てはめるのではなく、ページ構成を決める段階で組み込みます。

  • キーワードとページの対応:1つの検索意図に1ページを割り当てます。同じ意図の検索語を複数のページで狙うと評価が分散し、どのページも上位に入りにくくなります。
  • title と見出し:ページごとの title(検索結果に表示されるタイトル)と見出しに、そのページで受ける言葉を含めます。
  • 内部リンク:関連するページ同士をリンクでつなぎ、リンクの文言にはリンク先の内容を表す言葉を使います。サービス詳細から関連する事例へ、事例から対応するサービスへ、という往復をあらかじめ決めておきます。
  • 構造化データ:会社名・所在地・ロゴなどの会社情報(Organization)や、パンくずリスト(BreadcrumbList)を、検索エンジンが読み取れる形式で記述します。なお、Google の検索結果でのパンくずの表示は 2025 年 1 月からデスクトップのみになり、よくある質問(FAQ)のリッチリザルトは 2026 年 5 月 7 日から表示されなくなっています(Google 検索セントラルのドキュメント更新履歴)。FAQ のページは検索結果の見た目のためではなく、顧客の疑問に答えるページとして設計します。

キーワードとページの対応は、次のような表にまとめると社内で確認しやすくなります(例:金属加工会社の場合)。

検索語の例検索する人の目的受けるページ
アルミ 切削加工 小ロット少量の加工を引き受けてくれる会社を探しているサービス詳細(アルミ切削加工)
切削加工 試作 事例似た加工の実績があるかを確かめたい事例一覧・事例詳細
会社名取引してよい会社かを確認したいトップ・会社概要
切削加工 見積もり 図面見積もり依頼に必要なものを知りたいよくあるご質問・見積もり依頼フォーム

7. 計測設計:GA4 のキーイベント

計測設計は、公開後に何を成果として数えるかを決め、公開日から計測できる状態にしておく作業です。GA4 では、成果として数えるイベントを「キーイベント」に指定します。以前は「コンバージョン」と呼ばれていましたが、2024 年に名称が変わりました(アナリティクス ヘルプ:コンバージョンとキーイベント)。キーイベントの候補には次のようなものがあります。

  • 問い合わせフォームの送信完了
  • 資料ダウンロードの完了
  • 見積もり依頼・来場予約などフォームごとの送信完了
  • スマートフォンでの電話番号のタップ
  • 採用応募フォームの送信完了

フォームが複数ある場合は、どのフォームから送られたかを区別できるようにイベントを分けます。あわせて Search Console にサイトを登録し、検索での表示回数・クリック数・掲載順位を確認できるようにします。

8. 更新・運用体制

公開後に「誰が、何を、どのくらいの頻度で更新するか」を設計の段階で決めます。お知らせ、事例、採用情報のように更新が多いページは CMS の管理画面から社内で更新できるように作り、会社概要のように更新の少ないページと分けておきます。更新担当が決まっていないと、お知らせが数年前で止まったサイトになり、訪問者に「今も営業しているのか」という不安を与えます。

Service

コーポレートサイト制作のご相談はフェニックスデザインへ

ナレッジベースを運営するフェニックスデザインが、今のサイトの数字を見るところから対応します。URLを入れるだけの無料簡易診断から。

サイト設計の手順:6つのステップと成果物

サイト設計は、現状把握 → 目的とターゲットの合意 → キーワード調査とページの洗い出し → サイトマップと URL → ワイヤーフレームと導線 → 計測・運用の定義と設計書の合意、の6ステップで進めます。

  1. 現状を把握する:既存サイトの数字、競合サイトの構成、営業でよく聞かれる質問を集めます。
  2. 目的・成果指標・ターゲットを合意する:目的の優先順位と目標の数字、顧客の検討の流れを、決裁者を含めて合意します。
  3. キーワードを調べ、必要なページを洗い出す:顧客が検索する言葉と、問い合わせ前に確認する情報から、必要なページの候補を出します。
  4. サイトマップと URL を決める:ページ候補をグループに分けて階層をつくり、各ページの URL を決めます。
  5. ワイヤーフレームと導線を作る:各ページの要素と順番、CTA の位置と文言、フォームの項目を決めます。
  6. 計測と運用を定義し、設計書として合意する:キーイベント、更新の担当と頻度を決め、ここまでの資料を設計書としてまとめて承認します。
ステップ主な成果物発注者が確認すること
1. 現状把握現状の数字のまとめ、競合の構成比較、よくある質問の一覧数字の期間と取り方、営業の実感と合っているか
2. 目的・ターゲット目的と成果指標、優先順位、顧客の検討の流れ決裁者も同じ認識か
3. キーワード・ページの洗い出し対策キーワード一覧、ページ候補の一覧自社が対応していない内容の検索語が入っていないか
4. サイトマップ・URLサイトマップ、URL 一覧(リニューアル時は新旧 URL の対応表)顧客の疑問に答えるページがそろっているか
5. ワイヤーフレーム・導線ワイヤーフレーム、CTA の配置、フォームの項目情報の順番、ボタンの位置と文言、用意が必要な原稿・写真
6. 計測・運用キーイベントの定義、更新の担当と頻度社内で更新する範囲、成果の報告方法

リニューアルの場合は、ステップ4で旧 URL と新 URL の対応表を作り、公開時に 301 リダイレクトを設定します。具体的な進め方はサイトリニューアルで検索順位を落とさない URL 変更とリダイレクトの手順をご覧ください。

発注前に用意するもの・確認すること

発注者が用意しておくべきものは、目的と目標の数字、計測データの閲覧権限、営業の記録、掲載できる情報、参考サイト、社内の確認体制の6つです。

  • 目的と目標の数字:問い合わせを月に何件にしたいか、どの事業の問い合わせを増やしたいか
  • GA4・Search Console の閲覧権限:現状の数字を設計の根拠にするため。使っていない場合はその旨を伝えます
  • 営業の記録:よく聞かれる質問、受注の決め手、失注した理由
  • 掲載できる情報:実績(社名を出してよいかの許諾を含む)、数字、設備、資格・認証、写真
  • 参考サイトと競合サイト:良いと思う点、違和感がある点を短いメモで添えます
  • 社内の確認体制:設計書を確認する担当者と最終決裁者、確認にかけられる日数

設計書を受け取ったら、次の観点で確認すると見落としを減らせます。

  • トップページの最初の画面で「何の会社か」「誰のためのサイトか」が分かる構成になっているか
  • 営業でよく聞かれる質問のそれぞれに、答えるページまたは段落があるか
  • どのページからでも、2〜3 回の移動で問い合わせや資料請求に進めるか
  • 同じ検索語を狙っているページが2つ以上ないか
  • キーイベントとして数える行動が、目的と一致しているか
  • 更新するページと担当者が書かれているか

サイト設計でよくある失敗と防ぎ方

サイト設計の失敗の多くは、顧客ではなく社内の都合で構成を決めることと、公開後の計測・更新を考えないまま設計を終えることから起きます。

よくある失敗起きること防ぎ方
組織図どおりにメニューを作る顧客が自分に関係するページを探せない顧客の疑問の単位でページを分ける
載せたい情報から作り始める費用・進め方・実績など、顧客が知りたい情報が抜ける営業でよく聞かれる質問を先に一覧にする
キーワードを後から当てはめるページの内容と検索語が合わず、上位に入らないページ構成を決める段階でキーワードを割り当てる
似たテーマのページを複数作る評価が分散し、どのページも上位に入りにくい1つの検索意図に1ページを原則にする
デザインの確認でページ構成を変えるデザインのやり直しで期間と費用が増えるサイトマップとワイヤーフレームを承認してからデザインに進む
計測を公開後に考える公開直後の数字が取れず、効果を比べられないキーイベントを設計で定義し、公開日から計測する
更新担当を決めないお知らせや事例が止まり、信頼を損ねる更新するページ・担当・頻度を設計書に書く

当社のサイト設計の進め方と期間

当社では、デザインに入る前に「ブランディング設計」と「情報設計・ワイヤーフレーム」の2つの工程で設計書を作り、各工程の終わりに内容を確認いただいてから次に進みます。

コーポレートサイト(スタンダードプラン)の場合、ヒアリングから公開まで 2.5〜4 か月が標準です。工程ごとの期間の目安とお渡しするものは次のとおりです。

工程期間の目安お渡しするもの
ヒアリング・現状診断1〜2週ヒアリングシート、現状診断レポート(アクセス・順位・導線・速度・セキュリティ)、課題と優先順位の一覧
ブランディング設計2〜3週ブランディング設計書(コンセプト/トーン&マナー/キャッチコピー/求める顧客像)
情報設計・ワイヤーフレーム2週サイトマップ、ワイヤーフレーム(全ページ)、対策キーワード一覧、CTA・計測の定義
デザイン2〜4週デザインデータ(PC・スマートフォン)、画像・イラスト、原稿
実装・SEO・計測設定2〜4週WordPress サイト、管理画面の操作マニュアル、GA4・Search Console・タグマネージャーの設定、構造化データ・XML サイトマップ

情報設計の工程では、検索キーワード調査の結果をもとにサイトマップとページ構成を決め、問い合わせや資料請求のボタンの位置、フォームの項目、計測したい指標もこの段階で定義します。公開から 30 日後には、アクセスと問い合わせの初期データを確認するレビューを行います。工程ごとの作業内容と、貴社にお願いすることは制作の流れにまとめています。

よくあるご質問

サイト設計にはどのくらいの期間がかかりますか?

当社の場合、サイトマップとワイヤーフレームを作る情報設計の工程は2週が目安です。その前のヒアリング・現状診断(1〜2週)とブランディング設計(2〜3週)を単純に足すと5〜7週ですが、並行して進められる工程もあるため、実際はこれより短くなることがあります。ページ数や、掲載する情報をそろえるのにかかる時間によっても変わります。

小規模なサイトでもサイト設計は必要ですか?

必要です。5ページ程度のサイトでも、目的、ページごとの役割、問い合わせまでの導線、計測方法は決めておく必要があります。ページ数が少ないぶん設計にかかる時間は短くなりますが、省くと公開後に成果を測れず、何を直せばよいかも判断できません。

サイトマップとワイヤーフレームは何が違いますか?

サイトマップはサイト全体のページの一覧と階層を示す図、ワイヤーフレームは1ページの中に載せる要素と順番を示す図です。サイトマップで「どんなページがあるか」を決めてから、ワイヤーフレームで「各ページに何をどの順番で載せるか」を決めます。なお、検索エンジンにページの一覧を伝える XML サイトマップは、名前は似ていますが別のファイルです。

設計を承認した後に内容を変えることはできますか?

変えることはできますが、後の工程ほど影響が大きくなります。当社では各工程の終わりに確認いただき、合意してから次に進みます。合意後の変更は、影響する範囲に応じて追加の費用と期間をご相談したうえで対応します。

まとめ

サイト設計は、デザインの前に目的と成果指標、ページ構成、導線、検索キーワード、計測方法、更新体制を決めて、文書で合意する工程です。要点は次のとおりです。

  • 設計の主な成果物は、サイトマップ、ワイヤーフレーム、対策キーワード一覧、計測の定義の4つ
  • ページは社内の組織ではなく、顧客の疑問の単位で分ける
  • キーワードはページ構成を決める段階で、1つの検索意図に1ページを割り当てる
  • GA4 のキーイベントを設計で定義し、公開日から成果を測る
  • サイトマップとワイヤーフレームを承認してからデザインに進む

当社のコーポレートサイト制作では、ヒアリングと現状診断から始め、ブランディング設計と情報設計を設計書として合意してからデザインに進みます。設計の進め方とプランごとの料金はコーポレートサイト制作のサービス内容でご確認いただけます。

関連記事:ワイヤーフレームとは?作り方と役立つツール/サイトの「導線」とは?分析・設計のポイント/サイトに合った SEO 対策キーワードの選び方

フェニックスデザイン株式会社WEB制作会社が運営するナレッジベース編集部

コーポレートサイト・採用サイト・サービスサイトの制作と、公開後の運用保守・集客改善の現場で得た知見をもとに、発注する側の視点で記事を制作・更新しています。運営会社の所在地・事業内容は会社案内、制作の考え方はブランディング×マーケティング論をご覧ください。

この記事は 2023年4月24日 に公開し、2026年10月23日 に内容を確認・更新しました。