はじめに
目的
本資料は、Webサイトの企画書をこれから作る方や改善したい方のために、作り方や構成要素、実例やテンプレートを丁寧に解説することを目的としています。新規制作、リニューアル、社内やクライアントへの提案で役立つ内容をまとめました。
対象読者
・Web担当者やディレクター、マーケティング担当の方
・制作会社へ依頼する前に社内で整理したい方
・企画書作成を学びたい初心者の方
本資料で期待できること
企画書の役割を理解し、必要な項目を漏れなく準備できるようになります。具体的なテンプレート例や、よくある失敗例も紹介するので、実務ですぐ使える知識が身につきます。
読み進め方
第2章で企画書の役割を説明し、第3章で一般的な構成を紹介します。第4章以降で作成のポイント、テンプレート、NG例、便利な参考サイトを順に解説します。実例を見ながら自分の目的に合わせてカスタマイズしてください。
Webサイト企画書とは？
概要
Webサイト企画書は、新規制作やリニューアルの目的、対象、構成、デザイン方針、予算などをまとめた提案書です。クライアントと制作側で共通認識を作り、作業をスムーズに進めます。
目的
- ゴールを明確にする（例：問い合わせ数を月20件に増やす）
- 範囲を決める（何を作るか、何を除外するか）
- 見積もりやスケジュールの根拠にする
主な記載項目（例）
- 目的・課題：現状と改善点を明示
- ターゲット：年齢層や利用シーンを具体例で示す
- サイト構成：ページ一覧や導線のイメージ
- デザイン方針：雰囲気、色使い、参考サイト
- 機能要件：フォーム、決済、会員機能など
- 予算・スケジュール：フェーズごとの費用と納期
- 成果指標（KPI）：計測方法と目標値
誰が使うか
クライアント、PM、デザイナー、開発者、マーケ担当が主に参照します。立場に応じて必要な詳細を深めます。
重要性と効果
企画書で目的と範囲を共有すると認識ズレを防げます。優先順位を決めれば、予算内で効果的に進められます。作成は手間ですが、後の手戻りを減らす投資になります。
第3章: Webサイト企画書の一般的な構成・項目
導入・背景
現状と課題を簡潔に示します。何が問題で、なぜサイトが必要かを明確にします。市場や競合の概況を短く補足すると説得力が増します。
企画の目的
サイトで達成したい明確な目的を書きます。例：問い合わせ増加、EC売上拡大、ブランド認知向上など。目的は測定可能にします。
ターゲットユーザー（ペルソナ）
想定するユーザー像を具体的に示します。年齢、職業、課題、行動パターンなどを1〜3名のペルソナで表現します。
サイトコンセプト・方向性
サイトの価値提案やトーン（親しみやすさ・専門性など）を示します。ブランドとの整合性や差別化ポイントも記載します。
提案内容（サイト構成・機能・デザイン）
サイトマップや主要ページ、必要な機能（検索、会員、決済、フォーム等）を列挙します。デザイン指針（カラー、写真、レイアウト）やレスポンシブ対応、アクセシビリティも明記します。
KPI・KGI（指標設定）
目標指標と測定方法を示します。例：月間訪問数、CVR、平均購買単価、離脱率など。達成目標と現状値を比較します。
プロジェクト体制・スケジュール
担当者と役割、主要なマイルストーン（企画、設計、制作、テスト、公開）を提示します。納期とレビューの頻度も書きます。
予算・コスト
概算費用を項目別に示します。制作、外注、保守、広告費などの前提条件も明記します。
お問い合わせ・連絡先
窓口担当者名、連絡方法、レスポンスの目安を記載します。次のステップ（提案承認や打ち合わせ案内）も添えます。
企画書作成のポイントとコツ
まず目的とターゲットを明確にする
企画書は目的が軸になります。売上拡大、認知向上、リード獲得など何を達成したいかを最初に書きます。ターゲットは年齢や職業、行動パターンまで具体的に想定すると説得力が増します。
5W1Hでコンセプトを整理する
誰に（Who）／何を（What）／いつまでに（When）／どこで（Where）／なぜ（Why）／どのように（How）を短く明確にします。例：「30〜40代の働く女性に向けて、半年で問い合わせ数を20％増やすための情報提供サイトを制作する」などです。
KPI・KGIを定量的に設定する
到達点（KGI）と経過指標（KPI）を分けます。KGIは最終的な成果（売上、問い合わせ数など）、KPIはPV、滞在時間、CVRなどの中間指標です。数値と期限を必ず入れ、誰がどの指標を追うかも明記します。
シンプルに・具体的にまとめる
長文は避け、1ページに1メッセージを意識します。見出しと箇条書きで要点を伝え、必要なら図表やフロー図を入れます。読み手の時間を尊重することが重要です。
デザインや構成のイメージを積極活用する
ワイヤーフレーム、参考サイトのキャプチャ、カラーやトーンを示すムードボードを入れると具体性が増します。文面だけでなく視覚資料でイメージを共有してください。
説得力を高める小さなコツ
- 根拠を示す（ユーザー調査や競合データなど）
- リスクと対策を簡潔に書く
- 優先度を示し、フェーズ分けする
- 資料は関係者が追記できる形式にする
最後に、提案内容が目的に直結しているかを常に確認してください。
Webサイト企画書の例（テンプレート構成）
表紙
プロジェクト名、作成日、作成者、クライアント名を記載します。ロゴや簡単なサブタイトルを入れると一目で目的がわかります。
導入・背景
現状の課題や市場の状況、サイトを作る背景を簡潔に説明します。数値や事実を1〜2点入れると説得力が増します。
目的・目標
サイトで達成したいこと（認知拡大、問い合わせ増、販売促進など）を明確にします。具体的なKPI（例：半年で問い合わせ30件）を入れてください。
ターゲットユーザー
年代、性別、職業、ニーズやペインポイントを具体的に描写します。主要ターゲットと副次ターゲットを分けて書くと親切です。
サイトコンセプト・方向性
サイトの雰囲気（信頼感、親しみ、専門性など）や伝えたいメッセージを短くまとめます。トーン＆マナーの指針も入れると制作時にぶれません。
サイト構成・主な機能
ページ構成（トップ、サービス、料金、FAQ、ブログなど）と必要な機能（お問い合わせフォーム、会員機能、決済、検索など）を一覧で示します。優先度も明記してください。
デザインイメージ
配色、写真の雰囲気、参考サイトのスクリーンショットやリンクを挙げます。ワイヤーフレームや簡単なラフを添付するとわかりやすいです。
制作体制・スケジュール
担当者、外部パートナー、各工程の期限（企画、デザイン、開発、テスト、公開）を表で示します。リスクと対応策も一言添えてください。
予算・コスト
概算見積もり（制作費、運用費、広告費など）を項目ごとに提示します。想定の支払い条件も明記します。
お問い合わせ先
担当者名、メール、電話、担当部署を記載します。追加質問や修正依頼の方法も書くと親切です。
NG例・よくある失敗
ここでは、企画書でありがちな失敗例を挙げ、原因と改善策をわかりやすく示します。
1) 目的やターゲットが不明確で説得力がない
具体性がないと、関係者の合意が得られません。例えば「集客を増やす」とだけ書くと手段が決まらず議論が終わります。
改善策：達成したい数値や期間を入れ、誰に向けるかを一文で明確にします（例：30〜40代女性の月間問合せを半年で20%増）。
2) デザインや機能が抽象的でイメージが湧かない
「見やすく」「高機能」とだけ書くと開発側の解釈がバラバラになります。
改善策：ワイヤーフレームや参考サイト、必須機能と優先度を添えて示します。
3) スケジュールや予算の具体性不足
曖昧だと遅延や追加費用が発生します。
改善策：マイルストーンと担当者、予算レンジとリスク想定を明記します。
4) クライアント要望や現状分析が反映されていない
現状の数値や課題を無視すると実行性が落ちます。
改善策：現状データ（アクセス数・コンバージョン等）を入れ、要望とのギャップを示します。
実践的な改善ポイント（簡潔）
- 目的は数値化・期限を入れる
- ターゲットはペルソナ化する
- デザインはワイヤーか参考URLで共有する
- スケジュールは段階ごとに分ける
- 予算はレンジと想定工数で示す
- 現状データを必ず添える
簡単チェックリスト
- 目的は SMART か
- ターゲット像は明確か
- 主要機能が具体的か
- 納期・予算に余裕はあるか
- 現状分析があるか
便利なテンプレートや参考サイト
無料・有料の代表サイト
- SlideShare：実例のプレゼンや企画書を閲覧できます。構成の参考に便利です。
- Canva：豊富なテンプレートをブラウザで簡単に編集できます。非デザイナー向け。
- bizocean：ビジネス向けテンプレートが豊富で、そのまま使える書式が揃います。
- Microsoft / Google テンプレート：Wordやスライド形式で配布。手軽に編集可能です。
- Figma / Adobe XD：ワイヤーフレームや高精度なデザイン案を作るときに便利です。
- Behance / Dribbble：デザインの実例やトレンドを見るときにおすすめです。
用途別のおすすめ
- 企業サイト：会社概要やサービス紹介のテンプレート
- ランディングページ：CTAが目立つ縦長デザイン
- ECサイト：商品一覧・購入導線のモック
- ポートフォリオ：作品を目立たせるレイアウト
テンプレート選びの注意点
- ライセンス：商用利用可か必ず確認してください。
- 編集しやすさ：ファイル形式（PPTX, PDF, Figma）をチェック。
- モバイル対応：レスポンシブの考え方が反映されているか確認。
- 画像権利：素材画像の使用条件に注意。
使い方の流れ（簡単5ステップ）
- 目的に合うテンプレートを探す
- ライセンスと形式を確認
- ダウンロードして自社情報に置き換える
- 色・フォント・画像をブランドに合わせて調整
- 実際の画面（プレビュー）で確認して修正
カスタマイズのコツ
- 重要な情報を上に配置し、CTAは目立たせる
- 色はブランド2〜3色に絞ると見やすい
- フォントサイズは読みやすさ重視で調整
- 画像は高解像度で差し替え、必要ならトリミング
最後に
テンプレートはあくまで「参考」です。構成や表現を自社に合わせて調整し、丸写しは避けてください。
まとめ
Webサイト企画書は、プロジェクトを成功に導く設計図です。目的やターゲット、サイトの方向性、具体的な施策を明確に記すことで、関係者全員が同じゴールを共有できます。初心者でも実例やテンプレートを活用すれば、説得力のある企画書を作成できます。
- 要点の振り返り
- 目的を一文で示すと判断が早くなります。
- ターゲット像は具体的に描き、優先順位をつけます。
-
成果指標（KPI）は測定できる項目にします。
-
実践のコツ
- 短く分かりやすい言葉で書きます。
- 図や表を使って視覚的に伝えます。
- 関係者に早めに共有して意見を集め、計画を改善します。
最後に、完璧を目指すよりも一度形にして改善を重ねることが大切です。テンプレートを土台にして、現場の状況に合わせて柔軟に更新していきましょう。
