はじめに
この記事はプレゼンテーションデザイナーとして発信されているFUJIさん(@yoshifujidesign)がツイートで紹介されていたNotebookLM x Yamlを使ってスライドを作成する方法をもとに...
テキストは自分の気持ちのこもったもので・デザインは生成AIでプロ仕様で伝わるものに
そんなことが可能になるかも？と思い立っての検証です！
FUJIさんの元ツイートはこちら
noteの記事の無料公開は12/17までとのことなのでご覧になるタイミングでは無料公開期間が終了している場合があります。
注意
検証したツール
-
Antigravity：GoogleのAIエディタ（執筆時点プレビュー）
- Gemini 3：高度な知能と創造力を備えた大規模言語モデル
- Nano Banana Pro：高精度な出力を実現する画像生成モデル
- Slidev：Markdownでスライドを作成できるツール
- YAML：FUJIさんが作成されたYAMLテンプレート
上記を使用してスライド生成を検証しました！
検証開始時の生成フローイメージ
前提条件
Slidevの環境がセットアップされていること
参考までに自分のサンプルリポジトリ
スライド生成の流れ
サンプルリポジトリの構成を参考に説明します！
- ThemeフォルダにFUJIさんのYAMLテンプレートを保存
- Presentationフォルダに発表テーマのフォルダを作成
a. 台本的なMarkdownやJSON, YAMLがあれば保存
b. または生成AIで台本を生成して保存 - メッセージを送るところ（チャットペイン）に上記保存したものを貼りつけ
-
YAMLテンプレートに基づいてテーマとスライドを作成してなどのプロンプトを送信 - できた！
- Slidevでスライドを確認・修正
※今回は『テーマを使用してデモを作成して』という雑な指示にしています🙇♂️
大体こんな流れを想定して検証を始めました！
検証していく
検証の結果を伝えるだけだとかなり味気ないので試行錯誤の過程も共有しようと思います！
記載項目
- 該当のポストとnote
- 出力結果
- どう調整する？
検証1：デザイン要素の少ないデザイン設定
該当はこちらのポストとnote。
レイアウトで魅せる、比較的デザイン要素の少ない設定での検証ですね。
出力結果
✅基本的なテーマは作成できた
Slidevのテーマギャラリーにあるものとはひと味違うおしゃれなものができている！
パッと見た感じは比較的良い感じに見えます。
⚠️細かなデザイン的な要素（ベン図など）は再現が難しかった
ベン図みたいなものを作らせる指示があるのですが、テキスト要素の位置や大きさがイマイチ🤔
⚠️余白が少し気になる
もともと空間を広く取って高級感を出すデザインではあるので、
雰囲気の再現には成功していますが微調整は必要ですね。
- 1枚目の左エリアが詰まっている？
- 3枚目が重心高く見える？
どう調整する？
図形的なデザイン要素
別途生成したい図形的なデザイン要素の指示はYAMLまたは台本に整理。
まとめて文字ごと画像生成モデルに任せるのが良さそう
# 台本をYAMLとする場合のイメージ
スライド(n):
- layout: バブルチャート / ベン図
- objects:
- role: "Central Intersection Text"
label: "CORE"
- role: "Venn Element 1"
label: "DATA"
- role: "Venn Element 2"
label: "AI"
- role: "Venn Element 3"
label: "UX"
出力例
余白
余白に関してはコンテキストの調整では難しいかもしれません。
自分がイメージする修正は以下の方法ですね🤔
- AIエージェントに調整してもらう
- Antigravityのブラウザ操作・ビジュアル認識を使用して修正してもらう
- スクリーンショットを渡して修正指示をする
- 手作業CSS調整
- 上記ハイブリッドで調整する
良い方法があったらぜひ教えてください🙇♂️
検証2：デザイン要素の多いデザイン設定
該当のポストとnoteはこちら。
ポストの左上にある彫刻というクラシックなオブジェクトとポップな色使いの組み合わせが特徴的なデザインですね。
（これがそれなりに再現できたらこの手法は有効だろうという想定）
出力結果
✅基本的なテーマは作成できた
ここに関しては検証1と同様にテーマに準拠したクラシックなオブジェクトとポップな色使いのデザインが再現できています👏
⚠️画像の透過は非対応
この記事を拝見していたはずなのにすっかり忘れていました...
執筆時点でNano Banana Proは画像の透過をサポートしていないようです。
どう調整する？
画像の透過
今回は前述の記事とは異なりますが以下のように対応しました！
-
余白は透過処理をしやすいように黒色にしてくださいというプロンプトを追加して出力 - Adobe Expressのクイックアクションで背景を削除しました！
一応無料でも使用できるようです！
今回くらいの単体のオブジェクトであればRembgを使用して背景を削除するのも良いかもしれません！
Nano Banana Proでの画像生成→Rembg実行をフローとしてルールに書いておけば快適になるかも🤔
まとめ
いかがだったでしょうか？評価は見る方にもよるかなと思いますが、個人的には検証としては満足のいくものになりました！
興味のある方はぜひ試してみてください！
また、試してみてこんな設定してみたら良かったなどあれば教えていただけたら嬉しいです🙏
最後に、生成物と生成フローの評価をして締めます！
生成物に関しての評価
✅基本的なテーマは作成できた
FUJIさんの神YAMLにより高級感のあるものから、ポップなものまで作成することができました！
ただ、CSSでのビジュアル表現というのは若干の惜しさは残る出力でした。
しかし、以下のような対応を行うことでより良い出力が期待できると思います！
- YAML自体の指示の調整
- 参考画像の提供
ココはぜひ色んな人のトライしているところも見てみたいですね👀
✅画像はかなり良い！
さすがはNano Banana Proの出力。
彫刻の画像を見ればわかる通りイメージ次第でインパクトのある画像が生成できます！
画像の透過こそ対応していませんが対処可能な範囲なので良しとします😌
生成フローに関しての評価
まだまだコンテキストエンジニアリングとしては見直すところはありますが、おおよそ良い結果を得られたのではないかと思います！
- Gemini 3 ＆ Nano Banana Proの組み合わせでのデザイン要素の再現
- NotebookLMのスライド生成では執筆時点では叶わなかったテキスト編集
- CSSやJavaScriptでの表現豊かなアニメーションも可能
以上です！
改めて、素晴らしいYAMLを共有してくださったFUJIさん、本当にありがとうございます🙏
Discussion