SlideShare a Scribd company logo
1 of 31
Download to read offline
デザインの 要件定義
飯干 真
デザイナー
・EC web アプリ UI デザイン
・POS連携システムの UI デザイン
・webサイトビジュアルデザイン
・プロボノ
(飫肥杉世界展開プロジェクト)
(テゲテゲツーシン)
33歳
都城市出身
Portfolio
1. デザインとは
2. デザインの要件定義とは
3. UXについて
4. Frame work
5. まとめ
デザインって?
ビジュアルだけキレイに作れれば良いのか?
デザインは
「どう見えるかも大事」
だけど
「どう機能するかが大事」
「デザインの要件定義って何をす
る為?」
どういった人たちにどういった
サービスを提供するのかを具現
化する為
「当たり前だけどできていない!」
なぜ?
デザインの上流工程をやってい
ないから。
引用 8 Effective Ways of Measuring UX | conversionXL
http://conversionxl.com/8-effective-ways-of-measuring-ux/
「上流工程って?」
戦略
範囲
構造
骨格
表面
デザインの上流工程をやって得られる
こと、それは
ユーザーのニーズ
「UXって、なに?」
コトのデザイン
予期的
UX
一時的
UX
エピソード的UX 累積的
UX
引用 URL http://site.hcdvalue.org/docs
利用前 利用中 利用後
利用時間全
体
UI ≠ UX
UI / UX
ではなく
「ユーザビリティとは?」
ある製品が、指定された利用者によって、指定さ
れた利用の状況下で、指定された目的を達成する
ために用いられる際の、有効さ、効率及び利用者
の満足度の度合い。
ISO 9241-11
引用 wikipedia https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3
インタビュー
ペルソナ作成 シナリオ作成
ストーリー
ボード作成
プロトタイプ
作成
ウォーク
スルー評価
分析
UX
UXフロー
Frame work
エスノグラフィ
icon www.flaticon.com
エスノグラフィ
行動観察。ユーザーがサービスをどう利用しているのか観
察を行います。
icon www.flaticon.com
インタビュー
インタビュー手法 所要時間 具体例
構造化インタビュー
短
アンケートの様な「はい」「いいえ」出
終わる質問
半構造化インタビュー 中 予め質問の大枠を用意
非構造化インタビュー 長 その場で質問を考える
引用文献 情報デザインの教室 情報デザインフォーラム, 山崎 和彦, 浅野 智 , 上平 崇仁
icon www.flaticon.com
分析
インタビューの発話を元に「本質的欲求」を分析する。
分析の方法として上位下位関係分析、KJ法、KA法がある
icon www.flaticon.com
ペルソナ作成
巷でよく言われるのは、各々が空想で描いたペルソナ。本来
は実在のデータを元に作成する人物像。
icon www.flaticon.com
シナリオ作成
アクティビティシナリオ
ユーザーがサービスやプロダクトと実際にどのように接
するのか、を記述したシナリオ
バリューシナリオ ビジネス提供価値とユーザーの価値を
インタラクションシナリオ インタラクション用語を用いてユーザーの利用フローを
記述したシナリオ
icon www.flaticon.com
ストーリーボード
作成したペルソナのシナリオを4コママンガの様にしたもの。
icon www.flaticon.com
UXフロー
UX
ストーリーボードをもとに簡単にサービスの設計を行う
icon www.flaticon.com
プロトタイプ
サービスのプロトタイプの作成を行います。
webであれば手書きのワイヤーでもOK。
icon www.flaticon.com
ウォークスルー評価
ストーリーボードと照らし合わせながらプロトタイプの評価を
行います。
思考発話法を用いて行ったりします。
icon www.flaticon.com
icon www.flaticon.com
UX
プロトタイプ
作成
ウォーク
スルー評価
ストーリー
ボード作成
UXフロー
ペルソナ作成 シナリオ作成
インタビュー 分析 エスノグラフィ
引用 8 Effective Ways of Measuring UX | conversionXL
http://conversionxl.com/8-effective-ways-of-measuring-ux/
メリット
ステークホルダーのコンセンサスが
取れる。
キャズムが少ないので大きな修正
がない。
デメリット
調査の精度が低いと後の全ての
フローは進まない。
まとめ
全ては「人」が中心
ビジュアルデザインから始めるとデザインに意
図はなくなる
「なぜ?」を繰り返す練習は普段の会話で行え
る
ご静聴ありがとうございました。

