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

by Akira Morikawa

Slide 1

Slide 1 text

スライドを武器に。 2018-09-21 / #engineers_lt ariaki4dev Better slides makes you strong. CC-BY-4.0

Slide 2

Slide 2 text

2 Hello, I’m ariaki4dev #engineers_lt #techdo

Slide 3

Slide 3 text

登壇を決意しよう日本酒のおいしさを絶対に再発見しよう本日の目標 3 資料作りに強くなろう 1 2 3

Slide 4

Slide 4 text

情報配置（30ページ）配色（30ページ） 4 情報設計（22ページ）アジェンダ 1 2 3 ※合計 101 ページ

Slide 5

Slide 5 text

情報設計 Information Architecture Design

Slide 6

Slide 6 text

情報設計って何？

Slide 7

Slide 7 text

受け取り手がどう考え（感じ）、どのように動くかを設計すること 7 情報設計情報設計って何？ ① どう理解してほしいか？ ② どう考え（感じ）てほしいか？ ③ どう動いてほしいか？ ※プレゼンを聞いて …

Slide 8

Slide 8 text

8 情報設計情報考える感じる動く - Twitterでつぶやく？フォローされる？ - キーワード検索？サイト訪問？ - 沼に落ちる仲間を増やす？

Slide 9

Slide 9 text

誰が？ 9 情報設計情報考える感じる動く何で？課題と仮説

Slide 10

Slide 10 text

10 情報設計自分相手どんな（スキルを持った）人だろう？どんな事を知ってるだろう？

Slide 11

Slide 11 text

11 情報設計相手を知る受け取り手がどんな人物なのかを想像する相手のレベルに合わせたプレゼンを行う相手のレベルを想定してブレないプレゼンを行う ① 難易度が一貫している ② 主張が一貫している

Slide 12

Slide 12 text

12 情報設計相手に伝えるあなたはプレゼンを通じて何を伝えたい？何かの知識を提供したい何かの知識を提供し、動いてもらいたい調べてみる試してみる：聞き手の関心は何？

Slide 13

Slide 13 text

情報設計しよう

Slide 14

Slide 14 text

14 情報設計わかりやすさとは？受け取り手が短時間で理解できること 15秒で記憶できる情報 ① 外見（デザイン） ② 中身（情報量）

Slide 15

Slide 15 text

15 情報設計わかりやすさはなぜ必要？人が短期的に記憶できる容量は限られている 15秒で90%を忘れてしまう（ワーキングメモリ） ① 数字 … 約 7 個 ② 文字 … 約 6 個 ③ 単語 … 約 5 個超少ない『 3 行でおｋ』

Slide 16

Slide 16 text

16 情報設計わかりやすくするために１スライド辺り１メッセージにする KISSの原則 Keep It Short, Simple - 短い言葉で表現 - 語尾は不要 - 必要な情報のみに絞る

Slide 17

Slide 17 text

シンプルなメッセージ誰にでもわかるように短くて

Slide 18

Slide 18 text

18 情報設計情報の整理 ① 情報量はできる限り少なく ② 文章はできるだけ短く（折り返したら負け） ③ スライドにシンプルなメッセージを載せる

Slide 19

Slide 19 text

19 情報設計情報の取捨選択 ① 全体を通して主題（主張）は１つ ② 本当に必要な情報のみに絞る ③ 頑張って拾い集めたデータをたくさん捨てる勇気を持つ

Slide 20

Slide 20 text

ストーリーを紡ごう

Slide 21

Slide 21 text

21 情報設計ストーリーとはメッセージメッセージメッセージ連続性と前後関係一貫した内容易しい→難しい概要→詳細過去→未来

Slide 22

Slide 22 text

22 情報設計ストーリーとはメッセージメッセージメッセージ最も伝えたい事

Slide 23

Slide 23 text

23 情報設計ストーリー設計 ① 伝えたいことは最初と最後に配置しよう ② 聞き手にとっての関心と価値をまず設計しよう ③ ストーリーの連続性と前後関係を考えよう

