2017年1月28日開催のゼロディレ設計編資料です。

1. 0からのWebディレクション講座
設計編
日本ディレクション協会
本間和城
Ver2.0

2. 設計の中身を知る
「言われたものを作る」から脱却
明日から使える設計の考え方

3. Web制作の流れ
『設計編』
・企画
・情報設計
・マーケティング調査
・ワイヤー作成
などなど
『制作編・開発編』
・実装方法策定
・チーム編成と座組
・進行管理
・クリエイティブ管理
などなど
『運用編』
・更新 / 修正懸案管理
・Web解析と報告
・改善企画立案
・計画策定と実行
1 2 3

4. Web制作の流れ
1 2 3
『設計編』
・企画
・情報設計
・マーケティング調査
・ワイヤー作成
などなど
『制作編・開発編』
・実装方法策定
・チーム編成と座組
・進行管理
・クリエイティブ管理
などなど
『運用編』
・更新 / 修正懸案管理
・Web解析と報告
・改善企画立案
・計画策定と実行
Today

5. ホ ン マ カ ズ シ ロ
本 間 和 城
日本ディレクション協会
副会長
株式会社インタースペース
新規事業開発
株式会社レジュプレス
STORYS.JP プロデューサー
株式会社Avenir
チーフディレクター

6. 設計って何？

7. 事業設計
設計の階層
プロダクト設計
サイト設計
ビジョンミッション

8. 事業設計
設計の階層
プロダクト設計
サイト設計
ビジョンミッション
誰の何の課題を解決するか
どうマネタイズ(ビジネスに)していくか
どういうプロダクトで
ユーザーに価値を提供するか
サービスをサイトで
どう伝えるか 媒介であり
情報伝達ツール

9. 事業設計
設計の階層
プロダクト設計
サイト設計
ビジョンミッション

10. 事業設計
設計の階層
プロダクト設計
サイト設計
ビジョンミッション
プロダクト＝サイト(サービス)
Webサービス
• デジタルコンテンツ
• メディア
• プラットフォーム
プロダクト≠サイト
• サービス業(人材・旅行とか)
• EC業
• 金融業(キャッシング・投資とか)

11. Webサイトを作る！ときに

12. 全部大事！
全部目立たせて！
動画、入れようよ！
とりあえず安く！
あのサイトと
同じ感じで！

13. 全部大事！
全部目立たせて！
動画、入れようよ！
とりあえず安く！
あのサイトと
同じ感じで！
クライアントが言う要望は
末端のそのまた末端の話が多い

14. そのサイトは
事業にとってどんな位置づけなんですか？
目的は何ですか？
どう利益を出すんですか？

15. Webサイト設計
GOAL

16. Webサイト設計
GOAL
ビジネスの目的を達成させるために
ユーザーをそのGOALに導くサイト・サービス設計する

17. GOAL
Webサイト設計
誰に向けた
サービスなのか
どうなれば
事業目的が達成できるか

18. GOAL
Webサイト設計
誰に向けた
サービスなのか
どうなれば
事業目的が達成できるか
そのために
何を伝えるのか
何をさせるのか

19. GOAL
Webサイト設計
そのために
何を伝えるのか
何をさせるのか

20. GOAL
Webサイト設計
何作る？ (サイトのコンセプト設計)
どういう流れでユーザーを動かす？ (導線設計)
何伝える？何させる？ (コンテンツ・インタラクションの設計)
どうやってブラウザ上に並べる？(ワイヤーフレーム)
そのために
何を伝えるのか
何をさせるのか

21. 参考に…
事業設計だと

22. GOAL
参考：事業設計
市場の規模はどれくらいか
何人にリーチするか
売上を〇〇万円達成する
○○の数値をここまで伸ばす
どうやって
アプローチする？

23. GOAL
参考：事業設計
市場の規模はどれくらいか
何人にリーチするか
売上を〇〇万円達成する
○○の数値をここまで伸ばす
これを実現するために
ユーザーに○○な体験をしてもらわないとね
どうやって
アプローチする？

24. 具体的に
Webサイト設計の話に入っていきます

25. GOAL
Webサイト設計
ペルソナ
サービスの象徴的な顧客
価値
ユーザーに何してほしいか
感情設計
顧客に何を感じさせるか
動線設計
顧客をどのようにGOALまで導くか
コンテンツ設計
各矢印で何を伝えるか

