メモを渡すだけ。
動く図解のスライドとカンペが、
数分で。

作ったら、ブラウザへ。
直す・メモ・同時編集・発表者ツール。

ライト版で作った deck.json を VibeSlide App に入れる（または app-sync.mjs push）と、目次とスライドで読め、スライドの上で文字を書き換えられ、メモを Claude Code に戻せ、同じ URL で同時に編集でき、発表者ツール（カンペ・ルビ・30分ブロック・投影の同期）で本番ができます。ライト版のエンジンには「押せる要素」（1枚1操作・根拠パネル・合意チェック・自動デモ・ズームスルー）も入りました。AI で作るときは、自分の API キー（Claude・OpenAI・Gemini）か、自分のマシンの Codex app-server（サブスク枠）を使えます。

VibeSlide App を無料で開く 使い方

提供範囲：どなたでも無料です（Google か Discord、または受講生のアカウントでログイン）。AI で作るときの費用は、ご自身の API キーか Codex の契約の範囲です。スライドを作る Agent Skill とプラグインは、購入（または受講生ポータル）でのみ受け取れます。

言いたい「関係」に合う図を、
77 の型から Sonnet 5.5 が選ぶ。

下の 77 枚は、同梱の見本デッキ（gallery.html）を実際のブラウザで開き、1 枚ずつ撮ったスクリーンショットです。どれも SVG で描かれ、拡大してもにじまず、点線が流れ、粒が走り、クリックで 1 段ずつ組み上がります。画像ファイルは 1 枚も使っていません。クリックすると大きく見られます。

型の名前（flow など）は、Sonnet 5.5 が設計データに書く名前です。テーマ（6 種）を切り替えると、同じ図が別の色と書体で描き直されます。型にない図が要るときは、自由描画（custom）で 1 デッキ 1〜2 枚まで描きます。

AI が書くのは、図ではなく「指示」。
描くのは、同梱のエンジン。

{
  "h": "受注までの**5ステップ**",
  "body": "左から右へ、点線が次の工程へ流れ続ける。",
  "diagram": {
    "type": "flow",
    "data": { "steps": [
      { "t": "リード獲得", "d": "展示会・Web広告・紹介" },
      "ヒアリング", "提案",
      { "t": "見積・交渉", "focus": true },
      "受注" ] }
  }
}

• プロンプトキャッシュが効く。参照資料（型の一覧・動きの文法）を毎回同じ順で読むので、入力の 8 割前後がキャッシュ読み（定価の 1/10）になります。
• 動きは「意味」で選ぶ。関係が続いていれば点線が流れ（flow）、モノが運ばれれば粒が走り（packet）、順に語りたければ 1 段ずつ組み上がる（build）。
• 渡す前に機械で検査。枠からのはみ出し、本文のあふれ、図と本文の重なり、文字化け、見出しの 3 行折れ、JavaScript のエラーを、全ページで確かめます。
• HTML 1 つで完結。外部のライブラリも画像も読み込まないので、メールで送れて、ネットの無い会場でも動きます。PDF にも書き出せます（1 スライド 1 ページ、組み上げは全段表示）。

同じ 1 枚が、
T キー 1 つで着替える。

下は同じ 1 枚（紹介デッキの 4 枚目）を 6 つのテーマで撮ったものです。図も文字も描き直されるので、色を変えても崩れません。

操作：→／クリックで進む、← 戻る、T テーマ、B 背景、O 一覧、F 全画面、P 印刷、N カンペ。スマホは右側タップ／左スワイプで進み、長押しでテーマ切替、2 本指タップで一覧。

そのまま開いて、動かせます。

プロンプトキャッシュが効くから、軽い。

Claude Code（Sonnet 5.5）での実測です。それぞれ 1 回の計測で、入力の長さや枚数、お使いの環境で変わります。費用は Anthropic の定価で換算した値で、Claude のサブスクリプション（Pro・Max）の範囲ではこの金額は請求されません。

軽い理由：Sonnet 5.5 が書くのは deck.json（1 枚あたり数行）だけで、図・動き・カンペは同梱のエンジンが描きます。参照資料を毎回同じ順で読むのでプロンプトキャッシュが効き、入力の 8 割前後がキャッシュ読み（定価の 1/10）になります。Claude Pro（月 20 ドル前後）で、1 日に数本は無理なく作れる量です。