More Related Content

What's hot

ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
 
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つけるあなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
 

What's hot (20)

Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
 
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つけるあなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
 
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
 
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
 
UXデザイン・UXリサーチってだいぶ広まったよね?
UXデザイン・UXリサーチってだいぶ広まったよね?UXデザイン・UXリサーチってだいぶ広まったよね?
UXデザイン・UXリサーチってだいぶ広まったよね?
 
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
 
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
 
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
 
アイデア収束からプロトタイピング
アイデア収束からプロトタイピングアイデア収束からプロトタイピング
アイデア収束からプロトタイピング
 
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
 
コミュニケーション設計をおざなりにしない!(コンセント 笹原 舞)
コミュニケーション設計をおざなりにしない!(コンセント 笹原 舞)コミュニケーション設計をおざなりにしない!(コンセント 笹原 舞)
コミュニケーション設計をおざなりにしない!(コンセント 笹原 舞)
 

Viewers also liked

Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
 

Viewers also liked (20)

WEB制作・運営に関わる人が知っておくべき マーケティングのポイントと事例
WEB制作・運営に関わる人が知っておくべき マーケティングのポイントと事例WEB制作・運営に関わる人が知っておくべき マーケティングのポイントと事例
WEB制作・運営に関わる人が知っておくべき マーケティングのポイントと事例
 
Updated_CV_Javed.doc
Updated_CV_Javed.docUpdated_CV_Javed.doc
Updated_CV_Javed.doc
 
読書体験を考える ――サービスとしての読書体験
読書体験を考える ――サービスとしての読書体験読書体験を考える ――サービスとしての読書体験
読書体験を考える ――サービスとしての読書体験
 
モデルベース要件定義 at BPStudy
モデルベース要件定義 at BPStudyモデルベース要件定義 at BPStudy
モデルベース要件定義 at BPStudy
 
コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
 
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
 
最近のブラウザ状況
最近のブラウザ状況最近のブラウザ状況
最近のブラウザ状況
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
 
Relationship driven requirement analysis
Relationship driven requirement analysisRelationship driven requirement analysis
Relationship driven requirement analysis
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
 
Think User : UXデザインにおけるユーザー設計とは?
Think User : UXデザインにおけるユーザー設計とは?Think User : UXデザインにおけるユーザー設計とは?
Think User : UXデザインにおけるユーザー設計とは?
 
エンジニアが知っておくべきSSL/TLSの知識(仮)
エンジニアが知っておくべきSSL/TLSの知識(仮)エンジニアが知っておくべきSSL/TLSの知識(仮)
エンジニアが知っておくべきSSL/TLSの知識(仮)
 
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解するWordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
 
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
 
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
 
サーバ運用の現場でひたすら監視し続けるエンジニアの手の内のすべて
サーバ運用の現場でひたすら監視し続けるエンジニアの手の内のすべてサーバ運用の現場でひたすら監視し続けるエンジニアの手の内のすべて
サーバ運用の現場でひたすら監視し続けるエンジニアの手の内のすべて
 

Similar to デザインの要件定義

第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
Hub DotnetDeveloper
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
 

Similar to デザインの要件定義 (20)

第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのか
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!
 
UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
 
UX approach for real cross media planning
UX approach for real cross media planningUX approach for real cross media planning
UX approach for real cross media planning
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザイン
 
事業とUXデザイン
事業とUXデザイン事業とUXデザイン
事業とUXデザイン
 
App souken menu(ui&ux consulting)
App souken menu(ui&ux consulting)App souken menu(ui&ux consulting)
App souken menu(ui&ux consulting)
 
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
 
CCC Design Session
CCC Design SessionCCC Design Session
CCC Design Session
 
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
 
UI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しようUI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しよう
 
WebにおけるUI設計 実践編
WebにおけるUI設計 実践編WebにおけるUI設計 実践編
WebにおけるUI設計 実践編
 
0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)
 
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
 
UIデザインのプロセス
UIデザインのプロセスUIデザインのプロセス
UIデザインのプロセス
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409
 
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプIndigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
 
UXデザインとは 現状の私見
UXデザインとは 現状の私見UXデザインとは 現状の私見
UXデザインとは 現状の私見
 
Schoo講演資料130409
Schoo講演資料130409Schoo講演資料130409
Schoo講演資料130409
 

デザインの要件定義