2015年7月12日（日）「CMS SUNDAY Vol.4 ちゃんと合意をとる！ CMS導入案件プロトタイピング」の資料です。【イベントページ】 http://opencu.com/events/cms-sunday-vol4

1. UXデザインに学ぶ！
プロトタイピングによる
合意形成テクニック
スペシャルゲスト： 藤⽥田 拓拓 さん
1
HCD-‐‑‒Net認定 ⼈人間中⼼心設計専⾨門家
⽻羽⼭山 祥樹
2015年年7⽉月12⽇日（⽇日） CMS Sunday #4

2. 2
⻑⾧長⾕谷川 恭久 さんのプレゼン
「再⼊入⾨門ペーパープロトタイピング」で
教えていただいた「プロトタイピング」を
実践してみよう！
14:20〜～14:25

3. 3
今⽇日のワークショップの主旨：
合意形成のテクニックとしての
「プロトタイピング」をUXデザインから学ぶ。
14:20〜～14:25
UXデザイン
インタ
ビュー
プロト
タイピング
親和
図法
ユーザ
ビリティ
テスト
エスノ
グラフィ
KA法
ジャーニー
マップ
ペルソナ
シナリオ
法
など など上位下位
関係
分析法
今⽇日
合意形成
ファシリ
テーション

4. 4
UXデザインの2つの効果：
ユーザー⼼心理理の全体像を、
しっかりと理理解し、もっとも
ビジネスの成果につながる
ウェブサイトをつくる。
ユーザーを理理解する過程を、
プロジェクトメンバー全員で
共有することで、同じ⽅方向を
むく。
1 2
14:20〜～14:25
今⽇日

5. ⽻羽⼭山 祥樹 HAYAMA Yoshiki
v インフォメーションアーキテクト
• 使いやすいWebサイトをつくる専⾨門家
• HCD-‐‑‒Net認定 ⼈人間中⼼心設計専⾨門家
v Web業界に16年年くらい
v 担当したWebサイトが、雑誌のWebユーザビリティランキン
グで国内トップクラスの評価を受ける ほか実積多数
v 主な専⾨門分野
• ユーザーエクスペリエンス、情報アーキテクチャ、⼈人間中
⼼心設計、アクセシビリティ、⼤大規模CMS、制作品質管理理
Twi$er：@storywriter
5
ユーザー⼼心理理を
つかむプロです

6. 6
メンタルモデル
ユーザーへの共感から⽣生まれるUXデザイン戦略略
Amazonで購⼊入：
http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼高「1位」
コンピュータ・IT 総合 最⾼高「9位」

7. 7
13:00 会場案内・挨拶
13:20 「再⼊入⾨門ペーパープロトタイピング」 ⻑⾧長⾕谷川 恭久 さん
14:20 「UXデザインに学ぶ合意形成テクニック」 ⽻羽⼭山 祥樹 スペシャルゲスト 藤⽥田 拓拓 さん
14:20 講師の⾃自⼰己紹介、アイスブレイク
14:50 ワークショップ1 プロトタイプをつくろう
1. CMSの仕様を考える
2. ミーティングの流流れを考える
3. プロトタイプをつくる
4. ロールプレイでクライアント担当者に合意を取る
16:00 ・・・ここで何かが起きる・・・！（悪いこと）
16:05 ワークショップ2 プロトタイプをブラッシュアップしよう
16:30 発表 ロールプレイでクライアント担当者に合意を取り直そう
17:10 総評、アンケート、記念念撮影
17:30 懇親会
本⽇日のスケジュール：
今ココ
14:20〜～14:25
休憩は、切切りがいいところで、適宜、⼊入れます。

8. 8
今⽇日のワークショップは、
CMSをまったく知らなくても、楽しめます。
（UXに興味がある⽅方歓迎）
14:20〜～14:25

