6/7 マーケジンアカデミーの資料。 前回のからバージョンアップしてます。

1. WEBDESIGNFLOW
ver 2.0 2013-06-05 Ryo Taguchi by FOURDIGIT DESIGN Inc.

2. @tag4D 田口 亮

3. WEB DESIGN & DEVELOPMENT & CONSULTING

4. RESEARCH SYSTEM & DESIGN RESEARCH
NIKKEI
DESIGN

5. ものづくりのプロセス（デザインプロセ
ス）を体系化した国際規格
Human Centered Design

6. 本日の主旨
INTRODUCTION & INDEX

7. INTRODUCTION & INDEX
ビジュアルデザインの
技法の話はしません
デザインが達成すべきもの
デザインの意味や目的
×
◎

8. INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

9. ←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

10. WEBの目的
種類 目的
プロモーションサイト 認知度向上
プロモーションサイト 資料請求・お問い合わせ
プロモーションサイト 店舗・来客誘導
ブランディングサイト ブランドイメージ向上・競争優位性の向上
コーポレートサイト 会社情報・アクセス情報・実績・IR
サポートサイト 問い合わせコストの低下
リクルートサイト 採用コストの削減
ECサイト 商品やサービスの売上拡大
ポータルサイト 広告収入
ポータルサイト 情報提供
ブログ 親近感・考えの発信
SNS 顧客コミュニケーション・顧客情報
イントラ・社内ツール 社内コミュニケーション・情報共有
いわゆるWEBサイトの分類

11. 直接的間接的
売上増加
コスト削減
ECサイト
コーポレートサイト
ブランドサイト
リクルートサイト
サポートサイト
ブログ
SNS
商品サイト
ポータルメディア
情報ポータル
社内ツール
WEBの目的

12. WEBの目的
目的が違うと考え方や必要な
ものが変わる
システム開発が必要なのとおもしろコンテンツが必要
なのでは、根本の制作プロセスや考え方が変わってし
まう。
複数の目的がある場合は、優先順位を整理する必要が
ある。

13. WEBの目的を整理するうえで
コンバージョン
サイト
検索エンジン
アプリ
メール
バナー
LP
ソーシャル
SNSフォロー
メールフォロー
アプリ
fb ページ
アクション
シェア
レスポンス
ブログ
ウェブメディア
自社の他サイト
集客 利用 コンバージョン アクション レスポンス

14. WEBの目的
ユーザーの行動を考えると
目的も明確になる
ユーザーのゴールや体験をイメージすることで、サイ
トの目的や存在理由もわかりやすくなります。逆に言
うとユーザーはユーザーの目的しか求めていません。

15. 目的達成へのプロセス
SEM/SEO
App/Widgets SocialNetworks
Blogs Email
PR
Campaigns&Contents
Affiliates Biz DevDirect, Tel
TV / Radio / Newspaper
Paid Media
Landing Page
Corporate Page
Contents Page
Form
Email Blogs
Campaigns&Contents
集客施策
再認知
再来訪 Email
Campaigns&Contents
Share Biz Dev CRMコンバージョン
レベニュー
サイト施策
Support
Social Networks
Sign UP
SFA
AARRRのマッピング

16. ←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

17. Web利用の変化
Webを見る、から Webを使うへ

18. Web 1.0
会社やメディアが発信
USER
簡単にコンテンツにアクセスできる！

19. Web 2.0
発信側にユーザーが入る
USER
発信されるコンテンツが爆発的に増加
USER
個人ブログ

20. SNS
ユーザー同士のつながりが情報の中心
USER
企業サイト
個人ブログ
参照
・企業発信より友達からの情報
・必要のないものは見ない＝ユーザーの目的意識の明確化
・情報を取得するための手段

21. Webを見る、から Webを使うへ
Web利用の変化

22. 使う文脈で求められるもの
USER
目的を達成したい
目的意識 目的を達成する
集客 利用 コンバージョン アクション レスポンス
目的があるユーザー
問題意識をもっていそうなユーザー
アクションにつながりそうなユーザー
※ターゲティング・facebook・インタレストマッチなど・・・
目的をスムースに達成させ、
違和感なく満足度を上げる
※ユーザビリティ・ビジュアルデザイン・インタラクションデザ
インなど・・・