26. GOAL
Webサイト設計
ペルソナ
サービスの象徴的な顧客
価値
ユーザーに何してほしいか
感情設計
顧客に何を感じさせるか
動線設計
顧客をどのようにGOALまで導くか
コンテンツ設計
各矢印で何を伝えるか
これさえ抑えておけば
設計でぶれることはない

27. GOAL
Webサイト設計
価値
ユーザーに何してほしいか
ワイヤーフレーム
どこに何置く？
コンテンツマップ
何があるの？
ビジュアルデザイン
どんな見せ方にする？
インタラクション
どんな動きする？
ペルソナ
サービスの象徴的な顧客
感情設計
顧客に何を感じさせるか
動線設計
顧客をどのようにGOALまで導くか
コンテンツ設計
各矢印で何を伝えるか

28. ペルソナ
ペルソナ
サービスの象徴的な顧客

29. ペルソナ
山田太郎29歳 都内在住でIT系企業の営業マン
地方の大学を出て、6年前に上京
休みの日は一人で出かけることが多く、
よくカフェで一日中仕事をしたり、
本を読んだりしている。
行動するより考える派。何事も慎重に決める。
Webのリテラシーは高いが、人と違う事にかっこよさを感じる
だからMBAよりWindows。IT系でWindows使ってる。
渋いかっこいい。
身に着けるモノにはあまりお金をかけない。

30. ペルソナ
山田太郎29歳 都内在住でIT系企業の営業マン
地方の大学を出て、6年前に上京
休みの日は一人で出かけることが多く、
よくカフェで一日中仕事をしたり、
本を読んだりしている。
行動するより考える派。何事も慎重に決める。
Webのリテラシーは高いが、人と違う事にかっこよさを感じる
だからMBAよりWindows。IT系でWindows使ってる。
渋いかっこいい。
身に着けるモノにはあまりお金をかけない。
このプロフィールや人となりに
サービスに対する感情や想いを加えていく

31. ペルソナ
ペルソナ像に「ナナリハ」を加え
よりサービス利用をイメージしやすくする

32. ペルソナ
ペルソナ像に「ナナリハ」を加え
よりサービス利用をイメージしやすくする
ナナリハ？

33. ペルソナ：ナナリハでよりイメージを鮮明に
ペルソナ
ナ
ナ
リ
ハ
悩み
なぜ
理想
ハードル

34. ペルソナ：ナナリハでよりイメージを鮮明に
ペルソナ プロフィールや人間性
ナ
ナ
リ
ハ
悩み
なぜ
理想
ハードル
どんな悩みを抱えている？
なぜその悩みを抱えるようになった？
理想的な姿は何？
理想に近づけないハードルは？

35. ナナリハ：転職サイトだったら
ペルソナ 25歳、新卒3年目の営業マン…
ナ
ナ
リ
ハ
悩み
なぜ
理想
ハードル
今の仕事に未来を感じない
給料も上がらない
学生時代の友人と比較すると給料低い
業界がダウントレンドだ
友達に給料を自慢したい
もっといい暮らししたい
転職したことないから怖い
辞めるタイミングがいつか分からない

36. ナナリハ：転職サイトだったら
ペルソナ 28歳、新卒6年目の営業マン…
ナ
ナ
リ
ハ
悩み
なぜ
理想
ハードル
今の仕事に未来を感じない
給料も上がらない
学生時代の友人と比較すると給料低い
業界がダウントレンドだ
友達に給料を自慢したい
もっといい暮らししたい
転職したことないから怖い
辞めるタイミングがいつか分からない
「始めどうやってサービスに興味を持ってもらう？」
「サイトに訪れたときに、何を心配する？」
「何を伝えれば転職してもらいやすくなる？」

37. GOAL
Webサイト設計
ペルソナ
サイト上での価値
転職の応募

38. GOAL
Webサイト設計
ペルソナ
サイト上での価値
転職の応募
サイトに訪れる前
サイトに訪れてから

39. GOAL
Webサイト設計
ペルソナ
サイト上での価値
転職の応募
サイトに訪れる前
サイトに訪れてから
感情設計
顧客に何を感じさせるか
動線設計
顧客をどのようにGOALまで導くか
コンテンツ設計
各矢印で何を伝えるか

40. Webサイト設計
まずは
ワイヤーフレーム！
ではない

41. Webサイト設計
サイト全体でどう動いてもらうかを
設計していく

