webサイト構築のワークフロー

##全体的な流れ

1. 戦略、戦術策定フェーズ
2. 設計フェーズ
3. 開発フェーズ
4. テスト、移行フェーズ
5. 保守、運用フェーズ

開発に関わるプロジェクトメンバー

• クライアント
• プロデューサー
• ディレクター
• デザイナー
• コーダー
• プログラマ

webサイトの素材に関わるメンバー

• コピーライター
• 文章原稿のライター
• カメラマン
• イラストレーター
• 動画編集者

##1. 戦略、戦術策定フェーズ
###a. パートナー選定

• 発注者側からのRFP(提案依頼書、どのようなものが欲しいかベンダーに伝えるもの)やオリエンテーション（進路・方針を定めること。）に対して、候補者がヒアリングを行い、提案書を作成する。RFPにはプロジェクトの概要や目的、要求される機能などがまとめられおり、ヒアリングで発注者が気づいていない矛盾点や目的達成に向けて含めるべき要件が抜けていないかを質問表などを用いて洗い出していく。発注者はその提案書をもとにパートナーを選定する。パートナーが決まれば、機密事項を明かす必要なところも出て着るので、NDA(秘密保持契約)を結ぶ。

###b. 要件定義

• RFPやヒアリング、各種調査をもとに、ビジネス要件からwebサイト構築のために必要な事柄を明確にする。
• 調査の方法には以下の方法がある。
  1. 単独調査・分析 : サイトの構造や内容を専門家視点で調査分析する方法。
  2. 比較調査・分析 : 競合企業や参考とするベンチマークサイトを調査、分析し自社と照らし合わせる
  3. ターゲット軸 : webサイトをアピールしたいターゲットはどのような人たちか。
  4. コンテンツ軸 : ターゲットに対してどのような情報を提示する必要があるか。
  5. 機能軸 : 要求を達成するにはどのような機能が必要か。
  6. SWOT分析、4C分析など

###c. プロジェクト計画

• 発注者と受注者の認識違いを防いだり、複数人での開発プロセスにおいて意図のブレをなくすため、目的や目標、スコープなどプロジェクト関係者全体が共有すべき項目を取りまとめる。
• まとめる項目は以下の通り
  1. プロジェクトの背景と目的
  2. スコープ定義
  3. 進歩計画
  4. 費用計画
  5. リソース計画(人材、組織体制、コミュニケーションルール定義、役割分担、資材の選定など)
  6. 品質計画（何をもってよしとするのか、優先順位など）
  7. 各計画書作成プロセス（誰がどのように作成）
  8. 計画書の変更プロセス（状況が変わったときの対応、関係者への通達方法）
  9. その他の関連書式

###d. スコープ定義

• 契約に含む範囲の設定、前提条件、制約条件、成果物形態などを定義する。
• スコープ定義で定められた内容はWBS(work breakdown structure)というプロセスで細分化される。
• WBSはスコープ定義で定められた作業範囲を、コストやリソース把握が可能な、そしてチェックリストとして一覧可能なものまで細かく分解すること。

##2. 設計フェーズ
###a. ターゲット設計

• 幅広いユーザにアピールするよりも、共通の属性をもつ特定のユーザ層に絞り込んでアピールしたほうが内容や表現が明確になり、成果に繋がる場合が多い。特にアピールしたいユーザ層を決めることは重要である。ターゲットによってコンテンツの内容や、文章表現、イラストやボタンの形状などが左右される。またwebの閲覧環境もターゲットによって変わってくる。
• ペルソナ、シナリオ法
  • 典型的なユーザ像を作り上げ、そのユーザがwebサイトを利用するシーンを物語風に記述することによってwebサイトに何が必要かを導き出す手法。ペルソナの作成にあたっては、ユーザを対象にしたアンケートやインタビューユーザビリティテスト、トラフィック、ログ分析といった定性的定量的な調査の結果から浮かび上がるユーザ像を育てていく。シナリオは、どうすればユーザが目的をスムーズに達成できるかを発案するために作成する。

###b. サイト構造設計

• 要件や希望を取りまとめ大枠を決定し、サイト全体の構造や概念を図式化する作業のこと。
• ハイレベルサイトマップで大まかな全体構想を描く。（トップページから、会社情報、製品情報、採用情報、ニュース、お問い合わせのような感じ）
• コンテンツマッピングでwebサイトの目的、目標に必要なコンテンツを洗い出し、属性に合わせ整理分類し、ハイレベルサイトマップで定めた大分類に当てはめていく。

####情報の組織化
情報を整理し体系立てること。LATCH法が有名。

• Location : 地図など
• Alphabet : 電話帳、辞書
• Time : 年表
• Category : 図書館、スーパーなど
• Hierarchy : 人気記事やよく売れている商品など

####情報の構造化
情報を様々な切り口で分類、統計化すること。webサイトには４つの分類がある。

• ツリー型 : 階層型。ツリー状に情報を階層化したもの。
• リニア型 : 「前へ」「次へ」といった操作でユーザに順序を追ってページを追わせる構造。
• マトリクス型 : webさいｔのリンク機能を利用して自由にwebサイト内を閲覧する場合に利用される。
• フォークソノミー型 : ユーザ自身に情報の分類を委ねたユーザ参加型の構造化タイプ。

###c. サイト構造詳細設計

• webサイトに掲載すべき情報を組織化・構造化して情報アーキテクチャを構築し、詳細サイトマップやファイルリストに落とし込む。
• ハイレベルサイトマップで定めた全体像と、コンテンツマッピングでまとめたコンテンツマトリクスを用いてページ単位で構造が定義された設計図。

###d. ページ構造設計

