AIの資料作成はHTML/CSS経由が正解｜あとで直せる作り方

AIに作ってもらった資料、いざ「ここの数字だけ直したい」となった瞬間に、最初から作り直しになって困ったことはありませんか。特に画像として出力された資料は、後から1文字だけ直すこともできません。

この記事では、AIで作った資料を「あとから何度でも直せる状態」にするための作り方を解説します。結論は、画像ではなくHTML/CSSで資料を作り、必要なときにPDF化するというやり方です。そして今の時代に最も相性がいいのは、Claude CodeのようなコーディングAI（AIエージェント）にHTML/CSSを書かせ、自分で直しながら仕上げる進め方です。コードが書けなくても大丈夫です。中身はAIに書かせ、人は「どこをどう直すか」を指示するだけだからです。具体的な手順、AIへの渡し方、出力の確認の仕方、現場でつまずきやすいポイントまで、順番にお伝えします。

Contents / 目次

1. 結論。資料はHTML/CSSで作り、PDFは「印刷」で出すのが再編集の近道
2. AIで再編集できる資料を作る手順。設計→生成→確認→修正の4ステップ
3. この作り方にすると、資料作成はどれだけ楽になるのか
4. よくある失敗と、その防ぎ方
5. 現場で見えてきた、この方法の「向き・不向き」と妥協点
6. よくある質問
7. 「自社の資料作成の型」を一緒に作りませんか

結論。資料はHTML/CSSで作り、PDFは「印刷」で出すのが再編集の近道

AIで資料を作るなら、最初からHTML/CSS（Webページを作るための文章とデザインの言語）で組み立て、完成したものをブラウザの印刷機能でPDFに保存するのが、もっとも直しやすい作り方です。理由はシンプルで、HTMLは「文字と構造がそのまま残っているデータ」だからです。直したい箇所の文字や数字、色や余白を、AIに指示すればピンポイントで書き換えられます。

ここで言うHTML/CSSとは、かんたんに言うと「文章の中身（HTML）」と「見た目の指定（CSS）」を分けて書いたテキストファイルのことです。中身が文字として残っているので、AIも人間も後から読んで編集できます。一方、画像（PNGやJPEG）として出力された資料は、見た目は同じでも中身は「絵」です。絵の上の文字は打ち直せないので、1か所直すだけでも作り直しになります。これが「画像生成では再編集できない問題」の正体です。

押さえるべきは3つ。①AIには画像ではなくHTML/CSSのコードを書かせる、②ブラウザの印刷機能（PDFとして保存）で紙面サイズのPDFを出す、③直すときはコードをAIに渡して部分修正させる。この3つを回すだけで、資料は「使い捨て」から「資産」に変わります。

3つの作り方の違いを、再編集のしやすさで並べると次のようになります。自分の資料が「何回も更新するものか、一度きりか」で選ぶのがコツです。

作り方	後から直せるか	向いている資料
画像生成AIで作る	×（作り直しになる）	一度きりのビジュアル、SNS投稿用バナー
スライド作成AIで作る	△（ツール内なら可。崩れやすい）	社内のたたき台、口頭説明用スライド
HTML/CSSで作りPDF化	◎（文字も数字も部分修正できる）	毎月更新する資料、料金表、提案書、ホワイトペーパー

つまり、数字や文面が頻繁に変わる資料、毎月作り直す定例資料、社外に出す提案書などは、HTML/CSS経由がもっとも手戻りが少なくなります。逆に、二度と直さない一発勝負のビジュアルなら、画像生成でも問題ありません。資料の「寿命」で作り方を選び分けるのが、現場で時間を無駄にしないコツです。

AIで再編集できる資料を作る手順。設計→生成→確認→修正の4ステップ

再編集できる資料は、いきなりAIに「資料を作って」と頼んでも出てきません。人間が先に骨組みを決め、AIに肉付けさせ、出力を確認して直す、という役割分担で進めるのが確実です。ここでは誰でも再現できる4ステップに分けて説明します。