9. 9
チーム分け：
「興味のあるCMS、やってみたいCMS」
でチームになってください。（1チーム4⼈人くらい）
どれも知らなければ、勘で決めてOK。
14:25〜～14:35
PowerCMS でも、concrete5 でも、a-‐‑‒blog cms でも、
SOY CMS でも、Jimdoでも、NetCommonsでも、Drupalでも...

10. 10
アイスブレイク：
チーム内で⾃自⼰己紹介をしよう！
14:25〜～14:35

11. 11
次のテーマで、⾃自⼰己紹介してください：
チーム内に⾃自⼰己紹介してください。
ひとり 60秒 で、次のテーマを話してください。
1. お名前。
2. 仕事で、関係者の合意がなかなか取れなくて、
困った思い出。（CMSのエピソードがあればそれ、
なければ何でもOK）
14:25〜～14:35

12. 12
職種分け：
チームメンバー内で「ディレクター」か「開発者」か、
いずれかのジョブを決めてください。
CMSはよく知らない、操作できない。
クライアントに説明する⽴立立場。
CMSの仕様を決める⽴立立場。
クライアントに説明はできない。
ディレクター 開発者
14:25〜～14:35

13. 13
本⽇日のポイント：CMS案件の特徴
「⾒見見えるもの」と「仕上がるもの」が異異なる
「すばやく具体的なイメージをもって合意を得る」という
プロトタイピングのテクニックを学んで、
CMS案件での「ウェブページと管理理画⾯面が異異なる」
という難しさを乗り越える。
14:35〜～14:45

14. 14
CMS案件の合意形成は、何が難しいのか：
1. CMS案件は、ウェブページだけでなく、
「管理理画⾯面のどこで何をすると、どこに反映される
のか」「何はできて、何はできないのか」という、
裏裏側まで合意を取らねばならない。
2. 仕様書にしても、あまり伝わらない。
3. プロジェクト終盤に「想像してたのと違う」となる。
改修は、システム開発で⼯工数も期間もかかる。
14:35〜～14:45

15. 15
CMSの難しさ＝マンマシン・インタフェース：
「管理理画⾯面で⾒見見えるものと、ウェブページが異異なる」
のが、⼈人間の認知には、根本的に難しい。
認知しやすい 認知しづらい
14:35〜～14:45
直接に触れる／⾒見見たまま 何かを介する／⾒見見たのと異異なる

16. 16
仕様書で合意を取ろう...？：
直して、直して...。改版を重ねて、合意を得ても、
じつはクライアントにも、開発者にも、伝わってない。
じゃあ
これで
イメージと
ちがう
わかり
ました
できました
14:35〜～14:45
クライアント クライアント
開発者 開発者

17. 17
WYSIWYGエディタではいけないのか？
じつは、HTMLの知識識がないと、うまく使えない。
ウェブサイトのガイドラインが守れない。メンテナンス性も悪い。
14:35〜～14:45
みかん販売のページ
愛媛みかん
とても⽢甘いみかんです。
糖度度13%で、おいしいおいしい。
ジュースにしてもおいしい。凍らせてシャーベット
にしてもおいしいです。
伊予柑
いよかんです。おいしいです。あなたは「伊予
柑」「はっさく」「夏みかん」「⽢甘夏」のちが
いをご存知ですか。
<h1>みかん販売のページ</h1>
<h2>愛媛みかん</h2>
<p>とても⽢甘いみかんです。</p>
<h1>糖度度13%で、おいしいおいしい。</h1><!-‐‑‒-‐‑‒ ⽂文字サ
イズを⼤大きくしたいだけ -‐‑‒-‐‑‒>
<p>ジュースにしてもおいしい。<span class="sp-‐‑‒
hidden">凍らせてシャーベットに</span><!-‐‑‒-‐‑‒ どこかか
ら危なそうなコピペ -‐‑‒-‐‑‒>してもおいしいです。
<br><br><!-‐‑‒-‐‑‒ 空⾏行行のための2重br -‐‑‒-‐‑‒></p>
<table><tr><td>
<font size=“+2”><strong>伊予柑</strong></
font><!-‐‑‒-‐‑‒ ⾒見見た⽬目はh2と同じ -‐‑‒-‐‑‒>
<p>いよかんです。おいしいです。あなたは「伊予柑」
「はっさく」「夏みかん」「⽢甘夏」のちがいをご存知です
か。</p></td></tr></table>
<!-‐‑‒-‐‑‒ 枠線のためだけのtable -‐‑‒-‐‑‒>

