ホームページ制作特有の要件定義をご紹介します。要件定義とは、ホームページ制作に必要な条件をクライアントと合意形成するための取り決めを確認する作業です。
たとえばシステムに関する要件は、以下のことを定義していきます。
- どんなシステムを使うか
- どんな機能を実装するのか
- どんな技術を使用するか
システムに関する要件は事前に決めて、クライアントとの合意形成のとれた状態で制作に入らなくてはなりません。ホームページ制作中の要件変更は、スケジュールの大幅な変更・調整など、重大なリスクに発展してしまいます。
ホームページ制作ではとくにシステムに関する要件が重要になるため、システム要件を例に挙げました。
この記事では、ホームページ制作の制作工程にそって、要件定義を紹介したいと思います。
要件定義に必要なホームページの目的
要件定義は、ホームページの目的や役割が決まっていなければ決められません。まずは、制作のコンセプトを考えましょう。
ホームページの形式を決める
ホームページは、目的に応じたサイト構成・形式があります。次の記事で紹介しています。
ホームページの戦略を考える
ホームページ戦略に応じたシステム実装を行うために、戦略立案の基盤となる自社分析を行いましょう。次の記事では、自社分析の項目を紹介しています。
ホームページ全体・設計に関する要件定義
設計段階で必要な要件は、ホームページ全体に影響すること・クライアントとのコミュニケーションに関することです。
コミュニケーションに関して
- どんなツールを使用するのか
- どの時点で確認・修正を検討するのか
コミュニケーションの方法や手段・目的を定めておくと、制作進行がスムーズになります。
コミュニケーションツールを決める
クライアントがツールに慣れているか、または環境で制限ありインストールできないなど、決めておくといいでしょう。クライアントの要望を優先するべきですが、制作がスムーズに進行するのであれば、ツールの提案・レクチャーもしなければなりません。
- メール
- Chatwork（チャットワーク）
- Slack
- LINE
- Googleツール（ドキュメント・スプレッドシート・スライド）
- Microsoft（ワード・エクセル・パワーポイント）
- Dropbox
- zoom（ビデオチャットツール）
- Google Meets（ビデオチャットツール）
スケジュール・確認のマイルストーンを決める
制作のスケジュールや進捗状況を明確にするために、マイルストーン（中間目標地点）を決めます。大まかに以下のことを定義しましょう。
- どの段階（設計書が出来た段階で）
- 何を確認するか（要望どおりの設計になっているか）
- 誰が確認するか（クライアントとWebディレクターで確認する）
スケジュールに、提出・確認・修正など、細かく日にち設定をしていきます。エクセルなどで制作し、ガントチャート形式でつくるといいでしょう。
ドメインに関して
ドメインの管理やホームページ設置場所について要件を確認します。
- 新規ドメイン・既存ドメイン、どちらのドメインを使用するか
- サブドメイン・サブディレクトリ、ホームページの設置場所はどこか
- ドメインの契約は、クライアント行う・代行する
- SSL（Secure Socket Layer）設定は、無料・有料
ドメインは、家に例えると住所にあたります。住所（ドメイン）はあらかじめ決めておかないと、取得できなかったり、準備に手間取って公開が遅れるなど、トラブルに発展しやすい要件です。
アクセス解析について
アクセス解析を設置していないホームページは、ないといって過言ではないでしょう。アカウントの取得・管理、設置手段・方法などの取り決めをしておきましょう。
- アクセス解析（Google Analytics）のアカウントはあるか。クライアント側・制作側
- Google Tag Managerを使用するか
- Google Search Consoleを使用するか
- アクセス解析のユーザーは誰か
- アクセスレポートの提出は必要か・どんな数値が必要か
アクセス解析が設置されていなければ、データの取得ができません。ホームページの費用対効果や成果が測定できなくなるので、必ず確認するようにしてください。
※Google Tag Manager、Google Search Consoleは、Google Analyticsでのアクセス解析を手助けしてくれるツールです。
レスポンシブ対応について
レスポンシブWebデザインでホームページを制作するか確認しましょう。
ブレイクポイント
ブレイクポイントとは、PCやタブレット・スマートフォンなどのデバイスの表示領域に、ホームページの表示を合わせるための基準・起点を定めるものです。ホームページの横幅、pxで指定します。
- PC（900px 〜 1280px）
- タブレット（768px 〜 900px）
- スマートフォン（768px 以下）
ブレイクポイントを何箇所設置するか、どこにブレイクポイントを設置するかなど、あらかじめ決めておくと、コーディング時の無駄な工数が発生せずに済みます。
ブラウザ対応
ユーザーはホームページを閲覧するとき、さまざまなブラウザを使います。ホームページは使用するブラウザによって、表示に若干の差異があったり、異なるプログラミング対応が必要になる場合があるので、対応するブラウザやバージョンを決めておきましょう。
- Google Chrome（最新版）
- Safari（最新版）
- Microsoft Edge（最新版）
- Firefox（最新版）
大きくこの4つに対応していれば問題ないでしょう。念のため、スマートフォンのブラウザアプリ表示も確認しておきます。
ホームページ公開まえに、各ブラウザでの表示確認を忘れずにして、レイアウトや装飾の崩れがないように対応しましょう。
設計に関する要件定義について
設計工程をスムーズに進行するために重要なこととして、クライアントと制作側の作業範囲・分担を明確にしておくことがあります。
原稿について
- 本文のテキスト原稿
- キャッチコピー
- meta : タイトル・ディスクリプション・キーワード
- インタビュー記事など
素材提供について
- ロゴ素材
- 写真素材
- イラスト
これらを実際の制作に入る前に洗い出しておくと、制作進行の妨げになる素材待ち・確認待ちなどが少なくなります。
デザインに関する要件定義
デザインに関する要件は、クライアントとのデザイン確認・決定などのコミュニケーションを円滑にします。
使用するデザインツール
ホームページ制作では、adobeデザインツールを使用する場合が多いでしょう。ただし、クライアントはデザインツールを所有していないことがほとんどです。
- 使用するデザインツールの提示
- デザインの確認方法・提出形式
- データの受け渡し方法（メールでの送付・チャットツールでの送付）
クライアントの確認作業がスムーズに進行しなければ、スケジュール通りにホームページ制作をすすめることが難しくなります。制作側は、できるだけクライアントの環境に合わせる努力をしましょう。
デザインの制作範囲
主に、ページ数が多い・規模の大きいホームページを制作する場合、全ページのデザイン制作は現実的な作業ではありません。
主要ページのデザインは制作し、レイアウトが似ているページは必要なパーツのみ制作するなど、誤解を生まないように事前確認をしっかり行います。
制作するページ関して
- トップページ
- 会社概要
- サービス紹介
- お問い合わせページ
他のページに関しては、パーツのみ制作するなどです。
デザインの確認に関して
- デザイン提案は何回まで可能か
- デザインの修正は何回まで可能か
デザインの譲渡に関して
制作したデザインデータの所有権を取り決めておきましょう。基本的には制作した会社に著作権があります。データ・著作権もすべて譲渡する場合もあります。
プログラミングに関する要件定義
プログラミング技術や使用するシステムなどは、実際にホームページ制作が進行してしまうと変更はできません。ホームページ設計の段階でも必要になる要件です。
使用するCMS（コンテンツ・マネジメント・システム）について
CMS（コンテンツ・マネジメント・システム）とは、ホームページの更新を、プログラミングコードを書かずに、管理画面から更新できるようにするシステムの総称です。
- WordPress（オープンソース）
- Movable Type
- wix（ノーコードツール）
- STUDIO（ノーコードツール）
WordPressに代表されるCMSは、世の中にたくさんあります。セキュリティーの問題や他の理由で、使用するはずだったCMSが使えないなど、取り返しのつかない問題に発展しないよう、クライアントとの合意形成・確認をしておきましょう。
使用するプログラミング言語・コーディング技術
プログラミング言語について、明示しておきます。
フロントエンド
- HTML
- CSS
- JavaScript
- GitHub
サーバーサイド
- PHP
- MySQL
ドキュメント作成
コーディング規約や命名規則・コーディングルールなどを記載したドキュメントが必要かどうか、確認します。
これらの専門的な知識や技術に関することは、制作に携わる人間に共有する意味もあります。クライアントに細かく説明する必要はありません。
ホームページの機能（アニメーション・JavaScriptの機能）
ホームページに搭載する機能・アニメーションの必要・不要を列挙しておきましょう。
- スライドショー
- ハンバーガーメニュー
- ページトップ
- ボタンエフェクト
- コンテンツのフェードイン
上記は一例です。クライアントは、基本的に備わっている機能だと思いこんでいる場合があります。ですが、実際に細かなアニメーションは、思いがけない工数がかかります。スケジュールの圧迫などに発展するため、対応する範囲を明示しておきましょう。
使用するサーバー
サーバーはホームページの設置場所です。
- レンタルサーバー
- 専用サーバー
どこのサーバーを使用するか・どんなプランで契約するかなど、決めておく必要があります。ホームページが完成して、いざ公開しようと思ったときに、アップする場所が準備されていないと、トラブルになってしまいます。
納品形式
Webに詳しい担当者がクライアントにいる場合、納品の形式を聞いておきましょう。
- サーバーに制作側がアップするか
- 制作データを納品してクライアントにアップしてもらうか
テストに関して
ホームページが完成して公開する前には、テスト・検証・修正を行います。テストはどのくらいの精度で行うか、取り決めをします。
- 全ページ・全ブラウザ（PC・スマートフォン）表示確認
- コードエラーの確認
- リンク切れの確認
- メール送信の確認
- アクセスの確認
- テストの結果レポートを提出するか
テスト・検証は、制作側の義務です。ですが大規模なサイトになると、時間も人も必要になるため、省略できるテスト・必須のテストなど、対応範囲を伝えておきましょう。
要件定義はクライアントの安心のためです
要件定義を細かく確認することはかなり手間のかかる作業です。当然、クライアントにも負担がかかります。
ホームページは、完成するまで現物が受け取れない製品です。要件を細かく決めていくことで、クライアントは完成形をイメージしやすくなります。
クライアントの協力を引き出すために、要件定義できちんとした説明をして、安心してもらうことが大切です。また、実際にデザインやコーディングを担当する人間も安心させられます。
要件定義の内容を、一部、企画書や提案書に盛り込むのもいいでしょう。