Slide 24

Slide 24 text

情報設計のまとめ

Slide 25

Slide 25 text

25 情報設計まとめ ① 伝える相手を知ろう・相手が知っている／知らない事はなにか・相手は何に興味があるか ② メッセージをシンプルにしよう・聞き手側が覚えられる事はすごく少ない・小さなメッセージでスライドを刻む ③ ストーリーを紡ごう

Slide 26

Slide 26 text

何をやるのか決めるのは簡単何をやらないのか決めるのが大事 - Michael Saul Dell

Slide 27

Slide 27 text

情報配置 Layout

Slide 28

Slide 28 text

28 情報配置レイアウトの基本原則近接強弱整列反復

Slide 29

Slide 29 text

近接＝余白

Slide 30

Slide 30 text

近接の例 ①改善前大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）吟醸フレッシュで華やかな香りと繊細な味わいを特徴とする日本酒です。多くはすっきり淡麗な味わいでのどごしは滑らかです…（省略）純米米、米こうじ、水を原料にして製造した日本酒です。醸造アルコールを使用しないため、旨味やコク、ふくよかさなど…（省略）本醸造純米酒に近い香りと風味を持ち、しかも純米よりも淡麗でまろやかな日本酒です。米の外側を3割以上（精米歩合70％以下…（省略）

Slide 31

Slide 31 text

近接の例 ②改善後大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）吟醸フレッシュで華やかな香りと繊細な味わいを特徴とする日本酒です。多くはすっきり淡麗な味わいでのどごしは滑らかです…（省略）純米米、米こうじ、水を原料にして製造した日本酒です。醸造アルコールを使用しないため、旨味やコク、ふくよかさなど…（省略）本醸造純米酒に近い香りと風味を持ち、しかも純米よりも淡麗でまろやかな日本酒です。米の外側を3割以上（精米歩合70％以下…（省略）

Slide 32

Slide 32 text

近接の例 ③改善法大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）吟醸フレッシュで華やかな香りと繊細な味わいを特徴とする日本酒です。多くはすっきり淡麗な味わいでのどごしは滑らかです…（省略）純米米、米こうじ、水を原料にして製造した日本酒です。醸造アルコールを使用しないため、旨味やコク、ふくよかさなど…（省略）本醸造純米酒に近い香りと風味を持ち、しかも純米よりも淡麗でまろやかな日本酒です。米の外側を3割以上（精米歩合70％以下…（省略）近離離

Slide 33

Slide 33 text

33 情報配置-近接近接人は位置的に近いものを「関係があるもの」と認識する習性がある - 関係する情報を近づける - 関連しない情報を遠ざける ( Proximity )

Slide 34

Slide 34 text

整列＝グリッド

Slide 35

Slide 35 text

整列の例 ①改善前大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒吟醸フレッシュで華やかな香りと繊細な味わいを特徴とする日本酒です。多くはすっきり淡麗な味わいでのどごしは滑らかです…（省略）・純米吟醸酒・吟醸酒

Slide 36

Slide 36 text

整列の例 ②改善後大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒吟醸フレッシュで華やかな香りと繊細な味わいを特徴とする日本酒です。多くはすっきり淡麗な味わいでのどごしは滑らかです…（省略）・純米吟醸酒・吟醸酒

Slide 37

Slide 37 text

整列の例 ③改善法大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒吟醸フレッシュで華やかな香りと繊細な味わいを特徴とする日本酒です。多くはすっきり淡麗な味わいでのどごしは滑らかです…（省略）・純米吟醸酒・吟醸酒

Slide 38

Slide 38 text

整列の例 ①改善前 AKIRA MORIKAWA Software Architect [email protected] ariaki4dev 090-1234-5678 #ENGINEERS_LT SOFTWARE

Slide 39

Slide 39 text

整列の例 ②改善後 AKIRA MORIKAWA Software Architect [email protected] ariaki4dev 090-1234-5678 #ENGINEERS_LT SOFTWARE

Slide 40

Slide 40 text

