内容紹介
Webサイト制作プロジェクト成功の鍵は、デザインドキュメント作成にあります。
サイト制作の現場では、プロジェクトのさまざまな段階で、さまざまな「ドキュメント」が作成されます。納品する制作物……「Webサイトのデータ」「デザイン」そのものではなく、最終製品に直結することはありません。しかし、この「ドキュメント」類がわかりやすくできているかどうか、プロジェクト内できちんと役割を果たすかどうか、このドキュメントを使ってきちんとクライアントやチーム内で情報を共有できているか、……がプロジェクトのスムーズな進行から、最終的な納品物のクオリティにまで、大きく関与します。その、Webサイト設計と制作における、ドキュメントを通じたコミュニケーションや、デザイン＆プランニングの考え方とノウハウを集成したのが、本書です。
本書では、プロジェクト中に作成されるドキュメントを大きく「ダイアグラム」と「成果物（デリバラブル）」に分けています。「ダイアグラム」とはWebサイト設計時のアイデアや洞察を描いたもので、本書では以下の5種類を取り上げます。ターゲットユーザーを把握する「ペルソナ」、サイトに載る情報を幅広く捉えるための「コンセプトモデル（コンセプトマップ）」、Webサイト上の情報の階層関係を”見える化”する「サイトマップ」、タスクを完了するためのプロセスを把握する「フローチャート」、Webページやテンプレート、あるいはページの一部の構造や振る舞い、内容を伝える「ワイヤーフレーム」。「成果物（デリバラブル）」とはWebデザインプロジェクトの過程で、コミュニケーションの促進、決定事項の記録、議論の活性化などを狙って作成され提出されるドキュメントことで、本書では以下の4種類を取り上げています。解決すべき問題点や目標、方向性などを定義してプロジェクトを固める「デザインブリーフ」、デザインの基準や原則の正当性を確認するために他社のWebサイトと比較評価した結果をまとめた「競合分析」、ユーザビリティテストの目的・方法・手順などを記した「ユーザビリティテストプラン」と、テストを通じて得られた所見や観察結果、提案などを記した「ユーザビリティテストレポート」。
本書では、各ダイアグラムの目的や構成内容、作り方からミーティングの設定方法、成果物の披露の仕方など、事細かに解説しています。質の高い成果物の作り方や、それをチームで共有する際に注意すべきこと、クライアント等に内容を確認する際に行うべきことなど、制作をスムーズに進め、プロジェクトを成功裏に終わらせるためのノウハウがつまっています。
「しっかりドキュメントの基礎を学んでおけば、他の誰かが作成したダイアグラムを見て要点を読み取るのも難しくないでしょうし、自らが成果物の作成を担うとなったときにも、勘所を押さえた分かりやすいドキュメントを作ることができるに違いありません。本書を通読すれば、Webサイトやスマートフォンアプリの制作過程で必要とされる個々のダイアグラムや成果物についてはもちろん、プロジェクト全体の流れや、その中で各ドキュメントが果たす役割も見えてきます。また、ダイアグラムや成果物ごとに章を分け、かつ各章の中の構成を統一することによって、必要なときに必要な部分を容易に参照できるようにもなっています。」（訳者あとがき）
Webデザインの過程で、上記のようなドキュメントを「作る」立場の人、それを「使う」立場の人、あるいはそれを「承認する」立場の人……プロジェクトにおいて何らかの形で「ドキュメント」に関わる人すべてにとって、本書はきっと役立つことでしょう。
「一度でも組織事情をはらんだ複雑な企業サイトのリニューアル案件などに携わった事があれば、本書で解説しているダイアグラムを通してクライアントと共有される情報の一つ一つの確認行為がいかに重要かを痛感していると思います。本書でも説明されますが、重要なのは納品物としてのダイアグラムそのものではなく、そこから共有される「成果」なのです。」（監訳者あとがき）
ぜひ、気になった箇所、現在取り組んでいるデザイン課題に関わる章に目を通して、日々のデザイン作業のクオリティをアップしていただければと思います。
『Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition)』の日本語版。
書誌情報
- 著者: Dan M. Brown, 奥泉 直子（訳）, 佐藤 伸哉（監訳）
- ページ数: 330ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
Dan M. Brown
ワシントンDCを拠点とするユーザーエクスペリエンスコンサルティング会社、EightShapes,LLCの創業者であり、代表者。そのクライアントには、テレコミュニケーション、メディア、教育、健康医療、ハイテクなどをはじめとする各種産業界の各社が名を連ねる。ユーザーエクスペリエンスに関する諸側面に気を配りながら、情報アーキテクチャやコンテンツ戦略から、インタラクションデザインやインターフェイスデザインまでを幅広く手がけられるのが彼の特長。IAサミット、Interaction、An Event Apart、Nielsen-Norman Group、Jared Spool’s Web App Summitなどユーザーエクスペリエンスに関連する各種のカンファレンスでセミナーやワークショップを数多く主催。最近はSchool of Visual Artsのインタラクションデザインプログラムの中で、ダイアグラムを活用したWebサイトプランニングについてのワークショップを行っている。
奥泉 直子
フリーランスのユーザビリティ＆ユーザーエクスペリエンスリサーチスペシャリスト。日本、アメリカ、イギリス、フランス、インド、シンガポールなどからの依頼を受けて、ユーザビリティやユーザエクスペリエンスに関連する調査を国内外にて実施。実機やペーパープロトタイプを使ったユーザビリティテストや専門家評価、インタビューによる利用状況調査、行動観察や訪問調査などに代表されるエスノグラフィ調査など多数の調査経験を有する。またリサーチャーに欠くことのできない人間の認知特性に関する講義の講師やユーザビリティ評価に関する講義のカリキュラム作成などを通じて後輩の育成・指導にも積極的に関わる。訳書に『Alertbox－そのデザイン、間違ってます』（RBB PRESS）、『Webサイト設計のためのペルソナ手法の教科書』（マイナビ）がある。
佐藤 伸哉
エクスペリエンスデザイナー。神戸芸術工科大学 芸術工学部卒。Web 黎明期より情報アーキテクチャおよびユーザーエクスペリエンスのスペシャリストとして大規模なサイト構築や日本企業のグローバル戦略案件を数多く手掛ける。2008 年夏からソニーのデザイン部門でニューモバイル戦略やタブレット戦略を担当し、プラットフォームの統廃合とAndroid の推進に貢献。その後、米国サンフランシスコのSeesmicに参加、Android アプリや日本語事業を手掛ける。2012 年に株式会社シークレットラボを設立。現在は米AKQA の東京オフィスの設立に参画している。
監訳書に『Smashing Android UI レスポンシブUI とデザインパターン』（インプレスジャパン）、『モバイルフロンティア よりよいモバイルUX を生み出すためのデザインガイド』（丸善出版）、『Web サイト設計のためのペルソナ手法の教科書』（マイナビ）などがある。
目次
序文
著者まえがき
謝辞
Chapter01 イントロダクション
- 形式張ったドキュメント作成は悪しき慣習か？
- ■1 物語の全体像：成果物
- ■2 物語の構成要素：ダイアグラム
- ■3 ダイアグラムや成果物の制作に使われるツール
- ■4 成果物とデザインプロセス
- 正しい成果物を選ぶ
- ■5 成果物とプロジェクトチーム
- チームメンバー
- チームダイナミクス
- 政治の扱い
- クライアントとの関係
- “内部の人”の場合
- ■6 描くことvs.作ること
PART1 ダイアグラムのデザイン
Chapter02 ダイアグラムの基礎
- ■1 デザインダイアグラムの解剖
- 第1層：必要不可欠な情報
- 第2層：磨きをかけるための情報
- 第3層：文脈と繋がりに関する情報
- なぜ“層”なのか？
- ■2 デザインダイアグラムの作成
- 作り始める前に決めるべきこと
- コツを掴んでレベルアップ
- ダイアグラム作りによくある落とし穴
- ■3 ドキュメントコミュニケーションの課題
- 現状の姿vs.未来の姿
- 詳細さと複雑さ
- 製品と文脈
- ■4 デザインの披露
- 議論のデザイン：基本のレシピ
- レシピのアレンジ
- ミーティングに立ちはだかる壁
- ミーティングが多すぎる
- ■5 おめでとう！
Chapter03 ペルソナ
- ■1 ペルソナとは……
- ペルソナを作る狙い
- ペルソナのユーザーは誰
- ペルソナを作るときの作業規模
- ペルソナが活躍するタイミング
- ■2 ペルソナの導入
- 立ちはだかる壁
- ■3 ペルソナの解剖
- 第1層：要件を固め
- 第2層：関係を盛り込む
- 第3層：人間らしさを足す
- システムの機能
- 人口統計情報
- ■4 ペルソナの作成
- ペルソナを作り始める前に決めるべきこと
- オーディエンス：誰がペルソナを使うのか
- ペルソナに磨きをかけるためのコツ
- ペルソナ作りに求められるスキルの向上
- ■5 ペルソナの披露
- ミーティングの目的を明確にする
- 基本的なミーティング構
- ペルソナのお披露目方法
- 初心者にありがちなミスを避けるには
- ペルソナの活用と応用
Chapter04 コンセプトモデル
- ■1 コンセプトモデルとは……
- コンセプトモデルを作る狙い
- コンセプトモデルのユーザーは誰か
- コンセプトモデルを作るときの作業規模
- コンセプトモデルが活躍するタイミング
- コンセプトモデルの見た
- ■2 コンセプトモデルの導
- コンセプトモデルがあると助かること……を簡潔に
- 似ているけど少し違う親和図法について
- 立ちはだかる壁
- ■3 コンセプトモデルの解剖
- 第1層：基本要件
- 第2層：味付け
- 第3層：モデルからイラストレーションへ
- ■4 コンセプトモデルの作成
- コンセプトモデルのための基本的な意思決定
- コンセプトモデル作りのコツ
- コンセプトモデル作りのスキルアップ
- ■5 コンセプトモデルの披露
- ミーティングの目的を設定
- ミーティングの基本構成
- 初心者にありがちなミスを避けるには
- ■6 コンセプトモデルの応用
- 他の成果物に文脈を付加する
- モデルから画面へ
- ■7 コンセプトの重要性
Chapter05 サイトマップ
- ■1 サイトマップとは……
- サイトマップを作る狙い
- サイトマップのユーザーは誰か
- サイトマップを作るときの作業規模
- サイトマップが活躍するタイミング
- サイトマップの見た目
- サイトマップと内容
- デザインを進めるためのドキュメントvs.オンラインツール
- ■2 サイトマップの導入
- 立ちはだかる壁
- ■3 サイトマップの解剖
- 第1層：箱と矢印とその他を少し
- 第2層：ページやリンクに関する情報を追加
- 第3層：背景情報の追加
- ■4 サイトマップの作成
- サイトマップを作り始める前に決めるべきこと
- サイトマップに磨きをかけるコツ
- サイトマップ作りの腕を磨くには……
- ■5 サイトマップの披露
- ミーティングの目的を明確にする
- 基本的なミーティング構成
- 初心者にありがちなミスを避けるには
- ■6 サイトマップの活用と応用
- プロジェクトのプランニング
- サイトマップとワイヤーフレーム
- サイトマップが立ち向かう壁
Chapter06 フローチャート
- ■1 フローチャートとは……
- フローチャートを作る狙い
- フローチャートのユーザーは誰か
- フローチャートを作るときの作業規模
- フローチャートが活躍するタイミング
- フローチャートの見た目
- ■2 フローチャートの導入
- 立ちはだかる壁
- ■3 フローチャートの解剖
- 第1層：不可欠な要
- 第2層：詳細情報
- 第3層：情報
- ■4 フローチャートの作成
- フローチャートを作り始める前に決めるべきこと
- フローチャートに磨きをかけるコツ
- フローチャート作りの腕を磨くには……
- ■5 フローチャートの披露
- ミーティングの目的を明確にする
- 初心者にありがちなミスを避けるには
- ■6 フローチャートの活用と応用
- プロジェクトのプランニングにフローチャートを活用
- フローチャートとワイヤーフレーム
- フローチャートとペルソ
- プロセスの深さ
- アプリケーションデザインへの動き
Chapter07 ワイヤーフレーム
- ■1 ワイヤーフレームとは……
- ワイヤーフレームを作る狙い
- ワイヤーフレームのユーザーは誰か
- ワイヤーフレームを作るときの作業規模
- ワイヤーフレームが活躍するタイミング
- ワイヤーフレームの見た目
- ■2 ワイヤーフレームの導入
- 立ちはだかる壁
- ■3 ワイヤーフレームの解剖
- 第1層：とにかく四角形
- 第2層：四角形とフォーム
- 第3層：四角形以外
- ■4 ワイヤーフレームの作成
- ワイヤーフレームを作り始める前に決めるべきこと
- ワイヤーフレームに磨きをかけるコツ
- ワイヤーフレーム作りの腕を磨くには……
- ■5 ワイヤーフレームの披露
- ミーティングの目的を明確にする
- 基本的なミーティング構
- 初心者にありがちなミスを避けるには
- ■6 ワイヤーフレームの活用と応用
- ワイヤーフレームに注釈を添える
- ワイヤーフレームと他の成果物を繋げる
- ワイヤーフレームをプロトタイピングやユーザビリティテストに活用する
- その場でワイヤーフレーム化
- ■7 白と黒のデザイン
PART2 成果物のデザイン
Chapter08 成果物の基礎
- 各成果物について
- 複数のドキュメントを個別に作成する
- ■1 良い成果物の条件
- 良い成果物は物語を伝え
- 良い成果物は議論を促す
- 良い成果物は次に繋がる
- ■2 成果物の解剖
- タイトルページとその他の必須要素
- 前付け
- サマリー
- イントロダクション
- 章
- 次のステップ
- ■3 ドキュメントの最終形
- ページのレイアウト
- 説明のページパターン
- 評価のページパターン
- イントロダクションのページパターン
- 比較のページパターン
- 意思決定を求めるページパターン
- ■4 成果物の披露
- 成果物の披露vs.ダイアグラムの披露
- ■5 成果物のライフサイクル
- 受胎：ドキュメントの開
- 誕生：最初のお披露目
- 思春期：まだ成長の途中
- 成熟：すべての内容が出揃う
- 終末期：ドキュメントを棚にしまう
- 健康診断：健康を維持するために
- ■6 成果物の未来
Chapter09 デザインブリーフ
- ■1 良いデザインブリーフとは？
- 課題を明確に述べる
- 参考例を使って補う
- トレーサビリティ
- 明確な境界
- ■2 計画
- 進化し続ける
- プロジェクトの雰囲気づくり
- どのくらい力を入れるか
- 優先度を伝える
- デザインブリーフを披露するときのコツ
- ■3 デザインブリーフの解剖
- デザインブリーフを体系化する
- デザインの目的、テーマ、原則
- 文脈と範囲
- デザインコンセプト
- 要件のサマリー
- 制約のサマリー
- プロジェクトのスケジュール
- ■4 スライド1枚化に挑戦
Chapter10 競合分析
- ■1 良い競合分析とは？
- 注目点
- フレームワークを固める
- 意味のある比較
- 競合分析を披露するときのコツ
- ■2 競合分析の解剖
- 競合分析を体系化する
- 結論と学び
- 結論のサマリー
- 展望のサマリー
- 競合を知ろう！
Chapter11 ユーザビリティテストプラン
- ■1 良いユーザビリティテストプランとは？
- 目的を固める
- シナリオを中心に据える
- 進行役へ指示を出す
- テスト対象の限界を知る
- ユーザビリティテストプランを披露するときのコツ
- ■2 ユーザビリティテストプランの解剖
- ユーザビリティテストプランを体系化する
- テストプランのサマリー
- シナリオ
- タスク前後の質問
- スケジュール
- 詳しいリクルーティング情報とスクリーナー
- 完璧なテストプラン
Chapter12 ユーザビリティテストレポート
- ■1 良いユーザビリティテストレポートとは？
- 焦点と関連
- 結果の優先順位づけ＋α
- ユーザビリティテストレポートを披露するときのコツ
- ■2 ユーザビリティテストレポートの解剖
- ユーザビリティテストレポートを体系化する
- 観察記録と深刻度
- サマリーと分析
- 提案
- 補足的なコンテンツ
- あちらの頭の中に入ってみる