エンジニアの業務で、交流会で、オンラインで、様々な場面で登場するスライド。
この記事では筆者がスライドをどのような考えで作っているか、どんなことを考えて作っているか、何を大事にしているかを書いてみます。
この記事に沿ってスライドを作れば記憶力アップ！お金がバスタブいっぱいに！素敵な彼女ができました！といったことはありませんのでご承知おきください。

スライド作成の流れ

何を伝えたいかを決める
シナリオを決める
スライド単位に分割する
スライドテーマを決める
テーマとシナリオに沿ってビジュアルを描く
スライドごとに一番伝えたい言葉を書き込む
ビジュアルで補足する
削ぎ落とす

スライドを作る時の流れはほぼ決まってこのようになります。
では、それぞれのステップを設計と実装に分けて説明いたします。

スライドの設計

何を伝えたいかを決める

スライドを作るに当たって一番大事なのは、そのスライドを使って誰に何を伝えるか？という点です。
業務でスライドを作る場合は何を伝えるかが決まっていることが多いのですが、ここでは伝えたいことをできる限りシンプルにするように気を付けます。
本の タイトルと装丁 を決めるような感じです。

シナリオを決める

何を伝えるかが決まったら、実際にどんな流れで喋るか、そのシナリオを考えます。
プレゼンテーションで最も大事なのはスライドではなく話者の発する言葉、そしてそこに宿る気持ちなので、着地点を見誤らないよう気を付けながら話の前後関係をまとめていきます。
本の 目次 ができていく感じです。

スライド単位に分割する

シナリオが決まったら、そのシナリオを適切なスライド単位に分割します。
シナリオにいくつかマイルストーンを置いていくように分割し、話を組み立てる道筋を考え、スライド1枚当たりのサイズ上限という事情も踏まえつつ設計します。
1 + 1 = 2ですよね、ということは2 != 1であり1 + 1 = 1 + 1であると言えますよね、みたいな感じで伝えたいことを伝えるために必要なパーツを組み立てていきます。
本の 章ごとのあらすじ ができていく感じです。

スライドの実装

スライドテーマを決める

スライドを作る時に個人的に一番こだわっているのが、このテーマの設定です。
テーマは自分で勝手に設定したりメンバーから要望をもらったりしますが、それがスライド全体を貫く世界観になるので、ここに一番時間をかけて考えます。
今までのテーマは「ドラクエ風」「FF風」「スーパーマリオ風」「8番出口風」「戦国武将」など、王道からトレンドまで幅広く扱ってきました。
ここで決めたテーマに沿ってビジュアルを作ることになります。
本の 装丁 ができていく感じです。

テーマとシナリオに沿ってビジュアルを描く

いい感じの単位で分割されたシナリオとテーマを掛け合わせると、頭の中で理想とするビジュアルが出てきます。
ドラクエの戦闘シーン、FFのクリスタル、スーパーマリオの土管とコイン、8番出口の通路など、ここではテーマがブレないようにしながら自由に発想します。

ここで最も大事なのは権利関係です。
たとえ社内向けスライドであっても、自分でスライドを作る以上は責任を持って版権セーフなスライドにしましょう。
本の 挿絵 を描いていく感じです。

画像を使うパターン

絵を描くといっても本当にペンを取るというのはややハードルが高いので、いらすとやさん、DrawkitやUnsplashなど、版権的に安心なサービスで探します。

例：ブランチの仕組みを説明したスライド

※生成AI背景＋いらすとや画像＋Googleスライド

生成するパターン

既存の画像では物足りない、今ひとつフィットしない場合は画像を生成します。
今では画像生成サービスもあちこちにありますが、生成する場合でも重要なのが版権。
ということでPhotoshopを起動して、Fireflyに渡すプロンプトを考えます。

PhotoshopのFireflyはAdobeの生成AIで、主にImage Model 4 Ultraという商用利用でも安心な独自モデルで動いています。
OpenAIやGoogleなど他社のモデルも利用可能ですが、社内用スライドとはいえ商用利用セーフな方が安心なので、Image Model 4 Ultraのまま利用しています。

例：チームの取り組み発表スライド

※生成AI画像＋Illustratorフォント＋Photoshopエフェクト

スライドごとに一番伝えたい言葉を書き込む

ビジュアルの準備が終わったら、そのビジュアルの配置をイメージしながらスライド単位で分割したシナリオの中で最も重要なことを言葉にします。
ここで大事なのは、余計な情報を削ぎ落として言葉をしっかり煮詰めた見出し的な言葉にすること。
プレゼンテーションで最も大事なのは話者の発する言葉ですから、その言葉が出てくるトリガーになる言葉を書き込みます。
本の章題ができていく感じです。

ビジュアルで補足する

スライドに言葉を書き込んだら、それを補足するビジュアルを配置します。
いらすとやの画像を配置したり、生成した画像を背景にしたり、生成した画像の上に別の画像を乗せたりエフェクトを追加して、伝えたい言葉が伝わるようなビジュアルをいい感じに配置します。

削ぎ落とす

最後のプロセスはスライド作成で一番大事な、削ぎ落とす作業です。
ここまでのプロセスを本に例えてきましたが、これも本に例えると スライドに本文は書かない ということになります。
本文はスライドに書くのではなく、話者が喋って伝えるものという位置付けです。

読み上げ会にしないために

文字やデータやグラフがびっしり書き込まれたスライドを写して、そこに書き込まれたことを読み上げるだけのプレゼンテーションを想像してみてください。
想像というか実際よく見かけるパターンでもあると思いますが、プレゼンテーションの聴講者だって文字は見えていますので、読めば済むことを話してもあまり意味がありません。

