そもそもWebディレクション・Webディレクターとは何か?
まずディレクションとは何か、この理解から始めましょう。
その後、下記メニュー項目を閲覧いただくことをお薦めします。

基本編

ヒアリングで尋ねるべき基本的な項目

Webサーバー環境 / URL
  • サイトのURL(ドメイン名)は? (独自ドメイン・サブドメイン?)
  • Webサーバーを設置する環境は? (自前・レンタル・プロバイダーのサービスサーバー?)
  • サイトリニューアルの場合(既にサイトを公開している場合)、サーバー移管・ドメイン移管は?
  • 暗号化の必要性は?
サイトの役割
  • サイトの目的・役割は?(企業宣伝 / 特化した商品の告知 / 情報提供 / 販売 / … )
    この記事がサイト目的について参考になります。
  • サイトで特にアピールしたい点は?(ユーザーの声など)
  • 競合他社と差別化できることは?(これ結構重要
  • 誰にどのような状況でみてもらいたい?(年齢・性別・ライフスタイル・時間・場所など)
  • サイト上で公表したくないことは?(たとえば価格など)
サイトの印象(デザイン)
  • ターゲットに印象づけたいイメージは?
  • 気に入っている他のサイトは?(業種には関係なく好み)
  • 競合他社のサイトは?(同業種あるいは同種製品など)
  • コーポレートカラーなどは?(企業によっては厳密に定められている場合があります)
サイトに掲載する内容など
  • 掲載する記事や掲載したい・掲載が望ましい内容は?(サイトの目的に合致するもの)
  • 取入れてみたい機能やアイデアなどは?(サイトへの誘導方法として)
  • その他の必要な要件などは?
  • サイト全体のボリュームは?(サイトの規模?)
コンテンツ素材
  • 御社で準備が可能なコンテンツ素材は?(印刷物・写真・テキスト・各種資料など著作権の問題も含めて)
  • 新に制作しなくてはならないあるいは制作したほうが良いコンテンツは?
(サイト・広報?)担当者
  • 直接制作あるいは窓口となっていただく担当者は?
  • 決裁なども含めた決定権者は?
スケジュール概略
およびおおまかな予算・費用
  • 公開希望予定日は?
  • 先行して公開する必要のあるコンテンツは?
  • 予算・費用(ランニングコストも含め)は?
  • コンペ?あるいは見積もり合わせ?
サイトリニューアルの場合
(既にサイトを公開している場合)
  • リメイク・追加・再構築 ?
  • 既存サイトの評判や効果は?
  • 既存サイトからそのまま利用したい機能や内容は?(または採用したくない機能や内容)
  • 新規に取入れたい内容・機能・アイデアは?
  • 既存サイトから流用可能な素材など(著作権などの問題も含め)は?
  • 既存サイト制作業者の協力は得られるか?(素材など)
保守および監理
  • 保守運用担当者のリテラシー(Web制作のスキル)は?
  • 定期的な更新があると思われるコンテンツは?
  • 追加予定あるいは継続的・定期的に追加されるコンテンツは?(新製品、新企画等)
  • 運用上のコンサルティングやサポートは必要?

要件定義書に盛り込むべき最低項目

要件定義書は、先のヒアリングを元にして、サイトを構築していくための取り決め内容を具体的に書式化します。制作途中で方向性がぶれないための指針となるだけでなく、制作後のさらなるブラッシュアップのための叩き台、あるいは制作後の様々なトラブルを回避するための資料にも活用できます。

クライアントとのミーティングを重ねる中で、要件定義書策定課程の具体的なポイントとなるのは以下の点です。

  • 何を誰にどう伝えるか
  • 打ち合せを重ねながら、Webサイトの目的とゴールを明確化
  • サイトコンセプトの策定
  • コンテンツ概要プランの策定
  • サイト構成概要プラン(ワイヤーフレーム)の策定
  • レビューコンテ(デザインカンプ)の制作

このポイントを踏まえ、以下の内容を盛り込みます。

サイトの目的とゴール(目標)・・・具体的数値目標も設定
このサイトで何をしたいのか、たとえば自社を広く知らしめたい、自社が扱う商品を売りたいなどがサイトの「目的」です。これに対し、自社を知ってもらうために月間1万人にサイトを訪問してもらう、自社の商品に対して1日に10件の問い合わせをしてもらう、これがサイトの「ゴール(目標)」です。具体的な数値目標を設定しないとサイトの効果を図ることができませんし、そのサイトが目的に合致しているのかもわかりません。
事前調査(市場調査、競合調査、自社分析などいわゆるマーケティング)
小規模な案件・プロジェクトあるいは潤沢な予算が設定できないケース、あるいは時間の制約があるケースなどでは十分な市場調査はできませんが、あらためてマーケティングを行なわなくても企業においては営業ノウハウの蓄積は行なわれています。その聞き取りを行なうだけでも、ある程度サイト制作に必要なマーケティングは可能ではないでしょうか。
サイト要件(ページ構成要件、デザイン要件、コンテンツ要件、機能要件、インフラ要件など)
文字通りサイト制作に直接関わる取り決めの部分となります。この項目を明確にしておかないと、追加要件などが発生し、納期や予算にも大きく影響します。場合によってはプロジェクトそのものが頓挫・炎上する要因になります。
ターゲットユーザー像
ターゲットとは「サービスを利用するであろうユーザー」を指します。年齢・性別・職業などのスペックでユーザーをグループ化し、見込み顧客を絞り込みます。ここで欲張って、ユーザー像の範囲を広げてしまうとコンセプトがぼやけてしまいます。
現代では、ユーザーのニーズが多様化し、スペックによるグループ分けではユーザーの行動を想定するのは難しくなってきました。このため、ターゲットというよりはユーザーモデルの設定、いわゆるペルソナ設定が必要となります。ユーザーが目的を達成するためには「より優れた体験とその記憶(ベネフィット)」が重要であるといわれています。具体的なユーザー像を設定することは、CJM(カスタマージャーニーマップ)で顧客視点に立ちユーザーの行動・ふるまいを推測し「より優れた体験とその記憶」を具現化するためのサイトの方向性を決める上で、極めて重要となります。(LIG:「ペルソナとターゲットの違いを教えます!ペルソナの設定方法とは」参照)
ターゲットブラウザ
どうしてもクライアントの環境に合わせてターゲットブラウザを設定しがちですが、本来サイトを閲覧するのはエンドユーザーです。前出のターゲットユーザー像も踏まえ、ブラウザの設定を行なう必要があります。
また、次項にも関わることですが、モバイル環境に考慮することが重要になっています。サイトの目的にもよりますが、ターゲットユーザーによってはモバイル機器に特化したサイト(モバイルファースト)を制作する必要があることも念頭におきましょう。
ユーザビリティ/アクセシビリティ指針
サイトのデザイン面で最も重要なのが「ユーザビリティ/アクセシビリティ」といっても過言ではありません。具体的なユーザビリティやアクセシビリティの指針を示すことで、前述の「サイトの目的と目標」をデザイン面から明確化できます。ヴィジュアルデザインを重視することは制作時のモチベーションを上げる上では重要ですが、あくまでエンドユーザー目線に立った効果的なサイト制作をアピールするためにも、この項目は重要となります。また、近年は「ユーザビリティ」を十分に考慮したサイトが高評価(好結果)を得られるようです。
では、「ユーザビリティ/アクセシビリティ」とは何でしょう。一言で表現すれば「利用者の環境や能力に依存しないこと」になります。モバイル対応もユーザビリティに考慮した結果であるといえます。
プロジェクトスケジュールとロードマップ
稀に明確な納期を定めないプロジェクトも存在しますが、一般的には企業いあるいは商品・サービスのプロモーションの一部であるサイトの制作には納期が存在し、スケジュールを明記しなければなりません。ロードマップとは、スケジュールを管理するために、各行程の内容や期間・作業分担・責任分担などを時間的推移を加味し具体的に明記したもので、行程表(工程表ではない)と呼ばれます。手法としてはWBS(Work Breakdown Structure)が用いられます。(厳密にはWBSはタスク管理のツールであり、WBSに詳細な時間を付与したものを利用する)
プロジェクトにおける作業分担と体制
ここで提起する作業分担とは、制作時の作業分担ではなく、制作会社とクライアントとの分担を指します。プロジェクトの目的達成サイトを制作するために、企画段階からかかわる案件が増加しており、たとえばマーケティングに関わる作業はクライアント・制作会社のどちらが担当するかなどの作業分担を明確化する必要があります。
また、企画と制作のスムーズで効率的な連携のために、クライアントとの折衝と制作側の統括・管理を専門に行なうWebプロデューサー職を置く制作会社も増えており、案件における双方の体制を明確にしておく必要もあります。
運用開始後の体制
サイト公開後、たとえばSNSへの展開やGoogle AdWordsなどのインターネット広告の利用といったサイト自体のプリモーションや、効果測定後の対応などをクライアント側・制作側どちらが対応するかの取り決めが必要です。
また、クライアント側のリテラシーによっては、メールフォームによる問い合わせなどへの対応やメールマガジンの配信といった営業分野のサポートも必要になるかもしれません。インストラクションも含めた契約が必要になる場合もあります。
継続検討課題の整理
サイト要件で取り上げたが、納期や予算といった要因で今回は検討できないもの、あるいは、十分に検討するにはある程度の運用期間が必要なものなど、制作後の運用期間中に継続的に検討する必要のある要件を整理しておきます。今回の制作で解決できない部分を明確にしておくことで、制作後の継続的な契約につなげることができます。

制作ワークフロー

サイト設計
  • サイト全体のデザイン設計(ビジュアルデザインではなく構成)
  • コンテンツに必要な素材の洗い出し
  • サイト構成詳細プラン(サイトマップ)
  • ワイヤーフレーム(ページ単位のコンテンツ構成)
  • ナビゲーションプラン(ページ遷移フロー)
  • コンテンツ編集プラン(静的ページ・CMS?)
ビジュアルデザイン
  • サイトの目的に相応しいユーザーインターフェースを検討・デザイン
  • プロトタイプでナビゲーションの基本的な確認
  • インターフェースデザイン(デザイン指向の決定)
  • 各種パーツデザイン(共通パーツ)
  • 基本レイアウトデザイン(テンプレート化を考慮)
  • プロトタイプ制作(ツール利用)
コンテンツ編集 / 制作
(「ビジュアルデザイン」と平行して)
  • 既存素材(テキスト・画像等)をWeb用に加工
  • 取材 ・原稿ライティング
  • コピーライティング
  • スキャニング画像取込み
  • 画像処理・写真撮影
  • 挿し絵(静止画イラスト)
  • PDFファイル制作
  • 動画撮影制作編集 ...etc
Webページ制作
  • テキスト・画像等をHTML化
  • Web標準に準拠したファイル作成
  • ページレイアウト
  • テキスト入力
  • HTMLコーディング
テスト / 校正
  • 完成したファイルデータを当方(テスト用)のWebサーバーにアップロード
  • クライアント確認・承認後、ファイルデータを納品(指定Webサーバーにアップロード)
  • ナビゲーションテスト
  • 不具合チェック
  • 文字校正
サイト公開(1) - サイトプロモーション
  • サーチエンジン登録申請
  • パブリシティ
  • マーケティングミックス
サイト公開(2) - 保守/監理
  • Webサイトの目的が達成されているかどうかを評価しながら、コンテンツの適切な更新/追加
  • 目的の達成度評価
  • SEOキーワードの適正化(Googleアナリスティックのコードも加えます)

※SEO対策の観点からのキーワード記述は不必要との意見がありますが、テキストコンテンツの適正化のために、キーワードに注視することは無駄ではないと考えられます。

最近では、「ワイヤーフレーム」や「デザインカンプ」を作らず、「プロトタイプ」を制作しクライアントに提示する手法が取られるようになっています。これは、ユーザー体験を重視することの現れであり、また、モバイル環境でのWebとアプリの融合にも起因しています。有償・無償のプロトタイプ制作用ツールが多数リリースされており、サイトの目的やクライアントの嗜好によってはプロモーション段階でのプロトタイプ活用も効果的です。

仕様書例

  • html規格HTML5
  • jQuery規格jQuery3
  • css規格css2,css3
  • 文字codeUTF-8
  • 改行codeLF
  • 拡張子.html
  • 対応OSWindows、Mac
  • 検証ブラウザIE、chrome、safari、firefox
  • 文書型宣言<!DOCTYPE html>
  • 記述全般すべて小文字表記、終了タグ必須
  • font'Hiragino Kaku Gothic',ProN,Meiryo,sans-serif
  • font-size16px
  • color#333
  • background#fff
  • line-height1.6
  • h1各ページともh1から出現
  • h2,h3,h4任意
  • cssファイル名common.css,style.css
  • css記述ルールcommon.css及び各ページ専用のstyle.css
  • 印刷対応なし
  • htmlファイル名index.html、(pagename).html
  • 画像形式写真やグラデーション画像はjpg、それ以外はpng
  • server直下サイト用html、imgフォルダ、cssフォルダ、jsフォルダ