#学生LT 俺的スライドデザイン変遷2017
学生LT というイベントで話そうとスライドを作ったは良いものの、5分で喋り尽くせない感があったのでブログにもまとめてみる。
高専1年でよく出ていたハッカソンから始まって、4年になった今も勉強会とかちょっとした発表の機会でスライドを作ることは多い。同じテンプレだと飽きるので毎回新しいことをしてみるのだけど(今まで使ったことない色で作る、など)このおかげで最近はかなりマシな見た目を維持できるようになった。自分語りのようで恥ずかしいが、今日はそのスライドデザイン変遷を見ていこう。
旧石器時代
まだ打製石器しか知らなかった頃の話。古すぎて当時の資料は残っていない。
特徴
- {パワポ, Keynote} の既存テーマ
- 圧倒的赤文字強調
- なんとなく、創英角ポップ体は避けたほうが良いことはわかっている
- 明朝体を使って怒られたりする
- 画面四隅のどこかに三角印を入れたいお年頃
- 「ご清聴ありがとうございました」
Ricty, M+ 信仰時代
文明が発達しはじめ、民衆はゴシック体で可愛いゆるふわフォントを求め始める。Win の人はメイリオしか使わなくなる。
特徴
- 等幅信仰
- その結果、文字の多いスライドでは平坦・退屈な画面になりがち
- 使っておけば、とりあえずナウくてプログラマぽくてイケてると思っている
例
スライド | URL |
---|---|
ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study) 2015.3 |
|
非公開 2015.5 |
◯◯多用時代
気に入ったものは全て使っていた頃。インフォグラフィックに憧れて、方向性を間違えてアイコンフォントだらけになったりする。
特徴
- フォント(Ricty や M+)
- アイコンフォント(Font Awesome)
- 影, 半透明
- 角丸
- 特定の色(オレンジ・黄緑・茶色)または色数の多さ
- 妙に分厚いヘッダー・フッター
- 何かしらのモチーフ(丸やロゴ)
例
スライド | URL |
---|---|
ドジっ娘でもかんたん! Bower × Rails Assets (LOUPE Study) 2015.3 アイコンフォント・半透明の多用 |
|
Markdownがアツい 2015.5 色数の多さ・分厚いヘッダー・角丸の多用 |
|
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい 2015.8 モチーフの多用 |
|
gitを使う準備をしよう - 初級編2015.11 分厚いヘッダー・角丸・モチーフの多用 |
フォントお試し時代
フォントを買って目が肥えた。見やすさを気にしはじめる。
特徴
- 文字を減らし、余白を多くとるようになる
- 余白ができたことで、思い切ったデザインができるように
- フォント駆動資料作成
- 「このフォントに合うスライドは?」みたいなことを考えるように
- 手段と目的を入れ替えて、フォントを紹介するスライドを作ったり
スライド | URL |
---|---|
Are you a Designer or an Engineer? 2016.3 |
|
非公開 2017.1 |
|
みんなだいすきフォントの話 #kosenconf in 沼津4 2017.3 |
|
非公開 2017.7 |
「やましーっぽい」スライド
特徴
- ラノベ風表紙
- 背景単色 + 角ゴシック or 丸ゴシック(筑紫→最近は秀英)
- 対立する内容を挙げる時は、画面上下分割からの色反転
例
スライド | URL |
---|---|
Hello world! にときめかなかった僕が情報系を名乗るまで 2017.4 |
|
軍歌でわかるドイツ語(わからない) 2017.6 |
|
UIデザインの心理学 2017.7 |
|
きみはPNGの仕様書を読んだか? 2017.10 |
最近は見た目が落ち着いてきたのか、「このスライドやましーっぽい」「やましーっぽく作ってみた」とか言ってもらえてうれしい。
↓過去のスライドたち www.slideshare.net