



WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc




WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
ペン博士!Webサイト制作は、要件定義が大事だと聞きましたが、具体的にどう進めればいいのか分からなくて困っています…
Webサイトの要件定義は流れを押さえることが大切じゃ!現状分析から合意形成、そして要件定義書の作成まで、しっかり段階を踏む必要があるんじゃぞ!
そうなんですね!ありがとうございます!
「要件定義書を作成したいけれど、どんな内容を書けばいいのかイメージできない…..」そんな悩みはありませんか?
この記事では、要件定義とは何かを解説します。進め方の4ステップや、要件定義書に盛り込むべき主要項目も取り上げます。読み終えるころには、自社のプロジェクトに必要な要件定義書を作成できるでしょう。
「学習→案件獲得」につなげた受講生のリアルな体験談も公開中!
働き方を変えたい方にも響くストーリーです。
片山さん
妊娠をきっかけに、子どものためにもどこでも働けるスキルを身に付けたいと考える。そこで、オンラインスクールのfammで1ヶ月間Web制作の勉強を開始。その後、独学で勉強に励むも限界を感じ、案件保証が魅力のWithCodeへ入学し、稼げる力を身に付けることができた。現在は副業として稼ぐ力を身に付け、10件以上の案件を担当するまでに成長した。
詳しくはこちらの記事をご覧ください。
片山さんの主な制作実績はこちら
まずは「要件定義とは何か」を理解することが第一歩じゃ!
仕様や目的を決めずに進めると、途中で迷走したり納期に遅れたりするリスクが高まってしまうんじゃ。
要件定義とは、実現したいWebサイトの仕様を合意し、文書化する工程です。見た目や機能だけでなく、体制やスケジュールも含めて関係者と共有します。以下のように5W1Hで整理する方法が有効です。
5W1H | 押さえる観点の例 |
---|---|
Why(なぜ)は | 制作・リニューアルの背景、目的、現状の課題。 |
When(いつ)は | 着手のタイミングと公開予定。 |
Where(どこで)は | 社内の担当部署、外部制作会社などの関与先。 |
Who(誰が)は | 責任者、実務メンバー、ステークホルダー。 |
What(何を)は | 実装機能、デザイン方針、セキュリティ水準。 |
How(どのように)は | 開発言語・プラットフォーム、公開後の運用保守。 |
要件があいまいだと、関係者の意見に翻弄され手戻りが増えます。公開時期に間に合わない、品質が落ちるといったリスクも高まります。スケジュール通りに進めつつ質を担保するには、要件定義が欠かせません。
Webサイト制作は通常「企画 → 要件定義 → 制作 → 実装 → 公開」という流れで進みます。要件定義はその中で、企画を具体的な作業に落とし込む橋渡しの役割を担います。
ここで決めた内容は後戻りしにくく、プロジェクト全体の基盤となる重要なポイントです。
ここでは要件定義の進め方を4ステップで解説していくぞ!「現状分析 → 仮説立案 → 合意形成 → 要件定義書作成」という流れを理解すれば、計画がぶれずスムーズに進むんじゃ!
まず現状を把握します。アクセス解析やユーザーテストを通じてデータを収集し、どこに課題があるのかを明らかにします。既存顧客の行動からペルソナを設定すると、認識のずれを防ぎ、課題をより明確にできるでしょう。
次に課題をどう解決するか、仮説を立てます。新規構築ではカスタマージャーニーマップを作り、ユーザーがどのようにサイトを利用するかを想定します。リニューアルの場合は、既存の課題から逆算して解決策を導く流れです。
例えば「アクセス数は伸びているのに問い合わせ件数が増えない」ケースを考えてみましょう。このとき原因を「問い合わせページまでの導線が分かりにくい」と仮定するなら、リンク配置を見直す方法が有効です。CTAボタンを目立たせる工夫も効果的です。
また「フォームの入力項目が多すぎる」と仮説を立てる場合は、入力ステップを減らすなど、簡略化の対策が考えられます。
分析や仮説の内容を持ち寄り、関係部署や意思決定者と調整します。ここでの合意形成は非常に重要で、後から覆ると大きなコスト増につながります。全員が納得して進めるには、議論の場を設けることが必要です。あわせて承認フローも明確にしておきましょう。
関係者との合意が取れたら、その内容を一つの文書にまとめます。要件定義書は、「プロジェクトの羅針盤」といえる存在です。
開発の途中では「当初の目的は何だったか」「優先順位はどちらか」と迷う場面が必ず発生します。その際に要件定義書があれば、感覚や個人の意見に左右されません。合意した内容を根拠に進めることができます。
目的や優先順位を文章で確認できる状態にしておけば、時間が経っても方針がぶれにくく、スケジュール通りに進めやすくなります。
ここでは要件定義書の主要項目を9つ解説するぞ!各項目ごとに必要な要素を確認すれば、抜け漏れのない文書を作れるはずじゃ!
「なぜこのサイトが必要なのか」を示す項目です。ここをしっかり明記することで、プロジェクト全体の方向性がぶれにくくなり、関係者の合意形成もしやすくなります。特に以下の観点を整理しておきましょう。
・制作・リニューアルの目的
(例:新規顧客獲得、ブランディング強化、既存サイトの使い勝手改善など)
・現状分析の結果
(例:直帰率が高い、コンバージョン率が低い、スマホ表示に不具合があるなど)
・リニューアルの範囲や全体像
(例:トップページと商品一覧のみ改善するのか、全ページ刷新するのか)
また、数字(CV率、直帰率、滞在時間など)を盛り込むと説得力が増し、客観的な資料として機能します。また用語の定義を整理しておくと、途中から参加するメンバーでもスムーズに内容を理解できるでしょう
プロジェクト概要では、今後どのように制作やリニューアルを進めるかを明確に示します。特に以下の観点を整理しておきましょう。
・人員体制・役割分担
・プロジェクトマネージャー、デザイナー、エンジニアなど担当者を明確化
・最終決裁者や承認フローを示すと調整がスムーズ
・各工程のスケジュール
・企画、設計、制作、実装、テスト、公開までの工程を時系列で明記
・マイルストーンを設定すると進捗管理が容易
・成果物の種類や納品場所
・提出形式(例:PSDデータ、ソースコード)や納品方法(クラウドストレージ、Gitリポジトリ)を具体化
・コミュニケーションルール
・使用するツール(例:Slack、Teams、Backlog)
・定例打ち合わせの回数と頻度
・情報共有の範囲と参加メンバー
これらを要件定義書に明記しておくことで、進行管理の効率が高まり、関係者全員が同じ方向を向いてプロジェクトを進めやすくなります。
サイト構成の項目では、Webサイトの全体像を把握できるように整理しておくことが重要です。特に以下の観点を整理しておきましょう。
・サイトマップ
・公開画面(ユーザーが閲覧するページ)と管理画面(CMSや運用者向けの画面)を分けて整理
・ページ階層やリンク関係を図式化すると直感的に把握できる
・対応デバイス・ブラウザ
・PC、スマートフォン、タブレットなど、想定する閲覧環境を明記
・主要ブラウザ(Chrome、Safari、Edge、Firefoxなど)の対応状況を記載
・OS環境
・iOS、AndroidなどモバイルOSの対応範囲
・WindowsやmacOSといったデスクトップ環境も含めて検討
・導線設計(ナビゲーション設計)
・ユーザーが情報にたどり着きやすい動線を意識
・メニュー構成、パンくずリスト、内部リンクの設計を含める
・拡張性の確保
・将来的にページやコンテンツを追加する際に無理のない構造になっているか
・サイトマップやCMS設定の柔軟性を確認
資料が膨大になる場合は、要件定義書の本文にすべて盛り込むのではなく、別資料として添付しておくと実務上扱いやすくなるでしょう。
ここでは「機能要件」と「非機能要件」に分けて整理します。特に以下の観点を整理しておきましょう。
・機能要件:ページ表示、検索機能、問い合わせフォーム、会員登録、決済機能など
・非機能要件:可用性、性能・拡張性、運用・保守性、セキュリティ、環境(エコロジー)といった品質面の基準。
非機能要件は見落とされがちですが、運用コストや安定性に直結します。そのため数値目標を伴って設定するのが望ましいです。例として「応答時間500ms以内」「稼働率99.9%以上」「ログ保存期間は1年間」といった 測定可能な基準 を定めると、合意形成がしやすくなります。
技術要件では、Webサイトを構築する際に使用する技術的な前提を明確にします。曖昧なまま進めると、途中で仕様変更や不具合につながる可能性が高くなります。そのため、専門的な観点をしっかり押さえておくことが重要です。特に以下の観点を整理しておきましょう。
・開発言語
・HTML / CSS / JavaScript / PHP / Python など
・フロントエンドとバックエンドで利用する言語を区別する
・フレームワーク
・React、Vue.js、Laravel、Django など
・採用する理由や、禁止する技術があれば明記
・データベース
・MySQL、PostgreSQL、MongoDB など
・選定基準(拡張性、パフォーマンス、既存環境との整合性)を示す
・バージョン管理
・Git を利用するかどうか
・ブランチ運用ルールやリポジトリの管理方法
・ミドルウェア / 通信プロトコル
・Webサーバー(Apache / Nginx など)
・API通信方式(REST / GraphQL など)
・推奨技術・禁止技術
・使用を推奨するライブラリや開発環境
・セキュリティや保守性の観点から使用を避けるべき技術
技術要件は専門性が高いため、必ずエンジニアと協議しながら決定することが重要です。あらかじめ推奨・禁止技術を明示しておくことで、トラブルや認識のズレを防ぎ、プロジェクトを円滑に進めやすくなります。
インフラ要件では、Webサイトを安定して稼働させるために必要な基盤を明確にします。特に以下の観点を整理しておきましょう。
・サーバー
・本番環境と検証環境を分けて準備する
・種類(オンプレミス / VPS / クラウド)と
・スペック(CPU、メモリ、ストレージ容量)
・ドメイン
・利用するドメイン名とサブドメインの有無
・DNS設定や管理ツールの運用方法
・SSLサーバー証明書
・使用する証明書の種類(DV、OV、EVなど)
・有効期限の管理
これらを整理して要件定義書に明記しておくことで、インフラ面のリスクを低減でき、障害発生時にも迅速な対応が可能になります。
セキュリティ要件では、Webサイトを安全に運用するための対策を具体的に整理します。セキュリティは強固であるほど安心ですが、その分コストや運用負荷も増えます。扱う情報の機密性やリスクレベルに応じて、適切な水準を設定することが大切です。特に以下の観点を整理しておきましょう。
・改ざん防止策
・管理画面へのアクセス制御(IP制限・多要素認証)
・ファイル更新履歴のログ取得
・外部攻撃への対策
・DDoS攻撃対策:WAF(Web Application Firewall)の導入やCDNの活用
・SQLインジェクション・XSS対策:入力値チェックやサニタイズ処理の徹底
・ブルートフォース攻撃対策:ログイン試行回数制限、CAPTCHA導入
・レスポンス低下防止
・過負荷時の負荷分散設定
・キャッシュ機構の導入
・データベースの脆弱性対策
・定期的な脆弱性診断・パッチ適用
・バックアップと復旧手順の明示
・ユーザーへの被害軽減策
・不正ログイン発生時の通知機能
・フィッシング防止のためのドメイン管理徹底
リリース要件では、Webサイトを本番環境へ切り替える際の手順や責任範囲を明確にします。事前にルールを定めておくことで、当日の混乱を防ぎ、円滑に移行できます。特に以下の項目を整理しておきましょう。
・リリース日程
・開始日時と終了予定時刻を明記
・サービス停止が発生する場合は、その時間帯も明示
・実行担当者と判定担当者
・実際に切り替え作業を行う担当者
・動作確認・品質判定を行う担当者(ダブルチェック体制)
・切り替え手順
・本番環境へのデプロイ方法
・サーバー設定やDNS切り替えの流れ
・ロールバック手順(不具合発生時の戻し方)
これらを要件定義書に明記しておくことで、公開準備を早い段階から進めることができます。
運用や保守の要件では、技術的なルールだけでなく、誰がどのように対応するかといった体制面も明記しておくことが重要です。特に以下の観点を整理しておきましょう。
・技術面:バックアップの頻度、復旧時間の目標、ログ管理方法。
・体制面:問い合わせ窓口、担当範囲、対応時間、エスカレーションルール、引き継ぎ手順。
これらを要件定義書に明記しておくことで、障害発生時でも速やかに対応できます。その結果、長期的な安定運用にもつながります。
ペン博士、現状分析から要件定義書作成までの流れが理解できました!
うむ、これらをしっかり理解して今後のWebサイト制作に生かすんじゃぞ!
ありがとうございます!これで実際のプロジェクトでも、自信を持って要件定義に取り組めます!
Webサイト要件定義のポイントを以下にまとめます。
・要件定義は、サイトの目的や機能、体制、スケジュールなどを明確化し、関係者全員の共通認識を作るために不可欠。
・進め方は「現状分析 → 仮説立案 → 合意形成 → 要件定義書作成」の流れで整理するとスムーズ。
・要件定義書には背景・概要・サイト構成・システム要件・技術要件・インフラ・セキュリティ・リリース・運用保守といった項目を盛り込み、測定可能な基準や体制面も明記することが重要。
これらを押さえておけば、後戻りの少ない効率的な開発が可能です。スケジュールと品質を両立し、成果につながるWebサイト制作を実現しましょう。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!
公式サイト より
今すぐ
無料カウンセリング
を予約!