More Related Content Similar to UI設計の土台になる考え方-インテリジェントネット社内勉強会
Similar to 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.雑誌に学ぶ
雑誌には学ぶところが
たくさんあります。
•テンプレートという考え方
•文書構造という考え方
•文章の割り付け
•何よりも見出しの付け方