マーケジンアカデミーのWEB講座のセッション資料です。これからという人向け。WEBを作る上でどういう考え方が存在するのかなどをまとめました。

1. WEBDESIGNFLOW
2012-11-29 Ryo Taguchi by FOURDIGIT DESIGN Inc.

2. INTRODUCTION & INDEX
WEBデザインは終わらない
成果につなげるWEBデザイン
WEBデザインのはじまりから
終わらない所までの考え方

3. INTRODUCTION & INDEX
よいサイトとは？
ビジュアルがすごい？
情報が整理されている？
使いやすい？
新しい技術を駆使している？
表現がかっこいい？
素材にお金をかけている？
コンテンツが面白い？

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

5. INTRODUCTION & INDEX
よいサイトとは？
質の高いUXを提供できるサイト

6. INTRODUCTION & INDEX
WEBの目的 目的の多様性 KPI・KGI について
目的達成へのプロセス 複雑化 WEB上のオプション 問題点分かります？
問題発見のプロセス・その１ ターゲット ターゲット理解 理解するメソッド
問題発見のプロセス・その２ UX UXの構造
カスタマージャーニー 行動プロセス タッチポイント DO THINK FEEL 重要度の認識
プランニングを整理 UX構造 要件項目 詳細コンバージョンプロセス 目標設定
WEBサイトの構築 ゴールの共有 シナリオ プロトタイプ 評価プロセス
WEBサイトの検査 外部環境に対応するテスト
PDCAサイクルの構築 量的質的PDCA 対策と改善
リニューアルする時はいつ？ 構造 機能 ROI

7. INTRODUCTION & INDEX
WEBの目的 ←ここ
目的達成へのプロセス
問題発見のプロセス・その１
問題発見のプロセス・その２
カスタマージャーニー
プランニングを整理
WEBサイトの構築
WEBサイトの検査
PDCAサイクルの構築
リニューアルする時はいつ？

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

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

10. WEBの目的
WEBの目的・優先順位は
時代とともに変わります
・デバイスの進化
・メディアの変化

11. WEBの目的
WEB制作のあり方も
時代と共に変わっていきます
・関わる人の増加
・専門性の増加

12. WEBの目的
KGI：重要指標
KPI：重要指標の数値目標
KPI 来訪数10,000
妥当性が
KGI KPI フォーム到達 10%
見えない
売上UP！
KPI フォーム達成 10%

13. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス ←ここ
問題発見のプロセス・その１
問題発見のプロセス・その２
カスタマージャーニー
プランニングを整理
WEBサイトの構築
WEBサイトの検査
PDCAサイクルの構築
リニューアルする時はいつ？

14. 目的達成へのプロセス twitter
facebook
SEM
Media Pinterest
App
Ad Web CV Revenew
Mail Game
BLOG
ユーザーの行動導線の多様化

15. 目的達成へのプロセス
目的
認知度向上
資料請求・お問い合わせ 目的達成へのプロ
店舗・来客誘導
ブランド価値向上・競争優位性の向上
セスの複雑化
会社情報・実績 広報
問い合わせコストの低下
採用コストの削減
商品やサービスの販売
広告収入 何をすればいいの
情報提供
親近感・考えの発信 か分かりづらくな
顧客コミュニケーション・顧客情報
社内コミュニケーション・情報共有
ってきている

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

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

18. 目的達成へのプロセス
何が重要か？
何が問題になっているのか？
ユーザーサイドからの視点

19. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス
問題発見のプロセス・その１ ←ここ
問題発見のプロセス・その２
カスタマージャーニー
プランニングを整理
WEBサイトの構築
WEBサイトの検査
PDCAサイクルの構築
リニューアルする時はいつ？

20. 問題発見のプロセス・その１
ユーザーにとって何が問題か
現時点で抱えている問題
ex) 予算がない・スケジュールが足りない など
この時点でそれを持ち出すと始まりません。

21. 問題発見のプロセス・その１
ターゲットを知ること
各関係者がターゲットの
アバター（代理人）として
機能すること

22. 問題発見のプロセス・その１
とにかくターゲットを深く知る
スタンフォード大学
d.school での
デザインメソッド
http://yaokou.cocolog-nifty.com/yaotyan/2012/08/dschool39-7845.html

