130607 session v2 markezine academy

WEBDESIGNFLOWver 2.0 2013-06-05 Ryo Taguchi by FOURDIGIT DESIGN Inc.

@tag4D 田口 亮

WEB DESIGN & DEVELOPMENT & CONSULTING

RESEARCH SYSTEM & DESIGN RESEARCH

NIKKEIDESIGN

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

Human Centered Design

本日の主旨

INTRODUCTION & INDEX

INTRODUCTION & INDEX

ビジュアルデザインの技法の話はしません

デザインが達成すべきものデザインの意味や目的

×◎

INTRODUCTION & INDEX

WEBの目的

WEBの変化

ターゲットを理解する

ユーザーゴールとビジネスゴール

カスタマージャーニー

サイトをつくる

PDCAサイクルの構築

リニューアルする時はいつ？

ユーザーエクスペリエンス

←ここ

INTRODUCTION & INDEX

WEBの目的

WEBの変化

ターゲットを理解する

ユーザーゴールとビジネスゴール

カスタマージャーニー

サイトをつくる

PDCAサイクルの構築

リニューアルする時はいつ？

ユーザーエクスペリエンス

WEBの目的

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

いわゆる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 / Newspaper

Paid Media

Landing Page

Corporate Page

Contents Page

Form

Email Blogs

Campaigns&Contents

集客施策

再認知

再来訪 Email

Campaigns&Contents

Share Biz Dev CRMコンバージョンレベニュー

サイト施策

Support

Social NetworksSign UP

SFA

AARRRのマッピング

←ここ

INTRODUCTION & INDEX

WEBの目的

WEBの変化

ターゲットを理解する

ユーザーゴールとビジネスゴール

カスタマージャーニー

サイトをつくる

PDCAサイクルの構築

リニューアルする時はいつ？

ユーザーエクスペリエンス

Web利用の変化

Webを見る、から Webを使うへ

Web 1.0

会社やメディアが発信

USER

簡単にコンテンツにアクセスできる！

Web 2.0

発信側にユーザーが入る

USER

発信されるコンテンツが爆発的に増加

USER

個人ブログ

SNS

ユーザー同士のつながりが情報の中心

USER

企業サイト

個人ブログ

参照

・企業発信より友達からの情報・必要のないものは見ない＝ユーザーの目的意識の明確化・情報を取得するための手段

Webを見る、から Webを使うへ

Web利用の変化

使う文脈で求められるもの

USER 目的を達成したい

目的意識 目的を達成する

集客 利用 コンバージョン アクション レスポンス

目的があるユーザー問題意識をもっていそうなユーザーアクションにつながりそうなユーザー

※ターゲティング・facebook・インタレストマッチなど・・・

目的をスムースに達成させ、違和感なく満足度を上げる

※ユーザビリティ・ビジュアルデザイン・インタラクションデザインなど・・・

←ここ

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 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

ユーザーエクスペリエンス

http://semanticstudios.com @noriyo

ユーザー体験（UX）の構成要素

ユーザーエクスペリエンス

ユーザーエクスペリエンス

USER目的を達成したい

目的意識 目的を提供する

ユーザーの一連の体験

どうすれば体験価値が高くなりビジネスゴールを達成出来るか

←ここ

INTRODUCTION & INDEX

WEBの目的

WEBの変化

ターゲットを理解する

ユーザーゴールとビジネスゴール

カスタマージャーニー

サイトをつくる

PDCAサイクルの構築

リニューアルする時はいつ？

ユーザーエクスペリエンス

カスタマージャーニー

カスタマージャーニーCustomer Journey

ユーザーの接触メディア、やること、考えること、感じることをベースに感情の起伏や行動プロセスを明文化、シミュレーションする方法

http://www.coprosystem.co.jp/marketingblog/2012/02/10.html

カスタマージャーニー

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の特集

カスタマージャーニー

やってみましょう。

カスタマージャーニー

題材

自社の商品サイト自社サイト

カスタマージャーニー

Stage

Do

Think

Feel

UX

繰り返す 順番に沿わずに行う 順番に沿う

function

usability

fan

function

usability

fan

function

usability

fan

function

usability

fan

function

usability

fan

サイトに来る前 サイトに来た瞬間 サイトに来てやること 実際の行動 実際の行動した後

カスタマージャーニー

KEYVALUE

繰り返す 順番に沿わずに行う 順番に沿う

魅力的なイメージを醸成すること写真やイメージが魅力的なこと魅力的なストーリーと自分を重ねられること明確なメリットを打ち出すこと柔軟な価格でぴったりなプランがあること比較メディアに掲載されていること比較検討が簡単であること前に見たものを取り出せること

