UXと成果物を繋げる糸口

Yasuhisa  Hasegawa
Yasuhisa HasegawaWeb Designer at Freelance
UXと成果物を繋げる糸口
長谷川恭久
2010年11月20日
photo is taken by Tony
User Experience
ユーザーのデジタル機器/システムに対する見方に影響を与えるよう
なアーキテクチャやインタラクションモデルの生成に関する手法。
ユーザーがある製品やシステムを使ったときに得られる経験や満足
など全体を指す。
Wikipedia
UXと成果物を繋げる糸口
UXと成果物を繋げる糸口
UXと成果物を繋げる糸口
UXと成果物を繋げる糸口
“On s’engage
et puis on voit.”
Napoléon Bonaparte
maturity
model
participant
observation
strategy
brief
user panel
cultural
probe
link
analysis
portfolio
analysis
tinkering
content
analysis
expert
review
Study people and
their activities in
a natural settingClarify current
issues and opportu-
nities; reach
a common ground
“You
can
observe
a
lot
by
just
w
atching.”
Yogi
B
erra
Information architecture
Interaction design
Service design
有益
Valuable
有用
Usable
望ましい
Desirable
アクセスしやすい
Accessible
信頼
Credible
発見しやすい
Findable
便利
Useful
photo is taken by Or Hiltch
UXとは概念・思想?
概念的にきこえるので理解されにくい
定説、定番のようなノウハウがない
どこから初めて良いか分からない
UXと成果物を繋げる糸口
ユーザビリティ
アクセシビリティ
情報アーキテクチャ (IA)
情報デザイン
インタラクションデザイン
コンテンツ開発
ビジュアルデザイン
photo is taken by joost j. bakker
UXとはデザインすべて?
明確な役職として捉え難い
価値観・解釈の仕方が人によって異なる
たくさんあり過ぎて習得出来ないイメージ
UXと成果物を繋げる糸口
想定される利用者像
年齢25∼50
5
4
3
2
1
知識 興味・プライオリティ
パ
ソ
コ
ン
イ
ン
タ
ー
ネ
ッ
ト
携
帯
電
話
選
手
育
成
他
チ
ー
ム
と
の
情
報
交
換
自
身
の
ス
ケ
ジ
ュ
ー
ル
管
理
チ
ー
ム
の
ス
ケ
ジ
ュ
ー
ル
管
理
競
技
に
関
す
る
最
新
情
報
パ
ソ
コ
ン
の
使
い
方
W
eb
サ
ー
ビ
ス
の
利
用
カ
リ
キ
ュ
ラ
ム
作
成
グ
ッ
ズ
や
用
具
の
購
入
W
eb
サ
ー
ビ
ス
選手育成以外に
  時間をとられたくない
