Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WEBDESIGNFLOW
ver 2.0 2013-06-05 Ryo Taguchi by FOURDIGIT DESIGN Inc.
@tag4D 田口 亮
WEB DESIGN & DEVELOPMENT & CONSULTING
RESEARCH SYSTEM & DESIGN RESEARCH
NIKKEI
DESIGN
ものづくりのプロセス(デザインプロセ
ス)を体系化した国際規格
Human Centered Design
本日の主旨
INTRODUCTION & INDEX
INTRODUCTION & INDEX
ビジュアルデザインの
技法の話はしません
デザインが達成すべきもの
デザインの意味や目的
×
◎
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
WEBの目的
種類 目的
プロモーションサイト 認知度向上
プロモーションサイト 資料請求・お問い合わせ
プロモーションサイト 店舗・来客誘導
ブランディングサイト ブランドイメージ向上・競争優位性の向上
コーポレートサイト 会社情報・アクセス...
直接的間接的
売上増加
コスト削減
ECサイト
コーポレートサイト
ブランドサイト
リクルートサイト
サポートサイト
ブログ
SNS
商品サイト
ポータルメディア
情報ポータル
社内ツール
WEBの目的
WEBの目的
目的が違うと考え方や必要な
ものが変わる
システム開発が必要なのとおもしろコンテンツが必要
なのでは、根本の制作プロセスや考え方が変わってし
まう。
複数の目的がある場合は、優先順位を整理する必要が
ある。
WEBの目的を整理するうえで
コンバージョン
サイト
検索エンジン
アプリ
メール
バナー
LP
ソーシャル
SNSフォロー
メールフォロー
アプリ
fb ページ
アクション
シェア
レスポンス
ブログ
ウェブメディア
自社の他サイト
集客 利...
WEBの目的
ユーザーの行動を考えると
目的も明確になる
ユーザーのゴールや体験をイメージすることで、サイ
トの目的や存在理由もわかりやすくなります。逆に言
うとユーザーはユーザーの目的しか求めていません。
目的達成へのプロセス
SEM/SEO
App/Widgets SocialNetworks
Blogs Email
PR
Campaigns&Contents
Affiliates Biz DevDirect, Tel
TV / Radio / ...
←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
Web利用の変化
Webを見る、から Webを使うへ
Web 1.0
会社やメディアが発信
USER
簡単にコンテンツにアクセスできる!
Web 2.0
発信側にユーザーが入る
USER
発信されるコンテンツが爆発的に増加
USER
個人ブログ
SNS
ユーザー同士のつながりが情報の中心
USER
企業サイト
個人ブログ
参照
・企業発信より友達からの情報
・必要のないものは見ない=ユーザーの目的意識の明確化
・情報を取得するための手段
Webを見る、から Webを使うへ
Web利用の変化
使う文脈で求められるもの
USER
目的を達成したい
目的意識 目的を達成する
集客 利用 コンバージョン アクション レスポンス
目的があるユーザー
問題意識をもっていそうなユーザー
アクションにつながりそうなユーザー
※ターゲティング・fa...
←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
ターゲットを理解する
USER
目的を達成したい
目的意識 目的を達成する
どんな文脈?
(いつ?どんなときに?なぜ?)
どんなひと?
(性別・年齢・趣味など)
❶ ❷
ターゲットを理解する
USER
目的意識
どんなひと?
(性別・年齢・趣味など)
❶ ・マーケティングリサーチ
・ソーシャルマイニング
大きなマーケットの中から、
ターゲットユーザーの年齢や性別比率、
嗜好性などを仮定します。
ターゲットを理解する
・アクセス解析
「どのサイトから来ている」「どういう行動を取っている」など
目的を達成したい
どんな文脈?
(いつ?どんなときに?なぜ?)
❷
・リサーチ・サーベイ
「どんな時に使う」「どんな目的で使う」など
・デプスイン...
ターゲットを理解する
USER
目的を達成したい
目的意識 目的を達成する
どんな文脈?
(いつ?どんなときに?なぜ?)
どんなひと?
(性別・年齢・趣味など)
データを取得することは重要
ただそれが「答え」ではありません
ターゲットを理解する
USER
目的を達成したい
目的意識 目的を達成する
どんな文脈?
(いつ?どんなときに?なぜ?)
どんなひと?
(性別・年齢・趣味など)
ターゲット理解 =「共感」
自分および関係者がユーザーのアバターとして機能すること...
ターゲットを理解する
デザインプロセスにおけるターゲット理解
ターゲットを理解する
ペルソナ法
ターゲットユーザーの人物像を明文化することで、より深いター
ゲティングと、ユーザー像をイメージしやすくする手法
・名前
・性別
・年齢
・未既婚(彼女ありなし)
・職業
・使っているパソコン
・ネットの利用状況...
ターゲットを理解する
やってみましょう。
題材
自社の商品サイト
自社サイト
ターゲットを理解する
ターゲットを理解する
・名前
・性別
・年齢
・未既婚(彼女ありなし)
・職業
・使っているパソコン
・ネットの利用状況
・よく見るサイト・アプリ
・趣味
・好きなもの
・好きな雑誌
・最近気になっていること
・このサイトにどうやってたどり着い...
←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
ユーザーゴールとビジネスゴール
USER
目的を達成したい
目的意識 目的を達成する
USER
目的を達成したい
目的意識 目的を提供する
・商品の購買・FAQの活用・シェア
・リードの獲得・申し込み・問合せ
ユーザーゴールとビジネスゴール
USER
目的を達成したい
目的意識 目的を提供する
ユーザーゴール ビジネスゴール
ターゲット理解+ビジネスゴール理解
ターゲットの要求を理解すると共に、
ビジネス的な制約や要件・目的を両立させることが重要。
←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
ユーザーエクスペリエンス
USER
目的を達成したい
目的意識 目的を提供する
ユーザーの一連の体験
UX user experience
ユーザーエクスペリエンス
UX user experience
消費者が商品やサービスに触れて使用したり利用したり
する一連の体験のこと。
ユーザーエクスペリエンス
NN/g のUX定義 http://www.nngroup.com/about/userexperience.html
User Experience - Our Definition
"User experience" encompasses...
http://semanticstudios.com @noriyo
ユーザー体験(UX)の構成要素
ユーザーエクスペリエンス
ユーザーエクスペリエンス
USER
目的を達成したい
目的意識 目的を提供する
ユーザーの一連の体験
どうすれば体験価値が高くなり
ビジネスゴールを達成出来るか
←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
カスタマージャーニー
カスタマージャーニー
Customer Journey
ユーザーの接触メディア、やること、考えること、感じ
ることをベースに感情の起伏や行動プロセスを明文化、
シミュレーションする方法
http://www.coprosy...
カスタマージャーニー
Customer Journey
Stage
Do
Think
Feel
UX
Research and Planning booking pre travel Enjoy and Stay post travel
fun...
カスタマージャーニー
やってみましょう。
カスタマージャーニー
題材
自社の商品サイト
自社サイト
カスタマージャーニー
Stage
Do
Think
Feel
UX
繰り返す 順番に沿わずに行う 順番に沿う
function
usability
fan
function
usability
fan
function
usability
fa...
カスタマージャーニー
KEY
VALUE
繰り返す 順番に沿わずに行う 順番に沿う
魅力的なイメージを醸成すること
写真やイメージが魅力的なこと
魅力的なストーリーと自分を重ねられること
明確なメリットを打ち出すこと
柔軟な価格でぴったりなプラ...
←ここ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
サイトをつくる
USER
目的を達成したい
目的意識 目的を提供する
UX user experience
WEBサイトにおいて何が重要か
何を達成するべきか
サイトをつくる
サイトの役割
  サイトの要件
