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.

20171107 cwt kotomi_tanaka

525 views

Published on

Cloudera World Tokyo 2017 にて登壇させていただきました。

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

20171107 cwt kotomi_tanaka

  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. デ ー タ の 視 覚 化 本日のテーマ
  4. 4. プロローグ 『デザイン』するということ
  5. 5. あなたは「デザインして」と 言われたら、何を考えますか? ?
  6. 6. かっこよくすること? 難しくて よく分からない・・ やっぱセンス? ?
  7. 7. Q.デザインとは何? デザイン = ちょっと考えてみてください
  8. 8. センス Q.デザインとは何? デザイン = 「センスあるねー」とかよく言いますよね・・・
  9. 9. センス Q.デザインとは何? ブー! デザイン =
  10. 10. Q.デザインとは何? デザイン = センス デザイナーは 感覚で作っている訳じゃ ないんです!
  11. 11. Q.デザインとは何? デザイン =
  12. 12. Q.デザインとは何? 設 計デザイン = 設計。図案。意匠。 また、製品の機能や美的造形を考慮した意匠計画。 引用: wikipedia
  13. 13. Design is not just what it looks like and feels like. Design is how it works. デザインとは、単にどのように見えるか、 どのように感じるかということではない。 どう機能するかだ。 ‐ スティーブ・ジョブズ
  14. 14. 機 能 美
  15. 15. 人間の行動をアシストした デザイン 機 能 美 =
  16. 16. 人間の行動をアシストした デザイン 機 能 美 = 思 い や り
  17. 17. では、そのルールとはなにか。
  18. 18. もくじ 3 インフォグラフィックを 作ってみよう COOKING 1 視覚デザインの 基本 ? 2 伝えたい情報には 優先順位をつける
  19. 19. 1視覚デザインの基本
  20. 20. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  21. 21. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  22. 22. 1 . 種 類 別 は 見 や す い 人の性質を使う
  23. 23. 種類別に分けると情報が整理され、 それだけで見やすくなります それを 「近接」の法則 と呼びます
  24. 24. BEFORE 例(名刺
  25. 25. BEFORE 例(名刺
  26. 26. BEFORE 例(名刺 AFTER
  27. 27. BEFORE 例(名刺 AFTER
  28. 28. 2 . 整 列 は 美 し い 人の性質を使う
  29. 29. 全ての項目が視覚的に関連するように 意図的に配置するとスッキリまとまります それを 「整列」の法則 と呼びます
  30. 30. 整列の種類 左揃え 中央揃え 右揃え 両端揃え 揃えることを常に意識しましょう!
  31. 31. 整列の種類 左揃え 中央揃え 右揃え 両端揃え 揃えることを常に意識しましょう!「 整 列 」 の ご 法 度 ! 同 じ ペ ー ジ で 3 つ 以 上 使 わ な い
  32. 32. BEFORE では先程の名刺を見てみると・・ ガッタガタなので整列を適用しましょう AFTER
  33. 33. 人の性質を使う 3 . 緩 急 は 目 に 留 ま る
  34. 34. コントラストで楽しさを演出! 情報の組織化をつけましょう 緩急=コントラスト 私達の脳はコントラストが好きなのです
  35. 35. 緩急で楽しさを演出! 情報の組織化をつけましょう 強弱=コントラスト 私達の脳は緩急が好きなのです 「 コ ン ト ラ ス ト 」 の ご 法 度 ! 臆病になっては ならない
  36. 36. AFTER 2の整列を適用した名刺に コントラストを適用してみましょう BEFORE
  37. 37. AFTER 2の整列を適用した名刺に コントラストを適用してみましょう BEFORE 2 3 1 4 4
  38. 38. AFTER 最初の状態と比べて見ましょう! BEFORE
  39. 39. 人の性質を使う 4 . 反 復 は 一 貫 性 を 出 す
  40. 40. 色・レイアウト・装飾などを 繰り返し使うと 全体的に一体感が出て、 世界観を作ることができます 特徴的なものを 意識的に繰り返すこと 反復とは
  41. 41. 先程の名刺を並べてみます・・
  42. 42. お分かりいただけるだろうか・・・
  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. 発表資料などでよく見かける、 優先順位が低い要素が移動しちゃう問題。
  58. 58. 発表資料などでよく見かける、 優先順位が低い要素が移動しちゃう問題。
  59. 59. 優先順位が低ければ、 思い切って 省いてしまってOK!
  60. 60. 人 の 性 質 を 使 
う まとめ 1. 種類別は見やすい(近接) 2. 整列は美しい(整列) 3. 緩急は目に留まる(コントラスト) 4. 反復は一貫性を出す(反復) 5. 動くものに目線が行く デ ザ イ ン の 4 大 原 則
  61. 61. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  62. 62. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  63. 63. 1. 色の三大要素 色を使う
  64. 64. 色の三大要素
  65. 65. 赤、青、緑のような 色味の違いのことを表します。 色相はイメージの違いを 最も表現することが出来る属性です。
  66. 66. 色の明るさを表す属性です。 明度が高くなるごとに白に近づき、 低くなると黒に近づきます。
  67. 67. 色の鮮やかさ・強さを表す属性です。 彩度が高くなると純色に近づき、 低くなると無彩色に近づきます。
  68. 68. 色の三大要素
  69. 69. 色を使う 2 . 色 の 決 め 方
  70. 70. 物体にはそれをイメージ出来る色があります。 コンセプトカラーなどを決める際は その物からイメージされる色をベースにすると より伝わりやすくなります。 秋春 冬夏
  71. 71. 色の持つイメージ(例
  72. 72. 色の持つイメージ(例
  73. 73. イメージに合わない色を使った例 春 夏 秋 冬 違和感ありますよね・・
  74. 74. 色を使う 3 . 7 0 : 2 5 : 5 の 法 則
  75. 75. まとまりやすい色数 = 3 70% 25% 5% ベースカラー : メインカラー : アクセントカラー
  76. 76. 色 を 使 う まとめ 1. 色には「三大要素」(色相・明度・彩度)がある 2. イメージにあった色を使う 3. 色は3つに絞る(70:25:5)
  77. 77. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  78. 78. 1視覚デザイン の基本 人の性質を使う 色を使う ジャンプ率を つける
  79. 79. 本文の文字サイズに対する、 タイトルや見出しの文字サイズの比率 のことを表します。 要素から要素へ、視線がジャンプしながら 飛び移るので「ジャンプ率」と言います。
  80. 80. ジャンプ率が低い ジャンプ率が高い
  81. 81. イメージ 落ち着き、高級感、格調 信頼、安定、緊張 注意点 • 退屈に感じやすい • 可読性が低くなりやすい ジャンプ率が低い
  82. 82. ジャンプ率が高い イメージ 躍動感、華やかさ、 若々しさ、明るさ 注意点 • 読み飛ばしをされる率が高くなる
  83. 83. ジ ャ ン プ 率 を つ け る まとめ ・イメージに合わせた比率にする ・読みやすくなるよう、  要素別にジャンプ率をつける
  84. 84. 2伝えたい情報には 優先順位をつける
  85. 85.  「目立たせたい」と思った時、 まず何をしますか? Q
  86. 86. 目立たせる = 赤
  87. 87. 目立たせる=赤 はもうやめよう
  88. 88. 確 か に 赤 は 目 立 つ この考えは間違いではありません。 しかし、必ずしもそれが正しいとも限らないのです。
  89. 89. な ぜ 赤 は 目 立 つ ? - 赤の持つイメージ-
  90. 90. 潜 在 的 に 命 の 危 険 を 感 じ る か ら 単に「優先順位が高いもの」に使うというよりかは 「注意点」や「重度のエラーメッセージ」等に 使用すると本来のイメージと合います。
  91. 91. 潜 在 的 に 命 の 危 険 を 感 じ る か ら 単に「優先順位が高いもの」に使うというよりかは 「注意点」や「重度のエラーメッセージ」等に 使用すると本来のイメージと合います。 では、赤を使わないとすると どんな方法があるのか?
  92. 92. 目立たせる方法 (赤を使わず) ・色をつける アクセントカラーを使用する ジャンプ率をつける・位置を工夫する 視覚の導線を使用する ・装飾をつける 太さ・線・飾りをつける ・サイズを変える ジャンプ率をつける
  93. 93. 適用する順番 1. サイズを変える ジャンプ率をつける 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける 3. 色をつける アクセントカラーを使用する
  94. 94. 適用する順番 1. サイズを変える 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける 3. 色をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける アクセントカラーを使用する 色 は 最 後 !
  95. 95. 日本全国 色弱・色盲 大多数の方の色の見え方と明らかに異なる色覚のこと。 3,000,000人以上
  96. 96. 色弱・色盲 大多数の方の色の見え方と明らかに異なる色覚のこと。 20人/ 日本人男性 日本人女性 500人/
  97. 97. 普通の見え方 元の名刺 要素に赤を適用
  98. 98. 色 弱 ( P 型 ) の 方 の 見 え 方 元の名刺 要素に赤を適用 P型=L錐体(赤~黄緑)が働かない色覚異常のこと
  99. 99. 色 弱 ( P 型 ) の 方 の 見 え 方 元の名刺 要素に赤を適用 P型=L錐体(赤~黄緑)が働かない色覚異常のこと 全く赤に 見えない!
  100. 100. 太 字 で 強 調 し た 場 合 KOTOMI TANAKA 通常の方の見え方 KOTOMI TANAKA 色弱(P型)の方の見え方
  101. 101. 太 字 で 強 調 し た 場 合 KOTOMI TANAKA 通常の方の見え方 KOTOMI TANAKA 色弱(P型)の方の見え方 これで誰が見ても同じになりました!
  102. 102. 適用する順番 1. サイズを変える ジャンプ率をつける 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける 3. 色をつける アクセントカラーを使用する
  103. 103. 3インフォグラフィックを 作ってみよう!
  104. 104. 3インフォグラフィックを 1. なぜ大事? 2.今日の献立 作 っ て み よ う 3.レシピ COOKING
  105. 105. インフォグラフィックが なぜ大事なのか? ?
  106. 106. インフォグラフィック インフォグラフィック(英語: infographics)とは、 情報、データ、知識を視覚的に表現したものである。 情報を素早く簡単に表現したい場面で用いられ、 標識、地図、報道、技術文書、教育などの形で使われている。 また、計算機科学や数学、統計学においても、概念的情報を 分かりやすく表現するツールとしてよく用いられる。 科学的情報の可視化にも広く適用される。 @wikipedia
  107. 107. インフォグラフィック インフォグラフィック(英語: infographics)は、 情報、データ、知識を視覚的に表現したものである。 情報を素早く簡単に表現したい場面で用いられ、 標識、地図、報道、技術文書、教育などの形で使われている。 また、計算機科学や数学、統計学においても、概念的情報を 分かりやすく表現するツールとしてよく用いられる。 科学的情報の可視化にも広く適用される。 @wikipedia 「 視 覚 的 」 と は ? 「見た」だけで解る
  108. 108. インフォグラフィック インフォグラフィック(英語: infographics)は、 情報、データ、知識を視覚的に表現したものである。 情報を素早く簡単に表現したい場面で用いられ、 標識、地図、報道、技術文書、教育などの形で使われている。 また、計算機科学や数学、統計学においても、概念的情報を 分かりやすく表現するツールとしてよく用いられる。 科学的情報の可視化にも広く適用される。 @wikipedia 「見た」だけで解る ピクトグラム 図・グラフ など
  109. 109. 文字だけの場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4
  110. 110. 文字だけの場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4 考えさせてはいけない! 「理解する」までが長ければ長いだけ、 人はストレスを感じます。 人間は”余計なこと”を考えるのが億劫な動物なんですね。 も や も や 不便さを感じるストレスを感じる =
  111. 111. 「視覚的」にした場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4 脳 直
  112. 112. 「視覚的」にした場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4 脳 直 ストレスフリーの 優しい世界
  113. 113. 文字だけの場合 ピクトグラムや図を 用いた場合 理解するまで時間がかかる😭 脳直で理解できる☺ 😭 言葉が通じる前提 😭 読む気になれない 😭 文字量分のスペースが必要 ☺ 言葉が分からなくて も理解できる ☺ 情報を整理しやすい ☺ スペースがなくてもOK
  114. 114. インフォグラフィックの 必 要 項 目 ピクトグラム 図・グラフ など ストーリー インパクト
  115. 115. インフォグラフィックを 見てみよう
  116. 116. 本日の献立 COOKING
  117. 117. ハロウィンに関する インフォグラフィックを 作ってみたいと思います COOKING
  118. 118. COOKING があるページは このハロウィンインフォグラフィックを 作っている工程です COOKING
  119. 119. インフォグラフィックの レ シ ピ COOKING
  120. 120. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  121. 121. 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6 データ解析 視覚化 インフォグラフィックのレシピ
  122. 122. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  123. 123. レ シ ピ STEP1 利 用 目 的 まずはじめに3つの項目を 確認しましょう Why? - なぜ - なぜインフォグラフィック を用いるのか、 用途や目的を 明らかにしておきましょう Where? - どこで - どこで公開するのかを 明らかにしておきましょう 場所によって 作成するサイズなど 変わります Who? - 誰に - ターゲットを 明らかにしましょう ターゲットによって 見せ方が 変わります
  124. 124. レ シ ピ STEP1 利 用 目 的 ハロウィンのインフォグラフィックを 作る目的を決める Where? - どこで - webで公開 Who? - 誰に - 10代・20代の 若者を中心 COOKING Why? - なぜ - ・ハロウィンが  丁度終わった頃の登壇  でタイムリーだから ・ごみ問題の  注意喚起をしたいから
  125. 125. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  126. 126. レ シ ピ STEP2 題 材 COOKING 2017年のハロウィン 今年の経済効果 どんなコスチュームが多かったのか 日本のハロウィンのゴミ問題 etc..
  127. 127. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  128. 128. レ シ ピ STEP3 リ サ COOKING ー チ
  129. 129. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  130. 130. レ シ ピ STEP4 内 容 の 選 定 1.情報整理 ・ターゲットに合った内容か? ・ストーリーはどうするか? ・一番伝えたい内容はどれか? 2.補足情報の追加 インフォグラフィックは一枚絵の為、 本題が理解できるように補足情報も記載しておく
  131. 131. レ シ ピ STEP4 内 容 の 選 定 3.共通フォーマットを用意 ・タイトル ・ソース出典 ・公開/制作クレジット 4.データをまとめる Wordなどのテキスト文書へまとめる
  132. 132. COOKING レ シ ピ STEP4 内 容 の 選 定
  133. 133. レ シ ピ STEP4 内 容 の 選 定 COOKING ターゲットに合った内容か? 実際の参加人数が多い年代をターゲットにしている為合っていると言える。 ストーリーはどうするか? 経済効果のポジティブな内容から入り、人気だったコスチュームランキングなど で興味を引く。読んだ人の記憶に残るよう最後にゴミ問題の注意喚起でクローズ。 一番伝えたい内容は? 経済効果が高い割にハロウィン反対派が多いわけ
  134. 134. レ シ ピ STEP4 内 容 の 選 定 COOKING 補足情報の追加 ・ハロウィンの起源 ・トリック・オア・トリートの意味 ・ジャック・オー・ランタンの意味 ・ダック・アップルの意味 ・3年間の経済効果額(2016年・2015年) 共通フォーマット [タイトル] HALLOWEEN 2017 [ソース出典] まとめに記載 [公開/制作クレジット] KOTOMI TANAKA (forgevision.inc)
  135. 135. レ シ ピ STEP4 内 容 の 選 定 COOKING 資料にまとめる デザイナーに分かるフォーマットであれば、 この段階でのデータのグラフ化は必要ありません (グラフや図解で渡す場合、変更可であることを伝えてください)
  136. 136. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  137. 137. レ シ ピ STEP5 デ ザ イ ン 1.デザイナーが考えること ・ターゲットに合うテイスト ・用途にあうレイアウト ・図の選定 2.ラフ作成 手描きやワイヤーフレームを使って全体の構成 を考える 3.清書
  138. 138. レ シ ピ STEP5 デ ザ イ ン COOKING ターゲットに合うテイスト 考えた結果 レイアウト WEB用。 スマホで閲覧しやすい 縦型レイアウト 図の選定 ・経済効果は 比較しやすい縦型棒グラフ ・年代別は円グラフ (レイアウトを考慮) ・賛成/反対は横型棒グラフ (色分けして見やすい為) 10代20代の若者が好むPOPでかわいいイラストを採用
  139. 139. レ シ ピ STEP5 デ ザ イ ン ラフ案作成 COOKING
  140. 140. 5 4 3 黒猫風 キャリアウーマン風 SWAT SWAT 風 30代 40代 50代 60代 12.4% 87.6% 8.2 % 91.8% 5.8 % 94.2% 2.9 % 97.1% 日本のハロウィンにQ 賛成? Y E S N O 10代 20代 30代 40代 50代 60代 68.6 % 64.8 % 56.1 % 41.2 % 37.7 % 27.6 % 31.4 % 35.2 % 43.9 % 58.8 % 62.3 % 72.4 % ハロウィンの問題点 経済効果が高い割に反対派が5割も… 原 因 は マ ナ ー の 悪 さ ! 仮装パーティやイベントの後の ゴミが放置されていることが 問題になっています。 各自責任を持って 持ち帰りましょう! - KOTOMI TANAKA - Source 楽天市場「2017 年 ハロウィン コスチュームランキング」を発表|楽天株式会社のプレスリリース https://prtimes.jp/main/html/rd/p/000000595.000005889.html ハロウィンと出会いに関する意識調査|ニュースリリース|結婚相談所なら楽天オーネット https://onet.rakuten.co.jp/company/release/2017/20170928.html 2017 年の「ハロウィン」の推計市場規模は前年比約3%減の約1305億円 http://www.kinenbilabo.jp/?p=607 2017 年 ハロウィンに関する調査(マクロミル調べ)|株式会社マクロミルのプレスリリース https://prtimes.jp/main/html/rd/p/000000358.000000624.html 2017 年ハロウィンの経済効果・市場規模は何億円?クリスマスとの差は? - 経済・政治 - みんなのお金ドットコム | お金のコトをもっと身近に https://minnkane.com/news/3423 レ シ ピ STEP5 デ ザ イ ン 清 書 Halloween 2017 JAPAN 毎年 10 月 31 日に行われる、 古代ケルト人が起源と考えられている祭のこと。 もともとは秋の収穫を祝い、悪霊などを追い出す宗教的な 意味合いのある行事であったが、現代では特に アメリカ合衆国で民間行事として定着し、 祝祭本来の宗教的な意味合いはほとんどなくなっている。 ハロウィン とは? ジャック・オー・ランタン トリック オア トリート 「ごちそうをくれないと、いたずらしちゃうぞ」 と言う意味。唱えながら家々を訪ね、   菓子を集めて回る習慣。 カボチャをくりぬき、 ナイフで目・鼻・口 を つけ、内側に 火のついたろうそくを 立てるもの。 ダック・アップル 水を入れた大きめのたらいに リンゴを浮かべ、手を使わずに 口でくわえて取るゲーム。 20152016 1345億円 1100億円 1305億円 2017 経済効果 億円1305 昨年よりも 3 % ダウン 意識調査 仮装したい と思っている人Q 1/ 10( ベース:全体 / n=2,000 ) 仮装コスチューム ランキング ( 楽天市場しらべ ) 4 3 2 1 マリオ風 / ルイージ風 L M 不思議の国のアリス風 黒猫風 仮装したいと答えた人 年 代 別 20代 30代 40代 50代 10代 21.4% 78.6% 21.7% 78.3% 12.4% 87.6% 8.2 % 91.8% 5.8 % 94.2% COOKING
  141. 141. インフォグラフィックのレシピ 利用目的STEP1 題材STEP2 リサーチSTEP3 内容の選定STEP4 デザインSTEP5 検証STEP6
  142. 142. レ シ ピ STEP6 検 証 最後にもう一度内容を確認し、 照らし合わせます ・データと差異がないか ・視覚化したストーリーに差異はないか ・ターゲットのイメージに差異はないか ・共通フォーマットは入っているか
  143. 143. 1. タイトルと追加情報 Halloween 2017 JAPAN 毎年 10 月 31 日に行われる、 古代ケルト人が起源と考えられている祭のこと。 もともとは秋の収穫を祝い、悪霊などを追い出す宗教的な 意味合いのある行事であったが、現代では特に アメリカ合衆国で民間行事として定着し、 祝祭本来の宗教的な意味合いはほとんどなくなっている。 ハロウィン とは? ジャック・オー・ランタン トリック オア トリート 「ごちそうをくれないと、いたずらしちゃうぞ」 と言う意味。唱えながら家々を訪ね、   菓子を集めて回る習慣。 カボチャをくりぬき、 ナイフで目・鼻・口 を つけ、内側に 火のついたろうそくを 立てるもの。 ダック・アップル 水を入れた大きめのたらいに リンゴを浮かべ、手を使わずに 口でくわえて取るゲーム。 20152016 1345億円 1100億円 1305億円 2017 経済効果 億円1305 昨年よりも 3 % ダウン 意識調査 COOKING レ シ ピ STEP6 検 証 データ 視覚化
  144. 144. Halloween 2017 JAPAN 毎年 10 月 31 日に行われる、 古代ケルト人が起源と考えられている祭のこと。 もともとは秋の収穫を祝い、悪霊などを追い出す宗教的な 意味合いのある行事であったが、現代では特に アメリカ合衆国で民間行事として定着し、 祝祭本来の宗教的な意味合いはほとんどなくなっている。 ハロウィン とは? ジャック・オー・ランタン トリック オア トリート 「ごちそうをくれないと、いたずらしちゃうぞ」 と言う意味。唱えながら家々を訪ね、   菓子を集めて回る習慣。 カボチャをくりぬき、 ナイフで目・鼻・口 を つけ、内側に 火のついたろうそくを 立てるもの。 ダック・アップル 水を入れた大きめのたらいに リンゴを浮かべ、手を使わずに 口でくわえて取るゲーム。 20152016 1345億円 1100億円 1305億円 2017 経済効果 億円1305 昨年よりも 3 % ダウン 意識調査 仮装したい と思っている人Q 1/ 10( ベース:全体 / n=2,000 ) 仮装コスチューム 仮装したいと答えた人 レ シ ピ STEP6 検 証 データ 2. 経済効果 視覚化 COOKING
  145. 145. 毎年 10 月 31 日に行われる、 古代ケルト人が起源と考えられている祭のこと。 もともとは秋の収穫を祝い、悪霊などを追い出す宗教的な 意味合いのある行事であったが、現代では特に アメリカ合衆国で民間行事として定着し、 祝祭本来の宗教的な意味合いはほとんどなくなっている。 ジャック・オー・ランタン   菓子を集めて回る習慣。 カボチャをくりぬき、 ナイフで目・鼻・口 を つけ、内側に 火のついたろうそくを 立てるもの。 ダック・アップル 水を入れた大きめのたらいに リンゴを浮かべ、手を使わずに 口でくわえて取るゲーム。 20152016 1345億円 1100億円 1305億円 2017 経済効果 億円1305 昨年よりも 3 % ダウン 意識調査 仮装したい と思っている人Q 1/ 10( ベース:全体 / n=2,000 ) 仮装コスチューム ランキング ( 楽天市場しらべ ) 2 1 マリオ風 / ルイージ風 L M 不思議の国のアリス風 仮装したいと答えた人 年 代 別 20代 10代 21.4% 78.6% 21.7% 78.3% レ シ ピ STEP6 検 証 データ 3. 意識調査 視覚化 COOKING
  146. 146. 5 4 3 黒猫風 キャリアウーマン風 SWAT SWAT 風 40代 50代 60代 12.4% 87.6% 8.2 % 91.8% 5.8 % 94.2% 2.9 % 97.1% 日本のハロウィンにQ 賛成? Y E S N O 10代 20代 30代 40代 50代 60代 68.6 % 64.8 % 56.1 % 41.2 % 37.7 % 27.6 % 31.4 % 35.2 % 43.9 % 58.8 % 62.3 % 72.4 % ハロウィンの問題点 経済効果が高い割に反対派が5割も… 原 因 は マ ナ ー の 悪 さ ! 仮装パーティやイベントの後の ゴミが放置されていることが レ シ ピ STEP6 検 証 データ 4. 賛成か反対か 視覚化 COOKING
  147. 147. 日本のハロウィンにQ 賛成? Y E S N O 10代 20代 30代 40代 50代 60代 68.6 % 64.8 % 56.1 % 41.2 % 37.7 % 27.6 % 31.4 % 35.2 % 43.9 % 58.8 % 62.3 % 72.4 % ハロウィンの問題点 経済効果が高い割に反対派が5割も… 原 因 は マ ナ ー の 悪 さ ! 仮装パーティやイベントの後の ゴミが放置されていることが 問題になっています。 各自責任を持って 持ち帰りましょう! Source 楽天市場「2017 年 ハロウィン コスチュームランキング」を発表|楽天株式会社のプレスリリース https://prtimes.jp/main/html/rd/p/000000595.000005889.html ハロウィンと出会いに関する意識調査|ニュースリリース|結婚相談所なら楽天オーネット https://onet.rakuten.co.jp/company/release/2017/20170928.html 2017 年の「ハロウィン」の推計市場規模は前年比約3%減の約1305億円 http://www.kinenbilabo.jp/?p=607 2017 年 ハロウィンに関する調査(マクロミル調べ)|株式会社マクロミルのプレスリリース https://prtimes.jp/main/html/rd/p/000000358.000000624.html 2017 年ハロウィンの経済効果・市場規模は何億円?クリスマスとの差は? - 経済・政治 - みんなのお金ドットコム | お金のコトをもっと身近に https://minnkane.com/news/3423 レ シ ピ STEP6 検 証 視覚化 COOKING データ 5.ごみ問題の注意喚起
  148. 148. 経済効果が高い割に反対派が5割も… 原 因 は マ ナ ー の 悪 さ ! 仮装パーティやイベントの後の ゴミが放置されていることが 問題になっています。 各自責任を持って 持ち帰りましょう! - KOTOMI TANAKA - Source 楽天市場「2017 年 ハロウィン コスチュームランキング」を発表|楽天株式会社のプレスリリース https://prtimes.jp/main/html/rd/p/000000595.000005889.html ハロウィンと出会いに関する意識調査|ニュースリリース|結婚相談所なら楽天オーネット https://onet.rakuten.co.jp/company/release/2017/20170928.html 2017 年の「ハロウィン」の推計市場規模は前年比約3%減の約1305億円 http://www.kinenbilabo.jp/?p=607 2017 年 ハロウィンに関する調査(マクロミル調べ)|株式会社マクロミルのプレスリリース https://prtimes.jp/main/html/rd/p/000000358.000000624.html 2017 年ハロウィンの経済効果・市場規模は何億円?クリスマスとの差は? - 経済・政治 - みんなのお金ドットコム | お金のコトをもっと身近に https://minnkane.com/news/3423 レ シ ピ STEP6 検 証 視覚化 COOKING データ 6. 引用元とクレジット
  149. 149. BEFORE
  150. 150. BEFORE 見る 1 2 読む ・・・ 考える 3 ! 理解 4
  151. 151. BEFORE 見る 1 2 読む ・・・ 考える 3 ! 理解 4 脳 直
  152. 152. AFTER Halloween 2017 JAPAN 毎年 10 月 31 日に行われる、 古代ケルト人が起源と考えられている祭のこと。 もともとは秋の収穫を祝い、悪霊などを追い出す宗教的な 意味合いのある行事であったが、現代では特に アメリカ合衆国で民間行事として定着し、 祝祭本来の宗教的な意味合いはほとんどなくなっている。 ハロウィン とは? ジャック・オー・ランタン トリック オア トリート 「ごちそうをくれないと、いたずらしちゃうぞ」 と言う意味。唱えながら家々を訪ね、   菓子を集めて回る習慣。 カボチャをくりぬき、 ナイフで目・鼻・口 を つけ、内側に 火のついたろうそくを 立てるもの。 ダック・アップル 水を入れた大きめのたらいに リンゴを浮かべ、手を使わずに 口でくわえて取るゲーム。 20152016 1345億円 1100億円 1305億円 2017 経済効果 億円1305 昨年よりも 3 % ダウン 意識調査 仮装したい と思っている人Q 1/ 10( ベース:全体 / n=2,000 ) 仮装コスチューム ランキング ( 楽天市場しらべ ) 4 3 2 1 マリオ風 / ルイージ風 L M 不思議の国のアリス風 黒猫風 キャリアウーマン風 SWAT 仮装したいと答えた人 年 代 別 20代 30代 40代 50代 60代 10代 21.4% 78.6% 21.7% 78.3% 12.4% 87.6% 8.2 % 91.8% 5.8 % 94.2% 2.9 % 97.1% 5 4 3 2 不思議の国のアリス風 黒猫風 キャリアウーマン風 SWAT SWAT 風 20代 30代 40代 50代 60代 21.7% 78.3% 12.4% 87.6% 8.2 % 91.8% 5.8 % 94.2% 2.9 % 97.1% 日本のハロウィンにQ 賛成? Y E S N O 10代 20代 30代 40代 50代 60代 68.6 % 64.8 % 56.1 % 41.2 % 37.7 % 27.6 % 31.4 % 35.2 % 43.9 % 58.8 % 62.3 % 72.4 % ハロウィンの問題点 経済効果が高い割に反対派が5割も… 原 因 は マ ナ ー の 悪 さ ! 仮装パーティやイベントの後の ゴミが放置されていることが 問題になっています。 各自責任を持って 持ち帰りましょう! - KOTOMI TANAKA - Source 楽天市場「2017 年 ハロウィン コスチュームランキング」を発表|楽天株式会社のプレスリリース https://prtimes.jp/main/html/rd/p/000000595.000005889.html ハロウィンと出会いに関する意識調査|ニュースリリース|結婚相談所なら楽天オーネット https://onet.rakuten.co.jp/company/release/2017/20170928.html 2017 年の「ハロウィン」の推計市場規模は前年比約3%減の約1305億円 http://www.kinenbilabo.jp/?p=607 2017 年 ハロウィンに関する調査(マクロミル調べ)|株式会社マクロミルのプレスリリース https://prtimes.jp/main/html/rd/p/000000358.000000624.html 2017 年ハロウィンの経済効果・市場規模は何億円?クリスマスとの差は? - 経済・政治 - みんなのお金ドットコム | お金のコトをもっと身近に https://minnkane.com/news/3423
  153. 153. インフォグラフィックの ツール - おまけ -
  154. 154. piktochart https://piktochart.com/ easel.ly https://www.easel.ly/ - おまけ -
  155. 155. Adobe Project Lincoln リリース未定 引用: https://料理撮影.net/adobe-sensei/ProjectLincoln - おまけ -
  156. 156. 1 視覚デザインの 基本 まとめ 3 インフォグラフィックを 作ってみよう 2 伝えたい情報には 優先順位をつける ・人の性質を理解し、設計に  活かそう ・色はイメージに合わせて  選定し、3色にまとめよう ・ジャンプ率もイメージづける  大切な要素 ・デザイナーに追加要素を依頼  する時は、色指定ではなく、  「優先順」を伝えよう! ・ピクトグラムや図を使用し  脳直でストレスフリーな  デザインにしよう ・ストーリーとインパクトも  忘れずに! ・便利なツールがあるよ ・色は最後!
  157. 157. デ ー タ の 視 覚 化 本日のテーマ
  158. 158. 人間の行動をアシストした デザイン 機 能 美 = 思 い や り
  159. 159. 1 視覚デザインの 基本 今 日 の ま と め 3 インフォグラフィックを 使ってみよう 2 伝えたい情報には 優先順位をつける ・人の性質を利用しよう! ・色はイメージ合わせて選定し  3つに絞るとまとまりやすい ・イメージ合わせたジャンプ率 色で指示するのではなく 「優先順位」でお願いします ・ピクトグラムや図を使って  脳直で伝えよう ・ストーリーとインパクトを  忘れずに! ・簡単に作れるツールもあるよ ご清聴ありがとうございました! KOTOMI TANAKA forgevisin.inc 『伝わる』デザインを身につけよう 〜デザインの基礎からインフォグラフィックまで〜

×