23. 問題発見のプロセス・その１
ターゲット理解の方法 その１
Marketing Research
インターネットやメール、店頭アンケートなどにおいて、特定の質問をユーザー
や利用者に回答してもらう。定量的なデータを取得することで、マーケットにお
けるシェア・状況・環境などを把握。年齢・性別・子供の有無・接触メディア・
生活状況・嗜好などを取得することで、具体的なユーザーを導きだす。
このデータを利用し、エンパシーマップやカスタマージャーニー、またはペルソ
ナの作成に利用する。

24. 問題発見のプロセス・その１
ターゲット理解の方法 その2
User Testing / Interview
実際にユーザーに使ってもらい観察する。どのようにして使っているのか、また
は、直接それをインタビュー形式で取得する。
アイトラッキングシステムなどの視線追従のしくみを利用することや、ビデオを
撮影し分析、または、仮説店舗など、特定の設備を利用することもある。
ユーザーの利用状況や問題点の把握、インタビューをすることで、ニーズや価値
観、感情などを理解する。

25. 問題発見のプロセス・その１
ターゲット理解の方法 その3
仮想ユーザー
ペルソナ法と呼ばれ、リサーチやインタビューで想定される典型的な仮想ユーザ
ーを設定する。性別・年齢・趣味・個性だけでなく、名前までつけることが多
い。目的を達成するユーザーの観察を汲み取るため、こういうときにどうする
か？という仮説設計における洞察を手助けする。
name:
gender:
job:
age:
hobby:

26. 問題発見のプロセス・その１
ターゲット理解の方法 その4
Empathy Map
ユーザー・またはペルソナが、思うこと、しゃべること、感じること、考えるこ
と、または、良いこと・悪いこと、をマッピングする。価値観や思考は直接観察
できないが、意思決定に大きな影響を及ぼす。これらをマッピングすることで、
ニーズやインサイトへの理解をすることができる。
photo: via shekman

27. 問題発見のプロセス・その１
ターゲット理解の方法 その5
クリエイティブサーベイ
CREATIVE SURVEY®を利用したインターネットリサーチ
定性・定量を組み合わせたインターネットリサーチ。印象面での調査に強みがあ
り、見た目やビジュアルの調査に特化した調査。ビジュアル面やデザインにおけ
るより深い洞察や分析を得ることで、印象面や嗜好を理解したコミュニケーショ
ンが可能になる。
http://www.creativesurvey.jp

28. 問題発見のプロセス・その１
ユーザーにとって何が問題か
まずはターゲットを深く知る
・属性
・嗜好、価値観
・利用状況
データ集めたら満足して
・環境
・考え方 終わってしまうケースも
多い

29. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス
問題発見のプロセス・その１
問題発見のプロセス・その２ ←ここ
カスタマージャーニー
プランニングを整理
WEBサイトの構築
WEBサイトの検査
PDCAサイクルの構築
リニューアルする時はいつ？

30. 問題発見のプロセス・その２
UX user experience
ユーザーエクスペリエンス
消費者が商品やサービスに触れて使用したり利用したり
する一連の体験のこと。

31. 問題発見のプロセス・その２
ユーザー体験（UX）の構成要素
http://semanticstudios.com @noriyo

32. 問題発見のプロセス・その２
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.
１】混乱や面倒がない
２】顧客のニーズを満たす
３】所有や使う喜びを与える
attraction usability
function

33. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス
問題発見のプロセス・その１
問題発見のプロセス・その２
カスタマージャーニー ←ここ
プランニングを整理
WEBサイトの構築
WEBサイトの検査
PDCAサイクルの構築
リニューアルする時はいつ？

34. カスタマージャーニー
集客施策 TV / Radio / Newspaper PR
Paid Media Affiliates Direct, Tel Biz Dev Blogs Email
Campaigns&Contents App/Widgets SocialNetworks
SEM/SEO
ょ う？
まし
サイト施策
やり
再認知
Email 何 から
Blogs
Landing Page
Corporate Page
再来訪 Email
Contents Page
Campaigns&Contents Campaigns&Contents
Form
Support
Sign UP
Social Networks
コンバージョン Share Biz Dev CRM SFA
レベニュー

35. カスタマージャーニー
・サイトの役割
・ユーザー状況、心理
・UXの軸
行動と感情の軌跡を
シミュレーション

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