小中高陸上部の監督
社会人クラブのマネージャ
選手のカリキュラムやスケジュールを立てるのは時には
時間が必要とする。選手と密なコミュニケーションをと
らないと分からないことも少なくない。パソコンを使っ
た作業もするが、主に紙に手書きという場合もある。ス
ケジュール帳や紙に書いた方が手軽だ。
もちろん、私の管理方法が正しいとは思わないし、もっ
と良い方法があると思う。けど、どれを使ったら良いか
分からないし、いろいろ覚えるのは面倒だ。何よりも時
間がないからじっくり椅子に座って覚える余裕もさほど
ない。
選手のマネージメントだけで一日の大半を費やせたら良
いのだが、私には日々やらなければならない仕事も存在
するし家族もいる。
上図: 想定利用者の興味とスキルセット。ピンク色のラインが平均値
パソコンの利用
•競技関連だけはなく日々の仕事で利用している
•パソコン歴は長い人が多い
•職場のパソコンは買い替えがされていない古いモデ
ルの可能性も
•Word の利用、Excel で簡単な表計算は出来る
•パソコンは職場でよく利用するが、家ではほとんど
使わない
携帯電話の利用
•携帯電話での文字入力を容易に行う人も多い
•メールを中心としたコミュニケーションとして利用
•長い文章やフォームに入力には得意ではない
•能動的ではなく、受動的に携帯メディアを消費
•人によって数年前のモデルを利用している
インターネットの利用
•メール中心(使用ソフトは Outlook 又は Outlook
Express)
•利用歴は長いが用途はニュースをみるのが中心
•掲示板がネット上のコミュニケーションツール
photo is taken by Richard Moross
UXと成果物を繋げる糸口
ワイヤーフレーム
スタイルガイド
デザインパターン
ストーリーボード
シナリオ
ペルソナ
コンセプトマップ
サイトマップ
ユーザー調査
アクセス解析
UXに携わる人は
ワイヤーフレーム スタイルガイド デザインパターン ストーリーボード
シナリオ ペルソナ コンセプトマップ サイトマップ ユーザー調査
アクセス解析
が出来る人?
YES NO
photo is taken by Tony
UXと成果物を繋げる糸口
長谷川恭久
2010年11月20日
Delivery / Product
成果物
Deliverable
要素成果物
Deliverable
要素成果物
最終的なデザインではない
デザインプロセスにおける副産物
フェイズごとに重要度が変動する
コンセプト
プラニング
設計
仕様
デザイン
開発
テスト
調整
重要度
絶対に要素成果物が必要なのか?
副産物であるがゆえにユーザーが見ることはない
クライアントも見る必要がないものもある
要素成果物が必要になる理由
私たちは言葉を共有をしていない
Web デザイン インタラクション IA 
使いやすい 分かりやすい かっこいい
ビジョン ゴール etc
UXと成果物を繋げる糸口
Delivery / Product
成果物
Deliverable
要素成果物
ワイヤーフレーム ペルソナ
シナリオストーリーボード
コンセプトマップガントチャート
Delivery / Product
成果物
Deliverable
要素成果物
>
UXに携わる人は
ワイヤーフレーム スタイルガイド デザインパターン ストーリーボード
シナリオ ペルソナ コンセプトマップ サイトマップ ユーザー調査
アクセス解析
が出来る人?
YES NO
UXな人のミッション
サイトのゴール
同士・理解者をふやす
測定項目を築く
Goal
サイトのゴール
ミッションでありビジョン
デザイン・開発の基準
現状の把握
photo is taken by Fernando Mafra
photo is taken by Banalities
photo is taken by Banalities
たくさんの人の要望を聞き入れる
サイトの文脈にあわない体験
独自性がない真似事
出来ること以上のゴール
Bad
危険なサイン
核となる価値を定義する
競合との差別化
プライオリティ付け
Good
良いゴール設定
Define
ゴールの定義の仕方
photo is taken by Wonderlane
速くて見た目もよく、楽しく使えること
カレンダーからものすごく簡単に情報を取得できる
四角形が並んでいるだけ以上にする
共有が簡単で自分の生活を一望できる
Google Calendar
アプリケーションのゴール
from Carl Sjogreen, product manager
Define
ゴールの定義の仕方
photo is taken by Wonderlane
当たり前の言葉は使わない
使いやすい、賢い、明確
上っ面なメッセージを盛り込まない
お客様のために・・・
詳細で明確に表現する
良い体験を提供する
Share
同士・理解者をふやす
デザインプロセスへの理解
言葉・知識の共有
環境作り・文化の浸透
photo is taken by Tambako the Jaguar
UX Culture
UXの文化を浸透させるコツ
問
技
学
illustration by Tommaso Meli
Ask
なぜそのサイトが優れているのか問いかける
問
あなたにとっての UX を知る機会。
Ajax や IA のような専門的な部分以外
でなにか語れるか?
Skill
人の役割・役職を見ない
技
その人のスキルを見極める
仕事の分野は多岐で重なり合っている
機会を与える
Workshop
ワークショップ
利用者が抱えている問題
視点の転換
見えないプロセス
学
photo is taken by marya
説明ではなく体感
制作以外の方にも参加してもらう
デザインは難しい!
Metrics
測定項目を築く 誰でも分かる基準をもつ
デザイン x データ
改善の指標
photo is taken by hanspoldoja
PV?
photo is taken by Fernando Mafra
訪問頻度
ページ数
滞在時間
直アクセス
キーワード
共有
UXと成果物を繋げる糸口
UXと成果物を繋げる糸口
5ページ以上みた利用者 4.03%
5分以上滞在した利用者 8.22%
5回以上アクセスした利用者 20.76%
直接アクセスした利用者 22.63%
名前やサイト名でアクセスした利用者 4.72%
シェア数 342+
9月
5ページ以上みた利用者 4.28%
5分以上滞在した利用者 16.37%
5回以上アクセスした利用者 20.15%
直接アクセスした利用者 23.59%
名前やサイト名でアクセスした利用者 4.94%
シェア数 729+
10月
74.8%
より効果的な口コミ
読者との関係強化
コンテンツの価値の約束と提供
一期一会からの離脱
次のページへの誘導
アクセス解析
CDAʼs CUT (content Usefulness Toolkit) | identifies content for development or culling - CDA Ltd © 2008
アンケート
テスト
検証 ユーザー調査
photo is taken by Tony
ゴールを見極める
全員ができること、考えること
体感を通して理解者を増やす
指標を通して価値を見出す
photo is taken by Tony
既にわたしたちがいつもしていること
具体化するのは私たち
常に成果物にフォーカス
テクニックや技術ではなくミッション
The State of the Internet
UXと成果物を繋げる糸口
UXと成果物を繋げる糸口
http://www.yasuhisa.com
inflame.mp3@gmail.com
twitter: yhassy
skype: yhassy
mixi: 7251
Facebook Group: http://on.fb.me/aYRwqC
UXと成果物を繋げる糸口
1 of 56