戦略 要件 構造 骨格 表層
情報・インタラクション設計
ビジュアル
デザイン
レイアウト
UX プロセス
サイトをつくる
よくあるプロセス
要件定義
デザイン提案
ワイヤー
サイトマップ
デザイン
コーディング
素材確認
サイトをつくる
要件定義
デザイン提案
ワイヤー
サイトマップ
デザイン
オーサリング
素材確認
何が必要なのかわからない
技術的な要件が固まりきらない
静止画だと様々な画面に対応できない
静的なページだけではない
デザインがのらないと判断出来...
サイトをつくる
Webを見る、から Webを使うへ
サイトをつくる
要件定義
デザイン提案
ワイヤー
サイトマップ
デザイン
オーサリング
素材確認
何が必要なのかわからない
技術的な要件が固まりきらない
静止画だと様々な画面に対応できない
静的なページだけではない
デザインがのらないと判断出来...
USER
目的を達成したい
目的意識 目的を達成する
どんな文脈?
(いつ?どんなときに?なぜ?)
どんなひと?
(性別・年齢・趣味など)
ターゲット理解 =「共感」
自分および関係者がユーザーのアバターとして機能すること
関係者で共有するため...
Customer Journey
Stage
Do
Think
Feel
UX
Research and Planning booking pre travel Enjoy and Stay post travel
function
usabi...
アジャイル
サイトをつくる
すべての設計書 部分的開発
即時フィードバック
Water Fall
視覚レベルの
評価
体験レベルの評価
サイトをつくる
プロトタイピング
プロトタイピング
うまく行っていない場合は
戻って考える
iteration - 反復 -
体験レベルの評価
サイトをつくる
IA
デザイン力開発力
UX
情報理解
コンテンツメイク
プロジェクト設計
機能設計
HTML・CSS
サーバーサイド
JS
ビジュアル
トンマナ
UIパーツ
アイコンアプリ
外部サービス
コンセプトメイク
素材
ビジネス理解
サイトをつくる
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
←ここ
デバイスの多様化
環境の変化
ロンチの影響を
検証するのが難しい
PDCAサイクルの構築
サイト
立ち上げ
仮説
制作
成果スタート
検証
改善
テスト
PDCAサイクルの構築
@noriyo
根本的な
アクセスに
影響を与える
可能性がある
PDCAサイクルの構築
テストの認識を揃える
想定外の大きなトラブル回避
全体のコストの不確実性を回避
PDCAサイクルの構築
PDCAサイクルの構築
サイト
立ち上げ
仮説 検証
改善
検証
改善
テスト
PDCAサイクルの構築
検証しても改善しないと
意味ない
PDCAの構築
PDCAサイクルの構築
アクセス解析
広告効果測定
ソーシャルマイニング
サーベイ・満足度調査
ユーザビリティテスト
ツールの目的を明確にしないと
時間とお金の無駄
いろんなツールがあります
PDCAサイクルの構築
KGI
KPIs
WEB経由の売上UP
達成指標の検証
アクセス解析
広告効果測定
メディアのアクセス  ◎◎PV
ランディングページ 離脱率◎%
商品ページ     離脱率◎%
ソーシャルでのエンゲージ ◎◎
ソーシャ...
Customer Journey
Stage
Do
Think
Feel
UX
Research and Planning booking pre travel Enjoy
function
usability
attractive
funct...
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
←最後
リニューアルする時はいつ?
サイト
立ち上げ
仮説 検証
改善 ?
検証
改善
リニューアルする時はいつ?
サイトマップやコンテンツが
大きく変わる
この仕組みではもう無理
見た目の印象を変える
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
本日のまとめ
INTRODUCTION & INDEX
WEBの目的
WEBの変化
ターゲットを理解する
ユーザーゴールとビジネスゴール
カスタマージャーニー
サイトをつくる
PDCAサイクルの構築
リニューアルする時はいつ?
ユーザーエクスペリエンス
単純にサイトがあるというだけでは
あまり意味がなくなってきている。
ユーザーが目的を達成するために使う
見る・使う価値のあるものが必要
価値のあるものを作るためのプロセス
技術がどんどん進化することで
従来の作り方では難しいことがある
ビジネスやユーザーの理解
デザインプロセス理解
テストをして、検証する体制
分析し、より良くしていく姿勢
ユーザーの体験価値が高いWebサイト
ユーザーゴール・ビジネスゴール
ありがとうございました
講義に対するご質問・ご相談など
お気軽にご連絡ください。
FOURDIGIT Inc.
FOURDIGIT DESIGN Inc. 03-5774-6809 
田口 亮 taguchi@4digit.jp
Upcoming SlideShare
Loading in …5
×

