UI設計の土台になる考え方-インテリジェントネット社内勉強会

3. ©2014 Intelligentnet, Inc. All rights reserved. 今日のお話の前提2/2 1. 便宜上なんとなく「UI設計」としています。「UI 設計」には本来ビジュアルデザインも入ってきますが、今日はその手前の「画面構成まで」です。 2. だから「UI設計（の基礎）」＝「画面構成」ということで聞いてください。 3. メモは取らなくて大丈夫です。話すことのほとんどはスライドにしてあります。 4. そのため、物凄いスピードでスライドが進みます。（たぶん1枚平均数秒です）

25. ０１．UI設計はです「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」「ここ事業部の担当者がうるさいので」「うちはサービスがいっぱいあるから」でも無理なものは無理。「うちはサービスも顧客もたくさんで複雑なんだよね」（Web屋さんにはわからんだろうけどね）そもそもこういう話はだいたいどこでも同じみんな複雑。

32. ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. •織田裕二（BAC CORPORATION所属） •木村拓哉（ジャニーズ事務所所属） •オダギリジョー（鈍牛倶楽部所属） •堺雅人（田辺エージェンシー所属） •佐藤浩市（テアトル・ド・ポッシュ所属） •長瀬智也（ジャニーズ事務所所属） •二宮和也（ジャニーズ事務所所属） •妻夫木聡（ホリプロ所属） •向井理（ホリエージェンシー所属） •草彅剛（ジャニーズ事務所所属） •香取慎吾（ジャニーズ事務所所属） •唐沢寿明（奥さんも研音所属）結論：ジャニーズ事務所はすごい

33. ０１．UI設計はです •二宮和也（ジャニーズ事務所所属） •妻夫木聡（ホリプロ所属） •向井理（ホリエージェンシー所属） •草彅剛（ジャニーズ事務所所属） •香取慎吾（ジャニーズ事務所所属） •唐沢寿明（奥さんも研音所属） ©2014 Intelligentnet, Inc. All rights reserved. •織田裕二（BAC CORPORATION所属） •木村拓哉（ジャニーズ事務所所属） •オダギリジョー（鈍牛倶楽部所属） •堺雅人（田辺エージェンシー所属） •佐藤浩市（テアトル・ド・ポッシュ所属） •長瀬智也（ジャニーズ事務所所属）っていうのは冗談で。こうなる：物語の軸はだれ？？(´・ω・｀)

65. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」 |дﾟ)つ「このページでユーザーに何を「前体の験しペてもーらうジ？」と次のページでこれどうやって決める？ (゜-゜)ｺﾋﾟﾍﾟ・・・ ©2014 Intelligentnet, Inc. All rights reserved. 何を体験する？」前のページこのページ次のページ |дﾟ)何があるー？ (゜-゜)ほすぃかきこφ(・ω・)ﾊﾟﾋﾟｺ ※フォーム

71. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ（知らんけど）使う人どんな人が住みますか？家族構成は？生活スタイルは？家（住宅）の設計設計図どんな全体構造にしますか？各部屋はどんな配置にしますか？どんな部屋にしますか？どんな配置にしますか？どんなインテリアを置きますか？

72. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」各部屋の設計 Q.「この部屋、ドアってどっちにつければいい？」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ（知らんけど）使う人どんな人が住みますか？家族構成は？生活スタイルは？家（住宅）の設計設計図どんな全体構造にしますか？各部屋はどんな配置にしますか？どんな部屋にしますか？どんな配置にしますか？どんなインテリアを置きますか？

73. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」各部屋の設計 Q.「この部屋、ドアってどっちにつければいい？」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ（知らんけど）使う人どんな人が住みますか？家族構成は？生活スタイルは？家（住宅）の設計設計図どんな全体構造にしますか？各部屋はどんな配置にしますか？どんな部屋にしますか？どんな配置にしますか？どんなインテリアを置きますか？ A.「廊下がある方に決まってんだろうがああああああああああああああああ(；ﾟДﾟ)」

74. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」 Webサイトだって同じ。（知ら・・・知ってるよ！）各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか？家族構成は？生活スタイルは？設計図どんな全体構造にしますか？各部屋はどんな配置にしますか？使う人どんな部屋にしますか？どんな配置にしますか？どんなインテリアを置きますか？使う人どんな人が使いますか？どんな使い方をしますか？どんな目的を持った人ですか？家（住宅）の設計Ｗｅｂサイトの設計

75. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」 Webサイトだって同じ。（知ら・・・知ってるよ！）各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか？家族構成は？生活スタイルは？設計図どんな全体構造にしますか？各部屋はどんな配置にしますか？使う人どんな部屋にしますか？どんな配置にしますか？どんなインテリアを置きますか？使う人どんな人が使いますか？どんな使い方をしますか？どんな目的を持った人ですか？家（住宅）の設計Ｗｅｂサイトの設計サイト構造図どんな全体構造にしますか？各部屋はどんな配置にしますか？

76. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」 Webサイトだって同じ。（知ら・・・知ってるよ！）各部屋の設計各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか？家族構成は？生活スタイルは？設計図どんな全体構造にしますか？各部屋はどんな配置にしますか？使う人どんな部屋にしますか？どんな配置にしますか？どんなインテリアを置きますか？どんな人が使いますか？どんな使い方をしますか？どんな目的を持った人ですか？サイト構造図どんな全体構造にしますか？各部屋はどんな配置にしますか？使う人どんな部屋にしますか？どんな配置にしますか？どんなデザインを置きますか？家（住宅）の設計Ｗｅｂサイトの設計

125. ０４．UI設計の手法と実践（パターン）手法その１：みんな大好き「ワイヤーフレーム」 ※架空案件の資料です ©2014 Intelligentnet, Inc. All rights reserved. 名前がだめ。 • 「ワイヤーフレーム（モデル）」とは、本来３DCGのレンダリング形式の名前です。 • 「ワイヤー」で「表現されたモデル」 • つまり「ワイヤーフレーム」だけだと何のドキュメントかまでは指していません。 • 「ビジネス文書」と言ってるのと同じレベル • それは報告書？稟議書？送付状？

