AIにHTMLでスライドを作ってもらう方法

矢野哲平2026-06-23

こんにちは、AIニュースアプリ Morning AI 開発者の矢野哲平です。この記事では、AIとHTMLを組み合わせて、レポートや議事録などの文書をスライドに変換する方法を紹介します。

AIにスライドを作ってもらう手段はいくつかあります（専用ツールを使う、チャットで依頼するなど。詳しくはAIでスライドを作る方法の比較で解説しています）。その中でも私が採用しているのが、AIに「HTML」でスライドを作ってもらう方法です。

2026年になって、AIの影響でHTMLがじわじわと再注目されています。先に結論をお伝えすると、AIとHTMLを使えば、あらゆる文書をスライドや、グラフ付きのダッシュボードに変換できます。テキストだけの書類や、数字だけのExcelを、視覚的でリッチな見た目に変えられるのです。

Morning AI

AI専門のニュースアプリ。毎朝、世界のAIトレンドを日本語で。

4.7・App Store — 無料

iOS版

そもそもHTMLとは？

HTMLは、ひとことで言うとWebサイトを制作するときに使う言語（コード）です。Web関連の仕事をしている人なら聞いたことがあると思いますが、一般的にはあまり馴染みのない言葉かもしれません。

私たちが普段目にするWebサイトやホームページは、実はHTML・CSS・JavaScriptという3つの言語で構成されています。

言語	役割
HTML	文字や要素を配置する「構造」
CSS	色やレイアウトなどの「見た目」
JavaScript	クリックやアニメーションなどの「動き」

ブラウザで右クリックして「ソースを表示」を選ぶと、そのサイトのHTMLを確認できます。

HTMLは決して新しいものではなく、昔からあるWebの部品の一つです。

AIとHTMLで何ができるのか？

ここからが発想の転換です。HTMLを使えばWebサイトのような見た目の画面を作れる——ということは、Googleスライドのようなものや、グラフが入ったページも表現できるということです。

「じゃあHTMLを勉強しないといけないの？」と思うかもしれませんが、その必要はありません。なぜなら、面倒なHTMLはAIが書いてくれるからです。HTMLやCSSの知識がない人でも、AIに指示するだけでスライドを作れます。

たとえば、こんな使い方ができます。

レポート → スライド：テキストの報告書をAIに渡して「この内容を10ページのWebスライドに要約して、HTMLファイルとして出力して」と指示する
Excel → ダッシュボード：数字だけのデータを渡して「この数字を視覚的に確認できるダッシュボードを作成して」と指示する

あとはAIが出力したファイルをクリックするだけで、ブラウザ上でスライドやダッシュボードが開きます。

こんな現場で活躍する

具体的な活用例をいくつか挙げます。

会計士：文字や数字だけのレポートを、視覚的に見やすい顧客向けの説明資料に変換する
営業：打ち合わせの内容を自動で文字起こしし、終わった瞬間にスライドとして出力する
研修担当：研修用のスライドを、台本やメモから効率的に作成する

私自身も、2026年になってHTMLを触る機会がかなり増えました。たとえば、AIに資料を読み込ませてAIコーディングエージェントに「スライドを作成して」と指示するだけで、あらかじめ決めておいたデザインに沿ったスライドが出来上がります。

うれしいのは、動きのあるスライドも簡単に作れることです。ページを送ると文字がふわっと出現したり、話の流れに沿って要素が現れたり。こうしたアニメーションも、HTMLとCSS、JavaScriptを組み合わせれば手軽に表現できます。

ファイルとして共有しやすい

HTMLでスライドを作るもう一つのメリットが、共有のしやすさです。

成果物は拡張子が .html のファイル一つにまとまります。メールやチャットに添付して、相手がダウンロードしてクリックすれば、すぐにスライドやダッシュボードを開けます。

PowerPointの資料はMacとWindowsの間で扱いにくいことがありますが、HTMLファイルにはその心配がありません。

	PowerPoint	HTMLファイル
Mac ↔ Windows	扱いにくいことがある	違いなし
開くのに必要なもの	専用ソフト	ブラウザだけ

ChromeやSafariなど、どのパソコンにも入っているブラウザで開けるのが強みです。今までWebサイトのためのものだったHTMLが、AIと掛け合わさることで、誰でもスライドを作って共有できる道具に変わってきています。

どうやって作るのか

特別な準備は必要ありません。普段使っているChatGPT、Gemini、Claudeのチャット画面から始められます。

レポートを添付して「要約して◯ページのWebスライドとして、HTML形式のファイルで出力して」と指示すれば、ダウンロードリンクが提供されます。ここでいくつかポイントがあります。

① デザインを固定したいなら、テンプレートを用意する

AIへの指示にデザインの指定がないと、毎回ランダムなデザインで出力されます。あらかじめデザインのテンプレートファイル（例: design-template.html）を用意しておき、「このデザインで作成して」と指示すると、毎回ブレずに安定したスライドが作れます。テンプレート自体も、AIと「メインカラーはブルーで、ミニマルなデザインに」といった打ち合わせをしながら作れます。

② さらに効率化するなら、デスクトップ型のAIエージェント

より効率的に作りたい場合は、プログラミングに特化したAIエージェントがおすすめです。具体的には、AnthropicのClaude CodeやClaude Cowork、OpenAIのCodexなどです。

これらのツールを使うと、「ここはこう直して」とテキストで指示するだけで修正作業を任せられます。特定のフォルダに資料を置けば、自動でスライド化する仕組みを作ることもできます。

うまく作るためのコツ

最後に、AIでスライドを作るときのコツを2つ紹介します。

いきなり全部作らせない：一気にスライドを作らせると、手直しが多くなりがちです。着手の前に「どんな構成・レイアウトで作るか」を先に説明してもらい、下書きをチェックする感覚で進めると、うまくいきます。

細かい修正は人間の手で：言い回しの微調整などは、都度AIに指示するより人間が直した方が早いこともあります。ただしHTMLファイルは文字ばかりのコードで見にくいので、CanvaやGoogleスライドのように画面上で文字をクリックして編集できる機能を仕込んでおくと便利です。この機能も、AIに相談すれば実装できます。

まとめ

AIとHTMLを組み合わせたスライド作成について紹介しました。ポイントは次の3つです。

AIとHTMLを使えば、レポートや議事録を簡単にスライドやダッシュボードに変換できる
HTMLはWebの言語だが、デザイナーでなくてもAIが書いてくれるので、自分で学ぶ必要はない
デザインテンプレートを用意し、AIエージェントに任せると作業を効率化できる

「HTMLはWebデザイナーが使うもので、自分には関係ない」という思い込みを捨てるのが第一歩です。AIを使ったスライド作成に、HTMLという選択肢もぜひ試してみてください。