どうも、AIに働かせて自分は寝ていたいKAZUです。
今回は、AIに案を出してもらい、それを「1画面に1問・案は横のボタン・押すと切り替わる」1枚のページで受け取る方法を紹介したいと思います。
「AIに案を3つ出してもらったけど、文章が長すぎて読み比べるのがしんどい……」
「結局どれにするか決められないまま、チャットがどんどん流れていってしまう」
「選んだあと、AIにどう返事すればいいか考えるのが地味に面倒くさい」
こう思ったことはありませんか？
AIの案は、長い文章を読み比べる手間を減らすために、1枚のHTMLページにまとめてもらうのがおすすめです。
具体的には、
- AIに「1画面1問」の構成でHTMLを作らせる
- 案をボタンで切り替えて比較し、一言メモを添える
- 最後に選んだ内容をまとめてコピーし、AIに貼り付けて返信する
それでは、AIの案を「1画面1問」のシートにして迷わず決める方法について、詳しく解説していきます。
※この記事は、ふつうのChatGPT・Claude・Geminiのチャット画面で使う場合の説明です。
Claude CodeやCodexなど、パソコンのフォルダにファイルを作らせて保存させる使い方は、ファイルの開き方も保存先も違うので、別の記事で解説する予定です。
「1画面1問」のシートにする理由
私も以前、文字だけの長い返事では判断できず、「これだけ見ても分からない」と3回言ったことがあります。それ以来、確認用の画面をHTMLの1枚でAIに作らせる決まりにしました。それからは判断が速くなりました。
AIが作ってくれた3種類の資料には、どれにするかや○か×かといった、AIからこちらへの質問が書かれていました。その質問が資料のどの位置にあるかを測ると、先頭から数えて46〜98%の位置で、ほぼ真ん中から最後のほうに埋もれていました。
私はこう言っていました。
「何をどうすればいいのか分からないのがずっと溜まっていく。それを把握するために認知コストを使うので、なかなか返事が進まない」
AIへの返事が進まなかった原因は、AIの性能ではなく、AIの書き方（質問の置き場所）にありました。
そこで、AIに「1画面に1問・案を横のボタンで並べる・押すと説明が切り替わる・一言を足す・最後にまとめてコピー」という形を指定するようにしました。
この方法なら、長い文章を読み比べる手間が減り、判断が速くなります。
AIにシートを作らせる手順
それでは、実際にAIに案を出させ、HTMLシートとして受け取る手順を解説します。
1. 決めたいことを書き出す
まず、最初の記事のテーマや記事を出すペースなど、決めたい項目を書き出します。
問いが2つ以上あると、この「1画面に1問」という形式がより活きてきます。
2. 「頼み方」をコピーして送る
以下のプロンプトをコピーして、1行目（ブログの部分と「2つ」の数）と①②の行を自分の状況に合わせて書き換え、問いがもっと多いときは③を足してAIに1回送ります。
案出しと1枚のHTML作成を、この1回の送信で同時に頼みます。
ブログを始めたいのですが、決められないことが2つあります。
①最初の記事のテーマ
②記事を出すペース
それぞれ案を3つ出して、全部を1枚のHTMLページにしてください。
【ページの作り方】
・1ファイルだけで動くようにする（外部のライブラリは使わない）
・絵文字は使わない
・1画面に1つの問いだけを出す。「前へ」「次へ」のボタンで移る
・案はA・B・Cのボタンを横に並べる。押すと、その下に「どんな案か」「良いところ」「気になるところ」が切り替わって出る
・案ごとに「一言」を書く欄をつける
・「その他（自分で書く）」のボタンもつける
・最後の画面に、選んだ案と一言を1つの文にまとめて、「コピー」ボタンで写せるようにする3. 返ってきたシートを手元に残す
AIから回答が返ってきたら、各AIの機能を使ってHTMLファイルを手元に残します。
ChatGPT（有料プラン：Plus）の場合
返事の中に、HTMLファイルのカード（blog_start_planner.html など）が出ます。
カードの右端のダウンロードのマークを押すと、ファイルができます。
ChatGPTの画面の上には「Chat」と「Work」の切り替えがあります。確かめたときは、どちらでもファイルのカードが出ました。「Work」のときは、カードが画面右側の「出力」に出て、「ファイルをダウンロード」のボタンがつきます。
ファイルの名前はChatGPTがその都度つけるので、blog-start.html になることもあります。
Claude（有料プラン：Max）の場合
チャットの右側にアーティファクトが開き、シートが表示されます。
アーティファクトの上にある、題名の右の「▾」を押して、メニューから「エクスポート」を開き、「HTML（単独で動作するWebページ）」を選ぶと「ブログの始め方を決める.html」が作成されます。
Gemini（ログインなしでも・有料のProでも）の場合
Geminiは、画面の右にCanvas（プレビュー）が開く場合と、チャットの中にコードの枠が出る場合があります。
確かめたときは、ログインなしではCanvasが開き、有料のProではコードの枠が出ました。
Canvasが開いたときは、Canvasの上の「ダウンロード」ボタンを押すと、code_artifact.html が保存されます。
コードの枠が出たときは、枠の右上のダウンロードのマークを押すと、gemini-code-（数字）.html のような名前のファイルが保存されます。
※ChatGPTは有料（Plus）とログインなし、Claudeは有料（Max）、Geminiはログインなしと有料（Pro）の両方で確認しました。
有料のChatGPT・有料のClaude・Geminiではダウンロードのボタン（マーク）が出ましたが、ログインなしのChatGPTでは出ませんでした。
ダウンロードのボタン（マーク）が出ないときは、AIが返してきたHTMLのコードをコピーしてメモ帳に貼り、名前の最後を「.html」にして保存してください。保存するときの文字コードは「UTF-8」にします。
4. ダウンロードしたファイルを開いて使う
ダウンロードしたファイルは、ブラウザのダウンロード先に入ります。
ファイルをダブルクリックするか、ブラウザにドラッグすると開けます。
保存先のフォルダは、ブラウザの設定で変えられます（Chromeは設定→ダウンロード→「変更」、Edgeは設定→ダウンロード→場所の「変更」）。
ダウンロード前に保存場所を確認する設定をオンにすると、ダウンロードのたびに保存先を選べます。
案のボタンを押して見比べ、気になる点があれば一言欄に記入します。
最後の画面まで進むと、選んだ内容が1つの文章にまとまるので、コピーしてAIのチャットに貼り付けて返信しましょう。
AIごとの違いと注意点
実機で確かめたAIごとの違いは以下の通りです。
| AI | 形式 | 外部読み込み | 保存して開いた確認 |
|---|---|---|---|
| Gemini（ログインなし） | Canvas | あり | 確かめた |
| Gemini（有料のPro） | コードの枠 | なし | 確かめた |
| ChatGPT（有料のPlus） | ファイルのカード | なし | 中身を読んだだけ |
| Claude（有料のMax） | アーティファクト | なし | 中身を読んだだけ |
ログインなしのGeminiのCanvasのファイルは、頼み方に「外部のライブラリは使わない」と書いたのに、外のTailwind CSS（見た目を整える部品）などを読み込む作りで、動作にインターネットが必要です。
有料のProのコードの枠のファイルは、外部読み込みなしです。
※Geminiは、ログインなしのCanvasのファイルと、有料のProのコードの枠のファイルのどちらも実際にパソコンへ保存して、ブラウザで開き、最後の画面まで進めました。
ChatGPTとClaudeは、ダウンロードのボタン（Claudeはエクスポート）が作るファイルの名前と中身を、ブラウザの中で読み取っただけで、パソコンへは保存していません。
以下の4点は確かめていません。
- ログインして使う無料アカウント（ChatGPT・Claude・Gemini）の画面
- Copilot
- チャットの中のプレビュー（GeminiのCanvas・Claudeのアーティファクト・ChatGPTの出力など）の中で、案のボタンやコピーが動くか
- ChatGPTとClaudeのファイルを、パソコンへ保存して開いた結果
なお、保存して開いたGeminiのファイルでは案のボタンは動きましたが、コピーのボタンは押していません。
以上が、AIの案を「1画面1問」のシートにして迷わず決める方法でした。