130. ０４．UI設計の手法と実践（パターン）厳密には、手書き＝ペーパープロトタイプ • 手書きワイヤー＝ペーパープロトタイプ× ©2014 Intelligentnet, Inc. All rights reserved. 手法その２：ペーパープロトタイプなわけではないです。 • 手書きでつくる • 素早くつくれる • 手軽に修正できる • テストするための紙のワイヤー • その場でディスカッション＝ペーパープロトタイプ○ • できるディレクターがつくる紙のワイヤー＝ペーパープロトタイプ(ｷﾘｯ

131. ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. 手法その３：ユーザエクスペリエンスフロー（UXフロー）  UXフローの仮説立案（手法）について  ユーザーが迷わない構造を実現するために、サイト内外でのユーザー行動の仮説を立てます  ユーザーがどこで何を感じ、何を求めるのかを定義します  それぞれのタスク、状況で発生するニーズ、求められるコンテンツを導き出します。  UXフローによるWebサイト上の理想的なサービス設計に対して、現状のWebサイトがどのような状態にあるのかを検証し、改善案を導き出しますマンション購入を検討している（知識あり＆なし）サイトにたどり着くブランドについて調べるマンション購入ノウハウを調べる商品・サービスについて調べる実際に商品を見る・体験する問い合わせる購入検討繰り返す事例や感想について調べるＵＸフローはお客様（ユーザー）と企業の繋がりをスケッチした関係図です。お客様に対して、いかに自社最高のサービスを提供し、ゴールまで導くかを描いた満足体験のストーリーです。

132. ０４．UI設計の手法と実践（パターン）手法その３：ユーザエクスペリエンスフロー（UXフロー）  UXフローの仮説立案（手法）について  ユーザーが迷わない構造を実現するために、サイト内外でのユーザー行動の仮説を立てます  ユーザーがどこで何を感じ、何を求めるのかを定義しますユーザーとどこで出会い、どこで興味を持ち、どこでアクションを  それぞれのタスク、状況で発生するニーズ、求められるコンテンツを導き出します。起こしてもらうのかをフロー図にしたもの。自社最高の満足体験をフローにしたもの。  本プロジェクトでは、UXフローによるWebサイト上の理想的なサービス設計に対して、現状のWebサイトがどのような状態にあるのかを検証し、改善案を導き出します ©2014 Intelligentnet, Inc. All rights reserved. マンション購入を検討している（知識あり＆なし）サイトにたどり着くブリリアについて調べるマンション購入ノウハウを調べる商品・サービスについて調べる実際に商品を見る・体験する問い合わせる購入検討繰り返す事例や感想について調べるＵＸフローはお客様（ユーザー）と企業の繋がりをスケッチした関係図です。お客様に対して、いかに自社最高のサービスを提供し、ゴールまで導くかを描いた満足体験のストーリーです。

137. ０４．UI設計の手法と実践（パターン）気になるようだったら調べてみてください ©2014 Intelligentnet, Inc. All rights reserved. 一応、基本的なナビゲーションパターン •機能ナビゲーション •階層型ナビゲーション（グローバル、ローカルなど） •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション（参照元：書籍「IA100」より）

139. ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ

140. ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ手法パターン

141. ０４．UI設計の手法と実践（パターン） •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション手法パターン ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ・・・これだと当てずっぽうになっちゃうので。

148. ©2014 Intelligentnet, Inc. All rights reserved. だから、最後に言いたいこと。 •「んん～・・っ！こうだ！」とかっていきなり出すものでもない •そのページだけでお絵かきするものでもない •だから鍛錬をつめばある程度までは誰だってたどり着ける •そもそも徳永は美的センスがない（泣） •でも、日々「ロジック」と「手法」と「パターン」を磨けば、ある程度はできるようになるのです。

157. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには４．○○に学ぶﾅﾝﾄｶｶﾝﾄｶ株式会社沿革 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設計能力を向上させるには４．○○に学ぶどこに何が書いてあるかわかるようになった (*’▽’) でもつまんねぇ ( ﾟДﾟ)ﾖﾐﾀｸﾈｪﾅﾝﾄｶｶﾝﾄｶ株式会社沿革 ■2000年6月創業者：軟渡寛治が当時フリーターだった関都海斗とﾅﾝｶﾝ有限会社起業。軟渡が初代社長就任に。その後すぐに現役員の丸山が合流。 ■2003年4月洗濯機、食洗器の取り扱いを開始。 ■2005年3月問題解決型家政婦「市原」を提供開始。 ■2006年7月現住所へ本社移転（東京都港区西新橋 3-24-9 飯田ビル3F） ■2014年11月代表取締役変更。関都海斗が社長に就任。軟渡寛治の甥の妻の姉である夜蔵北未が外部顧※問社と名し・て沿参革画すべて適当です

159. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには４．○○に学ぶインテリジェントネットの歴史 ■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設計能力を向上させるには４．○○に学ぶ (ﾟωﾟ)ﾎｩ・・・ﾅﾝﾄｶｶﾝﾄｶ株式会社の歴史 ■軟渡氏。ダイヤの原石「ｶﾝﾄ」を発見 2000年6月創業。軟渡寛治が当時フリーターだった関都海斗とﾅﾝｶﾝ有限会社起業。軟渡が初代社長就任に。その後すぐに現役員の丸山が合流。 ■なぜか「洗い物」事業に洗濯機、食洗器の取り扱いを開始。 ■さらになぜか「人」を送り込む問題解決型家政婦「市原」を提供開始。 ■当然、手狭になりまして現住所へ本社移転（東京都港区西新橋 3-24-9 飯田ビル3F） ■原石がダイヤに。そしてコネ採用代表取締役変更。関都海斗が社長に就任。軟渡寛治の甥の妻の姉である夜蔵北未が外部顧問として参画 ※社名・沿革すべて適当です

UI設計の土台になる考え方-インテリジェントネット社内勉強会

UI設計の土台になる考え方-インテリジェントネット社内勉強会

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to UI設計の土台になる考え方-インテリジェントネット社内勉強会

Similar to UI設計の土台になる考え方-インテリジェントネット社内勉強会(20)

Recently uploaded

Recently uploaded(7)

UI設計の土台になる考え方-インテリジェントネット社内勉強会