SlideShare a Scribd company logo
WebのUXとは何かがわかる

ゴール

      Webの課題解決の糸口が見つかる
プロセスとUX / リーンUX



60 min   ユーザー行動とUX / 体験マップ



         心理とUX / ゲーミフィケーション




30 min   質疑応答
SCHOO   2013.2.21




                       Webサイトの



                    ユーザー体験を高める



                       坂本貴史
                        @bookslope


                                     wikipedia
by Sgkh
プロセス   ユーザー行動   心理
うまくいかない
企画   開発   公開




     ?
企画   開発   テスト   公開




     製品開発モデル
顧客発見   顧客実証   顧客開拓   組織構築




       顧客開発モデル
アントレプレナーの教科書
新規事業を成功させる4つのステップ

スティーブン・G・ブランク (著), 渡邊 哲 (翻訳), 堤 孝志 (翻訳)
顧客が
ほしいものを
つくれているか
ビジュアルデザイン




 インターフェースデザイン            ナビゲーションデザイン                             具現
         情報デザイン




インタラクションデザイン         情報アーキテクチャ




      機能仕様           コンテンツ要求
                                                                 抽象

              ユーザーニーズ

          サイトの目的



        Jesse James Garrett「The Elements of User Experience」より
ウェブ 戦略としての
ユーザーエクスペリエンス
5つの段階で考えるユーザー中心デザイン

Jesse James Garrett (著), ソシオメディア (翻訳)
アジャイル開発




Manifesto for Agile Software Development
個人とその相互作用



     正しく機能するソフトウェアの提供



     顧客とのコラボレーション



     変化への対応




Manifesto for Agile Software Development
GENERATIVE RESEARCH                   Think
                   IDEATION
            MENTAL MODELS
          BEHAVIOR MODELS
               TEST RESULTS
       COMPETITIVE ANALYSIS




                                         リーン UX
                                                                               PROTOTYPES
      A/B TESTING                                                              WIREFRAMES
  SITE ANALYTICS                                                               VALUE PROP
USABILITY TESTING                                                              LANDING PAGE
          FUNNEL                                                               HYPOTHESES
        SIGN-UPS                                                               COMPS
                                                                               DEPLOYED CODE

                       Check                                        Make


                       Crushing the BoulderUser Experience for Lean Startups
デザイナー+プロジェクトマネージャー+開発者=1チーム

外部化、客観的観測をする

目的駆動・結果に集中する

繰り返し可能なルーチンをする
                        9つの
フロー(考える、作る、検証する )
                        原則
正しい課題に集中する

オプションを沢山考え、正しい物を早く決める

仮説を作り検証する

ユーザーとともにリサーチをする
Subject To Change
予測不可能な世界で最高の製品とサービスを作る

Peter Merholz (著), Brandon Schauer (著), David Verba
(著), Todd Wilkens (著), 高橋 信夫 (翻訳)
うまくいかない




    プロセスが違う
顧客のニーズを知り、適応体制を構築すること
もっと知ってほしい
認知              興味        検索         行動       共有
Attention        Interst    Search    Action    Share




            マス             Web         店頭      クチコミ




                 これまでの消費者購買行動「AISASモデル」より
共感              確認                参加               共有・拡散
  Sympathize       Identify         Participate        Share & Spread




ソーシャルメディア        マス           Web                 ソーシャルメディア




               これからの消費者購買行動「SIPSモデル」より
広告新時代
ネット × 広告の素敵な関係




植村 祐嗣 (著), 小野 裕三 (著), 日高 靖 (著), 新谷 哲也 (著),
杉浦 友彦 (著), 岩田 正樹 (著)
by The Anatomy of an Experience Map – Adaptive Path
ステージ                        ユーザー                            コンテクスト
どういう状況か                   だれが関係するか                              場所や環境




ビジネス                       アクション                            エモーション
製品やサービス                  なにをしているのか                              どう感じるか




          by The Anatomy of an Experience Map ‒ Adaptive Path
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
Starbucks Experience Map
ニーズや目的       対応サービス




