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