23. ←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

24. ターゲットを理解する
USER
目的を達成したい
目的意識 目的を達成する
どんな文脈？
（いつ？どんなときに？なぜ？）
どんなひと？
（性別・年齢・趣味など）
❶ ❷

25. ターゲットを理解する
USER
目的意識
どんなひと？
（性別・年齢・趣味など）
❶ ・マーケティングリサーチ
・ソーシャルマイニング
大きなマーケットの中から、
ターゲットユーザーの年齢や性別比率、
嗜好性などを仮定します。

26. ターゲットを理解する
・アクセス解析
「どのサイトから来ている」「どういう行動を取っている」など
目的を達成したい
どんな文脈？
（いつ？どんなときに？なぜ？）
❷
・リサーチ・サーベイ
「どんな時に使う」「どんな目的で使う」など
・デプスインタビュー
「どうやって使う」「どんな不満がある」など
・ユーザビリティテスト
「どういうことが出来ない」「どこが分かりづらい」など

27. ターゲットを理解する
USER
目的を達成したい
目的意識 目的を達成する
どんな文脈？
（いつ？どんなときに？なぜ？）
どんなひと？
（性別・年齢・趣味など）
データを取得することは重要
ただそれが「答え」ではありません

28. ターゲットを理解する
USER
目的を達成したい
目的意識 目的を達成する
どんな文脈？
（いつ？どんなときに？なぜ？）
どんなひと？
（性別・年齢・趣味など）
ターゲット理解 ＝「共感」
自分および関係者がユーザーのアバターとして機能すること
関係者で共有するためにデータマイニングや資料化をする

29. ターゲットを理解する
デザインプロセスにおけるターゲット理解

30. ターゲットを理解する
ペルソナ法
ターゲットユーザーの人物像を明文化することで、より深いター
ゲティングと、ユーザー像をイメージしやすくする手法
・名前
・性別
・年齢
・未既婚（彼女ありなし）
・職業
・使っているパソコン
・ネットの利用状況
・よく見るサイト・アプリ
・趣味
・好きなもの
・好きな雑誌
・最近気になっていること

31. ターゲットを理解する
やってみましょう。

32. 題材
自社の商品サイト
自社サイト
ターゲットを理解する

33. ターゲットを理解する
・名前
・性別
・年齢
・未既婚（彼女ありなし）
・職業
・使っているパソコン
・ネットの利用状況
・よく見るサイト・アプリ
・趣味
・好きなもの
・好きな雑誌
・最近気になっていること
・このサイトにどうやってたどり着いた？

34. ←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

35. ユーザーゴールとビジネスゴール
USER
目的を達成したい
目的意識 目的を達成する
USER
目的を達成したい
目的意識 目的を提供する
・商品の購買・FAQの活用・シェア
・リードの獲得・申し込み・問合せ

36. ユーザーゴールとビジネスゴール
USER
目的を達成したい
目的意識 目的を提供する
ユーザーゴール ビジネスゴール
ターゲット理解＋ビジネスゴール理解
ターゲットの要求を理解すると共に、
ビジネス的な制約や要件・目的を両立させることが重要。

37. ←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

38. ユーザーエクスペリエンス
USER
目的を達成したい
目的意識 目的を提供する
ユーザーの一連の体験
UX user experience

39. ユーザーエクスペリエンス
UX user experience
消費者が商品やサービスに触れて使用したり利用したり
する一連の体験のこと。
ユーザーエクスペリエンス

40. NN/g のUX定義 http://www.nngroup.com/about/userexperience.html
User Experience - Our Definition
"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. The first
requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity
and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what
they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must
be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and
interface design.
１】混乱や面倒がない
２】顧客のニーズを満たす
３】所有や使う喜びを与える
usability
function
joy
ユーザーエクスペリエンス

