💡 使い方（API不要）： ①左のステップ1で構成案づくりのプロンプトをコピーしてAIに貼り付けます ➔ ②AIが出した構成案を左下の「Step2へ送る」で右に渡します（手直ししてもOK） ➔ ③右のステップ2でCSS・配色を選び、HTML生成プロンプトをコピーしてAIに貼り付けます ➔ ④できたHTMLを「.html」で保存して開き、崩れた所は下のステップ3で修正を依頼します。
ステップ1：構成と掲載する説明本文を作る
まずはあなたのメモやテーマから、AIに「各ページのタイトル・載せる文章・どんな図解やグラフにするか」を提案させるプロンプトを作ります（※まだHTMLコードは書かせません）。
🧪 1. 構成案の設計ルール
説明を守る共通設定 全ステップに反映
表紙・まとめ・付録を含む総枚数です。上の4種類は目安として扱います。
本文保持・文字サイズについて
理由・条件・例外・具体例を保持します。重複の統合と言い換えは許可し、キーワードだけへの要約は禁止します。文字サイズは1920×1080の設計寸法と想定表示幅から決めます。実際のウィンドウや投影距離で読みやすさを確認してください。
⚙ 詳細オプション（盛り込む要素・追加リクエスト）
図解・グラフ・アイコンは理解を助ける場合に使用します。説明を減らす目的では使いません。
📝 2. スライドにしたい元ネタ（インプット）
Microsoft Copilot（ChatGPT系モデル）
標準（5〜6枚）
Step 1：構成提案
🔍 生成されたステップ1用プロンプトを確認する（クリックで開閉）
📥 3. AIが画面に出した「ステップ1の結果」をここで拾う
Copilot（AI）が画面に出力した「スライド構成案」をコピーして下の枠に貼り付けるか、「クリップボードから直接取り込む」ボタンを押してください。そのまま右のステップ2に引き継がれます！
ステップ2：説明本文を保持してHTMLスライド化
ステップ1で固まった構成案を取り込み、有名なCSSフレームワークや配色テーマ、アニメーションを組み合わせて「1ファイル完結型のHTMLスライド」を生成させるプロンプトを作ります。
確定本文が制作対象です。原稿との差異は指摘し、手直しした内容を勝手に戻しません。新しいチャットでは元原稿も含めてください。
🎨 1. ベースにする有名CSSフレームワーク（ビジュアルサンプルから選択）
選んだCSSフレームワークのCDNリンクと設計ルールがプロンプトに組み込まれます。※上のサンプルは雰囲気を伝える簡易モック（イメージ）で、実際の出力はAIによって変わります。フレームワークは1つだけ選ぶのがおすすめです（混ぜるほど崩れやすくなります）。
🌈 2. デザインの空気感・配色テーマ（プレビューから選択）
※プレビューはイメージです。色コードとルールがプロンプトに入り、仕上がりはAIによって多少変わります。
⚡ 3. 演出・出力設定（必要なときだけ開く）
✨ 演出・ライブラリ（9項目）
初期状態は最小限（ナビ・アイコン・自動拡縮・PDF印刷）です。演出を足すほど崩れやすくなるので、必要なものだけオンにしてください。
🔤 フォント・ファイル名・出力方法・追加指示
分割すると、1回目は「共通部分＋前半のスライド」、2回目（「続き」と送る）は「後半のスライド＋閉じタグ」を出力します。後半は前半の末尾にそのまま貼り足して1つのファイルにします。
🧩 4. 取り込まれたスライド構成案（ステップ1の結果）
※左の「ステップ1の結果を取り込む」ボタンを押すと、ここに自動でテキストが入ります。
Tailwind CSS
ゆとりモダンSaaS
1ファイル完結 (.html)
品質ガード付き
🔍 生成されたステップ2用プロンプトを確認する（クリックで開閉）
ステップ3：説明を守りながらスライドを修正する
HTMLを開いて、崩れ・はみ出し・文字サイズなど直したい所が見つかったら、ここで修正依頼を作ります。言葉だけで「少し右に」と頼むより、ブラウザの開発者ツール（DevTools）で試した数値を渡すほうが確実です。
💡 DevToolsの使い方（初めての方は開く）
DevToolsの使い方： ①ブラウザで F12（または右クリック→検証）を押す ➔ ②直したい要素を選び、右側の「スタイル」欄で文字サイズや位置などの数値をいじって、理想の見た目を探す ➔ ③決まったら、その要素を右クリック→Copy → Copy element ➔ ④下の「対象コード」に貼り付け、決めた数値を指示に書く（例：この文字を80pxに）。
※DevToolsでの変更は仮の見た目で、元のファイルは書き換わりません。
※DevToolsでの変更は仮の見た目で、元のファイルは書き換わりません。
🛠 1. 何を直す？
⚙ 出力形式・ルール
📋 2. 対象のコードを貼る（おすすめ）
🔍 生成された修正依頼プロンプトを確認する（クリックで開閉）
🎨 このツールで指定できる有名CSSフレームワーク＆ライブラリ解説
AIはWebコードを広く学習しているため、フレームワーク名を指定するとデザインの方向性が伝わりやすくなります。ただし効果はモデルや指示の具体性で変わり、複数を混ぜるほど崩れやすくなります。基本は1つだけ選んでください。
Tailwind CSS（テイルウィンド）現代のWebデザインで圧倒的シェアNo.1。Bento Grid（角丸のタイル配置）、すりガラス風（backdrop-blur）、絶妙なドロップシャドウやグラデーションをAIが最も得意とするフレームワークです。Tailwind + DaisyUI（デイジーUI）Tailwindの上に洗練されたUIパーツとカラーテーマを追加する拡張ライブラリ。ボタンやバッジ、カードの完成度が最初から高く、ポップで余裕のあるデザインに最適です。UIkit（ユーアイキット）ヨーロッパ発のミニマルで上品なCSSフレームワーク。細身のタイポグラフィと広い余白（ホワイトスペース）、ふんわりした影が特徴で、堅苦しくない知的なITスライドに抜群に合います。Bootstrap 5（ブートストラップ）世界で最も歴史と実績がある王道フレームワーク。グリッドレイアウトの安定感が抜群で、カッチリとした信頼感のある法人向け提案資料や表組みに強みがあります。Bulma（ブルマ）明るくモダンなフラットデザインが得意なCSSフレームワーク。カラフルなラベルやタイル状のカードレイアウトが美しく、親しみやすい社内発表資料に向いています。NES.css（ファミコン8bit風）飛び道具として使えるレトロゲーム風CSSフレームワーク。枠線やボタンがドット絵風になり、エンジニア勉強会やLT（ライトニングトーク）で圧倒的なウケを狙えます。Chart.js / Apache ECharts数値を渡すだけで、スライドを開いた瞬間にニュッと伸びるアニメーション付きグラフを描画するJSライブラリです。Animate.css / インラインSVGページをめくった際に要素が時間差でフワッと浮かび上がる演出や、プログラムコードで直接描くボケない図解（SVG）を実現します。