42. Webサイト設計の3ステップ
感情設計
顧客に何を感じさせるか
動線設計
顧客をどのようにGOALまで導くか
コンテンツ設計
それぞれのポイントで何を伝えるか

43. 感情設計
顧客に何を感じさせるか
Webサイト設計の3ステップ

44. 感情設計
感情設計
顧客に何を感じさせるか
○○したい！ ○○できそう！ ○○しなきゃ！

45. 感情設計
転職したい！ 転職できそう！ 転職しなきゃ！

46. 感情設計
転職したい！ 転職できそう！ 転職しなきゃ！
給料が上がる可能性を
感じたとき
現社で出来ない
やりたいことが見つかったとき
素敵な会社を
知ったとき
自分のスキルは
希少性が高いと知ったとき
オファーを貰ったとき
「求める人物像・スキル」が
自分とマッチしているとき
業界平均より
自分の年収が低いとき
今しか募集していない
人気求人を見つけたとき
3月や9月など、
求人募集が増える時期

47. ユーザー感情って
普通
いい状態を知り
それを普通にしたい
今が悪いと気づき
普通に戻したい

48. 普通
いい状態を知り
それを普通にしたい
今が悪いと気づき
普通に戻したい
ユーザー感情って
○○したい！
○○しなきゃ！
○○できそう！

49. Work Shop pert.1

50. ペルソナを考え、感情を洗い出そう

51. ペルソナを考え、感情を洗い出そう

52. GOAL
Webサイト設計
ペルソナ
サイト上での価値
転職の応募
サイトに訪れる前
サイトに訪れてから

53. GOAL
Webサイト設計
ペルソナ
サイト上での価値
転職の応募
サイトに訪れる前
サイトに訪れてから
給料アップを
イメージ
させたいよね
3年たったら
即戦力になれる
事伝えたい！
給料は大事だけど、
業界ものことも
転職の一押しは
恐くないことを
伝える事？

54. Webサイト設計
出てきた感情をWeb内(外も一部含めて)
どう再現していくのか

55. 行動フロー
タスク 感情・ニーズ コンテンツ・気を付ける事
GOAL

56. 行動フロー
GOALに行くまでに
ユーザーは何を
するのか
タスク 感情・ニーズ コンテンツ・気を付ける事
タスクをする際の
期待や不安
どんなことを
求めているのか
何を伝えるのか
何を気を付けなければい
けないのか
GOAL

57. GOAL
行動フロー
タスク 感情・ニーズ コンテンツ・気を付ける事
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト

58. GOAL
行動フロー
タスク 感情・ニーズ コンテンツ・気を付ける事
転職したいけど、
出来るのかなぁ…
まずはここで探すか
自分には何が合うんだろ
う？
求人保存するために登録し
ておこう
履歴書面倒くさっ！
どこからオファー来るかな
書類選考通りますように
検索連動型広告
LP(求人が多いことを伝える)
絞り込み検索(地域・職種…)
受かりやすい求人を優先で
登録フォーム(まずは最小限)
・求人応募/保存/スカウト
履歴書入力
途中保存/フォーマット/コツ
応募フォーム
複数求人を応募させるように
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト

59. クエッション
そんな思った通りに
ユーザーって
動かなくない？

60. クエッション
そんな思った通りに
ユーザーって
動かなくない？
もちろんです。

61. 行動フロー
あくまで、理想的な行動フロー
ユーザー感情がサイト外で一部満たされた状態で来ることも
(広告見て「やらなきゃ！」が高まっている、口コミ聞いて…)
そういう「想定動線をスキップしたい！」という人のために
グローバルナビゲーションやサイドバーがある
まずは理想的な行動フローを組んだうえで
途中参加OK!なナビゲーションやワイヤーを組んでいこう

62. GOAL
行動フローをバージョンアップさせると
タスク
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト
離脱！！
離脱！！
離脱！！

63. GOAL
行動フローをバージョンアップさせると
タスク
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト
離脱！！
離脱！！
離脱！！
今じゃなくて
いいかなぁ
なんか
思った感じじゃない…
ちょっと心配だなぁ

64. GOAL
行動フローをバージョンアップさせると
タスク
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト
離脱！！
離脱！！
離脱！！
フローの中で
リスクやあきらめを低減させる
必要がある
今じゃなくて
いいかなぁ
なんか
思った感じじゃない…
ちょっと心配だなぁ

65. GOAL
タスク なぜ離脱する？ 離脱させない機能・導線
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト
行動フローをバージョンアップさせると
離脱！！

