HTMLで作った診断・クイズを共有URLで公開する方法

HTML診断コンテンツの共有でつまずくポイント

性格診断やスキルチェック、相性クイズといったコンテンツは、HTMLとCSS、JavaScriptだけで動くものが多く、手元のブラウザで開けば問題なく動きます。ところが「他の人に試してもらう」段階になると、急にハードルが上がります。ファイルをそのまま渡してもダブルクリックで開いてもらえなかったり、画像やスクリプトのパスがずれて表示が崩れたりするからです。

かといって、レンタルサーバーを借りてアップロードしたり、デプロイの設定を覚えたりするのは、診断ひとつを試してもらうには手間がかかりすぎます。判定ロジックがJavaScriptで完結している静的なコンテンツなら、本来そこまで大掛かりな準備は要りません。

もうひとつ見落としがちなのが、誰に見せるかという視点です。社内アンケート代わりの診断、見込み客に配るクイズ、まだ調整中のベータ版では、それぞれ適した公開範囲が違います。「全世界に検索でヒットしてほしい」のか「特定の人だけに見せたい」のかを最初に決めておくと、後の選択がスムーズになります。

静的な診断・クイズなら共有URLにするのが手軽

診断やクイズの多くは、質問への回答を集計して結果を出すところまでをブラウザ上のJavaScriptで処理しています。つまりサーバー側で計算する必要がなく、HTML一式をそのまま配置すれば動きます。こうした静的なコンテンツは、共有URLとして公開してリンクを渡すのが最も手軽です。

ギガサイト便は、AIなどで作ったHTMLや、CSS・JS・画像をまとめたZIPを、認証付きの共有URLとして公開できるサービスです。サーバー構築やデプロイ設定は不要で、ファイルを渡すだけで閲覧できるリンクが手に入ります。診断のように単体で完結するコンテンツとは特に相性がよい使い方です。

注意したいのは、公開されるのはあくまで静的なHTMLだという点です。回答をサーバーに保存して後から集計するような仕組みや、PHPなどのサーバーサイド処理は動きません。結果表示まで含めてブラウザ内で完結している診断であれば、そのまま共有して問題なく試してもらえます。

共有前チェックリスト

HTMLで作った診断・クイズを共有URLで公開は、共有する中身によって確認観点が変わります。見た目、操作、個人情報、外部送信、スマホ表示のどれが重要かを先に決めてからURL化します。

チェックリスト化しておくと、毎回同じ品質で共有できます。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 見た目: PC/スマホ、余白、画像、フォント、折り返しを確認する
• 操作: ボタン、リンク、フォーム、遷移先を確認する
• 情報: 顧客名、社内URL、価格、未公開文言が残っていないか見る
• 共有: 認証、期限、差し替え、レビュー依頼文をセットで決める

ファイルをアップロードして共有URLを発行する手順

まずは一番シンプルな流れを見てみましょう。登録なしでも、トップページにファイルをドロップすればその場で共有URLを発行できます。匿名で発行したリンクには「noindex」が付き、7日間の公開期限とIPレート制限が設定されます。まず試したいときに向いた使い方です。

継続的に管理したい場合や、公開範囲を細かく決めたい場合は、無料アカウントを作るとサイト一覧から管理でき、認証方式や公開期限を設定できます。下記の手順を参考にしてください。

1. 診断のHTMLファイル、または一式をまとめたZIPを用意する。
2. トップページを開き、ファイルをドラッグ＆ドロップする。
3. アップロード時のセキュリティスキャンの警告を確認する。
4. 発行された共有URLを開いて、診断が動くか確かめる。
5. リンクを試してほしい相手に送る。

誰に見せるかを決める認証方式の選び方

診断を配る相手や目的によって、適した公開範囲は変わります。ギガサイト便では公開時に認証方式を選べるため、「リンクを知っている全員に開放する」から「特定の人だけに限定する」まで、状況に合わせて調整できます。

たとえば気軽に拡散してほしいキャンペーン用クイズなら、リンクを知っていれば誰でも見られる方式が向いています。一方で社内向けの診断や、まだ調整中のベータ版を限られた人にだけ見せたい場合は、パスワードや本人確認を挟む方式が安心です。

• URLのみ: リンクを知っていれば誰でも閲覧できる。広く試してほしいときに。
• パスワード認証: 合言葉を知る人だけに限定する。
• メール認証: 指定したメール宛のワンタイムで本人確認する。
• 会社ドメイン認証: 指定したメールドメインを持つ人だけが閲覧できる。

公開後の調整と安全に配るための工夫

診断は一度公開して終わりではなく、文言を直したり結果パターンを増やしたりと、後から手を入れることがよくあります。ギガサイト便なら同じURLのままファイルを差し替えられるので、修正のたびにリンクを送り直す必要がありません。配布済みのリンクをそのまま使い続けられるのは、回覧する場面でも便利です。

期間限定のキャンペーンや、試用期間を区切りたいベータ版には公開期限の設定が役立ちます。期限が切れると自動的に閲覧できなくなるため、古いリンクが意図せず残り続ける心配を減らせます。アクセスログを確認できるので、どのくらい試されたかの把握にも使えます。URL末尾のスラッグは編集できるため、内容が伝わりやすいリンクに整えることも可能です。

アップロード時にはセキュリティスキャンが走り、APIキーらしき文字列や外部スクリプトへの依存、静的公開に不要なファイルといった兆候を検出して警告します。AIに生成させた診断コードには、意図しない外部依存が紛れ込むこともあるため、公開前に内容を見直す機会として活用するとよいでしょう。なお匿名公開で付く「noindex」は検索結果への露出を抑えるためのもので、アクセス制御ではない点は理解しておいてください。本当に限定したいときは前述の認証方式を併用します。

目的に合わせて公開方法を使い分ける

HTMLで作った診断やクイズを共有する方法は、突き詰めれば「静的なファイルを、適切な相手に、適切な期間だけ届ける」ことに尽きます。サーバーの知識がなくても、ファイルをそのまま共有URLにできれば、思いついた診断をすぐ人に試してもらえます。

まずは匿名公開でさっと反応を見て、手応えがあれば認証や期限を設定して本格的に配る、という段階的な進め方も無理がありません。診断の中身づくりに集中したい方ほど、公開まわりの手間を減らせる仕組みが力になります。目的に合った公開範囲を選び、気軽に試してもらえる導線を整えてみてください。