37. カスタマージャーニー
Principals
Customer Journey
Stage
Do
Think
Feel
UX
繰り返す 順番に沿わずに行う 順番に沿う

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

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

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

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

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

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

44. カスタマージャーニー
STEP7：完成
感情の起伏や行動を明文化することができました。
ユーザーにとって大事なものを定義することができたの
で提供する側の優先順位や大事なものを共有することが
できます。
社内プロジェクトメンバー・制作スタッフへ
UXという軸を作ることで目的がぶれないようになります

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

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

47. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス
問題発見のプロセス・その１
問題発見のプロセス・その２
カスタマージャーニー
プランニングを整理 ←ここ
WEBサイトの構築
WEBサイトの検査
PDCAサイクルの構築
リニューアルする時はいつ？

48. プランニングを整理
集客施策 TV / Radio / Newspaper PR
Paid Media Affiliates Direct, Tel Biz Dev Blogs Email
Campaigns&Contents App/Widgets SocialNetworks
SEM/SEO
ょ う？
まし
サイト施策
やり
再認知
Email 何 から
Blogs
Landing Page
Corporate Page
再来訪 Email
Contents Page
Campaigns&Contents Campaigns&Contents
Form
Support
Sign UP
Social Networks
コンバージョン Share Biz Dev CRM SFA
レベニュー

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

50. プランニングを整理
集客施策 TV / Radio / Newspaper PR
Paid Media Affiliates Direct, Tel Biz Dev Blogs Email
Campaigns&Contents App/Widgets SocialNetworks
SEM/SEO
サイト施策
再認知 Landing Page
Corporate Page
Email Blogs 再来訪 Email
Contents Page
Campaigns&Contents Campaigns&Contents
Form
Support
Sign UP
Social Networks
コンバージョン Share Biz Dev CRM SFA
レベニュー

51. プランニングを整理
KPIs メディアのアクセス ◎◎PV
フォーム達成率 ◎%
ランディングページ 離脱率◎%
KGI 商品ページ 離脱率◎%
WEB経由の売上UP ソーシャルでのエンゲージ ◎◎
ソーシャルからの新規アクセス ◎◎
発注先業者の選定
社内のプロジェクト体制

52. プランニングを整理
目的の整理
ユーザーの理解
UXの方向性
具体目標の設定

53. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス
問題発見のプロセス・その１
問題発見のプロセス・その２
カスタマージャーニー
プランニングを整理
WEBサイトの構築 ←ここ
WEBサイトの検査
PDCAサイクルの構築
リニューアルする時はいつ？

54. WEBサイトの構築
よいサイトとは？
ビジュアルがすごい？
情報が整理されている？
使いやすい？
新しい技術を駆使している？
表現がかっこいい？
素材にお金をかけている？
コンテンツが面白い？

55. WEBサイトの構築
よいサイトとは？
質の高いUXを提供できるサイト

56. WEBサイトの構築
director
UX
developer designer

57. WEBサイトの構築
ウェブ戦略としての「UX」
The Elements of user experience

58. WEBサイトの構築
JJギャレットの5階層構造
UXを達成するためのWEBサイト構築を体系化したもの
戦略 要件 構造 骨格 表層
サイトの役割 情報・インタラクション設計
サイトの要件 レイアウト
UXの方向性 ビジュアル
デザイン

59. WEBサイトの構築
戦略 要件 構造 骨格 表層
情報・インタラクション設計
レイアウト
ビジュアル
デザイン

60. WEBサイトの構築
Scenario
シナリオ法
ユーザーがどんな目的でどのように利用するかのユース
ケースを描く手法。ペルソナと併用することも多い。

61. WEBサイトの構築
ユーザーの行動シナリオ仮説
情報構造・導線・
インタラクションを設計

62. WEBサイトの構築
表現手法の多様性
相互補完的なアプローチ
戦略 要件 構造 骨格 表層
情報設計
レイアウト
ビジュアル
デザイン

63. WEBサイトの構築
PROTOTYPING
プロトタイピング
やってみないと評価できないことを認識し、
実際にやってみて評価を行うこと

64. WEBサイトの構築
プロトタイピング
視覚レベルの
評価 体験レベルの評価

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

