重要な一歩：スライドを画像から Web ページへ引き戻す

Bolt Slides のやり方は、AI エージェントにすぐ使えるパーツ一式を渡し、各ページを再び「動く Web ページ」に変えることです。細かく言えば、各ページは1つの React コンポーネントであり、Web ページでできることなら何でもそのページに詰め込めます——本格的なレイアウト、作り込まれたアニメーション、任意のインタラクション。

中身を覗いてみると、実は種明かしはさほど神秘的ではありません。サムネイルのサイドバー、グリッド一覧、内容を段階的に見せていくビルドステップ、注釈用のペン、そして観客側と同期するプレゼンターモードを備えた、オーソドックスなページ送り式プレゼンエンジンです。違いは、各ページの中身が普通の Web ページのコードであること。だからどんな画面サイズにも自動で合い、リンク1本でそのまま共有できます。リポジトリのある一文を借りれば——Web ページで作れるものなら、何だってプレゼンにできる。

Gキーでグリッド一覧を開くと、標準付属の26ページのサンプルデッキが一画面に並びます。表紙、図表、大きな数字、比較表、見積もりページなど、あらゆるレイアウトを網羅。出典：公式リポジトリ。

配色もすぐ使える形に仕上がっています。色、フォント、角丸、影はすべて1つのスタイルファイルのルート変数にまとめられており、メインカラーを1つ変えるだけでプレゼン全体からツール UI まで一括で衣替えできます。リポジトリには雑誌風からダークなテック風まで、9種類のテーマ方向も同梱。リポジトリのドキュメントはこれを「センスは標準装備」と呼んでいます。

スライドが「操作できる」ようになると、プレゼンは体験に変わる

「インタラクティブなスライド」と言われても抽象的でイメージしにくいものですが、公式が示した3つのシーンは非常に具体的で、それぞれ実際のデモ動画が添えられています。見るときは共通点に注目してください——聴衆はもはやあなたの説明を聞くだけの存在ではなく、自分の手で操作できるようになるのです。

顧客・投資家向けの提案：聞かせるだけでなく、触ってもらう

顧客や投資家に提案する場面。プレゼンは本当に「生きた」ものにできます。不動産仲介のスライドなら、住宅まるごとの3Dウォークスルーを埋め込める。次のページをめくれば、購入希望者が自分で動かせる住宅ローン計算機も置ける——価格や頭金、金利を変えると、月々の返済額がリアルタイムで連動する。口で説明するより、相手に実際に体験してもらったほうが早いのです。

社内プランニング：聴衆を共同制作者に変える

社内のプランニングやブレインストーミングの会議ほど、人の集中が切れやすい場面はありません。Bolt Slides を使えば、第1四半期の計画プレゼンにリアルタイムのホワイトボードをそのまま組み込めます。チーム全員がこのプレゼンから離れることなく、付箋を貼り、書き込み、その場で投票できる。聴衆は傍観者から共同制作者になります。

取締役会・四半期報告：数字は自分で掘らせる

取締役会への報告、顧客向けレポート、四半期業績。数字を淡々と読み上げるより、相手自身に探らせたほうがいい——表を絞り込み、図表を並べ替え、気になる指標をクリックして掘り下げる。しかも各プレゼンはそれ自体がレスポンシブな Web アプリなので、ただのリンクとしてどんな画面でも見やすく整い、スマートフォンも例外ではありません。

リポジトリを開いてみる：この仕組みはどう組まれているのか

オープンソース化された以上、いちばん面白いのは「各ページが Web ページでありながら AI にひと言で組み立てさせられる」仕組みを分解して見てみることです。実際に開けてみると、その土台は想像よりずっと素朴だとわかります。

エンジンはすべて手書き、依存先はたった3つ

まず土台から見ていきましょう。デッキエンジンは UI 込みで合計およそ1260行のコードしかなく、動かすのに必要な依存はたった3つ——React、React DOM、そしてアニメーション用の framer-motion です。Slidev もなければ reveal.js もない。ドラッグして回せる3D地球儀のような凝った演出さえ、ブラウザ標準の Canvas を使って手書きされており、グラフィックライブラリは一切導入していません。

これは「Web ページで作れるものなら何でもプレゼンにできる」という決まり文句の理由でもあります。もともとただの普通の React アプリであり、間に専用のスライドフレームワークが立ちはだかっていないからです。

肝心の役割分担：エンジンは固定、コンテンツは毎回ゼロから書く

なぜひと言のプロンプトだけで、見栄えよく使い勝手のよい完成品が返ってくるのか。答えは、リポジトリに収められた AI エージェント向けの手引き（.bolt/skills/slides/SKILL.md）にあります。そこでは作業を2つに分割し、この2つを絶対に混ぜてはいけないと繰り返し強調しています。