心地良く過ごしたい    アロマの香り

どこでも仕事がしたい   Wi-Fi 環境

支払いを手早くしたい   クレジットカード支払い
gizmodojapan「koboを開封 」
この問題を


解決するには
ステージ    製品の購入後


 ユーザー    製品の購入者


コンテクスト   自宅のデスク


ビジネス機会   koboの端末


アクション    箱をあける


エモーション   早く使いたい!
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
ステージ    テレビを視聴中


 ユーザー    テレビの視聴者


コンテクスト   自宅のリビング TV前


ビジネス機会   スマートフォンサイト


アクション    TV見ながらアクセスする


エモーション   自分も投稿できる!
予期的UX   一時的UX   エピソード的   累積的UX
                  UX




        ユーザー体験の期間
UX 白書
ユーザーエクスペリエンスの概念を明確にする




HCDValue (翻訳)
現象としてのUX



研究分野としてのUX



実践としてのUX
ユーザーが何をどう感じるか、心理構造の解明



 結果どうすれば、ユーザーの満足が得られるのか



仕組化して継続的に提供し続けられるようにするには
by Ed Lea
by n2linux
もっと知ってほしい




クロスチャネルを理解すること
 利用シーンを想像し期待に答える
なぜハマるの?
Realmac Software Clear for iPhone
評価
動き
  軽快な音


             タッチ

楽しい

                                機能
                   シンプル




      触り心地

                          カラー
ビジュアルデザイン




 インターフェースデザイン            ナビゲーションデザイン                             事象
         情報デザイン




インタラクションデザイン         情報アーキテクチャ




      機能仕様           コンテンツ要求
                                                                 仮説

              ユーザーニーズ

          サイトの目的



        Jesse James Garrett「The Elements of User Experience」より
軽快なサウンドの採用



       シンプルなUIデザイン
デザイン
原則
       タッチやスワイプでの操作方法



       同系統のカラー計画
デザイン
原則




       Android Design
GENERATIVE RESEARCH                   Think
                   IDEATION
            MENTAL MODELS
          BEHAVIOR MODELS
               TEST RESULTS
       COMPETITIVE ANALYSIS




                                         リーン UX
                                                                               PROTOTYPES
      A/B TESTING                                                              WIREFRAMES
  SITE ANALYTICS                                                               VALUE PROP
USABILITY TESTING                                                              LANDING PAGE
          FUNNEL                                                               HYPOTHESES
        SIGN-UPS                                                               COMPS
                                                                               DEPLOYED CODE

                       Check                                        Make


                       Crushing the BoulderUser Experience for Lean Startups
プロトタイピング




           UXPin
プロトタイピング




           UXPin
ゲーミフィケーション




             wikipedia
課題の解決や顧客ロイヤリティの向上に、

ゲームデザインの技術やメカニズムを利用する活動
ゲーミフィケーション
〈ゲーム〉がビジネスを変える




井上 明人 (著)
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
by timeous
情報アーキテクチャ
   設計




            by Sgkh
ビジュアル                  可視化
 可視化                                         されやすい領域


されにくい領域
                   ワイヤーフレーム



          サイトストラクチャ     ナビゲーション        ラベル


                      コンセプト


           ユーザー       コンテンツ         コンテキスト



                  坂本貴史「IAシンキング」より
情報は少ないほどきちんと処理される



読むことと理解することは同じではない



一度に覚えられるのは4つだけ



目標に近づくほど「ヤル気」が出る



データより物語のほうが説得力がある
インタフェースデザインの心理学
ウェブやアプリに新たな視点をもたらす100の指針




Susan Weinschenk (著), 武舎 広幸 (翻訳), 武舎 るみ (翻訳),
阿部 和也 (翻訳)
なぜハマるの?




人を理解すること
人は社会的な動物である
プロセス   ユーザー行動   心理
プロダクト開発から顧客開発へ



利用シーンからサービスを俯瞰する



仮説を見つけ、その人の心理を探る
UX               UXデザイン




インダストリアルデザイン
その体験を量産・再生産できる仕組みが重要


    安藤昌也「UXの考え方とアプローチ」より