66. WEBサイトの構築
大事な体験が達成できているか
ユーザー視点で評価する
UXが達成できているか
THINKやFEELを解決しているか

67. WEBサイトの構築
よいサイトとは？
質の高いUXを提供できるサイト

68. WEBサイトの構築
コンテンツメイク
情報設計 director プロジェクト設計
機能設計
ワイヤーフレーム
サーバーサイド
ビジュアル
HTML・CSS
JS
UX トンマナ
developer designer
アプリ アイコン
ソーシャル連携 UIパーツ

69. WEBサイトの構築
できる限り実際の体験(UX)に
近い形で進める

70. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス
問題発見のプロセス・その１
問題発見のプロセス・その２
カスタマージャーニー
プランニングを整理
WEBサイトの構築
WEBサイトの検査 ←ここ
PDCAサイクルの構築
リニューアルする時はいつ？

71. WEBサイトの検査
デバイスの多様化
環境の変化
ロンチの影響を
検証するのが難しい

72. WEBサイトの検査
成果スタート
サイト
制作 改善
立ち上げ
仮説 検証
テスト

73. WEBサイトの検査
根本的な
アクセスに
影響を与える
可能性がある
@noriyo

74. WEBサイトの検査
テストの認識を揃える
想定外の大きなトラブル回避
全体のコストの不確実性を回避

75. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス
問題発見のプロセス・その１
問題発見のプロセス・その２
カスタマージャーニー
プランニングを整理
WEBサイトの構築
WEBサイトの検査
PDCAサイクルの構築 ←ここ
リニューアルする時はいつ？

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

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

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

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

80. PDCAサイクルの構築
成果スタート
サイト
制作 改善
立ち上げ
仮説 検証
アクセス解析
広告効果測定 サーベイ・満足度調査
ソーシャルマイニング ユーザビリティテスト

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

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

83. INTRODUCTION & INDEX
WEBの目的
目的達成へのプロセス
問題発見のプロセス・その１
問題発見のプロセス・その２
カスタマージャーニー
プランニングを整理
WEBサイトの構築
WEBサイトの検査
PDCAサイクルの構築
リニューアルする時はいつ？ ←最後です！

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

85. リニューアルする時はいつ？
リニューアルを検討すべき
3つのタイミング

86. リニューアルする時はいつ？
構造設計が要件や戦略に
耐えられないとき
ex）
今までは会社紹介サイトだったけど、
店舗に送客ができるサイトに切り替えよう！
ようするにサイトマップレベルで大きな変換
が必要とされるとき

87. リニューアルする時はいつ？
今までのフォーマット（機能
設計）が要件や戦略に
耐えられないとき
ex）
ガラケーを一元管理する仕組みだったけど、スマホや
タブレット用にも対応する
ようするに根本的に違う仕組みが必要になるとき

88. リニューアルする時はいつ？
将来的なROIの向上が
見込まれるとき
（運用・組織・モチベーションなどの無形もある）
ex）
コーポレートイメージを作り替えてブランドを再構築し
よう！運用システムから構築して運用コストを削減しよ
う、など

89. リニューアルする時はいつ？
戦略変更 仕組変更 投資
設計次第でコストが
大きく変わります

90. INTRODUCTION & INDEX
WEBの目的 目的の多様性 KPI・KGI について
目的達成へのプロセス リソース配分 WEB上のオプション 問題点分かりますか？
問題発見のプロセス・その１ ターゲット ターゲットを理解する 理解するメソッド
問題発見のプロセス・その２ ユーザー環境 UXの定義
カスタマージャーニー 行動プロセス タッチポイント DO THINK FEEL 重要度の認識
プランニングを整理 UX構造 要件項目 詳細コンバージョンプロセス 目標設定
WEBサイトの構築 ゴールの共有 シナリオ プロトタイプ 評価プロセス
WEBサイトの検査 外部環境に対応するテスト
PDCAサイクルの構築 量的質的PDCA 対策と改善
リニューアルする時はいつ？ 構造 機能 ROI

91. FOURDIGIT DESIGN Inc.
田口 亮
mail : taguchi@4digit.jp
tw : @tag4D
fb : http://www.facebook.com/tag4D
CREATIVE SURVEY
web : http://www.creativesurvey.jp
mail : support@creativesurvey.jp
fb : http://www.facebook.com/creativesurvey