企画と要件定義：目的・KPI・サイトマップ・ワイヤーフレームを決める｜Webサイト制作の基本と進め方 第3回

ステップ1：目的とKPIを決める

第1回で、サイトの目的を「誰に、何をしてほしいか」として言葉にしました。次は、その目的が達成できたかどうかを測るための数字、つまりKPI（重要業績評価指標）を決めます。

KPIは、最終的な成果から逆算して決めるのが基本です。図2の架空の例を見てください。

ある会社では、サイト経由の受注を月3件にしたいと考えています。過去の実績から、商談の約3割が受注になり、問い合わせの約半分が商談になると分かっているとします。すると、

• 受注を月3件にするには、商談がおよそ月10件必要
• 商談を月10件にするには、問い合わせがおよそ月20件必要

と逆算できます。さらに、今のサイトの問い合わせ率（訪問した人のうち問い合わせた人の割合）が1%なら、必要な訪問は月2,000になります。

このように逆算すると、サイトに求められる役割がはっきりします。問い合わせ率を上げるのか（ページや導線の改善）、訪問を増やすのか（検索や広告からの集客）、あるいは両方なのか。どこに力を入れるかで、作るべきページも変わります。

数字は最初から正確でなくてかまいません。過去の実績がなければ仮の数字で置き、公開後に実際の数字で見直します。大事なのは、サイトの成果を最終成果とつなげて説明できることです。KPIの組み立て方をもっと深く学びたい場合は、KPI設計とマーケ予算の立て方の講座も参考にしてください。

ステップ2・3：読者の行動を整理し、サイトマップにまとめる

次に、主な読者がサイトに来てから目的の行動をするまでに、どんな情報を必要とするかを整理します。たとえばBtoBのサービスサイトなら、「何ができるサービスか」「自社に合うか」「他社と何が違うか」「いくらかかるか」「本当に成果が出るのか」「どうやって申し込むのか」といった疑問を順番に解消していく必要があります。

この疑問ひとつひとつに答えるページを洗い出し、全体を木のような構造で表したものがサイトマップです。図3は、架空のBtoBサービスサイトの例です。

サイトマップをつくるときは、次の点に気をつけます。

• 読者の疑問から考える：社内の組織図や、自社が言いたいことの順番で並べるのではなく、読者が知りたいことの順番で並べます。
• 増えていくページを見込む：事例やお知らせ、記事のように、公開後に増え続けるページは、一覧のページと個別のページの関係まで決めておきます。
• URLの形も一緒に考える：Googleの「SEOスターターガイド」では、ページの内容が分かる語をURLに入れること、似たトピックのページをディレクトリでまとめることが、ユーザーと検索エンジンの理解を助けると説明されています。公開後にURLを変えると転送の手間が増えるので、この段階で決めておくと安心です。

情報の分け方やメニューの設計をもっと深く学びたい場合は、UI・UXデザイン入門の講座で、カードソートなどの方法を扱っています。検索から見つけてもらうためのサイトの構造はSEOの教科書の講座が詳しく扱っています。

ステップ4：ワイヤーフレームで画面の骨組みを決める

サイトマップでページの一覧が決まったら、主要なページについて、画面の骨組みを描きます。これがワイヤーフレームです。線と四角形で、どの情報をどこに置くかを示す設計図です。

図4のように、ワイヤーフレームの段階で決めることと、まだ決めないことを分けておくと、話がまとまりやすくなります。

ワイヤーフレームで決めるのは、どの情報を、どの順番で、どれくらいの大きさで置くかです。ボタンやフォームの位置、スマホで見たときの並び順も、ここで決めます。

一方で、色や書体、写真、細かい文言、装飾や動きは、まだ決めません。これらはデザインの段階で決めます。ワイヤーフレームの段階で色や写真が入っていると、関係者の意見が「この色が好きではない」といった好みの話に流れ、肝心の「情報の順番は正しいか」が議論されなくなりがちです。

スマホでの見え方は、パソコン用の画面を縮めたものとして後回しにせず、最初から一緒に描くのがおすすめです。パソコンでは横に並んでいた情報が、スマホでは縦に積み重なります。そのとき、どの情報が上に来るか、問い合わせのボタンが画面のどこで見えるかによって、読者の行動は大きく変わります。スマホからの訪問が多いサイトほど、スマホのワイヤーフレームを先に描くと、本当に必要な情報が見えてきます。

ワイヤーフレームは、手書きでもかまいません。発注側が自分で手書きのラフを描いて渡すと、制作会社に意図が伝わりやすくなります。

よくある誤解：ワイヤーフレームはデザイナーの仕事だから、発注側は見るだけ

ワイヤーフレームは、サイトの中身を決める重要な段階です。ここで発注側がしっかり確認しないと、デザインが上がってきてから「この情報が足りない」「順番が違う」と気づき、大きな手戻りになります。ワイヤーフレームの確認には、時間をかけてよいと考えてください。