整列の例 ③改善法 AKIRA MORIKAWA Software Architect [email protected] ariaki4dev 090-1234-5678 #ENGINEERS_LT SOFTWARE

Slide 41

Slide 41 text

41 情報配置-整列整列要素に一体性を持たせることが重要 - 揃っていないものは気持ち悪く感じる - 個々のオブジェクトに見えない線を意識して整列しよう ( Alignment )

Slide 42

Slide 42 text

強弱＝思い切り

Slide 43

Slide 43 text

強弱の例 ①改善前大吟醸吟醸酒の中でも、米を5割以上（精米歩合を50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒

Slide 44

Slide 44 text

強弱の例 ②改善後大吟醸吟醸酒の中でも、米を5割以上（精米歩合を50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒悪い例大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒いい例

Slide 45

Slide 45 text

強弱の例 ③改善法大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒いい例ジャンプ率で強調色/太字で強調・最も強調したい部分に使用・文字サイズは3-4種類程度・短い文字にはスペースが効果的 ※色反転でさらに強調可・文中で強調したい部分に使用・色数は原則1-2種類

Slide 46

Slide 46 text

46 情報配置-整列強弱効率的な強弱によって印象を与える - 情報の優先度を明確にし、はっきりと違わせる - 見出しは大きく強調し、本文は小さく - 強弱のつけ方は３種類（ジャンプ率・太さ・色） ※色については次章で詳しく説明 ( Contrast )

Slide 47

Slide 47 text

反復＝継続とリズム

Slide 48

Slide 48 text

反復の例 / 元資料大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）・純米大吟醸酒・大吟醸酒

Slide 49

Slide 49 text

反復の例 / 不整合大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略） (1) 純米大吟醸酒 (2) 大吟醸酒・純米大吟醸酒・大吟醸酒大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）

Slide 50

Slide 50 text

反復の例 / 改善法大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略） (1) 純米大吟醸酒 (2) 大吟醸酒・純米大吟醸酒・大吟醸酒大吟醸吟醸酒の中でも、米を5割以上（精米歩合を 50％以下に）削ったものは「大吟醸酒」と表示されています。醸造アルコール…（省略）一貫していないものはリズムを崩す

Slide 51

Slide 51 text

51 情報配置-反復反復全体を通じて同じデザインを繰り返す事で一貫性を生む - 色 / 線 / モチーフ / レイアウト - 『トーン＆マナー』がリズムを作り出す ( Repetition )

Slide 52

Slide 52 text

その他

Slide 53

Slide 53 text

53 情報配置-その他その他のアイデア - 全体を通して揃えること・統一することを意識しよう - 行間は少し広めに取ろう（※この資料は 1.5 行） - 文字サイズは大きめにしよう（※この文字は 18 pt） - 四辺の余白をしっかり取ろう - シンプルにしよう ※上記にある行間や文字サイズ等の説明はGoogleスライドを使った場合の値です

Slide 54

Slide 54 text

情報配置のまとめ

Slide 55

Slide 55 text

55 情報配置まとめ ① レイアウトの四原則を常に意識しよう・資料の一貫性を保とう・資料にリズムを作ろう ② デザインは伝わる為の手段・わかりやすさを考えよう・見やすさを考えよう

Slide 56

Slide 56 text

神は細部に宿る - Aby Moritz Warburg

Slide 57

Slide 57 text

配色 Color Scheme

Slide 58

Slide 58 text

秩序ある配色意味調和色数

Slide 59

Slide 59 text

色の意味を知ろう

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

https://ichi-up.net/2015/045

Slide 62

Slide 62 text

https://ichi-up.net/2015/045

Slide 63

Slide 63 text

63 配色-意味ヘリングの心理四原色色によって与えられるポジティブ / ネガティブなイメージ - 赤：勇気, 愛情, 勝利, 積極的 / 危険, 緊張, 怒り, 争い - 黄：明るい, 楽しい, 活発, 幸福 / 危険, 緊張, 不安, 軽率 - 緑：若さ, 新鮮, 癒し, 安全 / 未熟, 受動的, 保守的 - 青：信頼, 誠実, 開放感, 知性 / 不安, 冷酷, 悲しみ, 寂しさ