41. http://semanticstudios.com @noriyo
ユーザー体験（UX）の構成要素
ユーザーエクスペリエンス

42. ユーザーエクスペリエンス
USER
目的を達成したい
目的意識 目的を提供する
ユーザーの一連の体験
どうすれば体験価値が高くなり
ビジネスゴールを達成出来るか

43. ←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

44. カスタマージャーニー
カスタマージャーニー
Customer Journey
ユーザーの接触メディア、やること、考えること、感じ
ることをベースに感情の起伏や行動プロセスを明文化、
シミュレーションする方法
http://www.coprosystem.co.jp/marketingblog/2012/02/10.html

45. カスタマージャーニー
Customer Journey
Stage
Do
Think
Feel
UX
Research and Planning booking pre travel Enjoy and Stay post travel
function
usability
fan
function
usability
fan
function
usability
fan
function
usability
fan
function
usability
fan
繰り返す 順番に沿わずに行う 順番に沿う
どれが一番？
便利？子供が楽しめるのは？
いつ行こう？
久しぶりの旅行楽しみ
記念日なんて素敵
失敗したくないな
せっかくだから良いところ
どれが良さそう？ぐっとくる？
きちんと申し込めたかな
お金はいつ払うの？
WEBサイト分かりづらいな
入力めんどくさいな
これで良かったんだろうか
予約大丈夫かな？
施設の質問がある
いきなり行って平気？
ご飯何にしようかな
何時ぐらいにつくかな
駐車場あるかな
近くにコンビニない？
部屋とか眺めがきれい
スタッフの対応良い
子供も楽しめる
待ち時間がない方がいい
アクセスが意外と大事だね
写真シェア
口コミサイトに投稿
FB・tw など
友人に話す
メールフォロー
写真シェア・FB・tw など
口コミサイトに投稿
到着・チェックイン
宿泊・遊ぶ
食事・チェックアウト
電話・WEB
予約確認
ネット予約
電話予約
メディアから予約
窓口から予約
メールでお礼が来た
書き込みする？
写真現像する？
値段より良かった！
楽しかったまた行きたい
今度はもっと長く
ネット検索・ネットメディア・ メディアアプリ
交通広告・友人からの口コミ・WEBサイト
TVの特集

46. カスタマージャーニー
やってみましょう。

47. カスタマージャーニー
題材
自社の商品サイト
自社サイト

48. カスタマージャーニー
Stage
Do
Think
Feel
UX
繰り返す 順番に沿わずに行う 順番に沿う
function
usability
fan
function
usability
fan
function
usability
fan
function
usability
fan
function
usability
fan
サイトに来る前 サイトに来た瞬間 サイトに来てやること 実際の行動 実際の行動した後

49. カスタマージャーニー
KEY
VALUE
繰り返す 順番に沿わずに行う 順番に沿う
魅力的なイメージを醸成すること
写真やイメージが魅力的なこと
魅力的なストーリーと自分を重ねられること
明確なメリットを打ち出すこと
柔軟な価格でぴったりなプランがあること
比較メディアに掲載されていること
比較検討が簡単であること
前に見たものを取り出せること
申し込みフォームが使いやすく信頼性があること
予約を確実にしたことが分かること
問い合わせに対するアナログの窓口を記すこと
申し込んだ内容や手続きが確認できること
申し込み確認のメールを送ること
お待ちしていますという気持ちを伝えること
何か要望があればお答えしたいというおもてなしを伝えること
質問に対しては確実に答える姿勢を見せること
電話やメールの対応が早くて素晴らしいこと
シェアしたくなる体験を残すこと
写真に撮りたくなるものを提供すること
待ちストレスのないスムースな対応をすること
お客様がシェアした写真やチェックインに何か驚きを提供すること
メールで感謝を伝え、良いイメージを残すこと
口コミなどに書かれたら誠実な対応をすること
また待ってることを伝え、その人の思い出をさらに彩ること
Customer Journey
Stage
Do
Research and Planning booking pre travel Enjoy and Stay post travel
写真シェア
口コミメディアに投稿
FB・tw など
友人に話す
メールフォロー
写真シェア・FB・tw など
口コミサイトに投稿
到着・チェックイン
宿泊・遊ぶ
食事・チェックアウト
電話・WEB
予約確認
ネット予約
電話予約
メディアから予約
窓口から予約
ネット検索・ネットメディア・ メディアアプリ
交通広告・友人からの口コミ・WEBサイト
TVの特集

