Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

123,814 views

Published on

社内勉強会で使用したセミナーのスライドです。
UI設計そのものというより、その前の土台となる考え方について講義しました。基礎の基礎のものです。

Published in: Design
  • Be the first to comment

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

  1. 1. UI設計の土台になる考え方 ©2014 Intelligentnet, Inc. All rights reserved. インテリジェントネット社内勉強会 徳永聡 ∧∧ / ̄ ̄ ̄ ̄ ̄ (,,゚Д゚)< はじまるよ! ⊂ ⊃ \_____ ~| | ,, し`J
  2. 2. ©2014 Intelligentnet, Inc. All rights reserved. 今日のお話の前提1/2 1. これを聞いたからすぐに超素敵UI設計ができるよ うになるわけじゃありません。 2. でも聞かないよりは聞いたほうが良い設計はでき ると思います 3. 少なくともUI設計のタイミングで「どういう判断 基準で考えれば良いか」はわかるようになると思 います
  3. 3. ©2014 Intelligentnet, Inc. All rights reserved. 今日のお話の前提2/2 1. 便宜上なんとなく「UI設計」としています。「UI 設計」には本来ビジュアルデザインも入ってきま すが、今日はその手前の「画面構成まで」です。 2. だから「UI設計(の基礎)」=「画面構成」とい うことで聞いてください。 3. メモは取らなくて大丈夫です。話すことのほとん どはスライドにしてあります。 4. そのため、物凄いスピードでスライドが進みます。 (たぶん1枚平均数秒です)
  4. 4. ©2014 Intelligentnet, Inc. All rights reserved. もくじ 1. UI設計はです 2. 「UI設計」の主な範囲と 「設計する前の大事なこと」 3. 「UI設計」のいろんな事例 4. UI設計の手法と実践(パターン)
  5. 5. ©2014 Intelligentnet, Inc. All rights reserved. でははじめます
  6. 6. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. (;;;;:::::) (;;;;;;;;:::::::::) (;;;;;(;;;;;;:::::);;:::) (;;;(;;;;;(;;;;;:::);;:::);::) ヾ|i l i i l;|ソ |i l i i l | |i ( ゚Д゚) < それは気になる… |i (ノl !,| 人从从ネ
  7. 7. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 突然ですが質問です。
  8. 8. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 採用を強化したいので、 採用情報をもっと目立たせたい。
  9. 9. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. どうする?
  10. 10. 01.UI設計はです こんなのは簡単です ©2014 Intelligentnet, Inc. All rights reserved.
  11. 11. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. こうすればいい
  12. 12. 01.UI設計はです こうすればいい ©2014 Intelligentnet, Inc. All rights reserved. げっきゅう いちおくえん!
  13. 13. 01.UI設計はです こんなのはUIの設計や提案とは言わない (*´з`).oO(厳密には言わないことはない) ©2014 Intelligentnet, Inc. All rights reserved.
  14. 14. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. グロナビはこうなります 一番推すべき コンテンツはこれです すべてのユーザーへの おすすめコンテンツを ここに置きます
  15. 15. 01.UI設計はです これが本来あるべきUIの設計や提案 ©2014 Intelligentnet, Inc. All rights reserved. グロナビはこうなります 一番おすべき コンテンツはこれです すべてのユーザーへの おすすめコンテンツを 置きます
  16. 16. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. よくある話
  17. 17. 01.UI設計はです 「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved.
  18. 18. 01.UI設計はです 「全部目立たせて」 はい無理。 ©2014 Intelligentnet, Inc. All rights reserved.
  19. 19. 01.UI設計はです 「全部目立たせて」 はい無理。 クライアントはだいたいこんなことを言う By C.W.ニコル(嘘) ©2014 Intelligentnet, Inc. All rights reserved.
  20. 20. 01.UI設計はです 「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  21. 21. 01.UI設計はです 「うちはサービスも顧客も たくさんで複雑なんだよね」 (Web屋さんにはわからんだろうけどね) 「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  22. 22. 01.UI設計はです 「全部目立たせて」 そんなときはこう返す ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  23. 23. 01.UI設計はです 「全部目立たせて」 ( ´_ゝ`)そうですか ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  24. 24. 01.UI設計はです 「全部目立たせて」 ( ´_ゝ`)そうですか ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  25. 25. 01.UI設計はです 「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」 でも 無理なものは無理。 「うちはサービスも顧客も たくさんで複雑なんだよね」 (Web屋さんにはわからんだろうけどね) そもそもこういう話は だいたいどこでも同じ みんな複雑。
  26. 26. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. たとえばサーラ住宅サイト。
  27. 27. 01.UI設計はです •キービジュアル •サムネイル •注力コンテンツ •イベント情報 •フッター ・・・とか。 ©2014 Intelligentnet, Inc. All rights reserved.
  28. 28. 01.UI設計はです •キービジュアル •サムネイル •注力コンテンツ •イベント情報 たとえばこれをドラマの配役で考える ・・・とか。 ©2014 Intelligentnet, Inc. All rights reserved.
  29. 29. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 主演助演1 脇役 助演2 エキストラ
  30. 30. たとえば「踊る大捜査線」01.UI設計はです 主演織田裕二 助演柳葉敏郎 助演深津絵里 脇役水野美紀 エキストラたまに出てくる警官 ©2014 Intelligentnet, Inc. All rights reserved. 主演助演1 脇役 助演2 エキストラ
  31. 31. 01.UI設計はです たとえばこの配役が、こんなだったら。 ©2014 Intelligentnet, Inc. All rights reserved.
  32. 32. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. •織田裕二(BAC CORPORATION所属) •木村拓哉(ジャニーズ事務所所属) •オダギリジョー(鈍牛倶楽部所属) •堺雅人(田辺エージェンシー所属) •佐藤浩市(テアトル・ド・ポッシュ所属) •長瀬智也(ジャニーズ事務所所属) •二宮和也(ジャニーズ事務所所属) •妻夫木聡(ホリプロ所属) •向井理(ホリエージェンシー所属) •草彅剛(ジャニーズ事務所所属) •香取慎吾(ジャニーズ事務所所属) •唐沢寿明(奥さんも研音所属) 結論:ジャニーズ事務所はすごい
  33. 33. 01.UI設計はです •二宮和也(ジャニーズ事務所所属) •妻夫木聡(ホリプロ所属) •向井理(ホリエージェンシー所属) •草彅剛(ジャニーズ事務所所属) •香取慎吾(ジャニーズ事務所所属) •唐沢寿明(奥さんも研音所属) ©2014 Intelligentnet, Inc. All rights reserved. •織田裕二(BAC CORPORATION所属) •木村拓哉(ジャニーズ事務所所属) •オダギリジョー(鈍牛倶楽部所属) •堺雅人(田辺エージェンシー所属) •佐藤浩市(テアトル・ド・ポッシュ所属) •長瀬智也(ジャニーズ事務所所属) っていうのは冗談で。 こうなる: 物語の軸はだれ??(´・ω・`)
  34. 34. 01.UI設計はです たとえばこんなシーンが。 ©2014 Intelligentnet, Inc. All rights reserved.
  35. 35. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 織田裕二と妻夫木聡がカフェで会話 ↓ そこに堺雅人が合流 ↓ 草彅剛演じるウェイターが注文取りに ↓ 遠くの席に謎めいたオダギリジョー ↓ 窓の外を香取慎吾が通り過ぎる
  36. 36. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 織田裕二と妻夫木聡がカフェで会話 ↓ そこに堺雅人が合流 ↓ 草彅剛演じるウェイターが注文取りに ↓ 遠くの席に謎めいたオダギリジョー ↓ 窓の外を香取慎吾が通り過ぎる 実は、 ここからここまで、 物語に一切関係なし。
  37. 37. 01.UI設計はです 工エエェェ(´д`)ェェエエ工 ©2014 Intelligentnet, Inc. All rights reserved. 織田裕二と妻夫木聡がカフェで会話 ↓ そこに堺雅人が合流 ↓ 草彅剛演じるウェイターが注文取りに ↓ 遠くの席にオダギリジョー ↓ 窓の外を香取慎吾が通り過ぎる 実は、 ここからここまで、 物語に一切関係なし。 なんと出演1シーンのみ。
  38. 38. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. たとえば「オールスター感謝祭」。
  39. 39. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved.
  40. 40. 01.UI設計はです もはやカオス TVならそれはそれで楽しいけど。 ©2014 Intelligentnet, Inc. All rights reserved.
  41. 41. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 全部目立たせようにも、 こうなっちゃうわけです。 1. 結果的に一人一人は目立たなくなる。 2. 見てる人がどこに注目すればいいのか わからなくなる
  42. 42. 01.UI設計はです このように、 優先順位を決める 必要があるのです。 ©2014 Intelligentnet, Inc. All rights reserved. つまり。
  43. 43. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. さて。 「では何を主役にする?」
  44. 44. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. さて。 「では何を主役にする?」 それはビジネスが決める ビジネス側だけじゃないけどだいたいビジネス側の話。
  45. 45. 01.UI設計はです ビジネスとはたとえば。 •何に注力している? •ユーザーに受け入れられている部分は? •どこが競合より優れている? •逆にどこが競合より劣っている? •何を中心に提供すればユーザーが喜ぶ? ©2014 Intelligentnet, Inc. All rights reserved.
  46. 46. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. つまり。 つまり つーーーまーーーり
  47. 47. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 突然すぎますがまとめます この章をまとめます。 01.UI設計はです
  48. 48. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 突然すぎますがまとめます この章をまとめます。 というわけでもう一度 01.UI設計はです
  49. 49. 01.UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. つまり。 つまり つーーーまーーーり
  50. 50. 01.UI設計はです UI設計は天才の所業ではないのです まさかの否定が入ります ©2014 Intelligentnet, Inc. All rights reserved.
  51. 51. ©2014 Intelligentnet, Inc. All rights reserved. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 | ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| | 覚えてね!!! | |________| ∧∧ || ( ゚д゚)|| / づΦ
  52. 52. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 みなさんは 分けて考えていますか? ©2014 Intelligentnet, Inc. All rights reserved. 突然「ACジャパン」みたいな 質問を投げかけてみる。 ええぇぇーぃしぃいいー♪(・∀・)
  53. 53. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」これを。 ©2014 Intelligentnet, Inc. All rights reserved. どこに 何を どのように
  54. 54. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 「これをどのくらいのサイズと形で置こうかなぁ?」 ©2014 Intelligentnet, Inc. All rights reserved.
  55. 55. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 「これをどのくらいのサイズと形で置こうかなぁ?」 ©2014 Intelligentnet, Inc. All rights reserved. そもそも “これ” を置くことは決定している?
  56. 56. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 3. 見(魅)せるのか ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに どのように
  57. 57. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 3. 見(魅)せるのか ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに どのように 本来いっぺんに 考えることではない。
  58. 58. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 3. 見(魅)せるのかここがUI設計の中心。 ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに どのように
  59. 59. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ↓ここがデザインの中心。 3. 見(魅)せるのか ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに どのように
  60. 60. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 じゃあこれは? ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに 3. 置くのか どのように 僕の大好きな「そもそも論」(・∀・)
  61. 61. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 何を置くのか 正しくは 何と何と何を置くのか。
  62. 62. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 何と何と何を置くのか。 これどうやって決める? ハテ(゜-゜) ドウシタモノカ ©2014 Intelligentnet, Inc. All rights reserved.
  63. 63. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 何と何と何を置くのか。 |д゚)つ「このページでユーザーに 何を体験してもらう?」 これどうやって決める? ハテ(゜-゜) ドウシタモノカ ©2014 Intelligentnet, Inc. All rights reserved.
  64. 64. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 これどうやって決める? ©2014 Intelligentnet, Inc. All rights reserved. |д゚)つ「このページでユーザーに何を 体験してもらう?」 (゜-゜)コピペ・・・
  65. 65. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 |д゚)つ「このページでユーザーに何を 「前体の験しペてもーらうジ?」と次のページで これどうやって決める? (゜-゜)コピペ・・・ ©2014 Intelligentnet, Inc. All rights reserved. 何を体験する?」 前の ページ この ページ 次の ページ |д゚)何があるー? (゜-゜)ほすぃかきこφ(・ω・)パピコ ※フォーム
  66. 66. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 というわけでコイツの登場です。 ©2014 Intelligentnet, Inc. All rights reserved.
  67. 67. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. サイトストラクチャ。 (サイト構造図orサイトマップ) だんだんUIの話じゃなくなってきた・・・
  68. 68. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 家の設計と同じです (知らんけど)
  69. 69. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ(知らんけど) 使う人 どんな人が住みますか? 家族構成は? 生活スタイルは? 家(住宅) の設計
  70. 70. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ(知らんけど) 使う人 どんな人が住みますか? 家族構成は? 生活スタイルは? 家(住宅) の設計 設計図 どんな全体構造にしますか? 各部屋はどんな配置にしますか?
  71. 71. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ(知らんけど) 使う人 どんな人が住みますか? 家族構成は? 生活スタイルは? 家(住宅) の設計 設計図 どんな全体構造にしますか? 各部屋はどんな配置にしますか? どんな部屋にしますか? どんな配置にしますか? どんなインテリアを置きますか?
  72. 72. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 各部屋の設計 Q.「この部屋、ドアってどっちにつければいい?」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ(知らんけど) 使う人 どんな人が住みますか? 家族構成は? 生活スタイルは? 家(住宅) の設計 設計図 どんな全体構造にしますか? 各部屋はどんな配置にしますか? どんな部屋にしますか? どんな配置にしますか? どんなインテリアを置きますか?
  73. 73. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 各部屋の設計 Q.「この部屋、ドアってどっちにつければいい?」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ(知らんけど) 使う人 どんな人が住みますか? 家族構成は? 生活スタイルは? 家(住宅) の設計 設計図 どんな全体構造にしますか? 各部屋はどんな配置にしますか? どんな部屋にしますか? どんな配置にしますか? どんなインテリアを置きますか? A.「廊下がある方に決まってんだろうがああああ ああああああああああああ(;゚Д゚)」
  74. 74. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 Webサイトだって同じ。(知ら・・・知ってるよ!) 各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか? 家族構成は? 生活スタイルは? 設計図 どんな全体構造にしますか? 各部屋はどんな配置にしますか? 使う人 どんな部屋にしますか? どんな配置にしますか? どんなインテリアを置きますか? 使う人 どんな人が使いますか? どんな使い方をしますか? どんな目的を持った人ですか? 家(住宅) の設計 Webサイト の設計
  75. 75. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 Webサイトだって同じ。(知ら・・・知ってるよ!) 各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか? 家族構成は? 生活スタイルは? 設計図 どんな全体構造にしますか? 各部屋はどんな配置にしますか? 使う人 どんな部屋にしますか? どんな配置にしますか? どんなインテリアを置きますか? 使う人 どんな人が使いますか? どんな使い方をしますか? どんな目的を持った人ですか? 家(住宅) の設計 Webサイト の設計 サイト構造図 どんな全体構造にしますか? 各部屋はどんな配置にしますか?
  76. 76. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 Webサイトだって同じ。(知ら・・・知ってるよ!) 各部屋の設計 各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか? 家族構成は? 生活スタイルは? 設計図 どんな全体構造にしますか? 各部屋はどんな配置にしますか? 使う人 どんな部屋にしますか? どんな配置にしますか? どんなインテリアを置きますか? どんな人が使いますか? どんな使い方をしますか? どんな目的を持った人ですか? サイト構造図 どんな全体構造にしますか? 各部屋はどんな配置にしますか? 使う人 どんな部屋にしますか? どんな配置にしますか? どんなデザインを置きますか? 家(住宅) の設計 Webサイト の設計
  77. 77. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 「グロナビ何にする・・・?」 「KVエリアなにいれる?」 「コンテンツエリアはどうする?」 ©2014 Intelligentnet, Inc. All rights reserved. 画面構成を考える・・・?
  78. 78. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 「グロナビ何にする・・・?」 「KVのエリアなにいれる?」 このページだけで考えるのがマチガイ!! スミマセン(*´з`) (゚Д゚)ゴルァ! 「コンテンツエリアはどする?」 ©2014 Intelligentnet, Inc. All rights reserved.
  79. 79. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 画面構成を考える前にその1 ≡≡≡ヘ(*゚∇゚)ノサヨナラー ©2014 Intelligentnet, Inc. All rights reserved. 三(・∀・) 「どこから来る?」 「どこから出る?」
  80. 80. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 画面構成を考える前にその2 (・∀・) (・∀・) 「どういう塊で情報を見ていく?」 (・∀・) ぐる ぐる ぐる ぐる (・∀・) (・∀・) ぐる(・∀・) ぐる ぐる ぐる
  81. 81. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 画面構成を考える前にその3 (・∀・) ナルホドナ 「どのページから違うカテゴリへ移動す る?」 三(・∀・)コッチー 三(・∀・)コッチヤー アッチー(・∀・)三
  82. 82. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 たとえばこれがこうなります ©2014 Intelligentnet, Inc. All rights reserved.
  83. 83. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」たとえばこれがこうなります グローバルナビ ©2014 Intelligentnet, Inc. All rights reserved. ローカルナビ
  84. 84. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」たとえばこれがこうなります 次ステップへのリンク ©2014 Intelligentnet, Inc. All rights reserved.
  85. 85. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」たとえばこれがこうなります コンバージョン導線 (アクションエリア) ©2014 Intelligentnet, Inc. All rights reserved.
  86. 86. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」たとえばこれがこうなります グローバルナビ 関連リンク ©2014 Intelligentnet, Inc. All rights reserved. ローカルナビ コンバージョン導線
  87. 87. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 この章をまとめます。 「UI設計」の主な範囲とは? ©2014 Intelligentnet, Inc. All rights reserved.
  88. 88. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか どこに 2. 置くのか 3. 見(魅)せるのか どのように だいたいココ 「UI設計」の主な範囲 まとめますわ 「UI設計」の主な範囲は
  89. 89. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか どこに 2. 置くのか 3. 見(魅)せるのか どのように だいたいココ 「UI設計」の主な範囲 まとめますわ でもココだけ考えたって 答えなんかでやしねぇ
  90. 90. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」「UI設計」の主な範囲 まとめますわ とっても大事なこと。 ©2014 Intelligentnet, Inc. All rights reserved. • ページのUXを考える • その前に前後のUXを考える • その前にサイト全体のUXを考える
  91. 91. 02.「UI設計」の主な範囲と 「設計する前の大事なこと」「UI設計」の主な範囲 まとめますわ とっても大事なこと。 忘れないでね( ´_ゝ`) ©2014 Intelligentnet, Inc. All rights reserved. • ページのUXを考える • その前に前後のUXを考える • その前にサイト全体のUXを考える
  92. 92. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ∧__∧ ( ´∀`) やっと具体論だお ( O┬O ≡◎-ヽJ┴◎
  93. 93. 03.「UI設計」のいろんな事例 というわけで実際のサイトを例に UI設計的な何かを紹介したいと思います。 だってロジックだけじゃつまらないデショ(´Д⊂ヽ ※ちなみに全部徳永の推測です。 本当にそうかどうかはわかりません。 ©2014 Intelligentnet, Inc. All rights reserved.
  94. 94. 03.「UI設計」のいろんな事例 知らないとは言わせない2つのサイト Yahoo! Google ©2014 Intelligentnet, Inc. All rights reserved. やほー 知らなかったらアナタはもぐり( ´_ゝ`)
  95. 95. 03.「UI設計」のいろんな事例 知らないとは言わせない2つのサイト ぜんぜんちがう・・・ →なぜ?(‘ω’) Yahoo! Google ©2014 Intelligentnet, Inc. All rights reserved. やほー
  96. 96. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. Yahoo! • リンクいっぱい • 機能(ツール)もいっぱい • コンテンツもいっぱい • 広告デカイ! Yahoo!の場合
  97. 97. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. Yahoo!の場合 Yahoo! • リンクいっぱい • 機能(ツール)もいっぱい • コンテンツもいっぱい • 広告デカイ! Yahoo!はメディアモデルなのです。
  98. 98. 03.「UI設計」のいろんな事例 Google ©2014 Intelligentnet, Inc. All rights reserved. Google大先生の場合 • リンク少ない • 機能少ない • コンテンツ・・・ない • 広告・・・どこ?(;゚Д゚) 潔いにもほどがある
  99. 99. 03.「UI設計」のいろんな事例 Google ©2014 Intelligentnet, Inc. All rights reserved. Google大先生の場合 • リンク少ない • 機能少ない • コンテンツ・・・ない • 広告・・・どこ?(;゚Д゚) 潔いにもほどがある Googleはインフラモデルなのです。
  100. 100. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ いっぱいサイト内に居てほしいとにかく検索してほしい
  101. 101. 03.「UI設計」のいろんな事例 いっぱいサイト内に居てほしいとにかく検索してほしい ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ ビジネスモデルの違い
  102. 102. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ゲーム開発会社の場合。 SCE 任天堂セガ
  103. 103. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. SCEの場合 SCE • KVにPS4(ゲーム情報) • でもほとんど企業情報 • コンテンツ部分も企業情報 • PS専用サイトが別にある
  104. 104. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. SCEの場合 SCE • KVにPS4(ゲーム情報) • でもほとんど企業情報 • コンテンツ部分も企業情報 • PS専用サイトが別にある いわゆる一般的な「ゲーム会社のコーポレートサイト」??
  105. 105. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 任天堂の場合 • 主力商品が全面に! • ゲーム情報だらけ • ファビコンまでマリオ • 企業情報少ない 任天堂
  106. 106. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 任天堂の場合 • 主力商品が全面に! • ゲーム情報だらけ • ファビコンまでマリオ • 企業情報少ない 任天堂 任天堂に求められているのは老若男女に対する 「ゲームのワクワク」ということ
  107. 107. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. セェェエガァアア♪じゃなくてセガの場合 セガ • 「・・・ふぁっ?!」 • というほどにゲーム情報ない • KVもゲームじゃない
  108. 108. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. セェェエガァアア♪じゃなくてセガの場合 セガ • 「・・・ふぁっ?!」 • というほどにゲーム情報ない • KVもゲームじゃない セガはもう「普通の家庭用ゲーム開発会社」じゃないのです (パチンコ、スロット、アミューズメント)
  109. 109. 03.「UI設計」のいろんな事例 SCE 任天堂セガ ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ みんな知ってる! わくわく!を提供 もはや家庭用ゲーム じゃないぜ 知らない人多い (”SCE”で検索する人は企業について知り たい。ゲームなら”PS3”で検索する)
  110. 110. 03.「UI設計」のいろんな事例 SCE 任天堂セガ もはや家庭用ゲーム じゃないぜ ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ みんな知ってる! わくわく!を提供 知らない人多い (”SCE”で検索する人は企業について知り たい。ゲームなら”PS3”で検索する) 「事業ドメイン」と「認知度」の違い
  111. 111. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 星のや富士屋ホテルチェーン 東急ホテルズワシントンホテル
  112. 112. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 星のや 富士屋ホテルチェーン
  113. 113. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 星のや 富士屋ホテルチェーン とりあえず見ろ! 話はそれからだ! とりあえず見r・・・ たくさん体験できるよ(-”-)
  114. 114. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 東急ホテルズワシントンホテル
  115. 115. 03.「UI設計」のいろんな事例 東急ホテルズワシントンホテル ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 さくっと予約しろください
  116. 116. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・
  117. 117. 03.「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ ブランドプロミスの違い
  118. 118. 03.「UI設計」のいろんな事例 この章をまとめます。 いろんな事例からわかることは? ©2014 Intelligentnet, Inc. All rights reserved.
  119. 119. 03.「UI設計」のいろんな事例 と思ったけど、とくにない。 ©2014 Intelligentnet, Inc. All rights reserved. ま、まと、まとめ・・・ いやまあ、前章で話した通り ビジネスやUXで変わるってことがわかればよいと思います。
  120. 120. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. / ̄ ̄ ̄ ̄ ̄\ | おまいらも| ∩_∩ | | (´ー`) < がんばると| ( ) | | | | | | いい| (___)__) \_____/
  121. 121. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. まずは手法。
  122. 122. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. 手法その1:みんな大好き「ワイヤーフレーム」 ※架空案件の資料です
  123. 123. 04.UI設計の手法と実践(パターン) って、実はこれじゃだめです。 ©2014 Intelligentnet, Inc. All rights reserved. 手法その1:みんな大好き「ワイヤーフレーム」
  124. 124. 04.UI設計の手法と実践(パターン) 手法その1:みんな大好き「ワイヤーフレーム」 ※架空案件の資料です ©2014 Intelligentnet, Inc. All rights reserved. 名前がだめ。
  125. 125. 04.UI設計の手法と実践(パターン) 手法その1:みんな大好き「ワイヤーフレーム」 ※架空案件の資料です ©2014 Intelligentnet, Inc. All rights reserved. 名前がだめ。 • 「ワイヤーフレーム(モデル)」とは、本来3DCGのレンダリング形式 の名前です。 • 「ワイヤー」で「表現されたモデル」 • つまり「ワイヤーフレーム」だけだと何のドキュメントかまでは指して いません。 • 「ビジネス文書」と言ってるのと同じレベル • それは報告書?稟議書?送付状?
  126. 126. 04.UI設計の手法と実践(パターン) 手法その1:みんな大好き「ワイヤーフレーム」 ※架空案件の資料です ©2014 Intelligentnet, Inc. All rights reserved. 正しくは 「画面構成案ワイヤーフレーム」 他に「コンテンツワイヤーフレーム」なんかもある。
  127. 127. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. 手法その2:ペーパープロトタイプ • 手書きでつくる • 素早くつくれる • 手軽に修正できる • その場でディスカッション 「http://blog.webtron.jp/archives/2011/08/000083.html」より
  128. 128. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. 手法その2:ペーパープロトタイプ • 手書きでつくる • 素早くつくれる ここで要注意! • 手軽に修正できる • その場でディスカッション
  129. 129. 04.UI設計の手法と実践(パターン) 厳密には、手書き=ペーパープロトタイプ ©2014 Intelligentnet, Inc. All rights reserved. 手法その2:ペーパープロトタイプ なわけではないです。 • 手書きでつくる • 素早くつくれる • 手軽に修正できる • その場でディスカッション
  130. 130. 04.UI設計の手法と実践(パターン) 厳密には、手書き=ペーパープロトタイプ • 手書きワイヤー= ペーパープロトタイプ× ©2014 Intelligentnet, Inc. All rights reserved. 手法その2:ペーパープロトタイプ なわけではないです。 • 手書きでつくる • 素早くつくれる • 手軽に修正できる • テストするための紙のワイヤー • その場でディスカッション = ペーパープロトタイプ○ • できるディレクターがつくる紙のワイヤー = ペーパープロトタイプ(キリッ
  131. 131. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. 手法その3:ユーザエクスペリエンスフロー (UXフロー)  UXフローの仮説立案(手法)について  ユーザーが迷わない構造を実現するために、サイト 内外でのユーザー行動の仮説を立てます  ユーザーがどこで何を感じ、何を求めるのかを定義 します  それぞれのタスク、状況で発生するニーズ、求めら れるコンテンツを導き出します。  UXフローによるWebサイト上の理想的なサービス設 計に対して、現状のWebサイトがどのような状態に あるのかを検証し、改善案を導き出します マンション購入を検討している (知識あり&なし) サイトにたどり着く ブランドについて調べる マンション購入ノウハウを調べる 商品・サービスについて調べる 実際に商品を見る・体験する 問い合わせる 購入 検討 繰り返す 事例や感想について調べる UXフローはお客様(ユーザー)と企業の繋がりをスケッチした 関係図です。お客様に対して、いかに自社最高のサービスを提供 し、ゴールまで導くかを描いた満足体験のストーリーです。
  132. 132. 04.UI設計の手法と実践(パターン) 手法その3:ユーザエクスペリエンスフロー (UXフロー)  UXフローの仮説立案(手法)について  ユーザーが迷わない構造を実現するために、サイト 内外でのユーザー行動の仮説を立てます  ユーザーがどこで何を感じ、何を求めるのかを定義 します ユーザーとどこで出会い、どこで興味を持ち、どこでアクションを  それぞれのタスク、状況で発生するニーズ、求めら れるコンテンツを導き出します。 起こしてもらうのかをフロー図にしたもの。 自社最高の満足体験をフローにしたもの。  本プロジェクトでは、UXフローによるWebサイト上 の理想的なサービス設計に対して、現状のWebサイ トがどのような状態にあるのかを検証し、改善案を 導き出します ©2014 Intelligentnet, Inc. All rights reserved. マンション購入を検討している (知識あり&なし) サイトにたどり着く ブリリアについて調べる マンション購入ノウハウを調べる 商品・サービスについて調べる 実際に商品を見る・体験する 問い合わせる 購入 検討 繰り返す 事例や感想について調べる UXフローはお客様(ユーザー)と企業の繋がりをスケッチした 関係図です。お客様に対して、いかに自社最高のサービスを提供 し、ゴールまで導くかを描いた満足体験のストーリーです。
  133. 133. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. 手法その他:ほかにこんなものがあります。 • カスタマージャーニーマップ • ペルソナ/シナリオ法 • アクティングアウト(厳密には設計じゃなくてテスト手法) • プロトコル分析(厳密には設計じゃなくてテスト手法) • モックアップ
  134. 134. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. 続いて実践(パターン)。
  135. 135. 04.UI設計の手法と実践(パターン) といいつつ、事前の話の通り、 具体的なパターンみたいのはやめときます。 (調べりゃわかるので) ©2014 Intelligentnet, Inc. All rights reserved.
  136. 136. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. 一応、基本的なナビゲーションパターン •機能ナビゲーション •階層型ナビゲーション (グローバル、ローカルなど) •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション (参照元:書籍「IA100」より)
  137. 137. 04.UI設計の手法と実践(パターン) 気になるようだったら調べてみてください ©2014 Intelligentnet, Inc. All rights reserved. 一応、基本的なナビゲーションパターン •機能ナビゲーション •階層型ナビゲーション (グローバル、ローカルなど) •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション (参照元:書籍「IA100」より)
  138. 138. 04.UI設計の手法と実践(パターン) この章をまとめます。 手法と実践の話をしましたが。 ©2014 Intelligentnet, Inc. All rights reserved.
  139. 139. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ
  140. 140. 04.UI設計の手法と実践(パターン) ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ 手法パターン
  141. 141. 04.UI設計の手法と実践(パターン) •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション 手法パターン ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ ・・・これだと当てずっぽうになっちゃうので。
  142. 142. ©2014 Intelligentnet, Inc. All rights reserved. というわけで全体のまとめ。
  143. 143. ©2014 Intelligentnet, Inc. All rights reserved. まとめると何が言いたいかというと 1. UI設計は天才の所業ではないのです 2. 02.「UI設計」の主な範囲と「設計する前の大事なこと」 この2つで話してきたこと
  144. 144. 2. 02.「UI設計」の主な範囲と「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. まとめると何が言いたいかというと 1. UI設計は天才の所業ではないのです この2つで話してきたこと ビジネス側をみてぇー、 ユーザーの行動をみてぇ、 前後の関係性をみてぇー、 優先順位を考えてぇー、
  145. 145. これは「ロジック」ですね。 ©2014 Intelligentnet, Inc. All rights reserved. まとめると何が言いたいかというと 1. UI設計は天才の所業ではないのです 2. 「UI設計」の主な範囲と「それ以外」 この2つで話してきたこと ビジネス側をみてぇー、 ユーザーの行動をみてぇ、 前後の関係性をみてぇー、 優先順位を考えてぇー、
  146. 146. ©2014 Intelligentnet, Inc. All rights reserved. つまり。 つまり つーーーまーーーり コピペ(・∀・)コピペ
  147. 147. ©2014 Intelligentnet, Inc. All rights reserved. UI設計の基本は ロジック 手法パターン なのです。
  148. 148. ©2014 Intelligentnet, Inc. All rights reserved. だから、最後に言いたいこと。 •「んん~・・っ!こうだ!」とかっていきなり出すものでもない •そのページだけでお絵かきするものでもない •だから鍛錬をつめばある程度までは誰だってたどり着ける •そもそも徳永は美的センスがない(泣) •でも、日々「ロジック」と「手法」と「パターン」 を磨けば、ある程度はできるようになるのです。
  149. 149. ここから先はオマケ(時間があればやります) 興味がある人はあとで読んでみてください。 ©2014 Intelligentnet, Inc. All rights reserved.
  150. 150. おまけ おまけ1:UI設計能力を向上させるには ©2014 Intelligentnet, Inc. All rights reserved.
  151. 151. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 1.たくさんつくる
  152. 152. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 2.たくさんサイトを見る
  153. 153. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 3.ユーザー体験を重ねる
  154. 154. おまけ UI設計能力を向上させるには 3.ユーザー体験を重ねる タッチパネル接客(サービス) 銀行とか手続き ©2014 Intelligentnet, Inc. All rights reserved. ※クロスドリーム、「CROSS i(クロスアイ)」
  155. 155. おまけ UI設計能力を向上させるには 3.ユーザー体験を重ねる タッチパネル接客(サービス) 銀行とか手続き ©2014 Intelligentnet, Inc. All rights reserved. ※クロスドリーム、「CROSS i(クロスアイ)」 いつだって「ユーザー体験」
  156. 156. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 4.○○に学ぶ
  157. 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. 158. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 4.○○に学ぶ どこに何が書いてある かわかるようになった (*’▽’) でもつまんねぇ ( ゚Д゚)ヨミタクネェ ナントカカントカ株式会社沿革 ■2000年6月 創業者:軟渡寛治が当時フリーター だった関都海斗とナンカン有限会社起業。 軟渡が初代社長就任に。その後すぐに 現役員の丸山が合流。 ■2003年4月 洗濯機、食洗器の取り扱いを開始。 ■2005年3月 問題解決型家政婦「市原」を提供開始。 ■2006年7月 現住所へ本社移転(東京都港区西新橋 3-24-9 飯田ビル3F) ■2014年11月 代表取締役変更。関都海斗が社長に就 任。軟渡寛治の甥の妻の姉である夜蔵 北未が外部顧※問社と名し・て沿参革画すべて適当です
  159. 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. 160. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 4.○○に学ぶ (゚ω゚)ホゥ・・・ ナントカカントカ株式会社の歴史 ■軟渡氏。ダイヤの原石「カント」を発見 2000年6月創業。 軟渡寛治が当時フリーターだった関都 海斗とナンカン有限会社起業。軟渡が初代 社長就任に。その後すぐに現役員の丸 山が合流。 ■なぜか「洗い物」事業に 洗濯機、食洗器の取り扱いを開始。 ■さらになぜか「人」を送り込む 問題解決型家政婦「市原」を提供開始。 ■当然、手狭になりまして 現住所へ本社移転(東京都港区西新橋 3-24-9 飯田ビル3F) ■原石がダイヤに。そしてコネ採用 代表取締役変更。関都海斗が社長に就 任。軟渡寛治の甥の妻の姉である夜蔵 北未が外部顧問として参画 ※社名・沿革すべて適当です
  161. 161. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 4.雑誌に学ぶ
  162. 162. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 4.雑誌に学ぶ 雑誌には学ぶところが たくさんあります。 •テンプレートという考え方 •文書構造という考え方 •文章の割り付け •何よりも見出しの付け方
  163. 163. おまけ もちろん雑誌だけじゃないです ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには 4.雑誌に学ぶ 雑誌には学ぶところが たくさんあります。 •テンプレートという考え方 •文書構造という考え方 •文章の割り付け •何よりも見出しの付け方
  164. 164. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには を、まとめると。
  165. 165. おまけ つまり亀仙流である ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには
  166. 166. おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには こういうこと。
  167. 167. おまけ 以上ですありがとうございました。 インテリジェントネット株式会社 http://www.ini.co.jp/ インテリジェントネットFacebook https://www.facebook.com/intelligentnet ©2014 Intelligentnet, Inc. All rights reserved.

×