Recommended

ポストWebサイト時代のコンテンツ戦略 by
ポストWebサイト時代のコンテンツ戦略ポストWebサイト時代のコンテンツ戦略
ポストWebサイト時代のコンテンツ戦略Yasuhisa Hasegawa
1.9K views52 slides
Transformative Web Design ~変化にしなやかに対応するデザイン力~ by
Transformative Web Design ~変化にしなやかに対応するデザイン力~Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~Yasuhisa Hasegawa
3.2K views69 slides
MT-TOKYO11 LT by
MT-TOKYO11 LTMT-TOKYO11 LT
MT-TOKYO11 LTbitpart
1.1K views25 slides
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方 by
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方bitpart
5K views79 slides
Web系の人に求められていること by
Web系の人に求められていることWeb系の人に求められていること
Web系の人に求められていることYasuhisa Hasegawa
5.5K views95 slides
今だからデザインできるMTの未来 by
今だからデザインできるMTの未来今だからデザインできるMTの未来
今だからデザインできるMTの未来Yasuhisa Hasegawa
6.2K views36 slides

More Related Content

Similar to UXと成果物を繋げる糸口

LiBRA 09.2021 / 総集編 1/2 by
LiBRA 09.2021 / 総集編 1/2LiBRA 09.2021 / 総集編 1/2
LiBRA 09.2021 / 総集編 1/2Masanori Saito
444 views162 slides
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス by
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンスひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンスchachaki chachaki
728 views39 slides
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」 by
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」Kazuki Yamashita
494.2K views47 slides
はじめてのUXとUIの話 by
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話Kazuki Yamashita
66.1K views34 slides
UX Design とは何か? by
UX Design とは何か?UX Design とは何か?
UX Design とは何か?Hiroshi Obayashi
16.5K views44 slides
LiBRA_210201/New_emploee by
LiBRA_210201/New_emploeeLiBRA_210201/New_emploee
LiBRA_210201/New_emploeeMasanori Saito
14.5K views296 slides

Similar to UXと成果物を繋げる糸口(20)

LiBRA 09.2021 / 総集編 1/2 by Masanori Saito
LiBRA 09.2021 / 総集編 1/2LiBRA 09.2021 / 総集編 1/2
LiBRA 09.2021 / 総集編 1/2
Masanori Saito444 views
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス by chachaki chachaki
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンスひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
chachaki chachaki728 views
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」 by Kazuki Yamashita
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita494.2K views
LiBRA_210201/New_emploee by Masanori Saito
LiBRA_210201/New_emploeeLiBRA_210201/New_emploee
LiBRA_210201/New_emploee
Masanori Saito14.5K views
人間の成長とユーザエクスペリエンス by Masaya Ando
人間の成長とユーザエクスペリエンス人間の成長とユーザエクスペリエンス
人間の成長とユーザエクスペリエンス
Masaya Ando2.4K views
第6回.NET中心会議パネルディスカッション 0923 by Hub DotnetDeveloper
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
デザイン基礎 UXとUI by Saki TANAAMI
デザイン基礎 UXとUIデザイン基礎 UXとUI
デザイン基礎 UXとUI
Saki TANAAMI5.5K views
UXD教育の実態と課題 by Masaya Ando
UXD教育の実態と課題UXD教育の実態と課題
UXD教育の実態と課題
Masaya Ando3.1K views
No innovative ideas can be created from persona and customer journey maps by Toru Mizumoto
No innovative ideas can be created from persona and customer journey mapsNo innovative ideas can be created from persona and customer journey maps
No innovative ideas can be created from persona and customer journey maps
Toru Mizumoto109 views
Devlove2012 itowponde by 英明 伊藤
Devlove2012 itowpondeDevlove2012 itowponde
Devlove2012 itowponde
英明 伊藤2.9K views
UX0,1,100 by UX Tokyo
UX0,1,100UX0,1,100
UX0,1,100
UX Tokyo21.1K views
HCI分野の紹介と最新研究 by ota42y
HCI分野の紹介と最新研究HCI分野の紹介と最新研究
HCI分野の紹介と最新研究
ota42y6.1K views
体験をデザインするとは何か by Sunami Hokuto
体験をデザインするとは何か体験をデザインするとは何か
体験をデザインするとは何か
Sunami Hokuto3K views
Why prototype ? / なぜプロトタイプが必要か? by Shunsuke Kawai
Why prototype ? / なぜプロトタイプが必要か?Why prototype ? / なぜプロトタイプが必要か?
Why prototype ? / なぜプロトタイプが必要か?
Shunsuke Kawai3.4K views
UXデザイン×ヒューリスティック評価 by Naoyuki Matsumoto
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
Naoyuki Matsumoto1.3K views