ステップ1。人間が「目的・相手・構成」を先に決める

最初にやるのは、AIに渡す前の設計です。AIは「誰に・何を・なぜ伝えるか」という意図を自分では決められません。ここを飛ばすと、もっともらしいけれど芯のない資料が出てきます。最低限、次の3つを紙に書き出してから始めましょう。

• 目的：この資料を読んだ相手に何をしてほしいか（例。問い合わせてほしい、社内で承認してほしい）
• 相手：誰が読むか（例。決裁権を持つ経営者、現場の担当者）
• 構成：どんな順番で何を見せるか（例。課題→解決策→事例→費用→次の一歩）

この3点を決めておくと、AIへの指示が一気に具体的になります。構成は、見出しを箇条書きで5〜7個並べる程度で十分です。ここが資料の背骨になります。

ステップ2。AIにHTML/CSSで「1ページ完結」のコードを書かせる

骨組みができたら、AIに資料の中身を書かせます。このとき重要なのは「画像ではなくHTML/CSSのコードで出して」と明示することです。出発点として、次のような短い指示（たたき台）から始め、あとはAIと対話しながら自社の内容に合わせて詰めていくのがおすすめです。

ここで「どのAIに頼むか」で仕上がりと直しやすさが大きく変わります。判断軸は3つです。①コードをファイルとして扱い、何度も部分修正できるか（この用途ではClaude CodeのようなコーディングAI＝AIエージェントが最も滑らかです。コードの生成・修正・整理を会話で繰り返せます）。②渡す情報＝ステップ1で決めた目的・相手・構成と、入れたい中身のテキスト。デザインは「A4縦・余白広め・見出しは濃い色」程度の言葉で十分です。③出力の確認ポイント＝ブラウザで開いて崩れないか、文字や数字が正しいか。チャット型のAIでもHTMLは作れますが、「あとで何度も直す」ループはコーディングAIの方が圧倒的に楽です。なお、Claudeを使う場合、込み入った資料づくりや反復修正にはClaude Code（開発者向けのAIエージェント）が向き、単発の下書きづくり程度なら通常のClaudeでも進められます。

あなたは資料デザインの専門家です。
次の構成で、A4縦・印刷を想定した提案資料をHTMLとCSSで作ってください。
・画像化せず、文字はすべてテキストのまま書いてください
・CSSは同じファイル内（styleタグ）にまとめてください
・印刷したときに1ページに収まるよう @page で余白を指定してください

【目的】［例：問い合わせを促す］
【相手】［例：中小企業の経営者］
【構成】［ステップ1で決めた見出しを貼る］
【入れたい数字や事実】［確実な情報だけを箇条書きで］

ポイントは、作り込んだ完璧なプロンプトを最初から用意しようとしないことです。いまのAIは、ざっくり頼めば自分で整えてくれます。まずはこの程度のたたき台で投げて、出てきたものを見ながら「もっと余白を広く」「見出しを大きく」と会話で直していくほうが速いです。

ステップ3。ブラウザの印刷機能でPDFにする

AIが出したHTMLは、テキストエディタに貼り付けて拡張子を「.html」にして保存し、ブラウザで開けば見た目を確認できます。PDFにするときは、専用ツールは要りません。ブラウザの印刷機能を開き、出力先（プリンター）を実際の印刷ではなくPDF保存に切り替えるだけです。メニューの名称や項目はブラウザ（Chrome・Safari・Edgeなど）によって異なるので、お使いのブラウザの印刷画面で確認してください。設定では、用紙サイズ（A4など）、余白、背景の色や画像を印刷する項目の3つを見ておくと、画面で見た通りのPDFになります。背景色やマーカーが消えるときは、たいてい背景を印刷する設定がオフになっています。

ステップ4。直すときは「コードごとAIに渡して部分修正」させる

