Web上の操作デモは、実画面を参考にHTMLで再現すると、見せたい手順へ進める説明素材として設計できます。
サービス紹介ページに、使い方が分かる小さなデモを置きたい。画面録画を撮り直す前に、Web上で操作の流れを再現する方法も選択肢になります。文字やポインターの動き、結果が出る順番をHTMLで組み立てる方法です。
Meng To氏が公開するHTML Demoは、その制作をAIに依頼するための指示や部品をまとめた公開スキルです。作者のGitHub公開資料では、HTMLでの画面再現、手順の切り替え、時間位置の移動などの作り方を説明しています。
向いているのは、Web担当者が「入力して、操作して、結果を見る」という流れを短く伝える場面です。実際に操作した記録を残したい場合は、画面録画を選びます。ここでは、成果物の違いと、AIへ渡す材料、公開前に確認する順番を整理します。
この記事でわかること
- 成果物の違い：HTML DemoはWeb上で再現する説明素材で、実際の操作を記録した動画ではありません。
- 制作の準備：実画面、使用できる素材、一つの作業を示す短い台本をそろえます。
- 依頼の方法：変更してよい範囲と納品物を決め、AIへ具体的な指示を渡します。
- 確認すること：実アプリとの一致、スマホ、途中移動、動きを抑えた表示を点検します。
HTML Demoは、動画のように見えるWeb部品
公開スキルの説明では、HTMLとCSSでアプリ画面を描き、時間に合わせて表示を変えます。React向けの部品と、Reactを使わないJavaScript版が用意されています。動画を再生しているわけではないため、各手順へ移動したり、特定の時点で止めたりする見せ方を作れます。
使い方の説明には向くが、実演の証拠にはならない
たとえば、自社の予約管理ツールで「条件を選ぶ→空きを探す→予約内容を確認する」という流れを紹介したい場合。HTMLのデモなら、見ている人が手順を選んで、確認画面だけを見直せる構成にできます。
ただし、デモ内の入力欄やボタンは、通常は動きを見せるために再現した画面です。実際に予約を受け付ける本体でも、すべての操作を自由に試せる体験版でもありません。紹介ページでは「操作イメージ」などと分かるようにし、本サービスへの入口と区別します。
| 伝えたいこと | 選ぶ素材 |
|---|---|
| 操作の順番と結果を、Web内で短く説明したい | HTML Demoを検討する |
| 実機で起きた不具合や、実際の所要時間を記録したい | 画面録画や操作ログを使う |
| SNSへ投稿するMP4が必要 | 動画として制作・書き出す工程を選ぶ |
| 利用者に自由に入力・操作してもらいたい | 専用の体験版や試用環境を用意する |
HTMLなら何でも軽くなる、録画より必ず短時間で作れる、というわけではありません。画面の再現や検品、組み込むサイトとの調整が必要です。UIが頻繁に変わる製品では、公開後に見直す担当も決めておきます。
最初にそろえるのは、実画面・素材・三つの手順
以下はWeb担当者向けの編集部提案です。まず一つの機能だけを題材にし、最初からサイト全体を任せない形で進めます。
画面の見本と、表示する内容を分けて準備する
画面の配置、ボタン名、メニュー、結果の出方は、現在のアプリのスクリーンショットや公式資料を根拠にします。HTML Demoの公開スキルも、記憶でUIを作らず、実画面やソースの表記を照合する方針です。
一方、画面に映る顧客名や案件名までコピーする必要はありません。社外公開できるテストデータと、自分たちが使用できる素材を用意します。出力画像を紹介するなら、そのアプリで実際に作成し、公開を認められた結果を使います。別の生成AIで用意した画像を、対象アプリの生成実績に見せないようにします。
会社の色や書体をそろえる材料が散らばっている場合は、承認済みの見本とデザインルールの選び方も参考になります。画面の見本と、自由に変更してよい装飾は区別して渡しましょう。
一つの作業を、開始・操作・結果までつなげる
例として、社内で公開を許可された画像編集ツールの「背景色を変更する」機能を紹介するとします。三つの手順を「画像を開く」「背景色を選ぶ」「完成画像を確認する」とし、同じ画像を通して使えば、何が変わったかが伝わります。実アプリにこの操作がない場合は、そのまま流用しません。
作者は一つのデモを3〜5手順、全体18〜30秒ほどにまとめる構成を示しています。これは制作上の目安であり、すべての用途へ固定する数値ではありません。日本語の説明が長ければ読む時間を確保し、結果を確認する間を削って速く見せないようにします。
AIには、材料と作業範囲を一緒に渡す
公開元には、デモの再現・応用に使う指示例と、作業範囲を限定する共通ブリーフがあります。自社向けに使うときも、見せたい動きだけでなく、変更してよいファイルや使用できる画像を指定すると確認しやすくなります。
公開ファイルは、中身を確認してから試作へ
HTML Demoは、それだけで完成品が出る動画サービスではありません。コードを扱えるAIの作業環境と、ブラウザーでのプレビューが必要です。公開ファイルの内容・依存関係・ライセンスを担当者が確認し、本番サイトとは分けた試作用フォルダーで始めます。説明ページにあるインストール指示を、中身を確認せず実行する必要はありません。
すでにあるサイトへ組み込むなら、Web制作担当にページの方式を確認します。独立したHTMLで受け取るのか、既存のReactサイトへ部品として追加するのかで、必要な納品物が変わります。コードを直接扱わない広報担当者も、ここまでの材料と台本をまとめれば制作担当へ依頼できます。
背景色変更を見せる、依頼文の例
次は、必要な実画面と素材を準備した後に使う独自の依頼例です。ファイル名とアプリ名を実際のものへ置き換えます。
HTML Demoを参考に、自社ツールの背景色変更を説明するWeb埋め込み用デモを試作してください。動画やMP4ではなく、HTMLで見せます。 根拠：添付の現行画面3枚と操作手順。ボタン名、配置、結果はこれに合わせてください。 使用素材：公開許可済みのsample-before.pngと、実アプリで作成したsample-after.pngのみ。 手順：1.画像を開く 2.背景色を選ぶ 3.完成画像を確認する。 不足するUIや操作は推測で足さず、先に質問してください。顧客情報、架空の実績、未確認の料金や処理時間は表示しないでください。 作業範囲：指定した試作用フォルダー内のみ。本番公開、追加購入、外部へのアップロードは行わないでください。 納品：HTMLと必要な画像・CSS・JavaScript、開き方、各手順の静止画、実画面と照合した項目と残る違い。 確認：340px・390px幅、手順の切り替え、一時停止、動きを抑える設定でも内容が伝わること。
この依頼文は、アプリの機能を新しく作るものではありません。材料が足りないときに止めてもらい、まず一つのデモを確認してから、他の機能へ広げます。
完成後は、見栄えより先に実アプリと照合する
一時停止して、文字と結果を確認
再生中は自然に見えても、ボタンの名前や数字が違うことがあります。各手順の開始時と結果表示時を静止画にし、元の画面と並べます。ポインターが押している位置、操作後に開く場所、最終結果が一致するかを確認してください。
処理待ちを短く編集する場合は、実際の処理速度と混同されない説明を添えます。待ち時間を縮めたデモを「この時間で処理できます」という性能訴求に使わず、必要なら「待ち時間を短縮して表示」と明記します。
スマホと、動きを抑えた表示を確認
公開スキルは、390px・340px幅、非表示タブから戻ったとき、動きを減らす設定での確認を挙げています。作る側は、手順を途中から選んでも表示が崩れないか、別タブから戻って急に先へ進まないか、横にはみ出さないかを見ます。
特に、元の画面を小さく縮めるだけでは文字が読めないことがあります。スマホではデモの外側に手順の短い説明を置くなど、画面内の細字を読めなくても目的が分かる構成を考えます。動きを抑えた設定では、途中の空白ではなく、各手順の意味が分かる完成状態を表示することが重要です。
ページへ入れた後も確認する
単体で動くHTMLができても、サイト内では文字の設定や他の装飾とぶつかることがあります。本番前の確認ページに組み込み、他のページ要素が崩れないか、画像が読み込めるか、停止や手順選択のボタンをキーボードでも使えるかを点検します。納品時には、対応した製品バージョンと確認日を残しておくと、更新の判断がしやすくなります。
実務上の注意
公開コードのMITライセンスは、コピーや相当部分の利用に著作権表示と許諾文を残す条件を定めています。コードを使う場合は必要な表示を保持し、同梱画像、再現するアプリの画面、フォントなどの利用条件は別途確認します。
自社ツールでも、顧客名、メールアドレス、未公開案件を含む実画面をそのまま外部AIへ渡さないようにします。公開用のテスト画面を作り、必要な部分だけを提供してください。生成されたデモは人が照合し、存在しない機能や作っていない成果を、製品の事実として公開しないことを最優先にします。
まとめ
HTML Demoは、Webページの中で一つの操作を短く説明したいときに検討できる方法です。実画面と許可された素材をそろえ、一つの作業、少ない手順、限定した試作範囲から始めます。録画や体験版との役割を分け、実アプリとの一致とスマホでの読みやすさを確認してから公開しましょう。
よくある質問
HTML DemoでMP4動画を書き出せますか？
ここで紹介したスキルの主な成果物は、Web上で動くHTMLのデモです。MP4の実録や動画制作が必要なら、画面録画など別の制作工程を選びます。
見ている人が自由にアプリを操作できますか？
通常は、決めた手順を再現し、手順選択や時間位置の移動で見直すものです。実サービスへ入力して処理する体験版とは区別してください。
コードが分からなくても依頼できますか？
実画面、許可された素材、操作の順番、納品形式はWeb・広報担当でも整理できます。実装とサイトへの組み込みは、コードを扱えるAI環境や制作担当と進め、動作確認を行います。
スクリーンショットだけ渡せば、UIを正しく再現できますか？
画面間の動きや結果の出方は静止画だけでは分からない場合があります。手順書や実際の結果も添え、不足する箇所は推測で補わせず確認します。
出典・参考情報
運営元について
AXメディアは、株式会社ジーズ AX事業部が運営しています。AX事業部では、AI研修・AIエージェント開発・ローカルLLM開発・補助金／助成金の活用支援を提供しています。