130607 session v2 Markezine Academy

685 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

130607 session v2 Markezine Academy

  1. 1. WEBDESIGNFLOW ver 2.0 2013-06-05 Ryo Taguchi by FOURDIGIT DESIGN Inc.
  2. 2. @tag4D 田口 亮
  3. 3. WEB DESIGN & DEVELOPMENT & CONSULTING
  4. 4. RESEARCH SYSTEM & DESIGN RESEARCH NIKKEI DESIGN
  5. 5. ものづくりのプロセス(デザインプロセ ス)を体系化した国際規格 Human Centered Design
  6. 6. 本日の主旨 INTRODUCTION & INDEX
  7. 7. INTRODUCTION & INDEX ビジュアルデザインの 技法の話はしません デザインが達成すべきもの デザインの意味や目的 × ◎
  8. 8. INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  9. 9. ←ここ INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  10. 10. WEBの目的 種類 目的 プロモーションサイト 認知度向上 プロモーションサイト 資料請求・お問い合わせ プロモーションサイト 店舗・来客誘導 ブランディングサイト ブランドイメージ向上・競争優位性の向上 コーポレートサイト 会社情報・アクセス情報・実績・IR サポートサイト 問い合わせコストの低下 リクルートサイト 採用コストの削減 ECサイト 商品やサービスの売上拡大 ポータルサイト 広告収入 ポータルサイト 情報提供 ブログ 親近感・考えの発信 SNS 顧客コミュニケーション・顧客情報 イントラ・社内ツール 社内コミュニケーション・情報共有 いわゆるWEBサイトの分類
  11. 11. 直接的間接的 売上増加 コスト削減 ECサイト コーポレートサイト ブランドサイト リクルートサイト サポートサイト ブログ SNS 商品サイト ポータルメディア 情報ポータル 社内ツール WEBの目的
  12. 12. WEBの目的 目的が違うと考え方や必要な ものが変わる システム開発が必要なのとおもしろコンテンツが必要 なのでは、根本の制作プロセスや考え方が変わってし まう。 複数の目的がある場合は、優先順位を整理する必要が ある。
  13. 13. WEBの目的を整理するうえで コンバージョン サイト 検索エンジン アプリ メール バナー LP ソーシャル SNSフォロー メールフォロー アプリ fb ページ アクション シェア レスポンス ブログ ウェブメディア 自社の他サイト 集客 利用 コンバージョン アクション レスポンス
  14. 14. WEBの目的 ユーザーの行動を考えると 目的も明確になる ユーザーのゴールや体験をイメージすることで、サイ トの目的や存在理由もわかりやすくなります。逆に言 うとユーザーはユーザーの目的しか求めていません。
  15. 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. 16. ←ここ INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  17. 17. Web利用の変化 Webを見る、から Webを使うへ
  18. 18. Web 1.0 会社やメディアが発信 USER 簡単にコンテンツにアクセスできる!
  19. 19. Web 2.0 発信側にユーザーが入る USER 発信されるコンテンツが爆発的に増加 USER 個人ブログ
  20. 20. SNS ユーザー同士のつながりが情報の中心 USER 企業サイト 個人ブログ 参照 ・企業発信より友達からの情報 ・必要のないものは見ない=ユーザーの目的意識の明確化 ・情報を取得するための手段
  21. 21. Webを見る、から Webを使うへ Web利用の変化
  22. 22. 使う文脈で求められるもの USER 目的を達成したい 目的意識 目的を達成する 集客 利用 コンバージョン アクション レスポンス 目的があるユーザー 問題意識をもっていそうなユーザー アクションにつながりそうなユーザー ※ターゲティング・facebook・インタレストマッチなど・・・ 目的をスムースに達成させ、 違和感なく満足度を上げる ※ユーザビリティ・ビジュアルデザイン・インタラクションデザ インなど・・・
  23. 23. ←ここ INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  24. 24. ターゲットを理解する USER 目的を達成したい 目的意識 目的を達成する どんな文脈? (いつ?どんなときに?なぜ?) どんなひと? (性別・年齢・趣味など) ❶ ❷
  25. 25. ターゲットを理解する USER 目的意識 どんなひと? (性別・年齢・趣味など) ❶ ・マーケティングリサーチ ・ソーシャルマイニング 大きなマーケットの中から、 ターゲットユーザーの年齢や性別比率、 嗜好性などを仮定します。
  26. 26. ターゲットを理解する ・アクセス解析 「どのサイトから来ている」「どういう行動を取っている」など 目的を達成したい どんな文脈? (いつ?どんなときに?なぜ?) ❷ ・リサーチ・サーベイ 「どんな時に使う」「どんな目的で使う」など ・デプスインタビュー 「どうやって使う」「どんな不満がある」など ・ユーザビリティテスト 「どういうことが出来ない」「どこが分かりづらい」など
  27. 27. ターゲットを理解する USER 目的を達成したい 目的意識 目的を達成する どんな文脈? (いつ?どんなときに?なぜ?) どんなひと? (性別・年齢・趣味など) データを取得することは重要 ただそれが「答え」ではありません
  28. 28. ターゲットを理解する USER 目的を達成したい 目的意識 目的を達成する どんな文脈? (いつ?どんなときに?なぜ?) どんなひと? (性別・年齢・趣味など) ターゲット理解 =「共感」 自分および関係者がユーザーのアバターとして機能すること 関係者で共有するためにデータマイニングや資料化をする
  29. 29. ターゲットを理解する デザインプロセスにおけるターゲット理解
  30. 30. ターゲットを理解する ペルソナ法 ターゲットユーザーの人物像を明文化することで、より深いター ゲティングと、ユーザー像をイメージしやすくする手法 ・名前 ・性別 ・年齢 ・未既婚(彼女ありなし) ・職業 ・使っているパソコン ・ネットの利用状況 ・よく見るサイト・アプリ ・趣味 ・好きなもの ・好きな雑誌 ・最近気になっていること
  31. 31. ターゲットを理解する やってみましょう。
  32. 32. 題材 自社の商品サイト 自社サイト ターゲットを理解する
  33. 33. ターゲットを理解する ・名前 ・性別 ・年齢 ・未既婚(彼女ありなし) ・職業 ・使っているパソコン ・ネットの利用状況 ・よく見るサイト・アプリ ・趣味 ・好きなもの ・好きな雑誌 ・最近気になっていること ・このサイトにどうやってたどり着いた?
  34. 34. ←ここ INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  35. 35. ユーザーゴールとビジネスゴール USER 目的を達成したい 目的意識 目的を達成する USER 目的を達成したい 目的意識 目的を提供する ・商品の購買・FAQの活用・シェア ・リードの獲得・申し込み・問合せ
  36. 36. ユーザーゴールとビジネスゴール USER 目的を達成したい 目的意識 目的を提供する ユーザーゴール ビジネスゴール ターゲット理解+ビジネスゴール理解 ターゲットの要求を理解すると共に、 ビジネス的な制約や要件・目的を両立させることが重要。
  37. 37. ←ここ INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  38. 38. ユーザーエクスペリエンス USER 目的を達成したい 目的意識 目的を提供する ユーザーの一連の体験 UX user experience
  39. 39. ユーザーエクスペリエンス UX user experience 消費者が商品やサービスに触れて使用したり利用したり する一連の体験のこと。 ユーザーエクスペリエンス
  40. 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. 1】混乱や面倒がない 2】顧客のニーズを満たす 3】所有や使う喜びを与える usability function joy ユーザーエクスペリエンス
  41. 41. http://semanticstudios.com @noriyo ユーザー体験(UX)の構成要素 ユーザーエクスペリエンス
  42. 42. ユーザーエクスペリエンス USER 目的を達成したい 目的意識 目的を提供する ユーザーの一連の体験 どうすれば体験価値が高くなり ビジネスゴールを達成出来るか
  43. 43. ←ここ INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  44. 44. カスタマージャーニー カスタマージャーニー Customer Journey ユーザーの接触メディア、やること、考えること、感じ ることをベースに感情の起伏や行動プロセスを明文化、 シミュレーションする方法 http://www.coprosystem.co.jp/marketingblog/2012/02/10.html
  45. 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. 46. カスタマージャーニー やってみましょう。
  47. 47. カスタマージャーニー 題材 自社の商品サイト 自社サイト
  48. 48. カスタマージャーニー Stage Do Think Feel UX 繰り返す 順番に沿わずに行う 順番に沿う function usability fan function usability fan function usability fan function usability fan function usability fan サイトに来る前 サイトに来た瞬間 サイトに来てやること 実際の行動 実際の行動した後
  49. 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. 50. ←ここ INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  51. 51. サイトをつくる USER 目的を達成したい 目的意識 目的を提供する UX user experience WEBサイトにおいて何が重要か 何を達成するべきか
  52. 52. サイトをつくる サイトの役割   サイトの要件 戦略 要件 構造 骨格 表層 情報・インタラクション設計 ビジュアル デザイン レイアウト UX プロセス
  53. 53. サイトをつくる よくあるプロセス 要件定義 デザイン提案 ワイヤー サイトマップ デザイン コーディング 素材確認
  54. 54. サイトをつくる 要件定義 デザイン提案 ワイヤー サイトマップ デザイン オーサリング 素材確認 何が必要なのかわからない 技術的な要件が固まりきらない 静止画だと様々な画面に対応できない 静的なページだけではない デザインがのらないと判断出来ない 動かないと触り心地が分からない 決まった状態からでは解決できることは少ない 最初からFIXしない
  55. 55. サイトをつくる Webを見る、から Webを使うへ
  56. 56. サイトをつくる 要件定義 デザイン提案 ワイヤー サイトマップ デザイン オーサリング 素材確認 何が必要なのかわからない 技術的な要件が固まりきらない 静止画だと様々な画面に対応できない 静的なページだけではない デザインがのらないと判断出来ない 動かないと触り心地が分からない 決まった状態からでは解決できることは少ない 最初からFIXしない
  57. 57. USER 目的を達成したい 目的意識 目的を達成する どんな文脈? (いつ?どんなときに?なぜ?) どんなひと? (性別・年齢・趣味など) ターゲット理解 =「共感」 自分および関係者がユーザーのアバターとして機能すること 関係者で共有するためにデータマイニングや資料化をする サイトをつくる
  58. 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. 59. アジャイル サイトをつくる すべての設計書 部分的開発 即時フィードバック Water Fall
  60. 60. 視覚レベルの 評価 体験レベルの評価 サイトをつくる プロトタイピング
  61. 61. プロトタイピング うまく行っていない場合は 戻って考える iteration - 反復 - 体験レベルの評価 サイトをつくる
  62. 62. IA デザイン力開発力 UX 情報理解 コンテンツメイク プロジェクト設計 機能設計 HTML・CSS サーバーサイド JS ビジュアル トンマナ UIパーツ アイコンアプリ 外部サービス コンセプトメイク 素材 ビジネス理解 サイトをつくる
  63. 63. INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス ←ここ
  64. 64. デバイスの多様化 環境の変化 ロンチの影響を 検証するのが難しい PDCAサイクルの構築
  65. 65. サイト 立ち上げ 仮説 制作 成果スタート 検証 改善 テスト PDCAサイクルの構築
  66. 66. @noriyo 根本的な アクセスに 影響を与える 可能性がある PDCAサイクルの構築
  67. 67. テストの認識を揃える 想定外の大きなトラブル回避 全体のコストの不確実性を回避 PDCAサイクルの構築
  68. 68. PDCAサイクルの構築 サイト 立ち上げ 仮説 検証 改善 検証 改善 テスト
  69. 69. PDCAサイクルの構築 検証しても改善しないと 意味ない PDCAの構築
  70. 70. PDCAサイクルの構築 アクセス解析 広告効果測定 ソーシャルマイニング サーベイ・満足度調査 ユーザビリティテスト ツールの目的を明確にしないと 時間とお金の無駄 いろんなツールがあります
  71. 71. PDCAサイクルの構築 KGI KPIs WEB経由の売上UP 達成指標の検証 アクセス解析 広告効果測定 メディアのアクセス  ◎◎PV ランディングページ 離脱率◎% 商品ページ     離脱率◎% ソーシャルでのエンゲージ ◎◎ ソーシャルからの新規アクセス ◎◎ フォーム達成率  ◎%
  72. 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. 73. INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス ←最後
  74. 74. リニューアルする時はいつ? サイト 立ち上げ 仮説 検証 改善 ? 検証 改善
  75. 75. リニューアルする時はいつ? サイトマップやコンテンツが 大きく変わる この仕組みではもう無理 見た目の印象を変える
  76. 76. INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  77. 77. 本日のまとめ
  78. 78. INTRODUCTION & INDEX WEBの目的 WEBの変化 ターゲットを理解する ユーザーゴールとビジネスゴール カスタマージャーニー サイトをつくる PDCAサイクルの構築 リニューアルする時はいつ? ユーザーエクスペリエンス
  79. 79. 単純にサイトがあるというだけでは あまり意味がなくなってきている。 ユーザーが目的を達成するために使う 見る・使う価値のあるものが必要
  80. 80. 価値のあるものを作るためのプロセス 技術がどんどん進化することで 従来の作り方では難しいことがある ビジネスやユーザーの理解 デザインプロセス理解
  81. 81. テストをして、検証する体制 分析し、より良くしていく姿勢 ユーザーの体験価値が高いWebサイト ユーザーゴール・ビジネスゴール
  82. 82. ありがとうございました 講義に対するご質問・ご相談など お気軽にご連絡ください。 FOURDIGIT Inc. FOURDIGIT DESIGN Inc. 03-5774-6809  田口 亮 taguchi@4digit.jp

×