More from Yasuhisa Hasegawa

作って終わりから卒業しよう - デザインシステム入門編 by
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編Yasuhisa Hasegawa
11.2K views60 slides
SVGをつかったプロトタイプ制作 by
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作Yasuhisa Hasegawa
5.9K views19 slides
あたかもプロのようにプロトタイプを活用する方法 by
あたかもプロのようにプロトタイプを活用する方法あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法Yasuhisa Hasegawa
11.5K views76 slides
データと上手に付き合ってデザインする方法 by
データと上手に付き合ってデザインする方法データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法Yasuhisa Hasegawa
13.6K views57 slides
再入門ペーパープロトタイピング by
再入門ペーパープロトタイピング再入門ペーパープロトタイピング
再入門ペーパープロトタイピングYasuhisa Hasegawa
6.5K views53 slides
課題を導き出す魔法のシートの作り方 by
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方Yasuhisa Hasegawa
12.2K views45 slides

More from Yasuhisa Hasegawa(20)

作って終わりから卒業しよう - デザインシステム入門編 by Yasuhisa Hasegawa
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
Yasuhisa Hasegawa11.2K views
SVGをつかったプロトタイプ制作 by Yasuhisa Hasegawa
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作
Yasuhisa Hasegawa5.9K views
あたかもプロのようにプロトタイプを活用する方法 by Yasuhisa Hasegawa
あたかもプロのようにプロトタイプを活用する方法あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
Yasuhisa Hasegawa11.5K views
データと上手に付き合ってデザインする方法 by Yasuhisa Hasegawa
データと上手に付き合ってデザインする方法データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法
Yasuhisa Hasegawa13.6K views
再入門ペーパープロトタイピング by Yasuhisa Hasegawa
再入門ペーパープロトタイピング再入門ペーパープロトタイピング
再入門ペーパープロトタイピング
Yasuhisa Hasegawa6.5K views
課題を導き出す魔法のシートの作り方 by Yasuhisa Hasegawa
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方
Yasuhisa Hasegawa12.2K views
Webのスーパーヒーローになる方法 by Yasuhisa Hasegawa
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法
Yasuhisa Hasegawa4.1K views
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス by Yasuhisa Hasegawa
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
Yasuhisa Hasegawa10.1K views
デザインから取り組むWebアクセシビリティ by Yasuhisa Hasegawa
デザインから取り組むWebアクセシビリティ デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ
Yasuhisa Hasegawa5.1K views
好みや多数決で決めない、デザインとの正しい付き合い方 by Yasuhisa Hasegawa
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa19K views
Webプロフェッショナルだからできるコンテンツの検査 by Yasuhisa Hasegawa
Webプロフェッショナルだからできるコンテンツの検査Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査
Yasuhisa Hasegawa7.1K views
センスやテイストだけで決めないデザインの会話のためにすること by Yasuhisa Hasegawa
センスやテイストだけで決めないデザインの会話のためにすることセンスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすること
Yasuhisa Hasegawa15.2K views
マルチデバイスを見据えたコンテンツ設計 by Yasuhisa Hasegawa
マルチデバイスを見据えたコンテンツ設計マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
Yasuhisa Hasegawa2.9K views
コンテンツとCMSの上手な付き合い方 by Yasuhisa Hasegawa
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方
Yasuhisa Hasegawa10.7K views
スマホサイトが嫌われる理由と改善方法 by Yasuhisa Hasegawa
スマホサイトが嫌われる理由と改善方法スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法
Yasuhisa Hasegawa6.6K views
Webサイトの核をデザインするための最初の一歩 by Yasuhisa Hasegawa
Webサイトの核をデザインするための最初の一歩Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
Yasuhisa Hasegawa10K views
未来へ繋ぐWeb系デザイン思考 by Yasuhisa Hasegawa
未来へ繋ぐWeb系デザイン思考未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
Yasuhisa Hasegawa5.2K views
Before UX: UXを導入せずに済む方法 by Yasuhisa Hasegawa
Before UX: UXを導入せずに済む方法Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法
Yasuhisa Hasegawa10.1K views
ゲームから学ぶデザイン思考術 by Yasuhisa Hasegawa
ゲームから学ぶデザイン思考術ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術
Yasuhisa Hasegawa21.3K views

UXと成果物を繋げる糸口