18. 18
そこで、具体的なイメージを⽰示せる
プロトタイピングで
合意を形成しよう！
14:45〜～14:50

19. 19
プロトタイピングのウェブツール、
いろいろあるよね！
ちょっと待って！
14:45〜～14:50

20. 注⽂文する
愛媛みかん
とても⽢甘いみかんです。糖度度
13%で、おいしいおいしい。
ジュースにしてもおいしい。
凍らせてシャーベットにして
もおいしいです。
伊予柑
いよかんです。おいしいです。
あなたは「伊予柑」「はっさ
く」「夏みかん」「⽢甘夏」の
ちがいをご存知ですか。
20
プロトタイプの詳細度度：
プロトタイプには「詳細度度」があります。
相⼿手からのフィードバックが、まるで異異なる。
例例：「ページ下部にボタンをおく」だけの説明に、右を⾒見見せるとどうなる？
これはまだ
仮だろう
間違えると、プロジェクトが意図しない⽅方向に進む。
ぜんぶ決まった
内容かな
14:45〜～14:50

21. 21
プロトタイプの詳細度度とプロジェクトの進捗：
プロジェクト
終盤
プロジェクト
序盤
合意のための
プロトタイプ
検証のための
プロトタイプ
ペーパー
プロト
コード化
細部まで
再現
T字に
詳細化
備考：合意と検証が、完全にわかれることはない
14:45〜～14:50

22. 22
ワークショップ1：
ミーティングの流流れを考えて、
プロトタイプをつくろう
14:50〜～15:00

23. 23
案件の舞台：おなじみ道⽞玄坂⼤大学
道⽞玄坂⼤大学とは？：
CMS Sunday #1 で題材となった架空の⼤大学。
学⻑⾧長が、なぜかプロレスラーというネタ設定。
俺らでも、ニュースを
掲載できるようにしてくれや
学⻑⾧長担当者
14:50〜～15:00

24. 24
今回の案件：
クライアント担当者が
「⾃自分でニュースを掲載できる」
仕様の合意を取る
あなたのゴール：
14:50〜～15:00
クライアント担当者が知りたいこと：
「どんな画⾯面から掲載するのか、イメージを知りたい」
「開発する前に、ちゃんと説明してほしい」

25. 25
要件：
1. ニュースリリースを⾃自分で載せたい。
2. ニュースリリースを載せたとき、トップページと
ニュースリリース⼀一覧ページも、⼀一緒に更更新されて
ほしい。
14:50〜～15:00

26. 26
道⽞玄坂⼤大学ウェブサイト
14:50〜～15:00

27. 27
道⽞玄坂⼤大学ウェブサイト サイトストラクチャ
14:50〜～15:00
トップページ
（ニュースリリース5件）
ニュースリリース一覧
（年別に全件表示）
学長あいさつ
交通アクセス
施設案内
ニュース記事
ニュース記事
ニュース記事