つまり AI エージェントは、毎回スライドエンジンを一から作り直す必要がありません（そここそバグが出やすく、見た目が崩れやすい部分です）。担うのは、すでに磨き上げられた骨組みにコンテンツを流し込むことだけ。手強い部分は固定資産として用意されており、AI は自分が得意な「組み合わせ」だけをこなす。これが「出来上がりが見栄えよくなる」理由です。

段階的なビルド：1ページ内でのクリックはちいさなカウンターで管理

プレゼンでもっともよく使われるインタラクションは、「クリックすると要点が1つ現れる」というものです。コード上では、段階的に表示したい内容を Build タグで包み、それが何番目のステップで現れるかを指定します。

<Slide center>
  <h2>Three things changed</h2>
  <Build at={1}>First, the data got bigger</Build>
  <Build at={2}>Then, the tools got faster</Build>
  <Build at={3}>Now, anyone can ship</Build>
</Slide>

上の例では、3つの要点がそれぞれ Build で包まれ、1・2・3のステップ番号が振られています。エンジンは各ページについて2つの数字を記録します——今何回クリックされたか、このページに全部で何ステップあるか。矢印キーを押したとき、まだ現れていないステップがあればまず1つ表示し、ステップを出し切ってから初めて次のページに進みます。戻るときも同様で、前のページに戻ると、そのページは「全部表示済み」の状態に復元されるので、行ったり来たりしても崩れません。ロジック全体は、この小さなカウンター1つだけ。魔法は何もありません。

プレゼンターモード、共有リンク、サムネイル——すべて Web の標準機能をそのまま使っただけ

スライドがそのまま Web ページである以上、多くの機能はブラウザ本来の能力をそのまま借りています。

• プレゼンターモード　Pキーを押すと、新しいタブが講演者ビューとして開きます（タイマー、次ページのプレビュー、編集可能なメモ付き）。2つのタブは、ブラウザ標準のタブ間通信（BroadcastChannel、同一オリジンのページ同士がメッセージを送り合う仕組み）で同期します。講演者ページでページをめくると、観客ページも連動して切り替わる。コードには「エコー防止」の小さなスイッチも用意されており、2つのページが互いに反応し合って暴走するのを防いでいます。
• 特定ページへの共有　アドレスバー末尾の #7 は7ページ目を意味します。ページをめくるたびにこの番号がリアルタイムで書き換わるため、特定のページへのリンクをそのまま相手に送れます。
• サムネイルとグリッド一覧　サイドバーやグリッドに並ぶ小さな画像は、スクリーンショットではありません。実際のページのコンポーネントを縮尺どおりに縮小して再レンダリングしたものなので、サムネイルは常に実際の内容と一致します。内容を変更すれば、サムネイルも即座に連動します。
• メモ　講演者ページでその場で打ち込んだメモは、自分のブラウザにローカル保存され、次回開いたときもそのまま残っています。

いちばん巧妙な仕掛け：注釈は「内容について回る」——画面が変わっても正確に囲める

発表動画には見落としがちな細部があります。ノートパソコン上である数字を丸で囲むと、同じプレゼンをスマートフォンで開いたときも、その丸はやはり同じ数字にぴったり重なっている——スマートフォン側ではレイアウトがすでに組み直され、数字の位置が移動しているにもかかわらずです。普通の手描き注釈ではこうはいきません。画面上の座標を記録しているだけなので、画面が変われば位置がずれてしまいます。Bolt Slides は次のような方法でこれを回避しています。

一筆書き終えると、まずその筆跡のちょうど中心が覆っているコンテンツブロックを特定し、それを「このページのルートノードから数えて何番目の子、さらにその何番目の子」というパス（例えば 0.2.1）として記録します。続いて、筆跡の各点を「そのブロックに対する相対的なパーセンテージ位置」に変換します。同じプレゼンであれば、どの画面サイズでもページの構造（誰が誰の何番目の子か）はまったく同じで、CSS がレイアウトを組み直しているだけなので、このパスはスマートフォン上でも同じブロックを見つけ出せます。パーセンテージ座標を当てはめれば、丸は再びその数字の上に収まるわけです。何もない背景に描かれた筆跡は、ページ全体に固定され、画面サイズに合わせて拡大縮小されます。

「センスは標準装備」をどう実現するか——AI が必ず守るべき厳格なルールとして明文化

話を AI に読ませる手引きに戻しましょう。もっとも力量が問われるのは、「PPT テンプレートっぽくしない」という抽象的な要求を、AI がそのまま実行できる具体的なルールへと分解している点です。

