はじめに：AIとHTMLの意外な関係
みなさんこんにちは、矢野 哲平です。この番組は、耳で学ぶAIをコンセプトに、初心者・中級者向けにAIを分かりやすく解説する番組です。
今回のテーマは、AIとHTMLについて話していきます。
はい、ということで今日は、AIとHTMLについて話していきます。
みなさん、HTMLという言葉、聞いたことありますでしょうか?
これは簡単に言うと、ウェブサイトを制作する時に使う言語、コードになります。
ウェブデザインやウェブ関連の仕事をしている人であれば、聞いたことがある言葉だと思います。
ですが、HTMLという言葉自体は、あまり一般的な言葉ではないと思います。
じゃあ、なぜ今日、HTMLというトピックを取り上げるのかというと、
2026年になって、AIの影響もあって、じわじわHTMLが最注目されていると感じるからです。
先に結論を言うと、AIとHTMLを使うことで、
あらゆるドキュメントをスライドに変換したり、ダッシュボードのような画面に変換することができます。
つまり、テキストだけの書類や、Excelのような数字だけの書類、
こういったものを、より視覚的に、よりリッチな見た目に変換できるようになります。
なので、AIを使ったスライド作成に興味がある人、
こういった人は、ぜひ最後までお付き合いいただければと思います。
正直私も、2026年になって、
HTMLを改めてこんなに触るようになるとは思いませんでした。
今日はなぜ、HTMLが注目を浴びるようになったのか、
HTMLを知ることで、私たちの仕事にどのような影響があるのか、
こうした点を深掘っていきたいと思います。
今日話すポイントは主に3つです。
1つ目に、そもそもHTMLとは何なのかと、
そういった話からスタートします。
2つ目に、AIとHTMLを組み合わせることで、
どのようなことができるようになるのか、
そして3点目には、AIとHTMLを組み合わせたアプローチ、
具体的にどう実装していくのか、
これら3点を中心に話していきます。
HTMLとは何か？ なぜ今注目されるのか？
はい、では早速話していきましょう。
そもそも、AIとHTMLの組み合わせ、
これがなぜ注目されるようになったのか、
まずここらへんの背景情報から話したいと思います。
アンソロピックという会社あるじゃないですか。
クロードコードを開発する会社です。
この会社の中の人、タリックさんという方がいらっしゃるんですけど、
この方がSNSをやっていて、定期的に情報発信しているんですけど、
私フォローをしています。
数ヶ月前にタリックさんが、
最近はHTMLに注目していますと、
そういった胸の投稿をしていました。
最近はHTMLを使ってドキュメントをスライド化しているよと、
これ便利ですよと。
このHTMLについて補足すると、
これは最近出てきたものではありません。
HTMLは昔からあるもので、
ウェブサイトを構成する一つのパーツのようなものです。
私たち普段、ウェブサイトやホームページ、
いろいろ目にする機会が多いと思います。
実はウェブサイトの中には、
HTMLとCSSとJavaScriptという言語で構成されています。
英語のような文字のコードがたくさんあって、
それがブラウザーで変換されて、
普段私たちが見ているウェブサイト、
例えばChatGPTなどのサイトとして表示されています。
ちょっと専門的な話にはなるんですけど、
簡単に言うと、HTML、CSS、JavaScript、
この3つを使えば、
普段私たちが目にしているウェブサイト、
そういったものを構築できるということです。
このHTMLを使うことで、
ウェブサイトのような見た目の画面を作れる。
これが発想の転換の面白いところで、
ウェブサイトのような見た目の画面を作れるということは、
例えばGoogleスライドのようなものや、
あとはグラフが記載された、
そういったページを自分で表現できるということです。
じゃあこうしたことをやるために、
HTMLを勉強する必要があるのかというと、
勉強する必要はありません。
AIとHTMLの組み合わせでできること
なぜなら、AIがHTMLを書いてくれるからです。
アンソロビックの中の人、タリクさん。
タリクさんがやっていることはまさにこれで、
AIを使ってHTMLを書いて、
そしてスライドを作成する、
こういったアプローチを採用しています。
つまりこれどういうことかというと、
例えば会議資料や議事録、音声ファイルなどの資料があります。
それをAIに渡して、
HTMLに変換してくださいと伝えることで、
そういった書類をウェブのスライドとして、
AIが変換してくれるということです。
そしてそういったことを、
HTMLやCSSの知識がない人でも、
簡単に制作できるようになっています。
もちろんプログラミングやHTMLの知識がある方が、
有利なことには変わりないんですけど、
こういった知識を一切持たないケースでも、
AIにHTMLを書かせてスライドを作成する、
このようなことができるようになっています。
じゃあAIとHTMLを組み合わせることで、
具体的に何ができるようになるかというと、
例えばテキストベースのレポート、報告書、
そういったものがあるとします。会社で。
これをAIに渡してこのように指示をします。
このレポートの内容を10ページのウェブスライドに要約してください。
その結果をHTMLファイルとして出力してください。
このような指示だけで、AIがHTMLを書いてくれて、
あとはAIが作成してくれたファイルをダウンロードするだけです。
そのファイルをクリックすれば、
ブラウザー上で動作するスライドを扱うことができます。
その他にも例えば、Excelやスプレッドシートなどのデータがあるとします。
数字のデータですね。これをAIに渡して、
この数字のレポートを視覚的に確認できるダッシュボードを作成してください。
こう指示すると、グラフなどを視覚的に確認できるものを作成することもできます。
特にExcelやスプレッドシートで売り上げを管理していて、
それを報告書などのスライドで手作業で変換して作成している。
こういった人はぜひ試してみてほしいアプローチです。
実際、私も2026年になってかなりHTMLを触る機会が増えました。
例えば私の事例でいうと、このポッドキャストの台本。
これをAIに読み込ませてスライドに変換するようにしています。
具体的にはクロードコードのようなAIエージェントを使ってこのように指示するだけです。
スライドを作成してくださいと。これだけです。
そうすると、私が事前に設定しているデザインやスライドの構成に沿って、
台本からスライドを作成することができます。
こうしたアプローチ、あらゆるリソースからスライドを作成するのに結構便利です。
例えば、AIエージェントとHTMLを組み合わせて、
研修用のスライド、そういったものも簡単に作成することができます。
こういったアプローチを採用することで嬉しいのは、
動きのあるスライドを簡単に作成できることです。
スライドやプレゼンテーションを作成するときに、
アニメーションのような動きをつけることができるじゃないですか、機能として。
例えば、ページを送ると文字がふわっと出現したりとか、
話している内容に沿って、どんどん要素が出現していくようなアニメーション。
こうしたものでも、AIとHTMLを組み合わせることで簡単に表現できます。
なので冒頭でも話したように、注目を集めるようなアニメーションが配置されたリッチなスライド、
こうしたものを簡単に作成することができます。
その他の事例でいうと、
例えば会計士の方がクライアントに見せる資料のために文字や数字だけが記載されているレポート、
そういったものを視覚的に見やすいような形に変換して、
クライアントへの説明資料に使うとか、そういった活用ケースもあります。
あとは営業の方が顧客の方とやり取りをして、それを自動で文字起こしして、
打ち合わせが終わった瞬間にその内容がスライドとして出力される、
そういった処理も実装することができます。
もう一つHTMLを使うことで嬉しいことがあって、
それがファイルを簡単に共有できる点です。
HTMLは一つのファイルとして共有することができます。
拡張紙が.htmlというファイルなんですけど、
これをメールやチャットに添付して相手がダウンロードしてクリックすれば、
スライドやダッシュボードの画面を簡単に確認することができます。
例えばPowerPointの資料ってMacユーザー扱いにくいじゃないですか。
逆もまたしかりで、MacのスライドファイルをWindowsで開くのもちょっと難しいですよね。
HTMLファイルの場合は、こうしたWindowsとMacの間の違いというのはありません。
どのパソコンにも搭載されているブラウザー、例えばChromeやSafari、
こういったものを使うことで簡単に開くことができます。
こうしたこともHTMLの隠れたポテンシャルかなと思います。
今までHTMLといえばウェブサイト、ホームページで使われることがほとんどでした。
ですがここにAIという要素を掛け合わせることで、
誰でもスライドやダッシュボードのような画面を作成することができて、
そして共有することができる。
こういったことはAIがあればこそできるようになったので、
AIとHTMLの組み合わせの実装方法
AIを使ったスライド作成、いろいろ試している人にはぜひ試してみてほしいアプローチです。
ちなみに私がHTMLとAIの組み合わせを使うきっかけになったタリクさん、
アンソロピックの中の人。この方が先週ポストしていたんですけど、
スラックっていうチャットツールがあるじゃないですか。
これでHTMLファイルを共有すると、スライドのプレビュー画面を確認できるようになったという話をしていました。
ちょっと私の環境では確認できないんですけど、もしかすると段階的に公開している状況かもしれません。
スラックやGoogleチャット、こうしたもので今までより簡単にHTMLのファイルを共有できるようになれば、
AIとHTMLの組み合わせ、これが加速しそうな気がします。
じゃあこうしたAIとHTMLの組み合わせをどう実装していくのか、最後にちょっとここら辺を掘り下げたいと思います。
とは言っても、特に難しいことや準備は必要ありません。
普段私たちが使っているChatGPT、Gemini、Cloud、このチャット画面から実装することができます。
例えば、レポートや報告書、こういったファイルを添付して、次のように指示をします。
レポートに書かれていることを要約して、10ページのウェブスライドとして出力してください。
出力はHTML形式のファイルで出力してくださいと。
こう指示することで、AIがダウンロードできるリンクを提供してくれます。
ボタンをクリックすると、HTMLファイルを一式ダウンロードすることができます。
ファイル名は自分が分かりやすいものでいいと思います。
onlinemeeting.htmlとか、〇〇様資料.htmlとか。
いくつかポイントがあるので、少し紹介すると、まずデザイン。スライドのデザインにあたる部分です。
AIの指示にデザインに関して何も言及がないと、AIはランダムなデザインでスライドを出力します。
なので、デザインを固定で使いたいとか、デザインの質をもっと高めたい。
そういった場合はあらかじめ、デザインのテンプレートファイルを用意しておくことをお勧めします。
例えば私はデザインテンプレート.html、そういったものを用意しておいて、
AIにスライドを作成するときは、このデザインテンプレートを参照して、このデザインで作成してください。
このように指示をしています。
こうすることで、毎回デザインがブレることなく、安定してスライドを作成することができます。
じゃあ、このデザインテンプレートをどう作成するの?という話になるんですけど、
これもAIを使って事前に作成しておきます。
イメージ的には、そうですね。
AIとスライドデザインの打ち合わせをするようなイメージです。
メインカラーはブルーがいいとか、グリーンがいいとか、
こういった用途で使うので、ミニマルでクリーンなデザインにしてほしい。
このように、AIとデザインの打ち合わせをして、
あらかじめテンプレートを作成しておくと、スライド作成を効率化することができます。
こんな感じで、普段使っているAIチャットを使うことで、
簡単にhtmlのファイルを作成することができます。
ただ、ここからの発展形として、より効率的にスライドを作成したいと、
そういった人は、プログラミングに特化したAIエージェントの使用をお勧めします。
具体的には、アンソロピックが出しているクロードコードやクロードコアーク、
あとはオープンAIが出しているコーデックスです。
ここら辺のツール、以前ポッドキャストでも紹介したので知っている方多いと思います。
こうしたAIエージェントを使うと、修正作業やそういった指示がかなり楽になります。
AIがスライドを作成した後、ここはこう直してほしい、
そういった修正指示を口頭で出して、AIエージェントに修正作業をお願いする、
こういったことも可能になります。
あとは最後に、AIを使ったスライド作成のチップス、いくつか紹介すると、
一つ目は、一気にAIにスライドを作成すると、
手直しが多くなってしまうという点です。
私はこれを回避するために、AIにスライド作成着手してもらう前に、
先にどのような構成、どのようなページレイアウトで作成するのかというのを
事前に説明してもらうようにしています。
イメージとしては、事前に下書きをチェックするような感じです。
これ結構うまく機能するのでお勧めです。
では二つ目、おそらくAIを使ったスライド作成、
多くの方が感じていることだと思うんですけど、
細かい点の修正対応、これをどうしていくかと。
例えば言葉の言い回しをこのような内容にしてほしいですという場面、結構あります。
ただそれを毎回修正指示を出すのも手間です。
なのでこういった点は思い切って人間の方で修正するのが早いケースもあります。
ただ、HTMLファイルを人間が手作業で修正するのは大変です。
なぜなら文字ばかりのゴードで見にくいからです。
じゃあどうするのかと。
解決策としては、スライドの画面を見ながら修正できるような機能を仕込みます。
これどういうことかというと、つまりCanvaのスライドやGoogleスライドのように
画面上で文字の修正などをする機能、これをスライドに機能として盛り込みます。
じゃあどうやってこういった機能を実装するのか。
これもAIに相談しながら実装します。
CanvaやGoogleスライドのようにスライドの文字をクリックすると
画面上で編集できるような機能を実装してくださいと。
こういった機能に関してはプログラミングに関連する内容なので
ちょっと専門的な内容になってしまうんですけど
ひとまずCanvaやGoogleスライドのように画面上で人間が編集できるような機能
こうしたものもAIを使えば簡単に実装できます。
まとめとリスナーからのメッセージ
それでは今日のポイントをまとめます。
一つ目にAIとHTMLを組み合わせることで
レポートや議事録を簡単にスライド化することができます。
二つ目にHTMLはウェブサイトなどの文脈で使われる言語です。
しかしウェブデザイナーでない人でも
AIを使えばHTMLを書くことができます。
そして最後3点目、AIを使ったスライド作成
デザインテンプレートを準備してAIエージェントに任せると
作業を効率化することができます。
はい今日はこの辺ということで
本日もお付き合いいただきありがとうございました。
今週はお便りをいただいています。ありがとうございます。
ちょっと読んでいきます。
矢野様、いつも大変有益でかつ分かりやすい配信をありがとうございます。
毎週の更新をいつも楽しみにしており
私自身の重要な情報源として深く感謝しながら拝聴しております。
本日は矢野様にどうしてもお伝えしたい
嬉しい出来事がありメールを送りいたしました。
今日、学内の事務職員を対象に
AIの活用に関する講演を行う機会がありました。
どのAIが一番優れているかという比較ではなく
それぞれの業務に合わせてどう選ぶかという視点や
プロンプトの具体的な指示の出し方
過去以前番組でも扱われていた
フューショットプロンプトなどについて話をいたしました。
その中でノートブックLMを紹介したところ
非常に大きな反響がありました。
やはり膨大な書類や情報を扱う事務職のメンバーにとって
このツールの実用性は目から鱗だったようで
これは本当に助かると大好評でした。
番組でもいずれ本格的に取り上げられるかもしれませんが
現場のニーズは間違いなく非常に高いと感じております。
そうですね、私もノートブックLMを使っているんですけど
やっぱり資料整理、情報の整理にかなり役立つと思っています。
なのでまた先で耳で学ぶノートブックLMとか
そういった音声コンテンツを作っても面白いかなと思っています。
はい、続けます。
そして講演の最後には参加した職員一同に向けて
まずは矢野さんの耳で学ぶAIを第一回から聞いてみてください。
これ以上わかりやすく学べるコンテンツはありませんし
私もここから多くの情報を得ていますと
自信を持って太鼓板をさせていただきました。
ありがとうございます。
私自身、これからも毎週の配信をモチベーションに
学びを深めていきたいと思っております。
日々の制作は大変なことも多いかと存じますが
陰ながらずっと応援しております。
季節の変わり目ですのでどうぞご慈愛の上
これからも素敵な番組を届けていただけますと幸いです。
まずは本日の恩礼とご報告まで
大学教員アイ様からのお便りでした。
ありがとうございます。
非常にモチベーションが上がるお便りいただきました。
大学の事務職員の方の現場でノートブックLMが非常に好評だったと
そういった現場の話を聞くと私自身非常に参考になるので
興味深く読ませていただきました。
ぜひリスナーの皆さんも
うちの現場ではこういった使い方をしているとか
うちの現場ではこういった課題を感じているとか
現場の声をいただけると嬉しいです。
改めてお便りありがとうございました。
引き続き配信頑張っていきます。
はい、ありがとうございました。
番組ではこのように耳で学べるAIを毎週発信しています。
通勤中や家事の合間にAI情報をキャッチアップできます。
毎週水曜朝に更新しています。
ぜひフォローお願いします。
そしておすすめの生成AIツールをまとめた資料も配布しています。
興味のある方はこちらもぜひ概要欄にリンクを貼っておきます。
お相手は耳で学ぶAIの矢野てっぺいでした。
また次の配信でお会いしましょう。