28. 28
ニュースリリース ⽂文例例：
タイトル 必須 CMS SUNDAY Vol.4 ちゃんと合意をとる！「CMS導⼊入案件プロトタイピング」
ワークショップ
サブタイトル 任意 要件定義のミスコミュニケーションによるプロジェクトの⼿手戻りや遅延を防ぎ、
みんなが幸せになれるようにしよう！
公開⽇日 必須 2015年年7⽉月12⽇日
本⽂文 必須 架空のCMS導⼊入案件の仕様を、短時間で分かりやすくクライアントに説明する
シミュレーションを複数のCMSでチームをつくって実施します。シチュエー
ションはWebサイト制作の現場を想定しているので、CMSにそれほど詳しくな
い⽅方、ディレクターやデザイナーでもご参加いただけます。
◎イベント概要
⽇日 時：2015年年7⽉月12⽇日（⽇日）13:00-‐‑‒18:30
場 所：loftwork COOP 10F （渋⾕谷区・道⽞玄坂）
参加費：1,500円（ドリンク／軽⾷食代 含む） ⾒見見学のみも可
定 員：30名 ※応募締め切切りになる場合もあります。
備 考：筆記⽤用具、ノートPC、名刺刺1枚（受付の際にいただきます）
画像 任意 1枚を記事に添付する、サムネイル兼⽤用
14:50〜～15:00

29. 29
クライアント担当者：
タク・フジタ⽒氏
ナイスミドルなおじさま。CMSはよく知らない。
プロジェクトのCMS選定フェーズでいちおう実物を⾒見見てはいる。
実物を
⾒見見てみないと
わからないなあ
（※⼝口癖）
14:50〜～15:00

30. 30
フジタ⽒氏とのミーティングの流流れ：
1. プロトタイプで「新規投稿」をデモしてください。
2. フジタ⽒氏が質問します。プロトタイプをその場で動
かして、納得させてください。
3. フジタ⽒氏が以下のいずれかの「仕様変更更」をします。
プロトタイプをその場で直し、合意を得てください。
• ニュースリリースの⾒見見出しの⽂文字を⼤大きくしたい。
• ニュースリリースの頭に分類ラベルをつけたい。
• ニュースリリースの発⾏行行番号も⼊入⼒力力したい。
14:50〜～15:00

31. 31
フジタ⽒氏とのミーティングの実演：
今から講師が実演します。。。
（仕様変更更のくだりは省省略略します）
ちなみにサンプルは、eZ Publish という CMS で作成しました。
15:00〜～15:10

32. 32
プロトタイピング実例例（CMS：eZ Publish での例例）：
管理理画⾯面 > ログイン後トップページ
15:00〜～15:10
管理理画⾯面
ペーパープロト
ウェブページ
ワイヤーフレーム
管理理画⾯面
（完成時）
道⽞玄坂⼤大学
⼦子アイテム
新規作成
道⽞玄坂⼤大学
ニュースリリース
ニュース記事
学科・コース
学⽣生⽣生活
⼊入試情報
就職情報
⼤大学院
選択 その他の操作 テーブルオプ...

33. 33
プロトタイピング実例例（CMS：eZ Publish での例例）：
管理理画⾯面 > ニュースリリース⼀一覧
15:00〜～15:10
管理理画⾯面
ペーパープロト
ウェブページ
ワイヤーフレーム
管理理画⾯面
（完成時）
ニュース記事
⼦子アイテム
新規作成
道⽞玄坂⼤大学
ニュースリリース
ニュース記事
学科・コース
学⽣生⽣生活
⼊入試情報
就職情報
⼤大学院
選択 その他の操作 テーブルオプ...
ニュース記事
...メニュー項⽬目...
...メニュー項⽬目...
...メニュー項⽬目...
...メニュー項⽬目...
...メニュー項⽬目...
...メニュー項⽬目...

34. 34
プロトタイピング実例例（CMS：eZ Publish での例例）：
管理理画⾯面 > ニュース記事
15:00〜～15:10
管理理画⾯面
ペーパープロト
ウェブページ
ワイヤーフレーム
管理理画⾯面
（完成時）
新規ニュース記事
タイトル
ドラフトを保存送信して公開 下書きの破棄
サブタイトル
公開⽇日
本⽂文
画像
選択...
年年 ⽉月 ⽇日 カレンダー
プレビュー