• 凝ったレイアウトにはすべて使用条件がある　3D地球儀は、ストーリーが本当に地理と関係する場合（国別のユーザー数や売上など）にしか使用が認められず、マーカーも実在の座標でなければなりません。巨大な数字表示は1セットにつき最大1個まで、かつ実際に裏取りできる出典が必要。見積もり表は、そのプレゼンで本当に価格の話をする場合にのみ登場させる。手引きの原文いわく——そのレイアウトがなぜこのプレゼンに役立つのか、ひと言で説明できないなら、削除しろ。
• サンプル原稿は削除するためにある　あの26ページがすべてのコンポーネントを見せているのは、単に「コンポーネントのショーケース」だからにすぎません。実際にプレゼンを作る際は絶対にそのまま流用せず、ユーザーの実際の内容に沿って書き直さなければなりません。
• 新規依存はゼロ　自分でコンポーネントを追加するのは構いませんが、使えるのは素の React、CSS、SVG のみで、新しいライブラリの導入は一切禁止。テーマも例の色やフォントの変数の値を変えることしか許されておらず、メインカラーを1つ変えるだけでプレゼン全体から UI まで一括で衣替えできます。

これらのルールを合わせたものこそが、「センスは標準装備」の本当の意味です。ここでのセンスは、モデルのひらめきに頼っているのではなく、先人が踏んだ落とし穴（レイアウトの詰め込みすぎ、中央揃えのズレ、スマートフォンでのはみ出しなど）をあらかじめ AI が守るべきチェックリストとして書き起こしたことに支えられています。だから Bolt がオープンソース化したのは、スライドツールというより、このあらかじめ蓄積された判断力一式だと言ったほうが正確でしょう。

始め方は2通り：ワンクリック生成、または自分の Agent に組み込む

Bolt は2つの始め方を用意しています。1つ目はワンクリック版：Bolt を開き、ひと言のプロンプト（例えば「ある製品をある顧客層に説明するプレゼンを作って」）を入力するだけで、設定なしにそのまま使える完成品のアプリが返ってきます。リポジトリには AI エージェント向けの skill ドキュメントが同梱されており、テーマの決め方、レイアウトの組み方、デッキの書き方まで教え込まれ、ブラウザタブのタイトルやアイコンまで自動で設定してくれます。

2つ目はオープンソース版：リポジトリをローカルに取得し、Claude Code、Codex、Cursor など、自分が使い慣れた Agent に組み込みます。起動すると26ページのサンプルデッキが立ち上がり、各コンポーネントを一通り実演してくれます。サンプルページを削除し、そこに自分の内容を書いていけばよいだけです。コード上では各ページは Deck の子要素の1つで、既製コンポーネントを組み合わせるか、普通の JSX を直接書くかを選べます。あるステップでクリックしたときだけ内容を見せたい場合は、Build でマークするだけでよく、矢印キーでの前進・後退にもきちんと対応します。

ページ組み立てに使うコンポーネントライブラリは5カテゴリーに分かれており、すべてスマートフォンに自動対応します。

• 構造　表紙、目次、セクション区切り、カラム分割、ベントーグリッド
• データ　棒グラフ／折れ線グラフ／ドーナツグラフ、表、大きな数字、カウントアップアニメーション、ビジュアルダッシュボード
• ナラティブ　引用、比較、タイムライン、ステップ、対話
• プロダクト　コードウィンドウ、ブラウザフレーム、見積もり、チーム紹介
• 装飾　3D地球儀、傾きカード、スポットライトカード、マーキー、アコーディオン、タブ

git clone https://github.com/stackblitz/bolt-slides
cd bolt-slides
npm install
npm run dev        # 打开一份 26 页示例 deck，改 src/App.tsx 写你自己的

# 或者交给 Agent 一句话：
# 帮我做一套把「你的产品」讲给「你的听众」的演示 deck

2026年7月16日、Bolt.new は自社の AI スライドツール Bolt Slides をオープンソース化しました（MIT ライセンス、つまり自由に使え、自由に改変でき、無料という意味です）。やったことの核心は1つ——スライドを「書き出した画像」から「動く Web ページ」に戻したこと。各ページは実質、Web ページのコードそのものです。

しかし疑問が生まれます。各ページが自前で書く Web ページである以上、AI はなぜひと言で見栄えよくインタラクティブな完成品を組み立てられ、醜いものの山にならずに済むのか。答えは次の図にあります。

秘訣は「分業」。もっとも作るのが難しく、もっとも見た目が崩れやすい部分をあらかじめ書き上げて固定し、AI は自分の得意な「穴埋め」だけを担当する。

一般の人にとって、いちばん実感できる変化はこうです。「触って遊べる」プレゼンを作ろうとすると、本来なら自分で大がかりなプログラムを書かなければなりませんでした。それを Bolt がまるごと無料でくれるようになったのです。