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


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

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

×◎


WEBの目的

WEBの変化

ターゲットを理解する

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

カスタマージャーニー

サイトをつくる

PDCAサイクルの構築

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

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

←ここ


WEBの目的

WEBの変化








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のマッピング

←ここ


WEBの目的

WEBの変化








Web利用の変化

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

Web 1.0

会社やメディアが発信

USER

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

Web 2.0

発信側にユーザーが入る

USER

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

USER

個人ブログ

SNS

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

USER

企業サイト

個人ブログ

参照

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


Web利用の変化

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

USER 目的を達成したい

目的意識目的を達成する

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

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

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

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

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

←ここ


WEBの目的

WEBの変化











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

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

❶ ❷


USER目的意識


❶ ・マーケティングリサーチ・ソーシャルマイニング

大きなマーケットの中から、ターゲットユーザーの年齢や性別比率、嗜好性などを仮定します。


・アクセス解析「どのサイトから来ている」「どういう行動を取っている」など

目的を達成したい


❷・リサーチ・サーベイ「どんな時に使う」「どんな目的で使う」など

・リサーチ・サーベイ・デプスインタビュー・ユーザーテスト

・デプスインタビュー「どうやって使う」「どんな不満がある」など

・ユーザビリティテスト「どういうことが出来ない」「どこが分かりづらい」など






データを取得することは重要ただそれが「答え」ではありません






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


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


ペルソナ法ターゲットユーザーの人物像を明文化することで、より深いターゲティングと、ユーザー像をイメージしやすくする手法

・名前・性別・年齢・未既婚（彼女ありなし）・職業・使っているパソコン・ネットの利用状況・よく見るサイト・アプリ・趣味・好きなもの・好きな雑誌・最近気になっていること


やってみましょう。

題材

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



・名前

・性別

・年齢

・未既婚（彼女ありなし）

・職業

・使っているパソコン

・ネットの利用状況

・よく見るサイト・アプリ

・趣味

・好きなもの

・好きな雑誌

・最近気になっていること

・このサイトにどうやってたどり着いた？

←ここ


WEBの目的

WEBの変化











USER目的を達成したい

目的意識目的を提供する

・商品の購買・FAQの活用・シェア・リードの獲得・申し込み・問合せ




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

ターゲット理解＋ビジネスゴール理解ターゲットの要求を理解すると共に、ビジネス的な制約や要件・目的を両立させることが重要。

←ここ


WEBの目的

WEBの変化











ユーザーの一連の体験

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://www.nngroup.com/about/userexperience.html

http://www.nngroup.com/about/userexperience.html

http://ejje.weblio.jp/content/attraction

http://ejje.weblio.jp/content/attraction

http://semanticstudios.com @noriyo

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


http://semanticstudios.com

http://semanticstudios.com

http://www.hatena.ne.jp/noriyo_asano/





ユーザーの一連の体験

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

←ここ


WEBの目的

WEBの変化









カスタマージャーニー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


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





←ここ


WEBの目的

WEBの変化











UX user experience

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


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

戦略要件構造骨格表層

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

ビジュアルデザイン

レイアウト

UX プロセス


よくあるプロセス

要件定義

デザイン提案

ワイヤー

サイトマップ

デザイン

コーディング

素材確認


要件定義

デザイン提案

ワイヤー

サイトマップ

デザイン

オーサリング

素材確認

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

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

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

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

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

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

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

最初からFIXしない




要件定義

デザイン提案

ワイヤー

サイトマップ

デザイン

オーサリング

素材確認

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

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

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

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

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

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

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

最初からFIXしない





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


Customer Journey

Stage

Do

Think

Feel

UX


function

usability

fan

function

usability

fan

function

usability

fan

function

usability

fan

function

usability

fan




きちんと申し込めたかなお金はいつ払うの？

WEBサイト分かりづらいな入力めんどくさいなこれで良かったんだろうか




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




メールでお礼が来た書き込みする？写真現像する？値段より良かった！楽しかったまた行きたい今度はもっと長く



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

すべての設計書部分的開発即時フィードバックWater Fall

視覚レベルの評価体験レベルの評価


プロトタイピング

プロトタイピング

うまく行っていない場合は戻って考える

iteration - 反復 -

体験レベルの評価


IA

デザイン力開発力

UX

情報理解

コンテンツメイク

プロジェクト設計機能設計

HTML・CSSサーバーサイド

JS

ビジュアルトンマナ

UIパーツアイコンアプリ

外部サービス

コンセプトメイク

素材

ビジネス理解サイトをつくる


WEBの目的

WEBの変化








←ここ

デバイスの多様化環境の変化

ロンチの影響を検証するのが難しい


サイト立ち上げ

仮説

制作

成果スタート

検証

改善

テスト


@noriyo

根本的なアクセスに影響を与える可能性がある




テストの認識を揃える

想定外の大きなトラブル回避全体のコストの不確実性を回避




仮説検証

改善

検証

改善

テスト


検証しても改善しないと意味ない

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サイト分かりづらいな入力めんどくさいなこれで良かったんだろうか









UXレベルの検証

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


WEBの目的

WEBの変化








←最後



仮説検証

改善？

検証

改善


サイトマップやコンテンツが大きく変わる

この仕組みではもう無理

見た目の印象を変える


WEBの目的

WEBの変化








本日のまとめ


WEBの目的

WEBの変化








単純にサイトがあるというだけではあまり意味がなくなってきている。

ユーザーが目的を達成するために使う

見る・使う価値のあるものが必要

価値のあるものを作るためのプロセス

技術がどんどん進化することで従来の作り方では難しいことがある

ビジネスやユーザーの理解デザインプロセス理解

テストをして、検証する体制

分析し、より良くしていく姿勢

ユーザーの体験価値が高いWebサイト

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

ありがとうございました

講義に対するご質問・ご相談などお気軽にご連絡ください。

FOURDIGIT Inc.FOURDIGIT DESIGN Inc.　03-5774-6809　田口亮 [email protected]

mailto:[email protected]

mailto:[email protected]