Brainの教材を作りました。AIに資料を作らせる「HTMLファースト式」

Brain の教材を作りました！

Brain は、ノウハウを文章にして販売できるサービスです。 そこに、AIで資料を作るやり方をまとめました。

8月に出して、10月11日に大きく改訂しました。

題名はこちら。

パワポは、もう自分で作らない。HTMLを活用してプロ級資料を作る。AIスライド作成術【コピペ用プロンプト付き】

…長いです。

無料で読めるところも多いので、その部分を少しだけ紹介させてください。

🗂️ 資料1枚に、半日かかっていました

提案書、報告資料、掲示するポスター。 人に見せる資料を作る機会が、けっこう多いんですよ。

以前は、1枚の資料に半日かけていました。

AIに「パワポで作って」と頼むと、たいていこうなります。 文字は枠からはみ出すし、図の位置はバラバラ。 直そうとすると、テキストボックスを1個ずつドラッグする羽目に…

でも、原因はAIの性能ではありませんでした。 頼む順番だったんです。

AIがいちばん得意な形（HTML、つまりWebページの形）で先に作ってもらって、最後にPDFやパワポに変える。 これを「HTMLファースト式」と呼んでいます。 今回の教材は、このやり方を最初から最後まで書いたものです。

🖥️ 無料のところで、完成品のデモを見せています

言葉で説明するより、見てもらうのが早いと思います。

題材は、架空の会社「株式会社ミナモト商事」の、経費精算をペーパーレスにする提案書です。 社内の稟議に出す想定で作りました。

出発点は、ワードで打った簡単な企画のメモだけ。 体裁はまったく気にしていません。

これをAIに渡して「HTMLにして」と一言。 見出しと表と箇条書きが整理された、下書きになります。

中身が固まったら「A3横・1枚に収まる資料にして」。 ここで一気に資料の顔になります。

途中で下の段がはみ出したんですが、それも「1枚にぴったり収まるように調整して」の一言で直りました。

最後は「パワーポイント形式に変換して」。 16:9のスライドに組み替わって、文字はぜんぶ、あとから打ち直せるテキストのままです。 Googleドライブに入れて開けば、そのままGoogleスライドになります。

ここまで、指示を出しはじめてから30分弱でした（自分の記録です）。 書いたのは日本語の指示だけで、コードは1行も書いていません。

⏱️ A3のポスターは、31分でした

もうひとつ、記録が残っている話があります。

ある夜、チームに貼るA3横のポスターを作ったときのこと。 22時21分に始めて、22時39分にはPDFができていました。 微調整を入れても31分です。

ファイルの保存時刻が残っていたので、あとから数えられました。⏰

このときは、ふだんのAIのチャット画面だけでやっています。 Claude / ChatGPT / Gemini のチャット版で、ちゃんと完成します。

そのうえで Claude Code（AIにパソコンの作業を任せられる道具）を使うと、ファイルの保存、PDFへの変換、できたPDFの寸法の確認までAIがやってくれます。 こっちは、日本語で指示を出して、目で見て確かめるだけ。 さらに使いやすくなります。

🧰 手順をAIに覚えさせる「スキル」付きです

今回いちばん入れたかったのが、これです。

手順そのものを、AIが毎回読む「スキル」（手順書）にしました。 一度入れておけば、「この内容で提案書を作って。A3横で」と打つだけで、AIが教材のとおりに進めてくれます。

スキルの中身は、資料づくりの手順が14項目と、HTMLに書き込んで保存するスキルが5項目。 無料のところで、前半の7項目をそのまま公開しています。

• 進め方：5つの段階を順番に進めて、前の段階に納得してから次へ
• 最初の聞き取り：読む人・目的・トーンを、作り始める前に聞く
• ファイルの置き場所と名前：日本語の名前に、版の番号（_v1、_v2）を付ける
• 情報を正しくする：数字・名前・日付を、デザインより先に確かめる
• 用紙の大きさ：表が多いならA3横、文章が中心ならA4縦
• 余白：余白ゼロにはしない
• 文字の大きさ：全部を大きくせず、いちばん見せたい数字だけを大きく

後半の項目と、そのままコピーして使えるスキルのコードは、有料のところに載せています。 Claude Code・claude.ai・ChatGPT・Gemini、それぞれの入れ方も書きました。

🧱 Brain に出すまでに、ちょっと引っかかったこと

Brain の記事を書く画面には、表を作る機能がありませんでした。

…表、けっこう使っていたんですよね。

しかたないので、表は全部画像にしました。 原稿を直したら、表の画像も自動で作り直されるようにしてあります。

それから、Brain は大げさな言い回しに厳しくなっています。 「誰でも簡単に」のような言い切りは、自動で見つかって審査で止まるそうです。 なので「30分」も「31分」も、本文では自分の記録として書いています。

あと、初版で書いていたPDFの保存の設定に、まちがいがありました。 今回の改訂で直して、本文にも「訂正」と書いています。 お恥ずかしい…

👀 こんな人に読んでほしいです

• AIにパワポを頼んで、崩れたスライドにガッカリしたことがある人
• 提案書や報告資料に、毎回何時間もかかっている人
• PDFで、パワポで、Googleスライドで…と、出す形がバラバラで振り回されている人

プログラミングの知識は使いません。 やることは「日本語で指示を出して、目で確かめること」だけです。

題名は長いですが、中身は「順番を変えるだけ」の話です。

そんな、Brain の教材の紹介でした。