• webページごとの構造を設計する。ナビゲーション、 ページパターンの設計からワイヤーフレームを作成する。
• 最初からページ単位でワイヤーフレームを作成すると最終的にちぐはぐな設計になってしまうことが多いので、以下の順でサイト設計する事が多い。

####1.ナビゲーション設計

• webサイトへアクセスしたユーザをユーザが求めている「情報まで辿り着かせることが目的。ユーザの動きに合わせたナビゲーション設計が必要。

1. グローバルナビゲーション
2. ローカルナビゲーション
3. サポートナビゲーション
4. コンテキストナビゲーション
5. ユーティリティナビゲーション
6. パンくずナビゲーション

####2.ページパターン設計

• サイトマップを元に、サイト全体に必要なページパターンを洗い出す。
• トップページ、カテゴリインデックスページ、コンテンツ詳細ページなど、コンテンツ内容に合わせて必要なページパターンを洗い出していく。

####3.ワイヤーフレーム設計

• ナビゲーション設計、ページパターン設計が揃ったら具体的なページのワイヤーフレームを作成していく。
• 大切なことはワイヤーフレーム全て揃えることではなく、HTML開発には何が必要かを見極め、ドキュメントを揃えること。

###e. システム設計

• 動的ページやサーバ構成などの設計を行い、「システム要件定義書」と「ネットワーク、サーバ構成の設計書」を作成する。開発に関わる全ての人が正しく開発目的や仕様を理解し、開発社業を無事完遂することである。

####システム設計工程の目的

1. 実現す寮する技術仕様に曖昧な点を残したまま開発を進めると、開発者の感覚の違いによって成果物に差異が出てしまうことを防ぐ
2. ビジネス変化に追従するため、矛盾や混乱なく素早くシステム改善を行うための情報を整理すること。
3. 数年後、新しい開発メンバーが加わったときにすぐに戦力になってもらうため情報を提供できるようにすること。
4. 仕様が増えれば納期を厳しくなり、品質が落ちる。プロジェクトの成功と、機能要望のバランスを取るようにする。

####システム設計工程で決定する内容

• 動的なページが実現するビジネス要件、システム仕様
• webサーバ、データベースサーバ、メールサーバなどのサーバ周り
• データセンターやネットワーク回線などのインフラ周り
• 外部サービスとの連携
• スケーラビリティ要件
• 画面ごとの詳細設計
• メンテナンス内容など保守設計

実際にドキュメントを作成する場合には上記に加え、性能要件（処理可能なアクセス数や、障害発生時の対応可能時間など）、用語集やビジネスフロー、テスト方法などが加わる。

###f. 制作仕様書作成
webサイト制作に必要なガイドラインをまとめたドキュメントを作成。新規参画者への引き継ぎや、運用時の作業負担軽減、クライアントとの共有の容易さなどの利用価値がある。制作仕様書の種類としては以下のようなものがある。

• VI(ビジュアルアイデンティティ)規定
  企業のロゴマークやロゴタイプの仕様を規定する。

• デザインガイドライン
  webサイトのビジュアルに関する仕様の規定。各要素のマージンを定めるレイアウト規定や、各パーツの組み合わせのレイアウトパターンを示すデザインバリエーション規定、カラースキーム規定などがある。

• コーディングガイドライン
  HTMLやCSSのバージョンなどを示す技術仕様や、コードフォーマット、クラスなどの命名規則などがある。

3. 開発フェーズ

###a. 素材・原稿準備作成

• ロイヤリティフリー
  予め決められた使用許諾範囲内であれば繰り返し利用可能なライセンス形態。素材によって許諾範囲が異なるため購入時に確認が必要である。

• ライツマネージド
  1回の使用ごとに利用料金が発生するライセンス形態。利用履歴が残るため以前どこで使用したかを調べる事ができる。

• 無料素材
  個人サイトの構築に利用される。商用は不可などが多いので注意が必要。

• 原稿管理
  クライアントからの原稿に関しては文章の記述ルールの統一のためのチェックが必要である。ガイドラインの作成には「記者ハンドブック」などを利用するのがいい。

###b. デザイン制作
Adobeのソフトなどを利用し、デザインラフやデザインテンプレートを作成していく。

###c. HTMLコーディング
HTML、CSS、コーディングガイドラインに基づいてソースコードを生成していく。

###d. プログラム制作
プログラム制作工程は、基本的には制作済みのHTMLコードに動的な処理を埋め込んでいく作業になる。

1. プログラム開発
   
   できるだけ本番に近い環境で画面の動作を確認しながら行う。
2. 単体テスト
   
   webブラウザからの入力に対して正しい処理や、異常発生時に適切な処理を行うかを確認。
3. パフォーマンステスト
   
   システム要件定義の際に設定したビジネス要件を実現できているか確認。

4. テスト移行フェーズ

完成したwebサイトの表示や動作をテスト環境で検証する。動作テストが完了したら本番環境にデータを移行し公開する。

• サイト評価

  • 要求される基準を満たしているかどうかをチェックする。アクセシビリティ視点での確認や、コードバリデーション、サイトパフォーマンスなどをチェックリストなどで評価する。

• 情報確認

  • 間違ったコンテンツが入っていないかどうかの確認。画像や文言など。

• 動作テスト、本番環境移行

  • 制作したものが想定通りに表示、動作するかツールや目視を利用しテスト。その後本番環境並行する。

##5. 運用・保守フェーズ
更新作業、改善施策を行う。

• サイト更新、運用
  • アクセスログやコンバージョン結果をもとにデータを計測、蓄積していく。価値向上やため仮設を立て対策を実施するなど価値向上を図るPDCAサイクルを回していく。
• サイト分析
  • アクセスログ解析による現状把握と効果測定。
• システム管理・保守
  • システムの安定稼働のためにシステムの状態や負荷を計測して対応を図る。