ここがHTML/CSS方式の最大の利点です。来月また同じ資料を使うとき、画像なら作り直しですが、HTMLなら直したい箇所だけ変えられます。やり方は、保存しておいたHTMLコードをまるごとAIに貼り付け、「この資料の料金表の数字を最新に直して。それ以外はそのまま」と頼むだけです。AIは構造を保ったまま、指定箇所だけ書き換えてくれます。

AIに修正を頼むときは「それ以外は変えないで」と必ず一言添えてください。これを言わないと、頼んでいない箇所のデザインや言い回しまで勝手に作り直してしまい、かえって確認の手間が増えます。

出てきたものを人間が確認するときは、次のチェックリストを使うと抜けが減ります。これはツールに関係なく使える観点です。

• 数字・固有名詞：金額、日付、社名、商品名が正しいか（AIは平気で間違えます）
• 事実関係：書かれている内容に根拠があるか、思い込みで盛られていないか
• レイアウト崩れ：PDF化したときに文字がはみ出したり、変な位置で改ページされていないか
• トーン：自社の言葉づかいと合っているか、AI特有の浮いた表現がないか

この作り方にすると、資料作成はどれだけ楽になるのか

HTML/CSS方式に切り替えると、いちばん効くのは「2回目以降」です。一度作った資料の型がそのまま残るので、翌月・翌年の更新が、数字の差し替えだけで済むようになります。ゼロから作り直していた作業が、AIへの一言の指示で終わる感覚です。

実際、AIが作った資料は、そのまま使えることはまれで、人の手直しがほぼ必須です。ここから言えるのは、AIは「手直し前提」で使うものであり、その手直しがしやすい形式で作っておくことが時短の決め手になるということです。画像だと手直しがゼロからの作り直しになりますが、HTMLなら部分修正で済みます。この差が、毎月積み重なると大きな時間の差になります。

現場で見ていると、うまくいっているのは、AIに丸投げせず役割を分けているケースです。具体的には、人間が「目的の設定」と「最終チェック」を握り、AIには「構成に沿った肉付け」と「コードの記述」という、繰り返しが多くて手間のかかる部分を任せています。AIは繰り返し作業を高速化するのが得意で、人間は思考と最終判断に集中する、という協働の形です。

もうひとつの副産物が、資料の「再利用」です。HTMLで作った資料は、中身が文字データとして残っているので、Web公開用の土台としても使い回せます。ただし、印刷向けに組んだ指定（余白や改ページなど）とWeb表示では前提が異なるため、そのまま流用するのではなく、Web用にいくらか調整する前提で考えてください。それでも、ゼロから作り直すより手間が少ないのは、画像で作っていては得られないメリットです。

よくある失敗と、その防ぎ方

このやり方は強力ですが、現場では決まったパターンでつまずきます。代表的な3つを「どんなときに起きて→どうなって→どう防ぐか」のセットで紹介します。

失敗1。AIに丸投げして、芯のない一般論が出てくる

「いい感じの提案資料を作って」とだけ頼むと起きがちです。AIは目的や相手を知らないので、どこかで見たような一般論を並べた資料を返してきます。結果、読んでも刺さらず、結局ゼロから書き直すことになります。防ぎ方は、前述のステップ1を必ずやることです。目的・相手・構成を先に決めて渡せば、AIは「0から作る」のではなく「1を10にする」役割に収まり、精度がぐっと上がります。

失敗2。数字や事実をそのまま信じて、間違った資料を配ってしまう

AIは、もっともらしいけれど事実と違う情報（ハルシネーション）を平気で混ぜてきます。特に統計データ、金額、日付、固有名詞は要注意です。これに気づかず社外に出すと、信用問題になります。防ぎ方は2つあります。ひとつは、AIに渡す指示の中に「数字や事実は自分で確認できたものだけ使う」と書き、不確かな情報は空欄で出させること。もうひとつは、出力後に人間が一次情報（公式サイトや社内の正データ）と照合することです。数字のファクトチェックだけは、AIに任せず必ず人がやると決めておきましょう。