ステップ5・6：機能と条件を決め、要件定義書にまとめる

最後に、必要な機能と条件を決め、関係者が合意できる文書にまとめます。これが要件定義書です。図5は、主な項目の例です。

• 目的・KPI：ステップ1で決めた内容です。何のためのサイトで、何が増えれば成功かを書きます。
• 対象範囲：作るページと、作らないページです。「今回はブログは作らない」「英語版は次の段階」など、作らないものを書いておくことがとても大切です。範囲があいまいなまま進むと、後から追加が積み重なります。
• 機能：CMS、問い合わせフォーム、サイト内検索、多言語、会員機能、外部サービスとの連携（MAツールや顧客管理など）など、サイトが持つべき機能です。
• 非機能：機能そのものではないけれど、満たすべき条件です。表示速度、対応するブラウザや端末、アクセシビリティ、セキュリティ、障害時の対応などです。見落とされやすい項目ですが、第5回で扱う公開前チェックの基準になります。
• 体制・スケジュール：発注側と制作会社それぞれの担当者、確認の回数、公開日です。社内で誰の承認が必要かも書いておきます。
• 公開後：保守、更新、計測の担当です。第6回で詳しく扱います。

要件定義書は、立派な書式である必要はありません。大事なのは、関係者全員が同じものを見て合意していることです。社内の決裁者にも目を通してもらい、後から「聞いていない」とならないようにしましょう。

要件定義で見落としやすい3つのこと

要件定義書の項目を埋めていても、次の3つは抜け落ちやすいので、意識して確認しておきましょう。

1. 原稿と写真を誰が用意するか
ページの構成が決まっても、そこに入れる文章や写真がなければサイトは完成しません。原稿を発注側が書くのか、制作会社のライターに頼むのか。写真は手持ちのものを使うのか、撮影するのか、素材サイトのものを使うのか。ここが決まっていないと、制作の後半で原稿待ちが発生し、公開が遅れる原因になります。

2. 今のページをどう引き継ぐか
リニューアルの場合、今のサイトにあるページのうち、何を残し、何をまとめ、何を消すのかを決める必要があります。とくに、検索やほかのサイトからのリンクで人が来ているページは、URLが変わると訪問者が迷子になります。旧URLから新URLへの転送（リダイレクト）の一覧は、要件の段階で作業として見込んでおきます。具体的な確認方法は第5回で扱います。

3. 社内の誰が、どの段階で承認するか
現場の担当者どうしで話を進めていたのに、公開直前に役員が見て大きな修正が入る、という事態はよく起きます。ワイヤーフレーム、デザイン、公開前の最終確認など、どの段階で誰の承認が必要かを最初に決め、要件定義書の「体制」に書いておきましょう。

実務ではこう使う

要件定義を進めるときは、次のような順番で、社内と制作会社の両方を巻き込むと進めやすくなります。

1. 社内で目的とKPIを決める：第1回でまとめた1枚に、逆算したKPIを書き加えます。決裁者にもこの段階で確認してもらいます。
2. 今あるものを棚卸しする：今のサイトのページ、使える原稿や写真、事例、問い合わせのデータなど、使えるものを洗い出します。
3. サイトマップとワイヤーフレームのたたき台を作る：発注側で手書きのラフを作り、制作会社に整えてもらうと、意図が伝わりやすくなります。
4. 要件定義書にまとめ、合意する：作らないものも含めて書き、関係者全員で確認します。

制作会社に依頼する前の段階なら、ここまでの内容を「提案依頼書（RFP）」にまとめて複数の会社に渡すこともできます。RFPと見積もりの読み方は、次の第4回で扱います。どんな会社がどんな進め方をしているかは、ホームページ制作の成功事例も参考になります。

この回のまとめ

• 要件定義は、作るものの範囲と条件を、関係者が合意できる形で文書にすること。発注側が主体的に関わるほど質が上がる。
• KPIは最終成果から逆算して決め、サイトの成果を事業の成果とつなげて説明できるようにする。
• サイトマップは、読者の疑問の順番で、増えていくページやURLの形も見込んでつくる。
• ワイヤーフレームでは情報の順番と配置を決め、色や写真はまだ決めない。
• 要件定義書には、目的・KPI、対象範囲（作らないものを含む）、機能、非機能、体制・スケジュール、公開後の担当を書く。

確認テスト

次回予告

第4回は「制作の流れと発注」です。制作の一般的な工程、見積もりの読み方、RFPの作り方、請負と準委任の違い、著作権や検収など契約前に決めておくこと、そして発注側の進め方を学びます。

参考資料

• 情報処理推進機構（IPA）「ユーザのための要件定義ガイド 第2版」（2019年9月12日公開） https://www.ipa.go.jp/archive/digital/iot-en-ci/jyouryuu/youkenteigi20190912.html （確認日：2026年11月13日）
• Google 検索セントラル「検索エンジン最適化（SEO）スターター ガイド」 https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja （確認日：2026年11月13日）