スライドを武器に。/ Better slides makes you strong

『登壇の技術を勉強する会 #1』の発表資料です。
プレゼンテーションスライド作りの基本的な知識として以下の3ポイントを簡単にまとめています。
・情報設計
・情報配置
・配色

元スライドはこちらから参照いただけます。
http://bit.ly/20180921-slides

2018/9/21 - #engineers_lt
https://engineers.connpass.com/event/100640/

Transcript

1. スライドを武器に。 2018-09-21 / #engineers_lt ariaki4dev Better slides makes you strong. CC-BY-4.0
2. 2 Hello, I’m ariaki4dev #engineers_lt #techdo
3. 登壇を決意しよう 日本酒のおいしさを絶対に再発見しよう 本日の目標 3 資料作りに強くなろう 1 2 3
4. 情報配置 （30ページ） 配色 （30ページ） 4 情報設計 （22ページ） アジェンダ 1 2 3 ※合計 101 ページ
5. 情報設計 Information Architecture Design
6. 情報設計って何？
7. 受け取り手がどう考え（感じ）、どのように動くかを設計すること 7 情報設計 情報設計って何？ ① どう理解してほしいか？ ② どう考え（感じ）てほしいか？ ③ どう動いてほしいか？ ※プレゼンを聞いて …
8. 8 情報設計 情報 考える 感じる 動く - Twitterでつぶやく？フォローされる？ - キーワード検索？サイト訪問？ - 沼に落ちる仲間を増やす？
9. 誰が？ 9 情報設計 情報 考える 感じる 動く 何で？ 課題と仮説
10. 10 情報設計 自分 相手 どんな（スキルを持った）人だろう？ どんな事を知ってるだろう？
11. 11 情報設計 相手を知る 受け取り手がどんな人物なのかを想像する 相手のレベルに合わせたプレゼンを行う 相手のレベルを想定してブレないプレゼンを行う ① 難易度が一貫している ② 主張が一貫している
12. 12 情報設計 相手に伝える あなたはプレゼンを通じて何を伝えたい？ 何かの知識を提供したい 何かの知識を提供し、動いてもらいたい 調べてみる 試してみる ： 聞き手の関心は何？
13. 情報設計しよう
14. 14 情報設計 わかりやすさとは？ 受け取り手が短時間で理解できること 15秒で記憶できる情報 ① 外見（デザイン） ② 中身（情報量）
15. 15 情報設計 わかりやすさはなぜ必要？ 人が短期的に記憶できる容量は限られている 15秒で90%を忘れてしまう（ワーキングメモリ） ① 数字 … 約 7 個 ② 文字 … 約 6 個 ③ 単語 … 約 5 個 超少ない 『 3 行でおｋ』
16. 16 情報設計 わかりやすくするために １スライド辺り１メッセージにする KISSの原則 Keep It Short, Simple - 短い言葉で表現 - 語尾は不要 - 必要な情報のみに絞る
17. シンプルなメッセージ 誰にでもわかるように短くて
18. 18 情報設計 情報の整理 ① 情報量はできる限り少なく ② 文章はできるだけ短く（折り返したら負け） ③ スライドにシンプルなメッセージを載せる
19. 19 情報設計 情報の取捨選択 ① 全体を通して主題（主張）は１つ ② 本当に必要な情報のみに絞る ③ 頑張って拾い集めたデータをたくさん捨てる勇気を持つ
20. ストーリーを紡ごう
21. 21 情報設計 ストーリーとは メッセージ メッセージ メッセージ 連続性と前後関係 一貫した内容 易しい→難しい 概要→詳細 過去→未来
22. 22 情報設計 ストーリーとは メッセージ メッセージ メッセージ 最も伝えたい事
23. 23 情報設計 ストーリー設計 ① 伝えたいことは最初と最後に配置しよう ② 聞き手にとっての関心と価値をまず設計しよう ③ ストーリーの連続性と前後関係を考えよう
24. 情報設計のまとめ
25. 25 情報設計 まとめ ① 伝える相手を知ろう ・相手が知っている／知らない事はなにか ・相手は何に興味があるか ② メッセージをシンプルにしよう ・聞き手側が覚えられる事はすごく少ない ・小さなメッセージでスライドを刻む ③ ストーリーを紡ごう
26. 何をやるのか決めるのは簡単 何をやらないのか決めるのが大事 - Michael Saul Dell
27. 情報配置 Layout
28. 28 情報配置 レイアウトの基本原則 近接 強弱 整列 反復
29. 近接＝余白
30. 近接の例 ①改善前 大吟醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） 吟醸 フレッシュで華やかな香りと繊細な味わいを 特徴とする日本酒です。多くはすっきり淡麗 な味わいでのどごしは滑らかです…（省略） 純米 米、米こうじ、水を原料にして製造した日本 酒です。醸造アルコールを使用しないため、 旨味やコク、ふくよかさなど…（省略） 本醸造 純米酒に近い香りと風味を持ち、しかも純米 よりも淡麗でまろやかな日本酒です。米の外 側を3割以上（精米歩合70％以下…（省略）
31. 近接の例 ②改善後 大吟醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） 吟醸 フレッシュで華やかな香りと繊細な味わいを 特徴とする日本酒です。多くはすっきり淡麗 な味わいでのどごしは滑らかです…（省略） 純米 米、米こうじ、水を原料にして製造した日本 酒です。醸造アルコールを使用しないため、 旨味やコク、ふくよかさなど…（省略） 本醸造 純米酒に近い香りと風味を持ち、しかも純米 よりも淡麗でまろやかな日本酒です。米の外 側を3割以上（精米歩合70％以下…（省略）
32. 近接の例 ③改善法 大吟醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） 吟醸 フレッシュで華やかな香りと繊細な味わいを 特徴とする日本酒です。多くはすっきり淡麗 な味わいでのどごしは滑らかです…（省略） 純米 米、米こうじ、水を原料にして製造した日本 酒です。醸造アルコールを使用しないため、 旨味やコク、ふくよかさなど…（省略） 本醸造 純米酒に近い香りと風味を持ち、しかも純米 よりも淡麗でまろやかな日本酒です。米の外 側を3割以上（精米歩合70％以下…（省略） 近 離 離
33. 33 情報配置-近接 近接 人は位置的に近いものを「関係があるもの」と認識する習性がある - 関係する情報を近づける - 関連しない情報を遠ざける ( Proximity )
34. 整列＝グリッド
35. 整列の例 ①改善前 大吟醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒 吟醸 フレッシュで華やかな香りと繊細な味わいを 特徴とする日本酒です。多くはすっきり淡麗 な味わいでのどごしは滑らかです…（省略） ・純米吟醸酒 ・吟醸酒
36. 整列の例 ②改善後 大吟醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒 吟醸 フレッシュで華やかな香りと繊細な味わいを 特徴とする日本酒です。多くはすっきり淡麗 な味わいでのどごしは滑らかです…（省略） ・純米吟醸酒 ・吟醸酒
37. 整列の例 ③改善法 大吟醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒 吟醸 フレッシュで華やかな香りと繊細な味わいを 特徴とする日本酒です。多くはすっきり淡麗 な味わいでのどごしは滑らかです…（省略） ・純米吟醸酒 ・吟醸酒
38. 整列の例 ①改善前 AKIRA MORIKAWA Software Architect ariaki@engineers-lt.com ariaki4dev 090-1234-5678 #ENGINEERS_LT SOFTWARE
39. 整列の例 ②改善後 AKIRA MORIKAWA Software Architect ariaki@engineers-lt.com ariaki4dev 090-1234-5678 #ENGINEERS_LT SOFTWARE
40. 整列の例 ③改善法 AKIRA MORIKAWA Software Architect ariaki@engineers-lt.com ariaki4dev 090-1234-5678 #ENGINEERS_LT SOFTWARE
41. 41 情報配置-整列 整列 要素に一体性を持たせることが重要 - 揃っていないものは気持ち悪く感じる - 個々のオブジェクトに見えない線を意識して整列しよう ( Alignment )
42. 強弱＝思い切り
43. 強弱の例 ①改善前 大吟醸 吟醸酒の中でも、米を5割以上（精 米歩合を50％以下に）削ったもの は「大吟醸酒」と表示されていま す。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒
44. 強弱の例 ②改善後 大吟醸 吟醸酒の中でも、米を5割以上（精 米歩合を50％以下に）削ったもの は「大吟醸酒」と表示されてい ます。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒 悪い例 大 吟 醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒 いい例
45. 強弱の例 ③改善法 大 吟 醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒 いい例 ジャンプ率で強調 色/太字で強調 ・最も強調したい部分に使用 ・文字サイズは3-4種類程度 ・短い文字にはスペースが効果的 ※色反転でさらに強調可 ・文中で強調したい部分に使用 ・色数は原則1-2種類
46. 46 情報配置-整列 強弱 効率的な強弱によって印象を与える - 情報の優先度を明確にし、はっきりと違わせる - 見出しは大きく強調し、本文は小さく - 強弱のつけ方は３種類（ジャンプ率・太さ・色） ※色については次章で詳しく説明 ( Contrast )
47. 反復＝継続とリズム
48. 反復の例 / 元資料 大 吟 醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒 大 吟 醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） ・純米大吟醸酒 ・大吟醸酒
49. 反復の例 / 不整合 大 吟 醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） (1) 純米大吟醸酒 (2) 大吟醸酒 ・純米大吟醸酒 ・大吟醸酒 大 吟 醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略）
50. 反復の例 / 改善法 大 吟 醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） (1) 純米大吟醸酒 (2) 大吟醸酒 ・純米大吟醸酒 ・大吟醸酒 大 吟 醸 吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表 示されています。醸造アルコール…（省略） 一貫していないものはリズムを崩す
51. 51 情報配置-反復 反復 全体を通じて同じデザインを繰り返す事で一貫性を生む - 色 / 線 / モチーフ / レイアウト - 『トーン＆マナー』がリズムを作り出す ( Repetition )
52. その他
53. 53 情報配置-その他 その他のアイデア - 全体を通して揃えること・統一することを意識しよう - 行間は少し広めに取ろう（※この資料は 1.5 行） - 文字サイズは大きめにしよう（※この文字は 18 pt） - 四辺の余白をしっかり取ろう - シンプルにしよう ※上記にある行間や文字サイズ等の説明はGoogleスライドを使った場合の値です
54. 情報配置のまとめ
55. 55 情報配置 まとめ ① レイアウトの四原則を常に意識しよう ・資料の一貫性を保とう ・資料にリズムを作ろう ② デザインは伝わる為の手段 ・わかりやすさを考えよう ・見やすさを考えよう
56. 神は細部に宿る - Aby Moritz Warburg
57. 配色 Color Scheme
58. 秩序ある配色 意味 調和 色数
59. 色の意味を知ろう
61. https://ichi-up.net/2015/045
62. https://ichi-up.net/2015/045
63. 63 配色-意味 ヘリングの心理四原色 色によって与えられる ポジティブ / ネガティブ なイメージ - 赤：勇気, 愛情, 勝利, 積極的 / 危険, 緊張, 怒り, 争い - 黄：明るい, 楽しい, 活発, 幸福 / 危険, 緊張, 不安, 軽率 - 緑：若さ, 新鮮, 癒し, 安全 / 未熟, 受動的, 保守的 - 青：信頼, 誠実, 開放感, 知性 / 不安, 冷酷, 悲しみ, 寂しさ
64. マンセルの色相環 http://www.dic-color.com/knowledge/munsell.html
65. マンセルの色相環 http://www.dic-color.com/knowledge/munsell.html 物理補色
66. 66 配色-意味 物理補色 混色すると無彩色になる反対色 →並べるとインパクト大 　※使い方については後述 心理補色 ある色をじっと見つめ、目を移し た時に見えてくる残像の色 →補色を際立たせる効果
67. 67 配色-意味 明度 彩度 色調（トーン） 明度と彩度が似ている 色を集めてグループ化
68. http://creators-manual.com/tone/
69. 69 配色 色の三属性（HSB） - 色相（Hue） ：色の違い - 彩度（Saturation） ：色の鮮やかさ - 明度（Brightness） ：色の明るさ
70. 色の調和を考えよう
71. 71 配色-調和 ジャッドの４原則 秩序の原理 類似性の原理 明瞭性の原理 なじみの原理
72. 72 配色-調和 秩序の原理 色相環から規則的に選ばれた色による配色は調和する
73. 73 配色-調和 明瞭性の原理 曖昧でない配色（はっきりと異なる色同士）の配色は調和する トリコロール
74. 74 配色-調和 類似性の原理 ある種の共通性や類似性を持つ色の組み合わせは調和する （色相やトーンに共通性がある色は調和する） ドミナントカラー ソフトトーン トーナル http://www.sipec-square.net/~mt-home/students/miyazono/project/haishoku/page02.html
75. 75 配色-調和 なじみの原理 自然界に見られる色の変化など、見慣れた色の配列は調和する http://www.sipec-square.net/~mt-home/students/miyazono/project/haishoku/page04.html ナチュラルハーモニー コンプレックスハーモニー
76. そうだ、ツールを使おう
77. http://hue360.herokuapp.com
78. 色の使い方
79. 79 配色-色数 配色の原則は、極力色を使わないこと 以下のように３色に抑えるのが一般的な手法 配色の原則 70% 25% 5% ベースカラー メインカラー アクセントカラー
80. 80 配色-調和 ベースカラー 資料の中で最も利用される、基本の背景色/文字色 - 明度差をはっきりつける - 同系色で揃える - 白背景+黒文字が最も簡単 あいうえお あいうえお あいうえお あいうえお
81. 81 配色-調和 メインカラー 見出しや主張したい内容など、資料の要所に使用する - 資料のイメージに近い色 - ターゲットが好みそうな色 - 自分の好きな色
82. 82 配色-調和 アクセントカラー 特に注目させたい内容や、注意書きなどに使用する - 少ない面積でも、しっかり主張できる色 - メインカラーの補色や離れた色相
83. 83 配色-調和 色選びに失敗しないために - 背景色/文字色の両方で使える色を選択する - 原色を避ける - 色がもつ印象に気を付ける - 白背景では文字色を真っ黒にしない（※この資料では #4b4b4b ） 背景色 背景色 文字色 文字色 背景色 文字色
84. 配色のまとめ
85. 85 配色 まとめ ① 配色の調和が秩序をもたらす ・色が持つ印象を知ろう ・色の組み合わせを考えよう ・原色は使わないようにしよう ② 配色をシンプルにしよう ・色数は少ない方がコントロールしやすい ・ベースカラー / メインカラー / アクセントカラー
86. シンプルさは究極の洗練である - Leonardo da Vinci
87. 最後に Conclude
88. ウォーターフォール
89. 89 最後に ウォーターフォール 要件定義 基本設計 詳細設計 ① コンセプト ② ターゲット ① 序論 ② 本論 ③ 結論 ① 本論 ② 全体構成
90. 90 最後に ウォーターフォール / 要件定義 目的とゴールは何か？ ・何のために話すの？ ・相手をどう動かしたい？ ・最も伝えたいことは？ コンセプト ターゲット 誰に聞いてもらいたいか？ ・何歳位の人？ ・何に興味や関心がある？ ・何を知っている？ ・何を知らない？
91. 91 最後に ウォーターフォール / 基本設計 序論 結論 ・自己紹介 ・コンセプト ・アジェンダ ・ゴール ・ページ構成 ・ゴール再確認 本論
92. 92 最後に ウォーターフォール / 詳細設計 目的とゴールを基にしたロジック展開を検討する 情報整理法は以下のような手法が有名（※詳細は次回以降） ・帰納法 ・演繹法（三段論法） ・仮説思考 ・類推思考 ・弁証法 ・背理法 （ロジカルシンキング） 垂直思考法 水平思考法 （ラテラルシンキング） 探求思考法 （クリティカルシンキング）
93. 93 最後に ウォーターフォール / 実装 実装は設計が終わってからやること！ ※資料作りに慣れてない人はアジャイル非推奨
94. 94 最後に ウォーターフォール / テスト ① 単体テスト … ページ毎に喋ってメッセージを考えよう ② 結合テスト … 前後ページとの連続性や前後関係を確認しよう ③ 総合テスト … 本番前にたくさんリハーサルして幸せになろう
95. 95 最後に ウォーターフォール / リリース ① 難しい言葉を使わない ② 誰でも緊張するのは当たり前 ③ 話に詰まったり、かっこ悪くても気にしない
96. 96 最後に 自分なりの自信のつけ方を見つけよう アウトプットに必要なのはきっかけ 小さく分けて1つずつ考えよう 1 2 3
97. 厳選の便利サイト
98. icooon-mono http://icooon-mono.com/ 商用利用可能なシンプルアイコン が検索できる
99. Pixabay https://pixabay.com/ 商用利用可能な写真や画像素材 が検索できる
100. carbon https://carbon.now.sh/ ソースコードを構文色分けして 画像出力できる
101. #engineers_lt 初めてのアウトプットを待ってます
102. Build Something Amazing written by ariaki4dev
103. [アイコン] - すぐに使えるフリーアイコン素材50選！ icooon-mono | Icon-rainbow | iconmonstr | FLAT ICON DESIGN | FIND ICONS [写真素材] - フリーの画像＆写真素材サイト19選 ぱくたそ | 足成 | Pixabay | Morguefile | Unsplash [配色] - デザインが苦手な人でもすぐにできる配色の基本と無料で使えるツール5選 COLOR SUPPLY | HUE 360 | PALETTON
104. [参考記事-デザイン] - デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 - 感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 - ずっと使える、デザインの基本をまとめました。 [参考記事-配色] - メインカラーとアクセントカラーを、簡単にセンス良くまとめる方法 - 色彩フルールーン - デザインに関わるすべての人が知っておくべき色と配色の基本 - 配色に悩んだときに、きっと役立つ7つの配色技法【基本】 - カラーデザインの基本。トーンを理解する！
105. [参考スライド] - ウェブデザインに応用する4つの基本原則 - デザイン時に気をつけると幸せになれる事 - 見やすいプレゼン資料の作り方 - ビジネスマン必見！キレイな提案書を作るためのデザインの基礎知識 - パワポは「最後」に開く-すぐできる！プレゼン資料作成術「大掃除編」 - 色で失敗しない為に
106. #4b4b4b #007ab7 #b61972 #4b4b4b #4b4b4b あいうえおかきくけこさしすせそ #007ab7 あいうえおかきくけこさしすせそ #b61972 あいうえおかきくけこさしすせそ スライドを武器に。
107. 次回予告
108. 執筆の技術を勉強する会 #1 10/26 (金)
109. 秋の夜長は自由研究(仮) #2 11/未定
110. 発表未経験者、 絶賛募集 次回 第四幕
111. アンケート記入 http://bit.ly/elt-2