66. GOAL
タスク なぜ離脱する？ 離脱させない機能・導線
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト
行動フローをバージョンアップさせると
希望に合う求人が
見つからない
「緩い条件で再検索
してみれば？」を促す
スカウト待てば？を促し
登録だけでもさせる
離脱！！

67. Work Shop pert.2

68. 行動フローを描いてみよう
サイトの外も含めて考えてみよう

69. 行動フローを描いてみよう
サイトの外も含めて考えてみよう

70. 書き方
模造紙
タスク ニーズ コンテンツ離脱防止案 離脱理由
①
② ③④

71. GOAL
行動フローが決まれば
タスク
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト 各ページに「どういうモチベーションで訪れて」
「どういう感情で次の遷移をさせるか」
があって、初めてワイヤーを描くことができるのです。

72. 行動フローが決まれば
GOAL
タスク
サービスを知る
求人を探す
登録する
応募検討
転職を検討する
応募する
登録する
履歴書登録
スカウト
各機能のUIやユーザビリティも同じ、
行動フローがスタート
→どんな軸で検索させる？
→登録フォームをどう使いやすくさせる？
→履歴書登録は、どうすれば登録度増える？
前の遷移と後の遷移があって、その人にとっての
「使いやすさ」が見えてくる

73. 行動フローが決まれば
遷移が見えるから
ナビゲーションやリンク構造が見える
そのコンテンツでユーザーに何してほしいかが見えるから
ワイヤーが書けるし
UIが決まるし、動作が決まる

74. おまけ

75. 事業設計
設計の階層(再掲)
プロダクト設計
サイト設計
ビジョンミッション
誰の何の課題を解決するか
どうマネタイズ(ビジネスに)していくか
どういうプロダクトで
ユーザーに価値を提供するか
サービスをサイトで
どう伝えるか 媒介であり
情報伝達ツール

76. アロマオイルなら
クロスセル設計 体験(認知)の設計 市場の新開拓
ユーザー
コミュニケーション
マネタイズ設計

77. アロマオイルなら
クロスセル設計
 ディフューザー
 匂いが出るガジェット
 フレグランス○○
体験(認知)の設計
 アロマ体験イベント
 アロマ調合イベント
 油から自分で作ろう！
市場の新開拓
 受験生向け
 toB(企業向け)
 病院向け定期販売
ユーザー
コミュニケーション
 チャットBOTで
レコメンド
 無料サンプル
マネタイズ設計
 無料配布&広告付き
(牛角の焼き肉の香り？)
 定期購入
 プリンターモデル
(ディフューザーだけ無料配布)

78. アロマオイルなら
クロスセル設計
 ディフューザー
 匂いが出るガジェット
 フレグランス○○
体験(認知)の設計
 アロマ体験イベント
 アロマ調合イベント
 油から自分で作ろう！
市場の新開拓
 受験生向け
 toB(企業向け)
 病院向け定期販売
ユーザー
コミュニケーション
 チャットBOTで
レコメンド
 無料サンプル
マネタイズ設計
 無料配布&広告付き
(牛角の焼き肉の香り？)
 定期購入
 プリンターモデル
(ディフューザーだけ無料配布)
サイトを作る以外でも
課題解決アプローチは
無数にある
どの階層で話が出来るかで
ディレの価値が大きく変わる

79. まとめ

80. 事業設計
設計の階層
プロダクト設計
サイト設計
ビジョンミッション
誰の何の課題を解決するか
どうマネタイズ(ビジネスに)していくか
どういうプロダクトで
ユーザーに価値を提供するか
サービスをサイトで
どう伝えるか 媒介であり
情報伝達ツール

81. GOAL
Webサイト設計
誰に向けた
サービスなのか
どうなれば
事業目的が達成できるか
そのために
何を伝えるのか
何をさせるのか

82. GOAL
Webサイト設計
ペルソナ
サービスの象徴的な顧客
価値
ユーザーに何してほしいか
動線設計
顧客をどのようにGOALまで導くか
コンテンツ設計
各矢印で何を伝えるか

83. GOAL
行動フロー
GOALに行くまでに
ユーザーは何を
するのか
タスク 感情・ニーズ コンテンツ・気を付ける事
タスクをする際の
期待や不安
どんなことを
求めているのか
何を伝えるのか
何を気を付けなければい
けないのか

84. おわり