こんにちは。
最近、AIを使って仕事の成果物を作ろうとする人が増えていますが、いざやろうとすると「このツール、AIと連携できないじゃん」、連携できたとしても「うまく連携できない」という壁にぶつかることが多いです。
結論から言うと、最終的に画像やPDFになるものは、ほぼ全部HTMLで作れます。そしてHTMLはAIが最も得意なアウトプット形式です。
HTMLを経由すれば、多くの資料作成や画像、図、スライドの作成は専用ツール不要、追加設定ゼロ、AIにプロンプトを投げるだけ。この記事ではその理由と実例を書いていきます。
AIに仕事させたいのに、ツール連携が壁になっていないか
名刺はCanva、請求書はfreee、グラフはスプレッドシート、チラシはIllustrator。仕事で使う成果物には、それぞれ「定番のツール」がありますよね。
で、最近はどのツールも「AI機能搭載！」を謳い始めていますが、実際に使ってみると設定が面倒だったり、できることに制約があったり、そもそもAI対応していないツールもまだまだ多い。
つまりこういう状況です。
- AIに仕事させたい
- でも専用ツールのファイル形式はAIが直接触れない
- ツール側のAI連携を待つしかない……？
そんなんじゃあ困りますよね。
HTMLを経由するだけで全部解決する
HTMLとは、Webページを作るための言語です。皆さんが普段ブラウザで見ているページはすべてHTMLで書かれています。
考えてみてください。Webページで表示されているものは、すべてHTMLで作れるはずですよね。
請求書も、名刺も、チラシも、それらを作れるWebサービスがあります。じゃあ手元でHTMLを書けばいい。
そして、HTMLはPDFや画像に簡単に変換ができます。手動でもHTMLファイルをブラウザで開いて、印刷（Ctrl+P / Cmd+P）すればPDFになる。スクリーンショットを撮れば画像になる。それをプログラム経由で行えばいい。これだけです。
しかもHTMLはAIにとって最も自然なアウトプット形式のひとつです。ChatGPTでもClaudeでも、「HTMLファイルを作って」と言えば一発で出してくれる。追加の設定も、プラグインのインストールも、API連携も要りません。
難しそうに聞こえるかもしれませんが、ここで大事なのは「HTMLを自分で書けるようになれ」という話ではありません。AIに書かせればいいという話です。
つまり、専用ツールとAIの間にHTMLを挟むだけで、あらゆる成果物がAIで作れるようになるのです。
HTMLで作れるもの、こんなにある
「いやいや、HTMLで作れるものなんて限られるでしょ」と思った方もいると思います。ところがこれが、仕事で使う成果物を洗い出してみるとほとんどカバーできるんです。
オフィス・管理系
請求書 / 見積書 / 納品書 / 領収書 / 発注書 / 契約書 / 稟議書 / 日報・週報・月報 / 議事録 / 勤怠表・シフト表 / 経費精算書 / 在庫管理表 / 棚卸表
営業・提案系
営業資料（会社紹介デッキ） / 提案書・企画書 / 料金表・プライスリスト / 製品カタログ / 比較表（自社 vs 競合） / ケーススタディ・導入事例 / ホワイトペーパー / ROI試算シート
マーケ・デザイン系
チラシ・フライヤー / ポスター / バナー広告 / SNSサムネイル・投稿画像 / メルマガ（HTMLメール） / LP / プレスリリース / イベント招待状・案内状 / クーポン・ギフトカード / ノベルティデザイン（ステッカー等）
人事・採用系
履歴書・職務経歴書 / 名刺 / 社員証・IDカード / 組織図 / 採用ピッチ資料 / オンボーディング資料 / 社内報・ニュースレター / 研修資料
飲食・店舗・小規模事業者
メニュー表 / ショップカード / POP・値札 / 予約カード / 開店・閉店案内
教育・セミナー
プレゼンスライド / 配布資料（ハンドアウト） / 証明書・修了証 / テスト・アンケート用紙 / タイムテーブル
データ系
グラフ・チャート画像 / CSV→整形テーブル / ダッシュボード / 定期レポートのPDF化 / QRコード
その他
名簿・連絡先一覧 / 座席表 / カレンダー / 間取り図 / ラベル・シール（宛名、商品ラベル等）
ざっと60個近くあります。もちろん全部がHTMLで最適ということではありません。
ですが、「最終的に紙や画像になるもの」は原理的にHTMLで再現できるということです。
実際にプロンプト1発で作ってみた
理屈だけ言っても説得力がないので、実際にAIにプロンプトを1回投げただけで作った成果物を見せます。使ったのはClaude。プロンプトをそのまま貼るので、同じものを試せます。
請求書
freeeやMisocaがなくても、この品質の請求書がプロンプト一発で出てきます。A4サイズで印刷に最適化済み。Cmd+P（WindowsならCtrl+P）でそのままPDFに書き出せます。
使ったプロンプト：
1以下の請求書を単一HTMLファイルで作成してください。
2仕様:
3- サイズ: A4縦（210mm x 297mm、@media printで最適化）
4- デザイン:
5 - クリーンでプロフェッショナル
6 - ヘッダー: 左に会社ロゴ（CSSで作成）、右に「請求書」タイトル＋請求書番号・発行日
7 - 請求先: 「株式会社サンプル商事 御中」
8 - 明細テーブル: 品名・数量・単価・金額の4列。3〜4行のダミーデータ
9 - 小計・消費税（10%）・合計を右寄せで表示
10 - フッター: 振込先情報、備考欄
11 - アクセントカラー: ダークブルー系（#1e3a5f）でヘッダーとテーブルヘッダー
12- フォント: Google Fonts「Noto Sans JP」（weight: 400, 700）
13- 制約: 外部画像不使用。CSSのみ。単一HTMLファイル。名刺
名刺サイズ（91mm × 55mm）をCSSのmm単位でピッタリ指定しています。ロゴもCSSの幾何学図形で作っているので、完全に外部素材ゼロ。このままラクスルなどの印刷サービスに入稿できるレベルです。
もちろん実際はロゴの素材はあると思うので、そのファイルを指定してあげてください。
使ったプロンプト：
1以下の名刺を単一HTMLファイルで作成してください。
2仕様:
3- サイズ: 91mm x 55mm（日本の標準名刺サイズ、CSS mmで指定）
4- デザイン:
5 - ミニマルでモダン。白背景
6 - 左上: 会社ロゴをCSSで作成（幾何学的なシンプルロゴ）
7 - 名前: 「田中 太郎」大きめ。役職「デザインエンジニア」は小さく
8 - 会社名: 「株式会社クリエイティブラボ」
9 - 下部に連絡先（メール、電話、URL）をアイコン付きで横並び
10 - アクセントカラー: 1色（ティール系 #0891b2）で左端に縦ライン
11- フォント: Google Fonts「Noto Sans JP」（weight: 400, 700）
12- 制約: 外部画像不使用。CSSのみで装飾。単一HTMLファイル。印刷を想定したレイアウト。グラフ・チャート
Excelでグラフを作ってスクショ……という手順も、HTMLなら不要です。SVGやCanvasを使えば、見た目のきれいなグラフがプロンプト一発で出せます。データを変えたいときもプロンプトを修正するだけ。
使ったプロンプト：
1以下のグラフを単一HTMLファイルで作成してください。
2
3■ 基本仕様
4- サイズ: 800x500px
5- 単一HTMLファイル
6- Google Fontsから Noto Sans JP (weight: 400, 700) を読み込む
7- 外部ライブラリ不使用。SVGのみで描画
8
9■ コンテンツ
10- タイトル: 「2025年 四半期別売上推移」
11- 棒グラフと折れ線グラフの複合チャート
12- 棒グラフ: 四半期ごとの売上（Q1: 1,200万、Q2: 1,850万、Q3: 1,650万、Q4: 2,300万）
13- 折れ線グラフ: 前年同期比の成長率（Q1: 105%、Q2: 118%、Q3: 112%、Q4: 135%）
14- X軸: Q1〜Q4、Y軸左: 売上（万円）、Y軸右: 成長率（%）
15- 凡例を右上に配置
16
17■ デザイン
18- 背景: 白
19- 棒グラフの色: #3b82f6（青系）
20- 折れ線の色: #ef4444（赤系）、データポイントに丸印
21- グリッド線: 薄いグレーの水平線
22- 角丸なし、フラットでビジネスライクなデザイン
23- 各棒の上に数値ラベルを表示チラシ・フライヤー
Canvaのテンプレートに頼らなくても、デザインの方向性をプロンプトで指定すればこのレベルのチラシが出てきます。
もちろん実際は写真を使いたいですよね。自分で撮ったものや、Unsplashなどのフリー素材サイトからダウンロードしたものをプロンプトに含めれば反映してくれます。
使ったプロンプト：
1以下のチラシを単一HTMLファイルで作成してください。
2
3■ 基本仕様
4- サイズ: A4縦（210mm x 297mm）
5- 単一HTMLファイル
6- Google Fontsから Noto Sans JP (weight: 400, 700, 900) を読み込む
7- 印刷用に @media print を設定
8
9■ コンテンツ（カフェの新規オープン告知）
10- 店名: 「LIGHT ROAST COFFEE」
11- キャッチコピー: 「朝7時、一杯の余白を。」
12- オープン日: 2026年4月15日（火）GRAND OPEN
13- 住所: 東京都目黒区自由が丘2-10-5 1F
14- 営業時間: 7:00 - 19:00（定休日なし）
15- 特典: 「オープン記念 ドリンク全品20% OFF（4/15〜4/30）」
16- Instagram: @lightroast_coffee
17
18■ デザイン
19- 上部1/3: 背景をダークブラウン(#2c1810)にして店名とキャッチコピーを大きく白文字で配置
20- 中央: オープン日を目立たせる（大きいフォント、ゴールド系 #c8a96e のアクセント）
21- 下部: 店舗情報を整理して配置
22- コーヒーカップのシルエットをSVGで装飾的に配置
23- 全体的に余白を活かしたミニマルで上品なデザイン
24- 外部画像不使用。CSS/SVGのみで装飾
25HTMLを経由するメリットをまとめると
改めて、なぜ「HTML経由」がいいのかを整理します。
(1) 追加設定が一切不要
プラグインのインストールも、API連携も、アカウント作成も要りません。AIに「HTMLで作って」と言うだけ。これが一番大きいメリットです。専用ツールのAI連携を待つ必要がない。
(2) デザインの自由度が高い
CSSで色、フォント、レイアウト、余白、すべてを制御できます。テンプレートに縛られない。「もうちょっと余白を広げて」「色をこっちに変えて」という微調整もプロンプトの追加指示でできます。
もちろんテンプレートが欲しければその場でAIに生成させることだってできます。
(3) 素材を渡せばさらに自由に
「外部画像不使用」で作る例を見せましたが、もちろん画像を使うこともできます。フリー素材のURLをプロンプトに含めたり、自分で撮った写真のパスを指定すれば、それを組み込んだHTMLを生成してくれます。
(4) 印刷・PDF化が簡単
ブラウザの印刷機能（Cmd+P）でそのままPDFに書き出せます。印刷用にCSSを書くように追加で指示すれば、画面表示と印刷で別のレイアウトにすることも可能。
「ブラウザでは見やすく、印刷時はA4ぴったりに」が実現できます。
追加プロンプト例：
1A4ぴったりのPDFにしたいので、それ用のCSSも書いてください。印刷画面はこんな感じ。「PDFに印刷」を選択してください。
これでPDFが一瞬で作れます。
まとめ
というわけで、「AIに仕事させるならHTMLを経由せよ」という話でした。
専用ツールのAI対応を待つ必要はありません。最終的に画像やPDFになるものは、HTMLで作ってAIに生成させればいい。追加設定ゼロ、プロンプト1発で、仕事で使えるレベルの成果物が出てきます。
「え、こんなものまでHTMLで？」と思った方は、ぜひ一度試してみてください。プロンプトをコピペして、AIに投げるだけです。
こちらも合わせてご覧ください。