35. 35
プロトタイピング実例例（CMS：eZ Publish での例例）：
管理理画⾯面 > ニュースリリース⼀一覧（登録完了了）
15:00〜～15:10
管理理画⾯面
ペーパープロト
ウェブページ
ワイヤーフレーム
管理理画⾯面
（完成時）
ニュース記事
⼦子アイテム
新規作成
道⽞玄坂⼤大学
ニュースリリース
ニュース記事
学科・コース
学⽣生⽣生活
⼊入試情報
就職情報
⼤大学院
選択 その他の操作 テーブルオプ...

36. 36
プロトタイピング実例例（CMS：eZ Publish での例例）：
※備考： 管理理画⾯面 > ⾔言語の選択
15:00〜～15:10
管理理画⾯面
ペーパープロト
ウェブページ
ワイヤーフレーム
管理理画⾯面
（完成時）
フジタ⽒氏には
ペーパープロトでは
説明しない。
（納品時の研修で説明）

37. 37
フジタ⽒氏とのミーティングの実演：
ポイント：
• 全体の⼿手順のなかで「今、⾃自分は何をしているの
か」をわかるように説明する。
• 「その管理理画⾯面が、ウェブサイトのどことどこに反
映されるのか」をわかるように説明する。
15:00〜～15:10

38. 38
プロトタイピングの進めかた：
1. ウェブサイトで、必要な画⾯面を考える
2. CMSで、必要な管理理画⾯面を考える
3. デモ⼿手順を考える
4. プロトタイプをつくる
5. チーム内に説明してみる（完成度度70%でする）
6. ブラッシュアップして仕上げる
15:00〜～15:10

39. 39
ワークショップのポイント：
チーム全員が、⽴立立つこと。
イスに座って議論論をしない。
（今⽇日のワークショップはすべて）
イスに座っているのと、⽴立立っているとので、
想像性と速度度に、明らかな差が出ます。
参考：
情報デザイン研究室 http://asanoken.jugem.jp/?eid=2189 ほか
15:00〜～15:10

40. 40
15:45まで：
できたチームから、
タク・フジタ⽒氏と
「ミーティング」して
合意をとろう！（1チーム5分）
• 説明するのは「ディレクター」
• 仕様を決めるのは「開発者」
15:10〜～16:00
実物を⾒見見ないと

41. 41
合意が取れたチームは、16:00まで休憩。
15:10〜～16:00

42. 42
16:00〜～16:05
緊急事態
EMERGENCYもしもし、
タク・フジタですけど...

43. 43
まさかの仕様変更更：
16:30に
資料料そろえて
来てくれる？
***********
***********
（内容は当⽇日のお楽しみ）
まさか、その合意が取れていなかったとは...
16:00〜～16:05

44. 44
ワークショップ2：
プロトタイプを
ブラッシュアップしよう
16:05〜～16:30

45. 45
16:30まで：
プロトタイプをブラッシュアップして
タク・フジタ⽒氏（と学⻑⾧長）に、今度度こそ
「最終承認」を取りにいこう！
（16:30 からチーム発表）
16:05〜～16:30

46. 46
チームごとに発表（1チーム5分）
みんなの前で、タク・フジタ⽒氏に
プロトタイピングをして合意を取ろう！
16:30〜～17:10

47. まとめ
47
1. プロトタイピングは、ステークホルダーの合意形成
のテクニックとしても使える。
2. CMS案件の合意形成は、「⾒見見えるもの」と「仕上が
るもの」が異異なるのが、難しい要因のひとつ。
3. プロトタイピングで、ウェブページと管理理画⾯面の対
応を、わかりやすく⽰示すとよい。
17:10〜～17:30

48. 48
総評：
⻑⾧長⾕谷川 恭久 さん
藤⽥田 拓拓 さん
17:10〜～17:30

49. 49
メンタルモデル
ユーザーへの共感から⽣生まれるUXデザイン戦略略
Amazonで購⼊入：
http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼高「1位」
コンピュータ・IT 総合 最⾼高「9位」

50. 50
懇親会
ぜひご参加ください。
17:30〜～
やっぱ CMS は
Drupal にしようかな