申し込みフォームが使いやすく信頼性があること予約を確実にしたことが分かること問い合わせに対するアナログの窓口を記すこと申し込んだ内容や手続きが確認できること申し込み確認のメールを送ること

お待ちしていますという気持ちを伝えること何か要望があればお答えしたいというおもてなしを伝えること質問に対しては確実に答える姿勢を見せること電話やメールの対応が早くて素晴らしいこと

シェアしたくなる体験を残すこと写真に撮りたくなるものを提供すること待ちストレスのないスムースな対応をすることお客様がシェアした写真やチェックインに何か驚きを提供すること

メールで感謝を伝え、良いイメージを残すこと口コミなどに書かれたら誠実な対応をすることまた待ってることを伝え、その人の思い出をさらに彩ること

Customer Journey

Stage

Do

Research and Planning booking pre travel Enjoy and Stay post travel

写真シェア口コミメディアに投稿FB・tw など友人に話すメールフォロー

写真シェア・FB・tw など口コミサイトに投稿到着・チェックイン宿泊・遊ぶ食事・チェックアウト

電話・WEB予約確認

ネット予約電話予約メディアから予約窓口から予約

ネット検索・ネットメディア・ メディアアプリ交通広告・友人からの口コミ・WEBサイトTVの特集

←ここ

INTRODUCTION & INDEX

WEBの目的

WEBの変化

ターゲットを理解する

ユーザーゴールとビジネスゴール

カスタマージャーニー

サイトをつくる

PDCAサイクルの構築

リニューアルする時はいつ？

ユーザーエクスペリエンス

サイトをつくる

USER目的を達成したい

目的意識 目的を提供する

UX user experience

WEBサイトにおいて何が重要か何を達成するべきか

サイトをつくる

サイトの役割　　サイトの要件

戦略 要件 構造 骨格 表層

情報・インタラクション設計

ビジュアルデザイン

レイアウト

UX プロセス

サイトをつくる

よくあるプロセス

要件定義

デザイン提案

ワイヤー

サイトマップ

デザイン

コーディング

素材確認

サイトをつくる

要件定義

デザイン提案

ワイヤー

サイトマップ

デザイン

オーサリング

素材確認

何が必要なのかわからない

技術的な要件が固まりきらない

静止画だと様々な画面に対応できない

静的なページだけではない

デザインがのらないと判断出来ない

動かないと触り心地が分からない

決まった状態からでは解決できることは少ない

最初からFIXしない

サイトをつくる

Webを見る、から Webを使うへ

サイトをつくる

要件定義

デザイン提案

ワイヤー

サイトマップ

デザイン

オーサリング

素材確認

何が必要なのかわからない

技術的な要件が固まりきらない

静止画だと様々な画面に対応できない

静的なページだけではない

デザインがのらないと判断出来ない

動かないと触り心地が分からない

決まった状態からでは解決できることは少ない

最初からFIXしない

USER 目的を達成したい

目的意識 目的を達成する

どんな文脈？（いつ？どんなときに？なぜ？）

どんなひと？（性別・年齢・趣味など）

ターゲット理解 ＝「共感」自分および関係者がユーザーのアバターとして機能すること関係者で共有するためにデータマイニングや資料化をする

サイトをつくる

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の特集

サイトをつくる

アジャイルサイトをつくる

すべての設計書 部分的開発即時フィードバック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 and Stay

function

usability

attractive

function

usability

attractive

function

usability

attractive

function

usability

attractive

どれが一番？便利？子供が楽しめるのは？いつ行こう？

久しぶりの旅行楽しみ記念日なんて素敵失敗したくないなせっかくだから良いところどれが良さそう？ぐっとくる？

きちんと申し込めたかなお金はいつ払うの？WEBサイト分かりづらいな入力めんどくさいなこれで良かったんだろうか

予約大丈夫かな？施設の質問がある

いきなり行って平気？ご飯何にしようかな何時ぐらいにつくかな駐車場あるかな

近くにコンビニない？部屋とか眺めがきれいスタッフの対応良い子供も楽しめる待ち時間がない方がいいアクセスが意外と大事だね

写真シェア・FB・tw など口コミサイトに投稿到着・チェックイン宿泊・遊ぶ食事・チェックアウト

電話・WEB予約確認

ネット予約電話予約メディアから予約窓口から予約

ネット検索・ネットメディア・ メディアアプリ交通広告・友人からの口コミ・WEBサイトTVの特集

PDCAサイクルの構築

UXレベルの検証

ソーシャルマイニングサーベイ・満足度調査ユーザビリティテスト

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