失敗3。機密情報をそのままAIに貼り付けてしまう

資料には未公開の数字や個人情報が含まれがちです。これを何も考えずにAIへ貼り付けると、情報漏えいのリスクがあります。防ぎ方は、社外秘・個人情報は入力しないことを社内ルールにし、どうしても扱う場合は、使うツールの利用規約とデータの扱いを一次情報で確認することです。各社の公式ヘルプや規約で「入力データをモデルの学習（訓練）に使うか」「学習利用をオフにするオプトアウト設定があるか」「法人向けプランや管理者設定で既定の扱いがどうなるか」を確認し、契約前にチェックしておきましょう。具体的にどう線引きすればいいか迷う方は、AIに入力してはいけない個人情報｜AIセキュリティ社内ルールの作り方もあわせて参考にしてください。

失敗4。複雑な表やレイアウトが、PDF化で崩れる

細かい表組みや凝った配置の資料は、HTML化したときにレイアウトが崩れやすいです。元のデザインを再現しきれず、修正に時間が溶けます。完璧な再現は難しいので、複雑なものは「AIで8割作って人が仕上げる」と割り切るのが現実的です。

現場で見えてきた、この方法の「向き・不向き」と妥協点

正直にお伝えすると、HTML/CSS経由の資料作成は万能ではありません。導入を検討するなら、得意なところと苦手なところを先に知っておくほうが失敗しません。ここは教科書には書かれにくい、実際に手を動かして見えた本音の部分です。

まず向いているのは、文字と数字が主役の資料です。提案書、料金表、ホワイトペーパー、定例レポートのように、中身が更新されていく資料ほど効果が出ます。逆に向いていないのは、写真や図版が主役のビジュアル重視の資料です。グラフィカルなパンフレットやブランドビジュアルは、デザインツールで作ったほうが速くてきれいです。何でもHTMLにしようとすると、かえって遠回りになります。

内製と外注の線引き。社内で回すなら「型を一度プロに作ってもらい、毎月の更新は自社でAIに指示して回す」のが現実的です。型づくりには、印刷を意識したCSS（余白や改ページの指定）の知識が要り、ここでつまずく会社が多いからです。型さえ整えば、運用は非エンジニアの担当者でも回せます。

見落としがちなコストもあります。ひとつは「最初の型づくりの学習コスト」です。一度きれいな型ができれば後はラクですが、その最初の1枚に時間がかかります。ここを軽く見て「すぐできる」と思って始めると、想定外に時間を取られます。難しいのは事実なので、最初の型だけは詳しい人と一緒に作るか、外部に頼るのが賢い判断です。もうひとつは「AIの修正が積み重なるとコードが汚れていく」点です。何度も直すうちに不要な指定が溜まり、だんだん崩れやすくなります。半年に一度くらい、AIに「このコードを整理して、見た目を変えずにきれいにして」と頼んでリセットすると長持ちします。

AIに任せていい範囲と、人がやるべき範囲をはっきりさせておくことも大事です。AIに任せていいのは、コードの記述、構成に沿った文章の肉付け、レイアウトの調整、部分修正です。人がやるべきは、目的の設定、数字と事実の最終確認、機密情報の管理、そして「この資料で本当に相手が動くか」という判断です。この線引きを社内で共有しておくと、AIを入れても事故が起きにくくなります。社内への展開の進め方はAIシステム化の成功ロードマップ｜ツール導入で終わらせず社内に定着させるでも具体的に解説しています。

よくある質問

「自社の資料作成の型」を一緒に作りませんか

ここまで読んで、やり方は分かったけれど「最初の型づくりや、印刷向けの設定でつまずきそう」と感じた方も多いはずです。コレットラボのAI業務システム化支援では、こうした資料作成の仕組みを、自社で回せる形まで一緒に設計しています。「まずは現状の資料を見てもらって相談だけ」でも大歓迎です。AI業務システム化の詳細はこちらからお気軽にお声がけください。