50. ←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

51. サイトをつくる
USER
目的を達成したい
目的意識 目的を提供する
UX user experience
WEBサイトにおいて何が重要か
何を達成するべきか

52. サイトをつくる
サイトの役割
サイトの要件
戦略 要件 構造 骨格 表層
情報・インタラクション設計
ビジュアル
デザイン
レイアウト
UX プロセス

53. サイトをつくる
よくあるプロセス
要件定義
デザイン提案
ワイヤー
サイトマップ
デザイン
コーディング
素材確認

54. サイトをつくる
要件定義
デザイン提案
ワイヤー
サイトマップ
デザイン
オーサリング
素材確認
何が必要なのかわからない
技術的な要件が固まりきらない
静止画だと様々な画面に対応できない
静的なページだけではない
デザインがのらないと判断出来ない
動かないと触り心地が分からない
決まった状態からでは解決できることは少ない
最初からFIXしない

55. サイトをつくる
Webを見る、から Webを使うへ

56. サイトをつくる
要件定義
デザイン提案
ワイヤー
サイトマップ
デザイン
オーサリング
素材確認
何が必要なのかわからない
技術的な要件が固まりきらない
静止画だと様々な画面に対応できない
静的なページだけではない
デザインがのらないと判断出来ない
動かないと触り心地が分からない
決まった状態からでは解決できることは少ない
最初からFIXしない

57. USER
目的を達成したい
目的意識 目的を達成する
どんな文脈？
（いつ？どんなときに？なぜ？）
どんなひと？
（性別・年齢・趣味など）
ターゲット理解 ＝「共感」
自分および関係者がユーザーのアバターとして機能すること
関係者で共有するためにデータマイニングや資料化をする
サイトをつくる

58. Customer Journey
Stage
Do
Think
Feel
UX
Research and Planning booking pre travel Enjoy and Stay post travel
function
usability
fan
function
usability
fan
function
usability
fan
function
usability
fan
function
usability
fan
繰り返す 順番に沿わずに行う 順番に沿う
どれが一番？
便利？子供が楽しめるのは？
いつ行こう？
久しぶりの旅行楽しみ
記念日なんて素敵
失敗したくないな
せっかくだから良いところ
どれが良さそう？ぐっとくる？
きちんと申し込めたかな
お金はいつ払うの？
WEBサイト分かりづらいな
入力めんどくさいな
これで良かったんだろうか
予約大丈夫かな？
施設の質問がある
いきなり行って平気？
ご飯何にしようかな
何時ぐらいにつくかな
駐車場あるかな
近くにコンビニない？
部屋とか眺めがきれい
スタッフの対応良い
子供も楽しめる
待ち時間がない方がいい
アクセスが意外と大事だね
写真シェア
口コミサイトに投稿
FB・tw など
友人に話す
メールフォロー
写真シェア・FB・tw など
口コミサイトに投稿
到着・チェックイン
宿泊・遊ぶ
食事・チェックアウト
電話・WEB
予約確認
ネット予約
電話予約
メディアから予約
窓口から予約
メールでお礼が来た
書き込みする？
写真現像する？
値段より良かった！
楽しかったまた行きたい
今度はもっと長く
ネット検索・ネットメディア・ メディアアプリ
交通広告・友人からの口コミ・WEBサイト
TVの特集
サイトをつくる

59. アジャイル
サイトをつくる
すべての設計書 部分的開発
即時フィードバック
Water Fall

60. 視覚レベルの
評価
体験レベルの評価
サイトをつくる
プロトタイピング

61. プロトタイピング
うまく行っていない場合は
戻って考える
iteration - 反復 -
体験レベルの評価
サイトをつくる

