MakeMeDemo
ダウンロード

サイトに埋め込む

アップロードしたデモは、ストレージ上の 1 つのフォルダーです。見せ方は 4 通り。1 つ選んでコードをコピーしてください。例のアドレスはご自身のものに置き換えてください。アプリのアップロード結果に正しいアドレスがあり、コードもそのままコピーできます。

4 つの使い方

共有リンク

誰にでも送れます。デモ・説明・ステップ一覧のある完全なページが開きます。

https://your-site.com/demos/my-demo/index.html

埋め込みプレーヤー

既存のページの中にプレーヤーを置きます。

<iframe
  src="https://your-site.com/demos/my-demo/player.html"
  width="100%"
  style="aspect-ratio: 16 / 10; border: 0; border-radius: 12px"
  loading="lazy" allowfullscreen>
</iframe>

先に表紙、クリックで再生

まず表紙と再生ボタンを表示し、クリックされてからデモを読み込むので、ページが重くなりません。

<div id="mmd-demo" style="position:relative;max-width:960px;aspect-ratio:16 / 10;
  border-radius:12px;overflow:hidden;cursor:pointer">
  <img src="https://your-site.com/demos/my-demo/poster.jpg" alt=""
    style="width:100%;height:100%;object-fit:cover;display:block">
  <span style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);
    box-shadow:0 4px 20px rgba(0,0,0,.2)"></span>
</div>
<script>
document.getElementById('mmd-demo').addEventListener('click', function () {
  this.innerHTML = '<iframe src="https://your-site.com/demos/my-demo/player.html" allowfullscreen' +
    ' style="width:100%;height:100%;border:0"></iframe>';
}, { once: true });
</script>

ポップアップボタン

1 行のスクリプトで、画面の隅に「View demo」ボタンが出て、デモがページの上に開きます。

<script src="https://your-site.com/demos/my-demo/embed.js" defer></script>

フォルダーの中身

index.html
完全なページ。共有リンクで開くのはこれ
player.html
プレーヤーのみ。置かれた枠に合わせて表示。iframe 用
poster.jpg
デモの最初のフレーム。表紙やリンクのプレビューに
demo.json
デモ本体：ステップ、テキスト、設定
player.js
プレーヤーのコード。上の 2 ページが使用
assets/
スクリーンショット、動画クリップ、ナレーション
embed.js
ポップアップボタンのスクリプト

AI に任せる

サイトを AI アシスタント（Claude、Cursor、ChatGPT など）で作ったなら、これをコピーし、空欄を埋めて渡してください。

私のウェブサイトにインタラクティブな製品デモを埋め込んでください。

サイトの作り：____（例：Next.js、WordPress、Webflow）
置く場所：____（例：トップページのヒーローの下）

デモは MakeMeDemo で作った、ホスティング済みのフォルダーです。まず poster.jpg と再生ボタンを表示し、クリックされたときだけ player.html の iframe（幅 100%、縦横比 16:10、枠線なし、全画面を許可）に差し替えて、ページを開いた時点ではデモを読み込まないようにしてください。ファイルは今の場所にリンクし、プロジェクトにはコピーしないでください。フォルダー：

https://your-site.com/demos/my-demo/
  index.html   完全なページ。共有リンクで開くのはこれ
  player.html  プレーヤーのみ。置かれた枠に合わせて表示。iframe 用
  poster.jpg   デモの最初のフレーム。表紙やリンクのプレビューに
  demo.json    デモ本体：ステップ、テキスト、設定
  player.js    プレーヤーのコード。上の 2 ページが使用
  assets/      スクリーンショット、動画クリップ、ナレーション
  embed.js     ポップアップボタンのスクリプト