1. Webサイト構築 文書化されにくい
設計フェーズの重要ポイント
2014年7月1日
Webディレクター 田附克巳
k.tazuke@gmail.com

2. Webサイト構築 文書化されにくい設計フェーズの重要ポイント
１．本資料の概要と対象読者
２．Web制作フェーズ全体の流れ
３．顧客へのヒアリング
４．サイトストラクチャ
５．トーン＆マナー
６．ワイヤーフレーム
７．まとめ
目次

3. １．本資料の概要と対象読者
Webサイトの構築に際して、これまで文書化されにくく、Webディレ
クターの属人的なスキルに近かった上流設計フェーズで気をつけるポ
イントをまとめた資料です。
主としてWebディレクター向けに作成していますが、デザイナーや営
業担当者、さらにWeb制作を発注する立場の方にも参考になれば幸い
です。
Webサイト構築 文書化されにくい設計フェーズの重要ポイント

4. ２．制作フェーズ全体の流れ
第１フェーズ
主要業務
成果物
（ドキュメント）
必要とされる
スキル・職能
調査
フェーズ
情報設計
フェーズ
サイトストラク
チャ
（サイト構造）
デザイン
コーディング
第２フェーズ 第３フェーズ
詳細設計実装
フェーズ
各画面のワイ
ヤーフレーム
（画面内構造）
インフォメー
ションアーキ
テクト(IA)
ディレクター
／PM
コピーライター
Webデザイナー
原稿完成
本番公開
HTMLファイル
CSS
スクリプトコー
ド他
サーバ管理者
テスト
Webサイト構築 文書化されにくい設計フェーズの重要ポイント

5. ３．ヒアリング（調査フェーズ）
上記の内容を文書化するために、お客様へヒアリングを行います。
ヒアリングの結果は、必ずドキュメント化してお客様と共有すること
が大切です。
・何のためにWebサイトをつくるのか、ゴールを明確にします。
・誰に観て欲しいのか、ターゲットユーザーを明確にします。
・どのようなメッセージを伝えたいのか、コンテンツを明確にします。
Webサイト構築の目的をはっきりさせる。
Webサイト構築 文書化されにくい設計フェーズの重要ポイント

6. ４．サイトストラクチャ（情報設計フェーズ）
調査フェーズで入手・分析した情報をもとに、Webサイト全体の階層
やグルーピングなどの構造設計を行います。
主なアウトプットは、「サイトストラクチャ（サイトマップ）」にな
ります。
トップページ
○○サービス
とは?
会員登録 ログイン 利用規約 プライバシー･
ポリシー
運営会社 お問い合わせ
○○申し込み 会員情報の修正 退会○○受け取り
Fig.1 サイトストラクチャの例
Webサイト構築 文書化されにくい設計フェーズの重要ポイント

7. ５．トーン＆マナー（詳細設計・実装フェーズ）
調査フェーズでヒアリングした情報をもとに、デザインの方向性を決めるための
資料作成を行います。お客様と対話しながら作成するのも一案です。主なアウト
プットは、「トーン＆マナー資料」になります。
Fig.2 トーン＆マナーの例
■ビジュアルコンセプト
ビジュアルな表現で訴えたいメッセー
ジを短文であらわしたもの
【例】
手作りの素朴な雰囲気を醸し出す。
世界トップクラスの高い技術力と安定
性を表現する。
■ポジショニングマップ
親しみ
やすさ
高級感
情熱的
クール
競合サイト
自社サイト
Webサイト構築 文書化されにくい設計フェーズの重要ポイント

8. ６．ワイヤーフレーム（詳細設計・実装フェーズ）
情報設計フェーズで分析した情報をもとに、各ページ内の情報レイアウトなどの
詳細設計を行います。主なアウトプットは、「ワイヤーフレーム」になります。
Fig.3 ワイヤーフレームの例
個店検索画面
イメージ
タイトル
○○○○
○○
小見出しタイトル
Photo
TEL xxx-xxx-xxxx
FAX xxx-xxx-xxxx
インフォメーション
マップ位置表示
Webサイト構築 文書化されにくい設計フェーズの重要ポイント

9. ７．まとめ
各フェーズでのアウトプット資料は、必ずお客様（発注側）の責任者と情報共有
し、了解を得て次のステップに進むことが重要です。
・顧客へのヒアリング資料
・サイトストラクチャ
・トーン＆マナー
・ワイヤーフレーム
問題がある場合には、その理由をアウトプット資料に具体的に記載しておく必要
があります。これによって、手戻りや誤解を防ぐことが可能になります。
ここまでの設計資料が了解・共有されていれば、ワイヤーフレーム以降の作業に
ついては、大きくぶれることはなく、担当できる人口も多いことから、代替可能
な力作業として考えることができます。
Webサイト構築 文書化されにくい設計フェーズの重要ポイント