62. IA
デザイン力開発力
UX
情報理解
コンテンツメイク
プロジェクト設計
機能設計
HTML・CSS
サーバーサイド
JS
ビジュアル
トンマナ
UIパーツ
アイコンアプリ
外部サービス
コンセプトメイク
素材
ビジネス理解
サイトをつくる

63. INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス
←ここ

64. デバイスの多様化
環境の変化
ロンチの影響を
検証するのが難しい
PDCAサイクルの構築

65. サイト
立ち上げ
仮説
制作
成果スタート
検証
改善
テスト
PDCAサイクルの構築

66. @noriyo
根本的な
アクセスに
影響を与える
可能性がある
PDCAサイクルの構築

67. テストの認識を揃える
想定外の大きなトラブル回避
全体のコストの不確実性を回避
PDCAサイクルの構築

68. PDCAサイクルの構築
サイト
立ち上げ
仮説 検証
改善
検証
改善
テスト

69. PDCAサイクルの構築
検証しても改善しないと
意味ない
PDCAの構築

70. PDCAサイクルの構築
アクセス解析
広告効果測定
ソーシャルマイニング
サーベイ・満足度調査
ユーザビリティテスト
ツールの目的を明確にしないと
時間とお金の無駄
いろんなツールがあります

71. PDCAサイクルの構築
KGI
KPIs
WEB経由の売上UP
達成指標の検証
アクセス解析
広告効果測定
メディアのアクセス ◎◎PV
ランディングページ 離脱率◎%
商品ページ 離脱率◎%
ソーシャルでのエンゲージ ◎◎
ソーシャルからの新規アクセス ◎◎
フォーム達成率 ◎%

72. Customer Journey
Stage
Do
Think
Feel
UX
Research and Planning booking pre travel Enjoy
function
usability
attractive
function
usability
attractive
function
usability
attractive
fun
usa
attr
どれが一番？
便利？子供が楽しめるのは？
いつ行こう？
久しぶりの旅行楽しみ
記念日なんて素敵
失敗したくないな
せっかくだから良いところ
どれが良さそう？ぐっとくる？
きちんと申し込めたかな
お金はいつ払うの？
WEBサイト分かりづらいな
入力めんどくさいな
これで良かったんだろうか
予約大丈夫かな？
施設の質問がある
いきなり行って平気？
ご飯何にしようかな
何時ぐらいにつくかな
駐車場あるかな
近くに
部屋と
スタッ
子供も
待ち時
アクセ
写真シェ
口コミサ
到着・チ
宿泊・遊
食事・チ
電話・WEB
予約確認
ネット予約
電話予約
メディアから予約
窓口から予約
ネット検索・ネットメディア・ メディアアプリ
交通広告・友人からの口コミ・WEBサイト
TVの特集
PDCAサイクルの構築
UXレベルの検証
ソーシャルマイニング
サーベイ・満足度調査
ユーザビリティテスト

73. INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス
←最後

74. リニューアルする時はいつ？
サイト
立ち上げ
仮説 検証
改善 ？
検証
改善

75. リニューアルする時はいつ？
サイトマップやコンテンツが
大きく変わる
この仕組みではもう無理
見た目の印象を変える

76. INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

77. 本日のまとめ

78. INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ？
ユーザーエクスペリエンス

79. 単純にサイトがあるというだけでは
あまり意味がなくなってきている。
ユーザーが目的を達成するために使う
見る・使う価値のあるものが必要

80. 価値のあるものを作るためのプロセス
技術がどんどん進化することで
従来の作り方では難しいことがある
ビジネスやユーザーの理解
デザインプロセス理解

81. テストをして、検証する体制
分析し、より良くしていく姿勢
ユーザーの体験価値が高いWebサイト
ユーザーゴール・ビジネスゴール

82. ありがとうございました
講義に対するご質問・ご相談など
お気軽にご連絡ください。
FOURDIGIT Inc.
FOURDIGIT DESIGN Inc. 03-5774-6809
田口 亮 taguchi@4digit.jp