Contenu connexe
Similaire à UI設計の土台になる考え方-インテリジェントネット社内勉強会 (20)
UI設計の土台になる考え方-インテリジェントネット社内勉強会
- 2. ©2014 Intelligentnet, Inc. All rights reserved.
今日のお話の前提1/2
1. これを聞いたからすぐに超素敵UI設計ができるよ
うになるわけじゃありません。
2. でも聞かないよりは聞いたほうが良い設計はでき
ると思います
3. 少なくともUI設計のタイミングで「どういう判断
基準で考えれば良いか」はわかるようになると思
います
- 3. ©2014 Intelligentnet, Inc. All rights reserved.
今日のお話の前提2/2
1. 便宜上なんとなく「UI設計」としています。「UI
設計」には本来ビジュアルデザインも入ってきま
すが、今日はその手前の「画面構成まで」です。
2. だから「UI設計(の基礎)」=「画面構成」とい
うことで聞いてください。
3. メモは取らなくて大丈夫です。話すことのほとん
どはスライドにしてあります。
4. そのため、物凄いスピードでスライドが進みます。
(たぶん1枚平均数秒です)
- 4. ©2014 Intelligentnet, Inc. All rights reserved.
もくじ
1. UI設計はです
2. 「UI設計」の主な範囲と
「設計する前の大事なこと」
3. 「UI設計」のいろんな事例
4. UI設計の手法と実践(パターン)
- 6. 01.UI設計はです
©2014 Intelligentnet, Inc. All rights reserved.
(;;;;:::::)
(;;;;;;;;:::::::::)
(;;;;;(;;;;;;:::::);;:::)
(;;;(;;;;;(;;;;;:::);;:::);::)
ヾ|i l i i l;|ソ
|i l i i l |
|i ( ゚Д゚) < それは気になる…
|i (ノl !,|
人从从ネ
- 23. 01.UI設計はです
「全部目立たせて」
( ´_ゝ`)そうですか
©2014 Intelligentnet, Inc. All rights reserved.
「だって全部大事だから」
「ここ事業部の担当者がうるさいので」
「うちはサービスがいっぱいあるから」
- 24. 01.UI設計はです
「全部目立たせて」
( ´_ゝ`)そうですか
©2014 Intelligentnet, Inc. All rights reserved.
「だって全部大事だから」
「ここ事業部の担当者がうるさいので」
「うちはサービスがいっぱいあるから」
- 25. 01.UI設計はです
「全部目立たせて」
©2014 Intelligentnet, Inc. All rights reserved.
「だって全部大事だから」
「ここ事業部の担当者がうるさいので」
「うちはサービスがいっぱいあるから」
でも
無理なものは無理。
「うちはサービスも顧客も
たくさんで複雑なんだよね」
(Web屋さんにはわからんだろうけどね)
そもそもこういう話は
だいたいどこでも同じ
みんな複雑。
- 32. 01.UI設計はです
©2014 Intelligentnet, Inc. All rights reserved.
•織田裕二(BAC CORPORATION所属)
•木村拓哉(ジャニーズ事務所所属)
•オダギリジョー(鈍牛倶楽部所属)
•堺雅人(田辺エージェンシー所属)
•佐藤浩市(テアトル・ド・ポッシュ所属)
•長瀬智也(ジャニーズ事務所所属)
•二宮和也(ジャニーズ事務所所属)
•妻夫木聡(ホリプロ所属)
•向井理(ホリエージェンシー所属)
•草彅剛(ジャニーズ事務所所属)
•香取慎吾(ジャニーズ事務所所属)
•唐沢寿明(奥さんも研音所属)
結論:ジャニーズ事務所はすごい
- 33. 01.UI設計はです
•二宮和也(ジャニーズ事務所所属)
•妻夫木聡(ホリプロ所属)
•向井理(ホリエージェンシー所属)
•草彅剛(ジャニーズ事務所所属)
•香取慎吾(ジャニーズ事務所所属)
•唐沢寿明(奥さんも研音所属)
©2014 Intelligentnet, Inc. All rights reserved.
•織田裕二(BAC CORPORATION所属)
•木村拓哉(ジャニーズ事務所所属)
•オダギリジョー(鈍牛倶楽部所属)
•堺雅人(田辺エージェンシー所属)
•佐藤浩市(テアトル・ド・ポッシュ所属)
•長瀬智也(ジャニーズ事務所所属)
っていうのは冗談で。
こうなる:
物語の軸はだれ??(´・ω・`)
- 36. 01.UI設計はです
©2014 Intelligentnet, Inc. All rights reserved.
織田裕二と妻夫木聡がカフェで会話
↓
そこに堺雅人が合流
↓
草彅剛演じるウェイターが注文取りに
↓
遠くの席に謎めいたオダギリジョー
↓
窓の外を香取慎吾が通り過ぎる
実は、
ここからここまで、
物語に一切関係なし。
- 37. 01.UI設計はです
工エエェェ(´д`)ェェエエ工
©2014 Intelligentnet, Inc. All rights reserved.
織田裕二と妻夫木聡がカフェで会話
↓
そこに堺雅人が合流
↓
草彅剛演じるウェイターが注文取りに
↓
遠くの席にオダギリジョー
↓
窓の外を香取慎吾が通り過ぎる
実は、
ここからここまで、
物語に一切関係なし。
なんと出演1シーンのみ。
- 51. ©2014 Intelligentnet, Inc. All rights reserved.
02.「UI設計」の主な範囲と
「設計する前の大事なこと」
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
| 覚えてね!!! |
|________|
∧∧ ||
( ゚д゚)||
/ づΦ
- 71. 02.「UI設計」の主な範囲と
「設計する前の大事なこと」
各部屋の設計
©2014 Intelligentnet, Inc. All rights reserved.
家ってこうでしょ(知らんけど)
使う人
どんな人が住みますか?
家族構成は?
生活スタイルは?
家(住宅)
の設計
設計図
どんな全体構造にしますか?
各部屋はどんな配置にしますか?
どんな部屋にしますか?
どんな配置にしますか?
どんなインテリアを置きますか?
- 72. 02.「UI設計」の主な範囲と
「設計する前の大事なこと」
各部屋の設計
Q.「この部屋、ドアってどっちにつければいい?」
©2014 Intelligentnet, Inc. All rights reserved.
家ってこうでしょ(知らんけど)
使う人
どんな人が住みますか?
家族構成は?
生活スタイルは?
家(住宅)
の設計
設計図
どんな全体構造にしますか?
各部屋はどんな配置にしますか?
どんな部屋にしますか?
どんな配置にしますか?
どんなインテリアを置きますか?
- 73. 02.「UI設計」の主な範囲と
「設計する前の大事なこと」
各部屋の設計
Q.「この部屋、ドアってどっちにつければいい?」
©2014 Intelligentnet, Inc. All rights reserved.
家ってこうでしょ(知らんけど)
使う人
どんな人が住みますか?
家族構成は?
生活スタイルは?
家(住宅)
の設計
設計図
どんな全体構造にしますか?
各部屋はどんな配置にしますか?
どんな部屋にしますか?
どんな配置にしますか?
どんなインテリアを置きますか?
A.「廊下がある方に決まってんだろうがああああ
ああああああああああああ(;゚Д゚)」
- 74. 02.「UI設計」の主な範囲と
「設計する前の大事なこと」
Webサイトだって同じ。(知ら・・・知ってるよ!)
各部屋の設計
©2014 Intelligentnet, Inc. All rights reserved.
どんな人が住みますか?
家族構成は?
生活スタイルは?
設計図
どんな全体構造にしますか?
各部屋はどんな配置にしますか?
使う人
どんな部屋にしますか?
どんな配置にしますか?
どんなインテリアを置きますか?
使う人
どんな人が使いますか?
どんな使い方をしますか?
どんな目的を持った人ですか?
家(住宅)
の設計
Webサイト
の設計
- 75. 02.「UI設計」の主な範囲と
「設計する前の大事なこと」
Webサイトだって同じ。(知ら・・・知ってるよ!)
各部屋の設計
©2014 Intelligentnet, Inc. All rights reserved.
どんな人が住みますか?
家族構成は?
生活スタイルは?
設計図
どんな全体構造にしますか?
各部屋はどんな配置にしますか?
使う人
どんな部屋にしますか?
どんな配置にしますか?
どんなインテリアを置きますか?
使う人
どんな人が使いますか?
どんな使い方をしますか?
どんな目的を持った人ですか?
家(住宅)
の設計
Webサイト
の設計
サイト構造図
どんな全体構造にしますか?
各部屋はどんな配置にしますか?
- 76. 02.「UI設計」の主な範囲と
「設計する前の大事なこと」
Webサイトだって同じ。(知ら・・・知ってるよ!)
各部屋の設計
各部屋の設計
©2014 Intelligentnet, Inc. All rights reserved.
どんな人が住みますか?
家族構成は?
生活スタイルは?
設計図
どんな全体構造にしますか?
各部屋はどんな配置にしますか?
使う人
どんな部屋にしますか?
どんな配置にしますか?
どんなインテリアを置きますか?
どんな人が使いますか?
どんな使い方をしますか?
どんな目的を持った人ですか?
サイト構造図
どんな全体構造にしますか?
各部屋はどんな配置にしますか?
使う人
どんな部屋にしますか?
どんな配置にしますか?
どんなデザインを置きますか?
家(住宅)
の設計
Webサイト
の設計
- 98. 03.「UI設計」のいろんな事例
Google
©2014 Intelligentnet, Inc. All rights reserved.
Google大先生の場合
• リンク少ない
• 機能少ない
• コンテンツ・・・ない
• 広告・・・どこ?(;゚Д゚)
潔いにもほどがある
- 99. 03.「UI設計」のいろんな事例
Google
©2014 Intelligentnet, Inc. All rights reserved.
Google大先生の場合
• リンク少ない
• 機能少ない
• コンテンツ・・・ない
• 広告・・・どこ?(;゚Д゚)
潔いにもほどがある
Googleはインフラモデルなのです。
- 109. 03.「UI設計」のいろんな事例
SCE 任天堂セガ
©2014 Intelligentnet, Inc. All rights reserved.
何が違うかというと・・・
みんな知ってる!
わくわく!を提供
もはや家庭用ゲーム
じゃないぜ
知らない人多い
(”SCE”で検索する人は企業について知り
たい。ゲームなら”PS3”で検索する)
- 110. 03.「UI設計」のいろんな事例
SCE 任天堂セガ
もはや家庭用ゲーム
じゃないぜ
©2014 Intelligentnet, Inc. All rights reserved.
何が違うかというと・・・
みんな知ってる!
わくわく!を提供
知らない人多い
(”SCE”で検索する人は企業について知り
たい。ゲームなら”PS3”で検索する)
「事業ドメイン」と「認知度」の違い
- 130. 04.UI設計の手法と実践(パターン)
厳密には、手書き=ペーパープロトタイプ
• 手書きワイヤー= ペーパープロトタイプ×
©2014 Intelligentnet, Inc. All rights reserved.
手法その2:ペーパープロトタイプ
なわけではないです。
• 手書きでつくる
• 素早くつくれる
• 手軽に修正できる
• テストするための紙のワイヤー
• その場でディスカッション
= ペーパープロトタイプ○
• できるディレクターがつくる紙のワイヤー
= ペーパープロトタイプ(キリッ
- 131. 04.UI設計の手法と実践(パターン)
©2014 Intelligentnet, Inc. All rights reserved.
手法その3:ユーザエクスペリエンスフロー
(UXフロー)
UXフローの仮説立案(手法)について
ユーザーが迷わない構造を実現するために、サイト
内外でのユーザー行動の仮説を立てます
ユーザーがどこで何を感じ、何を求めるのかを定義
します
それぞれのタスク、状況で発生するニーズ、求めら
れるコンテンツを導き出します。
UXフローによるWebサイト上の理想的なサービス設
計に対して、現状のWebサイトがどのような状態に
あるのかを検証し、改善案を導き出します
マンション購入を検討している
(知識あり&なし)
サイトにたどり着く
ブランドについて調べる
マンション購入ノウハウを調べる
商品・サービスについて調べる
実際に商品を見る・体験する
問い合わせる
購入
検討
繰り返す
事例や感想について調べる
UXフローはお客様(ユーザー)と企業の繋がりをスケッチした
関係図です。お客様に対して、いかに自社最高のサービスを提供
し、ゴールまで導くかを描いた満足体験のストーリーです。
- 132. 04.UI設計の手法と実践(パターン)
手法その3:ユーザエクスペリエンスフロー
(UXフロー)
UXフローの仮説立案(手法)について
ユーザーが迷わない構造を実現するために、サイト
内外でのユーザー行動の仮説を立てます
ユーザーがどこで何を感じ、何を求めるのかを定義
します
ユーザーとどこで出会い、どこで興味を持ち、どこでアクションを
それぞれのタスク、状況で発生するニーズ、求めら
れるコンテンツを導き出します。
起こしてもらうのかをフロー図にしたもの。
自社最高の満足体験をフローにしたもの。
本プロジェクトでは、UXフローによるWebサイト上
の理想的なサービス設計に対して、現状のWebサイ
トがどのような状態にあるのかを検証し、改善案を
導き出します
©2014 Intelligentnet, Inc. All rights reserved.
マンション購入を検討している
(知識あり&なし)
サイトにたどり着く
ブリリアについて調べる
マンション購入ノウハウを調べる
商品・サービスについて調べる
実際に商品を見る・体験する
問い合わせる
購入
検討
繰り返す
事例や感想について調べる
UXフローはお客様(ユーザー)と企業の繋がりをスケッチした
関係図です。お客様に対して、いかに自社最高のサービスを提供
し、ゴールまで導くかを描いた満足体験のストーリーです。
- 139. 04.UI設計の手法と実践(パターン)
©2014 Intelligentnet, Inc. All rights reserved.
UI設計の手法と実践のまとめ
•機能ナビゲーション
•階層型ナビゲーション
•パンくずナビゲーション
•ダイナミックナビゲーション
•ダイレクトナビゲーション
•ステップナビゲーション
•ワイヤーフレーム
•ペーパープロトタイプ
•UXフロー
•カスタマージャーニーマップ
- 140. 04.UI設計の手法と実践(パターン)
©2014 Intelligentnet, Inc. All rights reserved.
UI設計の手法と実践のまとめ
•機能ナビゲーション
•階層型ナビゲーション
•パンくずナビゲーション
•ダイナミックナビゲーション
•ダイレクトナビゲーション
•ステップナビゲーション
•ワイヤーフレーム
•ペーパープロトタイプ
•UXフロー
•カスタマージャーニーマップ
手法パターン
- 141. 04.UI設計の手法と実践(パターン)
•機能ナビゲーション
•階層型ナビゲーション
•パンくずナビゲーション
•ダイナミックナビゲーション
•ダイレクトナビゲーション
•ステップナビゲーション
手法パターン
©2014 Intelligentnet, Inc. All rights reserved.
UI設計の手法と実践のまとめ
•ワイヤーフレーム
•ペーパープロトタイプ
•UXフロー
•カスタマージャーニーマップ
・・・これだと当てずっぽうになっちゃうので。
- 143. ©2014 Intelligentnet, Inc. All rights reserved.
まとめると何が言いたいかというと
1. UI設計は天才の所業ではないのです
2. 02.「UI設計」の主な範囲と「設計する前の大事なこと」
この2つで話してきたこと
- 144. 2. 02.「UI設計」の主な範囲と「設計する前の大事なこと」
©2014 Intelligentnet, Inc. All rights reserved.
まとめると何が言いたいかというと
1. UI設計は天才の所業ではないのです
この2つで話してきたこと
ビジネス側をみてぇー、
ユーザーの行動をみてぇ、
前後の関係性をみてぇー、
優先順位を考えてぇー、
- 145. これは「ロジック」ですね。
©2014 Intelligentnet, Inc. All rights reserved.
まとめると何が言いたいかというと
1. UI設計は天才の所業ではないのです
2. 「UI設計」の主な範囲と「それ以外」
この2つで話してきたこと
ビジネス側をみてぇー、
ユーザーの行動をみてぇ、
前後の関係性をみてぇー、
優先順位を考えてぇー、
- 148. ©2014 Intelligentnet, Inc. All rights reserved.
だから、最後に言いたいこと。
•「んん~・・っ!こうだ!」とかっていきなり出すものでもない
•そのページだけでお絵かきするものでもない
•だから鍛錬をつめばある程度までは誰だってたどり着ける
•そもそも徳永は美的センスがない(泣)
•でも、日々「ロジック」と「手法」と「パターン」
を磨けば、ある程度はできるようになるのです。
- 157. おまけ
©2014 Intelligentnet, Inc. All rights reserved.
UI設計能力を向上させるには
4.○○に学ぶ
ナントカカントカ株式会社沿革
2000年6月創立。
創業者:軟渡寛治が当時フリーター
だった関都海斗とナンカン有限会社起業。
軟渡が初代社長就任に。その後すぐに
現役員の丸山が合流。2003年4月に洗
濯機、食洗器の取り扱いを開始。
2005年3月問題解決型家政婦「市原」
を提供開始。2006年7月現住所へ本社
移転(東京都港区西新橋3-24-9 飯田ビ
ル3F)2010年7月ISMS(情報セキュ
リティマネジメントシステム)
ISO27001:2005の認証を取得。
2014年11月代表取締役変更。関都海
斗が社長に就任。軟渡寛治の甥の妻の
姉である夜蔵北未が外部顧問として参
画
読む気しねぇ( ゚Д゚)
※社名・沿革すべて適当です
- 158. おまけ
©2014 Intelligentnet, Inc. All rights reserved.
UI設計能力を向上させるには
4.○○に学ぶ
どこに何が書いてある
かわかるようになった
(*’▽’)
でもつまんねぇ
( ゚Д゚)ヨミタクネェ
ナントカカントカ株式会社沿革
■2000年6月
創業者:軟渡寛治が当時フリーター
だった関都海斗とナンカン有限会社起業。
軟渡が初代社長就任に。その後すぐに
現役員の丸山が合流。
■2003年4月
洗濯機、食洗器の取り扱いを開始。
■2005年3月
問題解決型家政婦「市原」を提供開始。
■2006年7月
現住所へ本社移転(東京都港区西新橋
3-24-9 飯田ビル3F)
■2014年11月
代表取締役変更。関都海斗が社長に就
任。軟渡寛治の甥の妻の姉である夜蔵
北未が外部顧※問社と名し・て沿参革画すべて適当です
- 159. おまけ
©2014 Intelligentnet, Inc. All rights reserved.
UI設計能力を向上させるには
4.○○に学ぶ
インテリジェントネットの歴史
■2000年6月創立。
岡健太郎さんが和田嘉弘さんを若手に
起業。円城均さんが初代社長に。すぐ
に石丸さん石川さん合流。
■2005年4月
Googleアドワーズ広告、オーバーチュ
ア広告(現Yahoo!リスティング広告)
の取り扱いを開始。
■2006年3月ASP型アクセス解析
「PYXIS」を開始。2006年6月現住所
へ本社移転(東京都港区西新橋3-24-9
飯田ビル3F)
■2011年6月
ISMS(情報セキュリティマネジメント
システム)ISO27001:2005の認証を取
得。
どこに何が書いてある
かわかるようになった
(*’▽’)
じゃあこれならどう?
でもつまんねぇ
( ゚Д゚)ヨミタクネェ
- 160. おまけ
©2014 Intelligentnet, Inc. All rights reserved.
UI設計能力を向上させるには
4.○○に学ぶ
(゚ω゚)ホゥ・・・
ナントカカントカ株式会社の歴史
■軟渡氏。ダイヤの原石「カント」を発見
2000年6月創業。
軟渡寛治が当時フリーターだった関都
海斗とナンカン有限会社起業。軟渡が初代
社長就任に。その後すぐに現役員の丸
山が合流。
■なぜか「洗い物」事業に
洗濯機、食洗器の取り扱いを開始。
■さらになぜか「人」を送り込む
問題解決型家政婦「市原」を提供開始。
■当然、手狭になりまして
現住所へ本社移転(東京都港区西新橋
3-24-9 飯田ビル3F)
■原石がダイヤに。そしてコネ採用
代表取締役変更。関都海斗が社長に就
任。軟渡寛治の甥の妻の姉である夜蔵
北未が外部顧問として参画
※社名・沿革すべて適当です
- 162. おまけ
©2014 Intelligentnet, Inc. All rights reserved.
UI設計能力を向上させるには
4.雑誌に学ぶ
雑誌には学ぶところが
たくさんあります。
•テンプレートという考え方
•文書構造という考え方
•文章の割り付け
•何よりも見出しの付け方
- 163. おまけ
もちろん雑誌だけじゃないです
©2014 Intelligentnet, Inc. All rights reserved.
UI設計能力を向上させるには
4.雑誌に学ぶ
雑誌には学ぶところが
たくさんあります。
•テンプレートという考え方
•文書構造という考え方
•文章の割り付け
•何よりも見出しの付け方