SCHOO   2013.2.21




                            Thank you



                    ありがとうございました

                     DO YOU HAVE ANY QUESTIONS?




                             坂本貴史
                             @bookslope


                                                  wikipedia

More Related Content

PDF
Schoo the user experience of web site
PDF
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
PDF
ShibuyaUX - UX and Analytics
PDF
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
PDF
#WDF18 エクスペリエンスを繋ぐために
PDF
Beyond Mobile IA Thinking at Goodpatch LT
PDF
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
KEY
テックヒルズ
Schoo the user experience of web site
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
ShibuyaUX - UX and Analytics
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
#WDF18 エクスペリエンスを繋ぐために
Beyond Mobile IA Thinking at Goodpatch LT
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
テックヒルズ

What's hot (6)

PDF
Future Sync #03 "Beyond IA Thinking"
PDF
UIデザインの基本
PDF
Devlove2012 itowponde
PDF
UXにもの申す (黒須正明さん)
PDF
Lead the webmasters to future with "IA Thinking" for UX Design
PDF
HCDを用いたユーザ価値の向上
Future Sync #03 "Beyond IA Thinking"
UIデザインの基本
Devlove2012 itowponde
UXにもの申す (黒須正明さん)
Lead the webmasters to future with "IA Thinking" for UX Design
HCDを用いたユーザ価値の向上
Ad

Viewers also liked (20)

PDF
人気アプリのマーケティングの現場から学ぶ - 効果的なPR施策を考えよう
PDF
The Challenges and Opportunities of IFRS
PPTX
Búsqueda avanzada en google
PDF
Indian tax structure
PDF
忙しいビジネスパーソンのための、太らないコンビニ食の選び方 先生:高橋 敦子
PDF
デザイナーのためのXcode入門 先生:関根 元和
PPTX
Como aprendo a vivir
PDF
Indian CA Firms: Gaining Momentum
PPTX
портфоліо викладача та студента
PPTX
Grip digi slideshare hb1 notities
PPTX
Landing change successfully
PDF
National General Election – Our vote to be decisive
PDF
目標達成のための、人から吸収する技術①「答えは相手にある」 先生:永谷 研一
PDF
ABOUT MOOR
PDF
今を生きるために知っておきたい大正デモクラシー入門【新発見!日本の歴史】
PDF
Expectation from the new government
PPTX
Mc
PDF
CAMPFIREに学ぶ!クラウドファンディングのはじめ方:4限目「教えて!プロジェクトオーナーさん」ZEN-LA-ROCK先生:先生・ZEN-LA-ROC...
PPT
Project 2 - Game PPT
PPT
Atención temprana
人気アプリのマーケティングの現場から学ぶ - 効果的なPR施策を考えよう
The Challenges and Opportunities of IFRS
Búsqueda avanzada en google
Indian tax structure
忙しいビジネスパーソンのための、太らないコンビニ食の選び方 先生:高橋 敦子
デザイナーのためのXcode入門 先生:関根 元和
Como aprendo a vivir
Indian CA Firms: Gaining Momentum
портфоліо викладача та студента
Grip digi slideshare hb1 notities
Landing change successfully
National General Election – Our vote to be decisive
目標達成のための、人から吸収する技術①「答えは相手にある」 先生:永谷 研一
ABOUT MOOR
今を生きるために知っておきたい大正デモクラシー入門【新発見!日本の歴史】
Expectation from the new government
Mc
CAMPFIREに学ぶ!クラウドファンディングのはじめ方:4限目「教えて!プロジェクトオーナーさん」ZEN-LA-ROCK先生:先生・ZEN-LA-ROC...
Project 2 - Game PPT
Atención temprana
Ad

Similar to 【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史 (20)