プレゼンテーションの目的はスライドを読んでもらうことではなく、話者の言葉で話者が伝えたいことを伝えることです。
伝えたいことを書いておかないと忘れそう、書かないと伝わらないかもしれない、といった気持ちはこのステップで押さえ込んでしまいましょう、
ここでは聴講者の方々を信じて、自分の言葉が伝わることを信じて、一番大事なところ以外を削ぎ落とします。

These are not 3 separated devices

2007年のSteve JobsのiPhoneプレゼンテーションがJobs自身もスライドを見つめながら読み上げるスタイルだったら、あんなに熱狂的な場は生み出せなかったのではないでしょうか。
やっぱり人と人ですから、自分の信じているものを大事にして相手の目を見て語りかけると、気持ちって伝わると思うのです。
その時、スライドはあくまで補足的な背景でしかないし、背景でいいのです。

完成したらいよいよ発表ですが

発表する時のマインドセット、モチベーションなどなどまだ書きたいことはありますが、今回はスライドを「作る」技術というタイトルなのでここまでにします。

おまけ：Firefly3におけるプロンプトと出力結果の対比

冒頭の画像は、API開発担当チームに寄りがちなAPI設計を他チームでも気軽に提案できる未来をプレゼンした『TypeSpecの野望〜戦国立志伝〜』のメインビジュアルです。
続編となる『TypeSpecの野望〜翔萌篇〜』でも使用したビジュアルですが、こちらを作成した時のプロンプトと出力結果を付記しておきます。

時は戦国時代。
燃え盛る炎の奥で戦国武将たちが険しい表情で空を見つめ、野望に満ちた表情で集まっている。

これは一発で狙った感じのビジュアルが出てきました。
Photoshopでは1プロンプトに対して3つの画像が生成されるので、他に2名の武将が生成されたのですが、それは部下という設定でセリフ付きサムネイルとして使用しました。

次はストーリー展開に欠かせない、プロローグの背景を作成します。

時は戦国時代。
燃え盛る炎の奥で侍たちが各々の野望を胸に、両軍入り乱れた激しい戦を繰り広げている。

プロローグの背景では若干引き気味の戦場シーンが欲しかったのですが、これだとキャラが立ちすぎて背景っぽくないのでボツにしました。

時は戦国時代。
燃え盛る炎の奥で馬に乗った多くの侍たちが各々の野望を胸に、両軍入り乱れた激しい戦を繰り広げている。

「馬に乗った多くの侍たち」と複数形にすることで背景になるかなと思いましたが、まだキャラが立ってるのでボツにしました。

時は戦国時代。
燃え盛る炎の奥で馬に乗った多くの侍たちが各々の野望を胸に、両軍入り乱れた激しい戦を繰り広げている。
そこに主役はいない。
風景としての戦国時代の合戦。

「そこに主役はいない」「風景としての」などというあからさまな言葉を足してみたら、やっと全員が向こうを向いてキャラが立つこともなくなったので、こちらにガウスぼかしを加えて背景に採用しました。

次はエンディングに向けて戦が終わった後の晴れ晴れとした感じの画像を作成します。

時は戦国時代。
昨夜遅くまで、燃え盛る炎の奥で馬に乗った多くの侍たちが各々の野望を胸に、両軍入り乱れた激しい戦を繰り広げていた。
そこに主役はいない。
そんな戦の後の荒れた平地の朝。
風景としての戦国時代の合戦。

朝の感じが全く反映されていませんが、もしかしてこれは日の出？と思いつつ全然戦が終わっていないのでボツにしました。
「昨夜遅くまで」と書いても朝になるとは限らないようです。

時は戦国時代。
昨夜遅くまで、燃え盛る炎の奥で馬に乗った多くの侍たちが各々の野望を胸に、両軍入り乱れた激しい戦を繰り広げていた。
そこに主役はいない。
そんな戦の後の朝。
遠くには村が見える。
風景としての戦国時代の朝の野原。

「戦の後の朝」「遠くには村」「朝の野原」といった言葉を追加してみたところ、やっと少し朝を迎えてきた感じがします。
色的には夕日ですが、ちょっとだけ緑の大地感もあるので惜しいところ。
しかしまだ火の手が収まっていないのでボツです。

時は戦国時代。
昨夜遅くまで、燃え盛る炎の奥で馬に乗った多くの侍たちが各々の野望を胸に、両軍入り乱れた激しい戦を繰り広げていた。
そこに主役はいない。
そんな戦の後の朝。
空は青く、もう炎は消え、遠くには村が見える。
風景としての戦国時代の朝の野原。

「空は青く」「もう炎は消え」など具体的な説明を加えましたが、全然炎が消えていません。
前半の「燃え盛る炎」を色濃く反映しているのでしょうか。
妙に尖った富士山らしき山も気になりますが、ボツです。

時は戦国時代。
昨夜遅くまで両軍入り乱れた激しい戦を繰り広げていた。
そんな戦が終わり、朝を迎えた景色。
空は青く、もう炎は消え、遠くには村が見える。
風景としての戦国時代の朝の野原。

これはなかなかいい感じの朝っぽくなってきましたが、前半の「燃え盛る炎」を削除したのにまだ燃え盛っています。
遠くでは爆発も起きているように見えるのでボツです。

がんばれFirefly、あと少しで手が届きそうだ。

時は戦国時代。
昨夜遅くまで両軍入り乱れた激しい戦を繰り広げていた。
そんな戦が終わり、朝を迎えた景色。
空は青く、日は高く登り、遠くには村が見える。
風景としての戦国時代の朝の野原。

これはようやく、ようやくFireflyの戦が終わって終わりを迎えた朝です。
空を飛ぶ鳥の群れも大きくなって、侍たちがせっかく実った稲をのっしのっしと踏み越えて帰っていきます。
こちらを採用し、これもガウスぼかしを加えて背景に採用しました。