Slide 64

Slide 64 text

マンセルの色相環 http://www.dic-color.com/knowledge/munsell.html

Slide 65

Slide 65 text

マンセルの色相環 http://www.dic-color.com/knowledge/munsell.html 物理補色

Slide 66

Slide 66 text

66 配色-意味物理補色混色すると無彩色になる反対色 →並べるとインパクト大　※使い方については後述心理補色ある色をじっと見つめ、目を移した時に見えてくる残像の色 →補色を際立たせる効果

Slide 67

Slide 67 text

67 配色-意味明度彩度色調（トーン）明度と彩度が似ている色を集めてグループ化

Slide 68

Slide 68 text

http://creators-manual.com/tone/

Slide 69

Slide 69 text

69 配色色の三属性（HSB） - 色相（Hue）：色の違い - 彩度（Saturation）：色の鮮やかさ - 明度（Brightness）：色の明るさ

Slide 70

Slide 70 text

色の調和を考えよう

Slide 71

Slide 71 text

71 配色-調和ジャッドの４原則秩序の原理類似性の原理明瞭性の原理なじみの原理

Slide 72

Slide 72 text

72 配色-調和秩序の原理色相環から規則的に選ばれた色による配色は調和する

Slide 73

Slide 73 text

73 配色-調和明瞭性の原理曖昧でない配色（はっきりと異なる色同士）の配色は調和するトリコロール

Slide 74

Slide 74 text

74 配色-調和類似性の原理ある種の共通性や類似性を持つ色の組み合わせは調和する（色相やトーンに共通性がある色は調和する）ドミナントカラーソフトトーントーナル http://www.sipec-square.net/~mt-home/students/miyazono/project/haishoku/page02.html

Slide 75

Slide 75 text

75 配色-調和なじみの原理自然界に見られる色の変化など、見慣れた色の配列は調和する http://www.sipec-square.net/~mt-home/students/miyazono/project/haishoku/page04.html ナチュラルハーモニーコンプレックスハーモニー

Slide 76

Slide 76 text

そうだ、ツールを使おう

Slide 77

Slide 77 text

http://hue360.herokuapp.com

Slide 78

Slide 78 text

色の使い方

Slide 79

Slide 79 text

79 配色-色数配色の原則は、極力色を使わないこと以下のように３色に抑えるのが一般的な手法配色の原則 70% 25% 5% ベースカラーメインカラーアクセントカラー

Slide 80

Slide 80 text

80 配色-調和ベースカラー資料の中で最も利用される、基本の背景色/文字色 - 明度差をはっきりつける - 同系色で揃える - 白背景+黒文字が最も簡単あいうえおあいうえおあいうえおあいうえお

Slide 81

Slide 81 text

81 配色-調和メインカラー見出しや主張したい内容など、資料の要所に使用する - 資料のイメージに近い色 - ターゲットが好みそうな色 - 自分の好きな色

Slide 82

Slide 82 text

82 配色-調和アクセントカラー特に注目させたい内容や、注意書きなどに使用する - 少ない面積でも、しっかり主張できる色 - メインカラーの補色や離れた色相

Slide 83

Slide 83 text

83 配色-調和色選びに失敗しないために - 背景色/文字色の両方で使える色を選択する - 原色を避ける - 色がもつ印象に気を付ける - 白背景では文字色を真っ黒にしない（※この資料では #4b4b4b ）背景色背景色文字色文字色背景色文字色

Slide 84

Slide 84 text

配色のまとめ

Slide 85

Slide 85 text

85 配色まとめ ① 配色の調和が秩序をもたらす・色が持つ印象を知ろう・色の組み合わせを考えよう・原色は使わないようにしよう ② 配色をシンプルにしよう・色数は少ない方がコントロールしやすい・ベースカラー / メインカラー / アクセントカラー

Slide 86

Slide 86 text