PDF
UX Design とは何か?
PDF
UX approach for real cross media planning
PDF
Schoo講演資料130409
PDF
Schoo講演資料130409
PDF
サイトサーチアナリティクスとは
PDF
UX - 業務システムにも感動を
PPTX
Schoo講演資料130409
PDF
Find Your Ability: IA for a novice Web Creator
PDF
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
PDF
UXDのためのストーリーテリング
PDF
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
PDF
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
PDF
Agile Overview In Ono
PPTX
0から始めるUXデザイン(UXデザインを知る)
PDF
ウェブサービスの企画とデザイン
PPTX
コラボレーティブデザインを実践するエンジニアは何を考えているのか?
PDF
行動経済学+UX勉強会発表資料
PDF
User Centered Agile
PPTX
サービス開発における工程
UX Design とは何か?
UX approach for real cross media planning
Schoo講演資料130409
Schoo講演資料130409
サイトサーチアナリティクスとは
UX - 業務システムにも感動を
Schoo講演資料130409
Find Your Ability: IA for a novice Web Creator
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
UXDのためのストーリーテリング
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
Agile Overview In Ono
0から始めるUXデザイン(UXデザインを知る)
ウェブサービスの企画とデザイン
コラボレーティブデザインを実践するエンジニアは何を考えているのか?
行動経済学+UX勉強会発表資料
User Centered Agile
サービス開発における工程

More from schoowebcampus (20)

PPTX
Compl exxx after
PPTX
Compl exxx before
PDF
ビジネスプラン概要資料 New
PDF
schoo法人利用-ビジネスプランのご案内
PDF
PHP実践 ~外部APIを使って情報を取得する~
PDF
i.school, The University of Tokyo "Methods of concept designing and user surv...
PDF
i.school, The University of Tokyo "Divergence, convergence, and expression of...
PDF
i.school, The University of Tokyo "The purposes and methods of technological ...
PDF
i.school, The University of Tokyo "The purposes and methods of interviews and...
PDF
i.school, The University of Tokyo "Foundation and methodology in creating inn...
PDF
ポートフォリオ公開後のマーケティング法
PDF
授業資料(スクー)
PDF
個人事業主・フリーランスのための確定申告 ~白色申告編~
PDF
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
PDF
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
PDF
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
PDF
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
PDF
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
Compl exxx after
Compl exxx before
ビジネスプラン概要資料 New
schoo法人利用-ビジネスプランのご案内
PHP実践 ~外部APIを使って情報を取得する~
i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "Foundation and methodology in creating inn...
ポートフォリオ公開後のマーケティング法
授業資料(スクー)
個人事業主・フリーランスのための確定申告 ~白色申告編~
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司

Recently uploaded (9)

PDF
【QYResearch】世界製薬業界の市場変革と将来展望における多角的な事業展開の探求
PDF
自動鉱山スキャナー、グローバルトップ11企業のランキングと市場シェア2025~2031年.pdf
PDF
Fellowship Co.,Ltd. Company Overview for Students
PDF
受発注バスターズ説明資料  (2025_08_13~) Saleshub掲載用.pdf
PDF
AI活用の成果が変わる!生成AI時代の速読・読解力トレーニング「AI Reading Lab」
PPTX
株式会社フライク_______採用ピッチ資料_____update20250801
PPTX
Document from Suhani (2).pptx on the following topic
PDF
西都 採用サイト掲載用ピッチ資料 | 安心して働ける環境と成長できるキャリアパス
PPTX
データサイエンス研修提案資料 RIZAPビジネスイノベーション株式会社.pptx
【QYResearch】世界製薬業界の市場変革と将来展望における多角的な事業展開の探求
自動鉱山スキャナー、グローバルトップ11企業のランキングと市場シェア2025~2031年.pdf
Fellowship Co.,Ltd. Company Overview for Students
受発注バスターズ説明資料  (2025_08_13~) Saleshub掲載用.pdf
AI活用の成果が変わる!生成AI時代の速読・読解力トレーニング「AI Reading Lab」
株式会社フライク_______採用ピッチ資料_____update20250801
Document from Suhani (2).pptx on the following topic
西都 採用サイト掲載用ピッチ資料 | 安心して働ける環境と成長できるキャリアパス
データサイエンス研修提案資料 RIZAPビジネスイノベーション株式会社.pptx

【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史