--- title: "AIで作ったチャットボットUIのデモを共有する方法" description: "AIで作ったチャットボットUIのデモを、社内検討や顧客提案のために特定の相手だけに見せたい方向けの記事です。未完成のデモを安全に限定共有し、フィードバックを集めるまでの流れを解説しています。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/share-ai-chatbot-ui-demo" markdown: "https://giga-site.com/articles/share-ai-chatbot-ui-demo/index.md" category: "AI活用" publishedAt: "2026-06-22" updatedAt: "2026-06-25" readingMinutes: 5 --- # AIで作ったチャットボットUIのデモを共有する方法 AIを使えば、チャットボットの会話画面のデモを短時間でHTMLとして形にできます。社内の検討や顧客への提案で「こういう見た目になります」と見せたい場面は多いものです。ただ、デモは完成品ではないため、誰にでも公開できる状態で広く出すのは避けたいところです。この記事では、チャットボットUIのデモを関係者にだけ届けるための考え方と、認証付きで限定共有する手順を整理します。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。 > Source HTML: https://giga-site.com/articles/share-ai-chatbot-ui-demo > Article index: https://giga-site.com/articles/index.md ## デモを広く公開したくない理由 チャットボットUIのデモは、検討段階のアイデアや、まだ世に出していない企画を含んでいることがあります。完成前の見た目が独り歩きすると、関係者の認識がずれたり、競合に方向性が知られたりする恐れがあります。 また、デモは試作なので、細部が荒削りなまま見せることになります。広く公開して不特定多数の目に触れると、未完成の部分が誤解を生むこともあります。見せる相手を絞ることが、デモを安心して共有する前提になります。とくにチャットボットは会話の応答内容まで含めて見せることが多く、まだ調整中の文言がそのまま伝わってしまうと、意図とは違う印象を与えかねません。 ## デモ共有の一般的なやり方 デモを共有する方法としては、画面を録画した動画、対面やオンラインでの実演、実際に触れるURLの共有などがあります。実際に操作してもらえるURL共有は、動きのあるチャットボットUIとの相性が良い方法です。 ただし、触れるデモをURLで配るなら、見られる相手と公開する期間をきちんと管理することが欠かせません。次の点を押さえておくと、デモを安心して見てもらえます。 - 実際に触れるURL共有は動きのあるUIを伝えやすい - 見られる相手を関係者だけに絞る - デモを見せる期間を区切り、ずっと残さない ## AI生成HTMLを共有する前の安全チェック AIで作ったチャットボットUIのデモを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。 ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。 - 外部送信: form action、fetch、script src、iframeの向き先を確認する - 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する - 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る - 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める ## デモ共有で気をつけたい点 デモは更新が頻繁に入るため、共有の入口を固定しておくと便利です。修正のたびにURLを送り直すと、関係者が古い版を開いてしまい、すでに直した部分について意見が返ってくることがあります。 また、デモは完成品ではない旨を相手に伝えておくと、未完成の部分への過度な指摘を避けられます。検索結果に出てほしくない試作段階の画面は、インデックスされない状態で共有することも意識しましょう。 ## 認証付きURLで関係者だけに見せる ギガサイト便では、URLのみ・パスワード・メール認証・会社ドメイン認証から認証方式を選べます。社内の検討用なら会社ドメイン認証、特定の取引先に見せるならメール認証で相手のアドレスに6桁コードを送る方式が分かりやすいでしょう。 既定でnoindexが設定されているため、試作段階のデモが検索結果に出てしまう心配も少なくなります。見せたい相手だけが開ける状態を保ったまま、実際に触れるデモを届けられます。録画した動画と違い、相手が自分のペースで操作しながら確認できるので、会話の流れや入力時の挙動といった動きのある部分まで伝わりやすくなります。 ## ギガサイト便でデモを共有する手順 実際にチャットボットUIのデモを、認証付きで関係者に共有するまでの流れを順番に見ていきます。修正が入っても同じURLで差し替えられるため、検討を止めずに最新版を見てもらえます。 下記の手順で、関係者だけが開けるデモURLを発行できます。複数案を並べて見せたい場合は、サイトを分けて同時に共有することもできます。 1. AIで作ったチャットボットUIのHTMLまたはZIPを用意する 2. ギガサイト便のトップにそのファイルをドラッグ&ドロップする 3. 認証方式を選ぶ（社内なら会社ドメイン認証、取引先ならメール認証が分かりやすい） 4. 公開期限を設定し、デモを見せたい期間に合わせて自動失効させる 5. 発行されたURLを関係者に送り、デモであることを一言添える 6. 修正が入ったら同じURLのまま中身を差し替える ## よくある質問 ### チャットボットのデモはどの認証方式が向いていますか？ 社内の検討用なら会社ドメイン認証が手軽で、社員だけにまとめて見せられます。特定の取引先に見せる場合は、相手のメールアドレスに6桁コードを送るメール認証が分かりやすいでしょう。用途に応じて、URLのみ・パスワード・メール認証・会社ドメイン認証から選べます。 ### 試作段階のデモが検索結果に出てしまいませんか？ ギガサイト便は既定でnoindexが設定されており、検索エンジンにインデックスされにくくなっています。試作段階の画面が広く検索で見つかる心配は少なく、関係者向けの限定共有に向いています。さらに認証を設定すれば、URLを知っている人の中でも見られる相手を絞れます。 ### デモを修正したらURLを送り直す必要がありますか？ ギガサイト便は同じURLのまま中身を差し替えられるため、修正してもURLを送り直す必要はありません。関係者は同じリンクを開くだけで最新のデモを確認できます。古い版を開いたまま意見が返ってくる、といった行き違いを防げます。 ### 複数のデモ案を同時に見せ比べてもらえますか？ ギガサイト便では複数のサイトを作って同時に共有できるため、案ごとにURLを分けて見せ比べてもらえます。同時に公開できるサイト数はプランごとに上限があります。それぞれに別々の認証や期限を設定して配ることも可能です。 ### AIツールで作ったHTMLはそのまま共有しても安全ですか？ そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。 ## 関連記事 - [Durableで作ったAIサイトを共有してフィードバックを得る方法](https://giga-site.com/articles/durable-ai-site-share/index.md) - [v0で生成したUIをURLで共有する方法](https://giga-site.com/articles/share-v0-ui/index.md) - [Tempo Labsで作ったUIをURLで共有する方法](https://giga-site.com/articles/share-tempo-ui/index.md) - [Same.devで複製・生成したUIを共有する方法](https://giga-site.com/articles/share-same-dev-ui/index.md) - [Magic Patternsで作ったUIを共有する方法](https://giga-site.com/articles/share-magic-patterns-ui/index.md) - [Google Stitch（旧Galileo AI）で作ったUIを共有する方法](https://giga-site.com/articles/share-galileo-stitch-ui/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "AIで作ったチャットボットUIのデモを共有する方法", "description": "AIで作ったチャットボットUIのデモを、社内検討や顧客提案のために特定の相手だけに見せたい方向けの記事です。未完成のデモを安全に限定共有し、フィードバックを集めるまでの流れを解説しています。", "datePublished": "2026-06-22", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/share-ai-chatbot-ui-demo", "url": "https://giga-site.com/articles/share-ai-chatbot-ui-demo", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "AI活用", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "チャットボットのデモはどの認証方式が向いていますか？", "acceptedAnswer": { "@type": "Answer", "text": "社内の検討用なら会社ドメイン認証が手軽で、社員だけにまとめて見せられます。特定の取引先に見せる場合は、相手のメールアドレスに6桁コードを送るメール認証が分かりやすいでしょう。用途に応じて、URLのみ・パスワード・メール認証・会社ドメイン認証から選べます。" } }, { "@type": "Question", "name": "試作段階のデモが検索結果に出てしまいませんか？", "acceptedAnswer": { "@type": "Answer", "text": "ギガサイト便は既定でnoindexが設定されており、検索エンジンにインデックスされにくくなっています。試作段階の画面が広く検索で見つかる心配は少なく、関係者向けの限定共有に向いています。さらに認証を設定すれば、URLを知っている人の中でも見られる相手を絞れます。" } }, { "@type": "Question", "name": "デモを修正したらURLを送り直す必要がありますか？", "acceptedAnswer": { "@type": "Answer", "text": "ギガサイト便は同じURLのまま中身を差し替えられるため、修正してもURLを送り直す必要はありません。関係者は同じリンクを開くだけで最新のデモを確認できます。古い版を開いたまま意見が返ってくる、といった行き違いを防げます。" } }, { "@type": "Question", "name": "複数のデモ案を同時に見せ比べてもらえますか？", "acceptedAnswer": { "@type": "Answer", "text": "ギガサイト便では複数のサイトを作って同時に共有できるため、案ごとにURLを分けて見せ比べてもらえます。同時に公開できるサイト数はプランごとに上限があります。それぞれに別々の認証や期限を設定して配ることも可能です。" } }, { "@type": "Question", "name": "AIツールで作ったHTMLはそのまま共有しても安全ですか？", "acceptedAnswer": { "@type": "Answer", "text": "そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。" } } ] } ```