Recommended
More Related Content
Similar to 20171107 cwt kotomi_tanaka
Similar to 20171107 cwt kotomi_tanaka (20)
20171107 cwt kotomi_tanaka
- 1. 身 ! forgevision.inc K O T O M I T A N A K A に つ け よ う
- 2. 田 中 こ と み T A N A K A K O T O M I webデザイナー 12年目 フォージビジョン株式会社 所属 はじめての登壇です(汗
- 3. デ ー タ の 視 覚 化 本日のテーマ
- 13. Design is not just what it looks like and feels like. Design is how it works. デザインとは、単にどのように見えるか、 どのように感じるかということではない。 どう機能するかだ。 ‐ スティーブ・ジョブズ
- 14. 機 能 美
- 16. 人間の行動をアシストした デザイン 機 能 美 = 思 い や り
- 17. では、そのルールとはなにか。
- 19. 1視覚デザインの基本
- 22. 1 . 種 類 別 は 見 や す い 人の性質を使う
- 24. BEFORE 例（名刺
- 25. BEFORE 例（名刺
- 28. 2 . 整 列 は 美 し い 人の性質を使う
- 30. 整列の種類 左揃え 中央揃え 右揃え 両端揃え 揃えることを常に意識しましょう！
- 31. 整列の種類 左揃え 中央揃え 右揃え 両端揃え 揃えることを常に意識しましょう！「 整 列 」 の ご 法 度 ！ 同 じ ペ ー ジ で 3 つ 以 上 使 わ な い
- 33. 人の性質を使う 3 . 緩 急 は 目 に 留 ま る
- 35. 緩急で楽しさを演出！ 情報の組織化をつけましょう 強弱=コントラスト 私達の脳は緩急が好きなのです 「 コ ン ト ラ ス ト 」 の ご 法 度 ！ 臆病になっては ならない
- 39. 人の性質を使う 4 . 反 復 は 一 貫 性 を 出 す
- 41. 先程の名刺を並べてみます・・
- 42. お分かりいただけるだろうか・・・
- 43. 人の性質を使う 5.視覚の導線
- 44. 目線の動きは文字を読む時の流れに影響されますので、 日本人は主に下記を基本としています。 横書きは上から下、 左から右。 上から下 左から右 横 縦書きは上から下、 右から左。 上から下 右から左 縦
- 46. 動くものに目線が行く
- 47. に 注目してください
- 48. ❤ ❤❤
- 51. ❤ ❤ ❤❤ アニメーション
- 53. ❤ ❤ ❤❤ アニメーション
- 55. ❤ ❤ ❤❤ アニメーション
- 60. 人 の 性 質 を 使 う まとめ 1. 種類別は見やすい（近接） 2. 整列は美しい（整列） 3. 緩急は目に留まる（コントラスト） 4. 反復は一貫性を出す（反復） 5. 動くものに目線が行く デ ザ イ ン の ４ 大 原 則
- 63. 1. 色の三大要素 色を使う
- 64. 色の三大要素
- 68. 色の三大要素
- 69. 色を使う 2 . 色 の 決 め 方
- 71. 色の持つイメージ（例
- 72. 色の持つイメージ（例
- 73. イメージに合わない色を使った例 春 夏 秋 冬 違和感ありますよね・・
- 74. 色を使う 3 . 7 0 : 2 5 : 5 の 法 則
- 75. まとまりやすい色数 ＝ 3 70% 25% 5% ベースカラー : メインカラー : アクセントカラー
- 76. 色 を 使 う まとめ 1. 色には「三大要素」（色相・明度・彩度）がある 2. イメージにあった色を使う 3. 色は３つに絞る（70:25:5）
- 86. 目立たせる ＝ 赤
- 87. 目立たせる＝赤 はもうやめよう
- 88. 確 か に 赤 は 目 立 つ この考えは間違いではありません。 しかし、必ずしもそれが正しいとも限らないのです。
- 89. な ぜ 赤 は 目 立 つ ？ - 赤の持つイメージ-
- 90. 潜 在 的 に 命 の 危 険 を 感 じ る か ら 単に「優先順位が高いもの」に使うというよりかは 「注意点」や「重度のエラーメッセージ」等に 使用すると本来のイメージと合います。
- 91. 潜 在 的 に 命 の 危 険 を 感 じ る か ら 単に「優先順位が高いもの」に使うというよりかは 「注意点」や「重度のエラーメッセージ」等に 使用すると本来のイメージと合います。 では、赤を使わないとすると どんな方法があるのか？
- 92. 目立たせる方法 (赤を使わず) ・色をつける アクセントカラーを使用する ジャンプ率をつける・位置を工夫する 視覚の導線を使用する ・装飾をつける 太さ・線・飾りをつける ・サイズを変える ジャンプ率をつける
- 93. 適用する順番 1. サイズを変える ジャンプ率をつける 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける 3. 色をつける アクセントカラーを使用する
- 94. 適用する順番 1. サイズを変える 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける 3. 色をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける アクセントカラーを使用する 色 は 最 後 ！
- 98. 色 弱 ( P 型 ) の 方 の 見 え 方 元の名刺 要素に赤を適用 P型＝L錐体(赤～黄緑)が働かない色覚異常のこと
- 99. 色 弱 ( P 型 ) の 方 の 見 え 方 元の名刺 要素に赤を適用 P型＝L錐体(赤～黄緑)が働かない色覚異常のこと 全く赤に 見えない！
- 100. 太 字 で 強 調 し た 場 合 KOTOMI TANAKA 通常の方の見え方 KOTOMI TANAKA 色弱(P型)の方の見え方
- 101. 太 字 で 強 調 し た 場 合 KOTOMI TANAKA 通常の方の見え方 KOTOMI TANAKA 色弱(P型)の方の見え方 これで誰が見ても同じになりました！
- 102. 適用する順番 1. サイズを変える ジャンプ率をつける 2. 位置を工夫する 2. 装飾をつける ジャンプ率をつける視覚の導線を使用する 太さ・線・飾りをつける 3. 色をつける アクセントカラーを使用する
- 103. 3インフォグラフィックを 作ってみよう！
- 104. 3インフォグラフィックを 1. なぜ大事？ 2.今日の献立 作 っ て み よ う 3.レシピ COOKING
- 107. インフォグラフィック インフォグラフィック（英語: infographics）は、 情報、データ、知識を視覚的に表現したものである。 情報を素早く簡単に表現したい場面で用いられ、 標識、地図、報道、技術文書、教育などの形で使われている。 また、計算機科学や数学、統計学においても、概念的情報を 分かりやすく表現するツールとしてよく用いられる。 科学的情報の可視化にも広く適用される。 @wikipedia 「 視 覚 的 」 と は ？ 「見た」だけで解る
- 110. 文字だけの場合 見る 1 2 読む ・・・ 考える 3 ! 理解 4 考えさせてはいけない！ 「理解する」までが長ければ長いだけ、 人はストレスを感じます。 人間は”余計なこと”を考えるのが億劫な動物なんですね。 も や も や 不便さを感じるストレスを感じる =
- 113. 文字だけの場合 ピクトグラムや図を 用いた場合 理解するまで時間がかかる😭 脳直で理解できる☺ 😭 言葉が通じる前提 😭 読む気になれない 😭 文字量分のスペースが必要 ☺ 言葉が分からなくて も理解できる ☺ 情報を整理しやすい ☺ スペースがなくてもOK
- 114. インフォグラフィックの 必 要 項 目 ピクトグラム 図・グラフ など ストーリー インパクト
- 115. インフォグラフィックを 見てみよう
- 119. 本日の献立 COOKING
- 126. レ シ ピ STEP1 利 用 目 的 まずはじめに３つの項目を 確認しましょう Why? - なぜ - なぜインフォグラフィック を用いるのか、 用途や目的を 明らかにしておきましょう Where? - どこで - どこで公開するのかを 明らかにしておきましょう 場所によって 作成するサイズなど 変わります Who? - 誰に - ターゲットを 明らかにしましょう ターゲットによって 見せ方が 変わります
- 127. レ シ ピ STEP1 利 用 目 的 ハロウィンのインフォグラフィックを 作る目的を決める Where? - どこで - webで公開 Who? - 誰に - 10代・20代の 若者を中心 COOKING Why? - なぜ - ・ハロウィンが 丁度終わった頃の登壇 でタイムリーだから ・ごみ問題の 注意喚起をしたいから
- 137. レ シ ピ STEP4 内 容 の 選 定 COOKING 補足情報の追加 ・ハロウィンの起源 ・トリック・オア・トリートの意味 ・ジャック・オー・ランタンの意味 ・ダック・アップルの意味 ・３年間の経済効果額（2016年・2015年） 共通フォーマット [タイトル] HALLOWEEN 2017 [ソース出典] まとめに記載 [公開/制作クレジット] KOTOMI TANAKA (forgevision.inc)
- 143. 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 % ハロウィンの問題点 経済効果が高い割に反対派が５割も… 原 因 は マ ナ ー の 悪 さ ！ 仮装パーティやイベントの後の ゴミが放置されていることが 問題になっています。 各自責任を持って 持ち帰りましょう！ - 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 年の「ハロウィン」の推計市場規模は前年比約３％減の約１３０５億円 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
- 146. １. タイトルと追加情報 Halloween 2017 JAPAN 毎年 10 月 31 日に行われる、 古代ケルト人が起源と考えられている祭のこと。 もともとは秋の収穫を祝い、悪霊などを追い出す宗教的な 意味合いのある行事であったが、現代では特に アメリカ合衆国で民間行事として定着し、 祝祭本来の宗教的な意味合いはほとんどなくなっている。 ハロウィン とは？ ジャック・オー・ランタン トリック オア トリート 「ごちそうをくれないと、いたずらしちゃうぞ」 と言う意味。唱えながら家々を訪ね、 菓子を集めて回る習慣。 カボチャをくりぬき、 ナイフで目・鼻・口 を つけ、内側に 火のついたろうそくを 立てるもの。 ダック・アップル 水を入れた大きめのたらいに リンゴを浮かべ、手を使わずに 口でくわえて取るゲーム。 20152016 1345億円 1100億円 1305億円 2017 経済効果 億円1305 昨年よりも 3 % ダウン 意識調査 COOKING レ シ ピ STEP6 検 証 データ 視覚化
- 147. Halloween 2017 JAPAN 毎年 10 月 31 日に行われる、 古代ケルト人が起源と考えられている祭のこと。 もともとは秋の収穫を祝い、悪霊などを追い出す宗教的な 意味合いのある行事であったが、現代では特に アメリカ合衆国で民間行事として定着し、 祝祭本来の宗教的な意味合いはほとんどなくなっている。 ハロウィン とは？ ジャック・オー・ランタン トリック オア トリート 「ごちそうをくれないと、いたずらしちゃうぞ」 と言う意味。唱えながら家々を訪ね、 菓子を集めて回る習慣。 カボチャをくりぬき、 ナイフで目・鼻・口 を つけ、内側に 火のついたろうそくを 立てるもの。 ダック・アップル 水を入れた大きめのたらいに リンゴを浮かべ、手を使わずに 口でくわえて取るゲーム。 20152016 1345億円 1100億円 1305億円 2017 経済効果 億円1305 昨年よりも 3 % ダウン 意識調査 仮装したい と思っている人Q 1/ 10( ベース：全体 / n=2,000 ） 仮装コスチューム 仮装したいと答えた人 レ シ ピ STEP6 検 証 データ 2. 経済効果 視覚化 COOKING
- 148. 毎年 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
- 149. 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 % ハロウィンの問題点 経済効果が高い割に反対派が５割も… 原 因 は マ ナ ー の 悪 さ ！ 仮装パーティやイベントの後の ゴミが放置されていることが レ シ ピ STEP6 検 証 データ 4. 賛成か反対か 視覚化 COOKING
- 150. 日本のハロウィンに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 % ハロウィンの問題点 経済効果が高い割に反対派が５割も… 原 因 は マ ナ ー の 悪 さ ！ 仮装パーティやイベントの後の ゴミが放置されていることが 問題になっています。 各自責任を持って 持ち帰りましょう！ Source 楽天市場「2017 年 ハロウィン コスチュームランキング」を発表｜楽天株式会社のプレスリリース https://prtimes.jp/main/html/rd/p/000000595.000005889.html ハロウィンと出会いに関する意識調査｜ニュースリリース｜結婚相談所なら楽天オーネット https://onet.rakuten.co.jp/company/release/2017/20170928.html 2017 年の「ハロウィン」の推計市場規模は前年比約３％減の約１３０５億円 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.ごみ問題の注意喚起
- 151. 経済効果が高い割に反対派が５割も… 原 因 は マ ナ ー の 悪 さ ！ 仮装パーティやイベントの後の ゴミが放置されていることが 問題になっています。 各自責任を持って 持ち帰りましょう！ - 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 年の「ハロウィン」の推計市場規模は前年比約３％減の約１３０５億円 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. 引用元とクレジット
- 152. BEFORE
- 155. 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 % ハロウィンの問題点 経済効果が高い割に反対派が５割も… 原 因 は マ ナ ー の 悪 さ ！ 仮装パーティやイベントの後の ゴミが放置されていることが 問題になっています。 各自責任を持って 持ち帰りましょう！ - 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 年の「ハロウィン」の推計市場規模は前年比約３％減の約１３０５億円 http://www.kinenbilabo.jp/?p=607 2017 年 ハロウィンに関する調査（マクロミル調べ）｜株式会社マクロミルのプレスリリース https://prtimes.jp/main/html/rd/p/000000358.000000624.html 2017 年ハロウィンの経済効果・市場規模は何億円？クリスマスとの差は？ - 経済・政治 - みんなのお金ドットコム | お金のコトをもっと身近に https://minnkane.com/news/3423
- 158. Adobe Project Lincoln リリース未定 引用: https://料理撮影.net/adobe-sensei/ProjectLincoln - おまけ -
- 160. デ ー タ の 視 覚 化 本日のテーマ
- 161. 人間の行動をアシストした デザイン 機 能 美 = 思 い や り
- 162. 1 視覚デザインの 基本 今 日 の ま と め 3 インフォグラフィックを 使ってみよう 2 伝えたい情報には 優先順位をつける ・人の性質を利用しよう！ ・色はイメージ合わせて選定し ３つに絞るとまとまりやすい ・イメージ合わせたジャンプ率 色で指示するのではなく 「優先順位」でお願いします ・ピクトグラムや図を使って 脳直で伝えよう ・ストーリーとインパクトを 忘れずに！ ・簡単に作れるツールもあるよ ご清聴ありがとうございました！ KOTOMI TANAKA forgevisin.inc 『伝わる』デザインを身につけよう 〜デザインの基礎からインフォグラフィックまで〜