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.

20180425 GOJAS Meetup Spring Special - KotomiTanaka

288 views

Published on

GOJAS Meetup Spring Special にて登壇させていただきました

Published in: Design
  • Be the first to comment

  • Be the first to like this

20180425 GOJAS Meetup Spring Special - KotomiTanaka

  1. 1. 身 ! forgevision.inc K O T O M I T A N A K A に つ け よ う
  2. 2. 田 中 こ と み T A N A K A K O T O M I webデザイナー 12年目 フォージビジョン株式会社 所属
  3. 3. GOJASのロゴを作らせて いただきました!
  4. 4. デ ー タ の 視 覚 化 本日のテーマ
  5. 5. プロローグ 『デザイン』するということ
  6. 6. あなたは「デザインして」と 言われたら、何を考えますか? ?
  7. 7. かっこよくすること? 難しくて よく分からない・・ やっぱセンス? ?
  8. 8. Q.デザインとは何? デザイン = ちょっと考えてみてください
  9. 9. センス Q.デザインとは何? デザイン = 「センスあるねー」とかよく言いますよね・・・
  10. 10. センス Q.デザインとは何? ブー! デザイン =
  11. 11. Q.デザインとは何? デザイン = センス デザイナーは 感覚で作っている訳じゃ ないんです!
  12. 12. Q.デザインとは何? デザイン =
  13. 13. Q.デザインとは何? 設 計デザイン = 設計。図案。意匠。 また、製品の機能や美的造形を考慮した意匠計画。 引用: wikipedia
  14. 14. Design is not just what it looks like and feels like. Design is how it works. デザインとは、単にどのように見えるか、 どのように感じるかということではない。 どう機能するかだ。 ‐ スティーブ・ジョブズ
  15. 15. 機 能 美
  16. 16. 人間の行動をアシストした デザイン 機 能 美 =
  17. 17. = 思 い や り 機 能 美
  18. 18. では、そのルールとはなにか。
  19. 19. もくじ 3 インフォグラフィックを 作ってみよう COOKING 1 視覚デザインの 基本 ? 2 伝えたい情報には 優先順位をつける
  20. 20. 1視覚デザインの基本
  21. 21. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  22. 22. 1 . 種 類 別 は 見 や す い 人の性質を使う
  23. 23. 種類別に分けると情報が整理され、 それだけで見やすくなります それを 「近接」の法則 と呼びます
  24. 24. KOTOMI TANAKA web designer forgevision.inc 03-1234-5678 東京都千代田区フォージ町-1-2-3 BEFORE 例(名刺
  25. 25. KOTOMI TANAKA web designer forgevision.inc 03-1234-5678 東京都千代田区フォージ町-1-2-3 BEFORE 例(名刺 名刺本人の情報 会社の情報
  26. 26. KOTOMI TANAKA web designer forgevision.inc 03-1234-5678 東京都千代田区フォージ町-1-2-3 BEFORE 例(名刺 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc AFTER 名刺本人の情報 会社の情報
  27. 27. KOTOMI TANAKA web designer forgevision.inc 03-1234-5678 東京都千代田区フォージ町-1-2-3 BEFORE 例(名刺 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc AFTER
  28. 28. 2 . 整 列 は 美 し い 人の性質を使う
  29. 29. 全ての項目が視覚的に関連するように 意図的に配置するとスッキリまとまります それを 「整列」の法則 と呼びます
  30. 30. 整列の種類 左揃え 中央揃え 右揃え 両端揃え 揃えることを常に意識しましょう!
  31. 31. 整列の種類 左揃え 中央揃え 右揃え 両端揃え 揃えることを常に意識しましょう!「 整 列 」 の ご 法 度 ! 同 じ ペ ー ジ で 3 つ 以 上 使 わ な い
  32. 32. KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc BEFORE では先程の名刺を見てみると・・ ガッタガタなので整列を適用しましょう KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc AFTER
  33. 33. 人の性質を使う 3 . 緩 急 は 目 に 留 ま る
  34. 34. コントラストで楽しさを演出! 情報の組織化をつけましょう 緩急=コントラスト 私達の脳はコントラストが好きなのです
  35. 35. 緩急で楽しさを演出! 情報の組織化をつけましょう 強弱=コントラスト 私達の脳は緩急が好きなのです 「 コ ン ト ラ ス ト 」 の ご 法 度 ! 臆病になっては ならない
  36. 36. KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc AFTER 2の整列を適用した名刺に コントラストを適用してみましょう KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc BEFORE
  37. 37. KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc AFTER 2の整列を適用した名刺に コントラストを適用してみましょう KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc BEFORE 2 3 1 4 4
  38. 38. KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc AFTER 最初の状態と比べて見ましょう! KOTOMI TANAKA web designer forgevision.inc 03-1234-5678 東京都千代田区フォージ町-1-2-3 BEFORE
  39. 39. 人の性質を使う 4 . 反 復 は 一 貫 性 を 出 す
  40. 40. 色・レイアウト・装飾などを 繰り返し使うと 全体的に一体感が出て、 世界観を作ることができます 特徴的なものを 意識的に繰り返すこと 反復とは
  41. 41. 先程の名刺を並べてみます・・ KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc
  42. 42. お分かりいただけるだろうか・・・ KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc
  43. 43. 人の性質を使う 5.視覚の導線
  44. 44. 目線の動きは文字を読む時の流れに影響されますので、 日本人は主に下記を基本としています。 横書きは上から下、 左から右。 上から下 左から右 横 縦書きは上から下、 右から左。 上から下 右から左 縦
  45. 45. 主に 紙媒体 主に WEB 紙媒体では「Z型」、webでは「F型」が多いとされています。 Z型 F型
  46. 46. 動くものに目線が行く
  47. 47. に 注目してください
  48. 48. ❤ ❤❤
  49. 49. すぐに見つかりましたか? 情報が並列に並んでいると 意図したコンテンツに 注目集めることは難しいですよね
  50. 50. そういう時は動かすのが効果的です!
  51. 51. ❤ ❤ ❤❤ アニメーション
  52. 52. また、順番に動かすことで 目線を誘導することができます
  53. 53. ❤ ❤ ❤❤ アニメーション
  54. 54. ♠ ❤ ♦ ♣ ♦ ♠ ♣ ♦ ♠ ♣ ♦ ♠ ♣ ❤♠ ❤ 逆に言えば、 優先順位が低いコンテンツは 絶対に動かさないように しましょう!
  55. 55. ❤ ❤ ❤❤ アニメーション
  56. 56. ♠ ❤ ♦ ♣ ♦ ♠ ♣ ♦ ❤ ♦ ♠ ♣ ♦ ♠ ♣ ❤♠ ❤ このスペードが気になって 見せたかったものが しっかり伝わってないですよね?
  57. 57. 発表資料などでよく見かける、 優先順位が低い要素が移動しちゃう問題。 タイトル ここの内容が 優先順位が高い - 1 - タイトル ここの内容が 優先順位が高い - 2 - タイトル ここの内容が 優先順位が高い - 3 -
  58. 58. 発表資料などでよく見かける、 優先順位が低い要素が移動しちゃう問題。 タイトル ここの内容が 優先順位が高い - 1 - タイトル ここの内容が 優先順位が高い - 2 - タイトル ここの内容が 優先順位が高い - 3 -
  59. 59. 優先順位が低ければ、 思い切って 省いてしまってOK! タイトル ここの内容が 優先順位が高い タイトル ここの内容が 優先順位が高い タイトル ここの内容が 優先順位が高い
  60. 60. 人 の 性 質 を 使 
う まとめ 1. 種類別は見やすい(近接) 2. 整列は美しい(整列) 3. 緩急は目に留まる(コントラスト) 4. 反復は一貫性を出す(反復) 5. 動くものに目線が行く } デ ザ イ ン の 4 大 原 則
  61. 61. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  62. 62. 1. 色の三大要素 色を使う
  63. 63. 色の三大要素 色 相 明 度 彩 度
  64. 64. 色 相 赤、青、緑のような 色味の違いのことを表します。 色相はイメージの違いを 最も表現することが出来る属性です。
  65. 65. 明 度 色の明るさを表す属性です。 明度が高くなるごとに白に近づき、 低くなると黒に近づきます。 高 低
  66. 66. 彩 度 色の鮮やかさ・強さを表す属性です。 彩度が高くなると純色に近づき、 低くなると無彩色に近づきます。 高 低
  67. 67. 色の三大要素 色 相 明 度 彩 度
  68. 68. 色を使う 2 . 色 の 決 め 方
  69. 69. t 物体にはそれをイメージ出来る色があります。 コンセプトカラーなどを決める際は その物からイメージされる色をベースにすると より伝わりやすくなります。 秋春 冬夏
  70. 70. 色の持つイメージ(例 生命 活動的 情熱的・衝動的 破壊・暴力 家庭・仕事 自由・暖かい 深い知恵 推察力 好奇心 向上心・知識 幸福・軽快 カジュアル
  71. 71. 色の持つイメージ(例 平和・安全 冷静・誠実 清潔 若い・爽やか 穏やかさ 調和・自然 平和・バランス 協調 エキゾチック 繊細・華麗 高貴・高級 不安定
  72. 72. イメージに合わない色を使った例 春 夏 秋 冬 違和感ありますよね・・
  73. 73. 色を使う 3 . 7 0 : 2 5 : 5 の 法 則
  74. 74. まとまりやすい色数 = 3 70% 25% 5% ベースカラー : メインカラー : アクセントカラー
  75. 75. 色 を 使 う まとめ 1. 色には「三大要素」(色相・明度・彩度)がある 2. イメージにあった色を使う 3. 色は3つに絞る(70:25:5)
  76. 76. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  77. 77. タイトル 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文 ジャンプ率 本文の文字サイズに対する、 タイトルや見出しの文字サイズの比率 のことを表します。 要素から要素へ、視線がジャンプしながら 飛び移るので「ジャンプ率」と言います。
  78. 78. タイトル 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文 ジャンプ率が低い タイトル 見出し 本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文 本文本文 見出し 本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文 本文本文本文 見出し 本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文 本文本文 ジャンプ率が高い
  79. 79. イメージ 落ち着き、高級感、格調 信頼、安定、緊張 注意点 • 退屈に感じやすい • 可読性が低くなりやすい タイトル 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文 見出し 本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文 本文本文本文本文 ジャンプ率が低い
  80. 80. タイトル 見出し 本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文 本文本文 見出し 本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文 本文本文本文 見出し 本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文 本文本文 ジャンプ率が高い イメージ 躍動感、華やかさ、 若々しさ、明るさ 注意点 • 読み飛ばしをされる率が高くなる
  81. 81. ジ ャ ン プ 率 を つ け る まとめ ・イメージに合わせた比率にする ・読みやすくなるよう、  要素別にジャンプ率をつける
  82. 82. 2伝えたい情報には 優先順位をつける
  83. 83.  「目立たせたい」と思った時、 まず何をしますか? Q
  84. 84. 目立たせる = 赤
  85. 85. 目立たせる=赤 はもうやめよう
  86. 86. 確 か に 赤 は 目 立 つ この考えは間違いではありません。 しかし、必ずしもそれが正しいとも限らないのです。
  87. 87. な ぜ 赤 は 目 立 つ ? - 赤の持つイメージ-
  88. 88. 潜 在 的 に 命 の 危 険 を 感 じ る か ら 単に「優先順位が高いもの」に使うというよりかは 「注意点」や「重度のエラーメッセージ」等に 使用すると本来のイメージと合います。
  89. 89. 潜 在 的 に 命 の 危 険 を 感 じ る か ら 単に「優先順位が高いもの」に使うというよりかは 「注意点」や「重度のエラーメッセージ」等に 使用すると本来のイメージと合います。 では、赤を使わないとすると どんな方法があるのか?
  90. 90. 目立たせる方法 (赤を使わず) ・色をつける アクセントカラーを使用する ジャンプ率をつける・位置を工夫する 視覚の導線を使用する ・装飾をつける 太さ・線・飾りをつける ・サイズを変える ジャンプ率をつける
  91. 91. 適用する順番 1. サイズを変える ジャンプ率をつける 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける 3. 色をつける アクセントカラーを使用する
  92. 92. 適用する順番 1. サイズを変える 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける 3. 色をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける アクセントカラーを使用する 色 は 最 後 !
  93. 93. 日本全国 色弱・色盲 大多数の方の色の見え方と明らかに異なる色覚のこと。 3,000,000人以上
  94. 94. 色弱・色盲 大多数の方の色の見え方と明らかに異なる色覚のこと。 20人/ 日本人男性 日本人女性 500人/
  95. 95. 普通の見え方 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 元の名刺 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 要素に赤を適用
  96. 96. 色 弱 ( P 型 ) の 方 の 見 え 方 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 元の名刺 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 要素に赤を適用 P型=L錐体(赤~黄緑)が働かない色覚異常のこと
  97. 97. 色 弱 ( P 型 ) の 方 の 見 え 方 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 元の名刺 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 要素に赤を適用 P型=L錐体(赤~黄緑)が働かない色覚異常のこと 全く赤に 見えない!
  98. 98. 太 字 で 強 調 し た 場 合 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 通常の方の見え方 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 色弱(P型)の方の見え方
  99. 99. 太 字 で 強 調 し た 場 合 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 通常の方の見え方 KOTOMI TANAKA web designer 03-1234-5678 東京都千代田区フォージ町-1-2-3 forgevision.inc 色弱(P型)の方の見え方 これで誰が見ても同じになりました!
  100. 100. 適用する順番 1. サイズを変える ジャンプ率をつける 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける 3. 色をつける アクセントカラーを使用する
  101. 101. 3インフォグラフィックを 作ってみよう!
  102. 102. 3インフォグラフィックを 1. なぜ大事? 2.今日の献立 使 っ て み よ う 3.レシピ COOKING
  103. 103. インフォグラフィックが なぜ大事なのか? ?
  104. 104. インフォグラフィック インフォグラフィック(英語: infographics)とは、 情報、データ、知識を視覚的に表現したものである。 情報を素早く簡単に表現したい場面で用いられ、 標識、地図、報道、技術文書、教育などの形で使われている。 また、計算機科学や数学、統計学においても、概念的情報を 分かりやすく表現するツールとしてよく用いられる。 科学的情報の可視化にも広く適用される。 @wikipedia
  105. 105. インフォグラフィック インフォグラフィック(英語: infographics)は、 情報、データ、知識を視覚的に表現したものである。 情報を素早く簡単に表現したい場面で用いられ、 標識、地図、報道、技術文書、教育などの形で使われている。 また、計算機科学や数学、統計学においても、概念的情報を 分かりやすく表現するツールとしてよく用いられる。 科学的情報の可視化にも広く適用される。 @wikipedia 「 視 覚 的 」 と は ? 「見た」だけで解る
  106. 106. インフォグラフィック インフォグラフィック(英語: infographics)は、 情報、データ、知識を視覚的に表現したものである。 情報を素早く簡単に表現したい場面で用いられ、 標識、地図、報道、技術文書、教育などの形で使われている。 また、計算機科学や数学、統計学においても、概念的情報を 分かりやすく表現するツールとしてよく用いられる。 科学的情報の可視化にも広く適用される。 @wikipedia 「見た」だけで解る ピクトグラム 図・グラフ など
  107. 107. 文字だけの場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4
  108. 108. 文字だけの場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4 考えさせてはいけない! 「理解する」までが長ければ長いだけ、 人はストレスを感じます。 人間は”余計なこと”を考えるのが億劫な動物なんですね。 も や も や 不便さを感じるストレスを感じる =
  109. 109. 「視覚的」にした場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4 脳 直
  110. 110. 「視覚的」にした場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4 脳 直 ストレスフリーの 優しい世界
  111. 111. 文字だけの場合 ピクトグラムや図を 用いた場合 理解するまで時間がかかる😭 脳直で理解できる☺ 😭 言葉が通じる前提 😭 読む気になれない 😭 文字量分のスペースが必要 ☺ 言葉が分からなくて も理解できる ☺ 情報を整理しやすい ☺ スペースがなくてもOK
  112. 112. インフォグラフィックの 必 要 項 目 ピクトグラム 図・グラフ など ストーリー インパクト
  113. 113. インフォグラフィックを 見てみよう
  114. 114. 文京区版 地震 防災マニュアル 参照元:http://www.u-bunkyo.ac.jp/faculty/business/2016/03/post-27.html
  115. 115. ANA歴代CA制服年表 1955∼2015 参照元: https://www.ana.co.jp/travelandlife/infographics/ vol02/
  116. 116. よくわかる!電力自由化の全て 参照元: http://kakaku.com/energy/liberalization/about.html
  117. 117. 本日の献立 COOKING
  118. 118. ヨーグルトに関する インフォグラフィックを 作ってみたいと思います COOKING
  119. 119. COOKING があるページは このヨーグルトのインフォグラフィックを 作っている工程です COOKING
  120. 120. インフォグラフィックの レ シ ピ COOKING
  121. 121. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  122. 122. 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6 データ解析 インフォグラフィックのレシピ 視覚化
  123. 123. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  124. 124. レ シ ピ STEP1 利 用 目 的 まずはじめに3つの項目を 確認しましょう Why? - なぜ - なぜインフォグラフィック を用いるのか、 用途や目的を 明らかにしておきましょう Where? - どこで - どこで公開するのかを 明らかにしておきましょう 場所によって 作成するサイズなど 変わります Who? - 誰に - ターゲットを 明らかにしましょう ターゲットによって 見せ方が 変わります
  125. 125. レ シ ピ STEP1 利 用 目 的 ヨーグルトのインフォグラフィックを 作る目的を決める Where? - どこで - webで公開 (スマホでの閲覧を想定) Who? - 誰に - ・健康を気にする人 ・若干女性向け COOKING Why? - なぜ - 効果別でまとめられて いるのが見当たらなか ったから
  126. 126. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  127. 127. レ シ ピ STEP2 題 材 COOKING ヨーグルトについての調査 ヨーグルトの意識調査 ヨーグルトの効果について etc..
  128. 128. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  129. 129. レ シ ピ STEP3 リ サ COOKING ー チ
  130. 130. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  131. 131. レ シ ピ STEP4 内 容 の 選 定 1.情報整理 ・ターゲットに合った内容か? ・ストーリーはどうするか? ・一番伝えたい内容はどれか? 2.補足情報の追加 インフォグラフィックは一枚絵の為、 本題が理解できるように補足情報も記載しておく
  132. 132. レ シ ピ STEP4 内 容 の 選 定 3.共通フォーマットを用意 ・タイトル ・ソース出典 ・公開/制作クレジット 4.データをまとめる Wordなどのテキスト文書へまとめる
  133. 133. COOKING レ シ ピ STEP4 内 容 の 選 定
  134. 134. レ シ ピ STEP4 内 容 の 選 定 COOKING ターゲットに合った内容か? 「購買数は女性の比率が高い」という調査結果があったため、合っていると言える。 ストーリーはどうするか? ヨーグルトの意識調査結果をもとに一般的に「効果については意識が低い」ことの 裏付け提示、その後効果について説明。 一番伝えたい内容は? 「整腸」以外の効果もあること。味だけでなく体質改善を意識して選んでほしい。
  135. 135. レ シ ピ STEP4 内 容 の 選 定 COOKING 補足情報の追加 ・日本でのヨーグルトの普及時期 ・効果別の乳酸菌 共通フォーマット [タイトル] あなたは何をたべる?効果で選ぶヨーグルト [ソース出典] まとめに記載 [公開/制作クレジット] KOTOMI TANAKA (forgevision.inc)
  136. 136. レ シ ピ STEP4 内 容 の 選 定 COOKING 資料にまとめる デザイナーに分かるフォーマットであれば、 この段階でのデータのグラフ化は必要ありません (グラフや図解で渡す場合、変更可であることを伝えてください)
  137. 137. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  138. 138. レ シ ピ STEP5 デ ザ イ ン 1.デザイナーが考えること ・ターゲットに合うテイスト ・用途にあうレイアウト ・図の選定 2.ラフ作成 手描きやワイヤーフレームを使って全体の構成 を考える 3.清書
  139. 139. レ シ ピ STEP5 デ ザ イ ン COOKING ターゲットに合うテイスト 考えた結果 レイアウト WEB用。 スマホで閲覧しやすい 縦型レイアウト 図の選定 女性が好みやすい柔らかいフォントを使用。ヨーグルトをイメージしやすい配色。 ・お腹痛い時何を食べる?は 比較しやすい縦型棒グラフ ・効果は知っている?は (レイアウトを考慮)円グラフ
  140. 140. レ シ ピ STEP5 デ ザ イ ン ラフ案作成 COOKING
  141. 141. レ シ ピ STEP5 デ ザ イ ン 清 書 COOKING
  142. 142. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  143. 143. レ シ ピ STEP6 検 証 最後にもう一度内容を確認し、 照らし合わせます ・データと差異がないか ・視覚化したストーリーに差異はないか ・ターゲットのイメージに差異はないか ・共通フォーマットは入っているか
  144. 144. 1. タイトルと追加情報 COOKING レ シ ピ STEP6 検 証 データ 視覚化
  145. 145. レ シ ピ STEP6 検 証 2. 調査結果グラフ COOKING Q. お腹が痛い時、何を食べる? データ 視覚化
  146. 146. レ シ ピ STEP6 検 証 2. 調査結果グラフ COOKING Q. ヨーグルトの効果を知っている? 視覚化データ
  147. 147. レ シ ピ STEP6 検 証 データ 3. 効果別のヨーグルト一覧 COOKING
  148. 148. レ シ ピ STEP6 検 証 視覚化 3. 効果別のヨーグルト一覧 COOKING
  149. 149. レ シ ピ STEP6 検 証 視覚化 3. 効果別のヨーグルト一覧 COOKING
  150. 150. レ シ ピ STEP6 検 証 COOKING 4. 引用元とクレジット データ 視覚化
  151. 151. BEFORE
  152. 152. BEFORE 見る 1 2 読む ・・・ 考える 3 ! 理解 4
  153. 153. BEFORE 2 読む ・・・ 考える 3 見る 1 ! 理解 4 脳 直
  154. 154. AFTER
  155. 155. インフォグラフィックの ツール - おまけ -
  156. 156. piktochart https://piktochart.com/ easel.ly https://www.easel.ly/ - おまけ -
  157. 157. Adobe Project Lincoln リリース未定 引用: https://料理撮影.net/adobe-sensei/ProjectLincoln - おまけ -
  158. 158. 1 視覚デザインの 基本 まとめ 3 インフォグラフィックを 作ってみよう 2 伝えたい情報には 優先順位をつける ・人の性質を理解し、設計に  活かそう ・色はイメージに合わせて  選定し、3色にまとめよう ・ジャンプ率もイメージづける  大切な要素 ・デザイナーに追加要素を依頼  する時は、色指定ではなく、  「優先順」を伝えよう! ・ピクトグラムや図を使用し  脳直でストレスフリーな  デザインにしよう ・ストーリーとインパクトも  忘れずに! ・便利なツールがあるよ ・色は最後!
  159. 159. デ ー タ の 視 覚 化 本日のテーマ
  160. 160. 人間の行動をアシストした デザイン 機 能 美 = 思 い や り
  161. 161. 1 視覚デザインの 基本 今 日 の ま と め 3 インフォグラフィックを 使ってみよう 2 伝えたい情報には 優先順位をつける ・人の性質を利用しよう! ・色はイメージ合わせて選定し  3つに絞るとまとまりやすい ・イメージ合わせたジャンプ率 色で指示するのではなく 「優先順位」でお願いします ・ピクトグラムや図を使って  脳直で伝えよう ・ストーリーとインパクトを  忘れずに! ・簡単に作れるツールもあるよ ご清聴ありがとうございました! KOTOMI TANAKA forgevision.inc 『伝わる』デザインを身につけよう 〜デザインの基礎からインフォグラフィックまで〜

×