シンプルさは究極の洗練である - Leonardo da Vinci

Slide 87

Slide 87 text

最後に Conclude

Slide 88

Slide 88 text

ウォーターフォール

Slide 89

Slide 89 text

89 最後にウォーターフォール要件定義基本設計詳細設計 ① コンセプト ② ターゲット ① 序論 ② 本論 ③ 結論 ① 本論 ② 全体構成

Slide 90

Slide 90 text

90 最後にウォーターフォール / 要件定義目的とゴールは何か？・何のために話すの？・相手をどう動かしたい？・最も伝えたいことは？コンセプトターゲット誰に聞いてもらいたいか？・何歳位の人？・何に興味や関心がある？・何を知っている？・何を知らない？

Slide 91

Slide 91 text

91 最後にウォーターフォール / 基本設計序論結論・自己紹介・コンセプト・アジェンダ・ゴール・ページ構成・ゴール再確認本論

Slide 92

Slide 92 text

92 最後にウォーターフォール / 詳細設計目的とゴールを基にしたロジック展開を検討する情報整理法は以下のような手法が有名（※詳細は次回以降）・帰納法・演繹法（三段論法）・仮説思考・類推思考・弁証法・背理法（ロジカルシンキング）垂直思考法水平思考法（ラテラルシンキング）探求思考法（クリティカルシンキング）

Slide 93

Slide 93 text

93 最後にウォーターフォール / 実装実装は設計が終わってからやること！ ※資料作りに慣れてない人はアジャイル非推奨

Slide 94

Slide 94 text

94 最後にウォーターフォール / テスト ① 単体テスト … ページ毎に喋ってメッセージを考えよう ② 結合テスト … 前後ページとの連続性や前後関係を確認しよう ③ 総合テスト … 本番前にたくさんリハーサルして幸せになろう

Slide 95

Slide 95 text

95 最後にウォーターフォール / リリース ① 難しい言葉を使わない ② 誰でも緊張するのは当たり前 ③ 話に詰まったり、かっこ悪くても気にしない

Slide 96

Slide 96 text

96 最後に自分なりの自信のつけ方を見つけようアウトプットに必要なのはきっかけ小さく分けて1つずつ考えよう 1 2 3

Slide 97

Slide 97 text

厳選の便利サイト

Slide 98

Slide 98 text

icooon-mono http://icooon-mono.com/ 商用利用可能なシンプルアイコンが検索できる

Slide 99

Slide 99 text

Pixabay https://pixabay.com/ 商用利用可能な写真や画像素材が検索できる

Slide 100

Slide 100 text

carbon https://carbon.now.sh/ ソースコードを構文色分けして画像出力できる

Slide 101

Slide 101 text

#engineers_lt 初めてのアウトプットを待ってます

Slide 102

Slide 102 text

Build Something Amazing written by ariaki4dev

Slide 103

Slide 103 text

Slide 104

Slide 104 text

[参考記事-デザイン] - デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 - 感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 - ずっと使える、デザインの基本をまとめました。 [参考記事-配色] - メインカラーとアクセントカラーを、簡単にセンス良くまとめる方法 - 色彩フルールーン - デザインに関わるすべての人が知っておくべき色と配色の基本 - 配色に悩んだときに、きっと役立つ7つの配色技法【基本】 - カラーデザインの基本。トーンを理解する！

Slide 105

Slide 105 text

[参考スライド] - ウェブデザインに応用する4つの基本原則 - デザイン時に気をつけると幸せになれる事 - 見やすいプレゼン資料の作り方 - ビジネスマン必見！キレイな提案書を作るためのデザインの基礎知識 - パワポは「最後」に開く-すぐできる！プレゼン資料作成術「大掃除編」 - 色で失敗しない為に

Slide 106

Slide 106 text

#4b4b4b #007ab7 #b61972 #4b4b4b #4b4b4b あいうえおかきくけこさしすせそ #007ab7 あいうえおかきくけこさしすせそ #b61972 あいうえおかきくけこさしすせそスライドを武器に。