---
title: "HTMLプロトタイプを共有してテストする方法｜認証付きURLでユーザー確認まで完結"
description: "HTMLプロトタイプをファイル送付なしで触ってもらいたい方へ。相手の環境に左右されない共有URLで届けてフィードバックを集め、修正サイクルをスムーズに回す方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-html-prototype"
markdown: "https://giga-site.com/articles/share-html-prototype/index.md"
category: "コンテンツ別"
publishedAt: "2026-06-21"
updatedAt: "2026-06-25"
readingMinutes: 7
---
# HTMLプロトタイプを共有してテストする方法｜認証付きURLでユーザー確認まで完結

作ったHTMLプロトタイプを「とりあえず誰かに触ってもらいたい」とき、共有方法でつまずく人は少なくありません。ファイルをそのまま送ると相手の環境で正しく表示されず、フィードバックも集まりにくいものです。この記事では、HTMLプロトタイプを共有URLとして公開し、テスターに実際の操作感を確認してもらうまでの流れを、非エンジニアでも追える形で整理します。

> Source HTML: https://giga-site.com/articles/share-html-prototype
> Article index: https://giga-site.com/articles/index.md

## HTMLファイルを直接送ると、なぜテストがうまくいかないのか

プロトタイプの確認をお願いするとき、HTMLファイルをそのままメールやチャットで送ってしまうケースをよく見かけます。ところが受け取った相手がダブルクリックで開くと、CSSや画像のパスがずれてレイアウトが崩れたり、JavaScriptが動かなかったりすることがあります。テスターは「壊れている」と感じ、本来見てほしかった操作感までたどり着けません。

ZIPで一式を渡す方法もありますが、相手に解凍やフォルダ構成の理解を強いる時点で、テストのハードルが上がってしまいます。スマートフォンで確認してもらいたい場合はさらに難しく、受け取った側がファイルを開く手段に困りがちです。

プロトタイプのテストで本当に知りたいのは、ボタンの押し心地や画面遷移の自然さといった実際の体験です。そこに集中してもらうには、相手が「URLを開くだけ」で完成形に近い状態を触れる環境を用意するのが近道になります。

## 共有URL方式なら、相手はリンクを開くだけでテストできる

HTMLやZip一式をそのままWeb上に公開し、共有用のURLとして渡せれば、テスターはブラウザでリンクを開くだけで済みます。本来のサーバーに置いたときと同じようにCSSや画像、JavaScriptが読み込まれるため、表示崩れに惑わされず本質的なフィードバックを得やすくなります。

この方式のもう一つの利点は、デバイスを選ばない点です。URLさえあればPCでもスマートフォンでも同じ画面を確認でき、「自分の端末では見られない」という離脱を減らせます。レスポンシブの確認をお願いしたいときにも有効です。

ギガサイト便は、こうした静的なHTMLプロトタイプを共有URLとして公開できるサービスです。サーバーの構築やデプロイ設定は不要で、ファイルを渡せばそのまま閲覧できるリンクになります。ただし公開されるのは静的なHTMLであり、PHPのようなサーバーサイド処理は動かない点だけ覚えておくと安心です。

## 共有前チェックリスト

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

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

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

## ギガサイト便でプロトタイプを共有URLにする手順

実際の共有はとても簡単です。登録なしで試したい場合と、継続的にテストを回したい場合で少し流れが変わります。まずは最短の手順を見てみましょう。

1. トップページに、公開したいHTMLファイルやZip（HTML・CSS・JS・画像一式）をドロップします。
2. アップロード時にセキュリティスキャンが走り、気になる兆候があれば警告が出るので内容を確認します。
3. 発行された共有URLをコピーし、テスターに送ります。
4. 継続的にテストするなら無料アカウントを作り、サイト一覧から管理します。
5. 認証方式や公開期限を設定して、誰がいつまで閲覧できるかを調整します。

## 誰に見せるかを選ぶ：プロトタイプに合った認証方式

プロトタイプには未公開のアイデアやデザインが含まれることが多く、不特定多数に広まると困る場面もあります。閲覧範囲を相手やフェーズに応じて選べると安心してテストを依頼できます。

ギガサイト便には複数の認証方式が用意されています。社内の少人数にさっと見せたいのか、社外のテスターに本人確認したうえで渡したいのかによって、適切な方法を選んでください。

「一時公開ページにはnoindexが付く」ため通常は検索結果に出ませんが、noindex自体はアクセス制御ではない点に注意が必要です。本当に閲覧者を限定したいときは、下記のような認証を併用してください。

- URLのみ：リンクを知っている人なら誰でも閲覧できる、最も手軽な方式。
- パスワード認証：合言葉を知っている人だけに絞りたいとき。
- メール認証：指定したメール宛のワンタイムで本人確認してから見せたいとき。
- 会社ドメイン認証：特定の社内メンバーなど、決まったドメインの人だけに限定したいとき。

## テスト中の修正と、改善につながる確認方法

プロトタイプのテストは一度で終わらず、フィードバックを受けて直し、また見てもらう繰り返しになります。このとき毎回URLが変わると、テスターに送り直す手間がかかり混乱のもとです。

同じURLのままファイルを差し替えられるため、修正版をアップロードし直すだけで、相手は最初に受け取ったリンクから最新版を確認できます。リンクを送り直す必要がないので、複数人に同時にテストを依頼しているときほど効果を感じられます。

テストの状況を把握するうえでは、アクセスログを確認できる点も役立ちます。誰がどれくらい見たかの手がかりになり、フォローのタイミングを判断しやすくなります。さらに、公開URLの末尾であるスラッグを編集すれば、案件名がひと目で分かる分かりやすいリンクに整えられます。

## テスト後の公開を自然に閉じる

プロトタイプはあくまで途中段階の成果物なので、テストが終わったら見られない状態に戻しておくのが望ましいです。古いバージョンが残り続けると、後から見た人が現状と勘違いするおそれがあります。

公開期限を設定しておけば、期限切れで自動的に閲覧できなくなります。テスト期間に合わせて日数を決めておけば、消し忘れの心配が減ります。なお登録なしの匿名公開には7日間の公開期限が付くため、短期のテストならそのまま使えます。

「作ったものをすぐ触ってもらい、直して、頃合いで閉じる」という一連の流れを、サーバーの知識なしで回せるのがこの方式の利点です。プロトタイプのテストに集中したいときの選択肢として検討してみてください。

## よくある質問

### HTMLプロトタイプをスマホでも確認してもらうにはどうすればいいですか

ファイルをそのまま送る方法ではスマートフォンで開きにくいことが多いため、共有URLとして公開するのが確実です。URLをチャットなどで送れば、相手はPCでもスマホでも同じリンクから同じ画面を確認できます。レスポンシブ表示のテストにも向いています。

### 未公開のプロトタイプを限られた人だけに見せることはできますか

はい、認証方式で閲覧範囲を絞れます。パスワード認証や、指定メール宛のワンタイムで確認するメール認証、特定ドメインの人だけに限定する会社ドメイン認証などから選べます。なお一時公開ページに付くnoindexはアクセス制御ではないため、限定したいときは認証を併用してください。

### テスト中にプロトタイプを修正したら、URLを送り直す必要がありますか

送り直す必要はありません。同じURLのままファイルを差し替えられるので、修正版をアップロードすれば、テスターは最初に受け取ったリンクから最新版を確認できます。複数人にテストを依頼しているときほど手間が省けます。

### テストが終わったプロトタイプを見られないようにできますか

公開期限を設定しておけば、期限切れで自動的に閲覧できなくなります。テスト期間に合わせて日数を決めておくと消し忘れを防げます。登録なしの匿名公開には7日間の公開期限が付くため、短期のテストにも使えます。

### 改善後の記事では何を確認できますか？

共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。

## 関連記事

- [イベント告知HTMLを関係者・参加者に共有する方法](https://giga-site.com/articles/share-html-event-page/index.md)
- [HTML職務経歴書をURLで共有する方法](https://giga-site.com/articles/share-html-resume/index.md)
- [HTML見積書・請求書を取引先に安全に共有する方法](https://giga-site.com/articles/share-html-invoice/index.md)
- [HTMLメールテンプレートのプレビューを関係者に共有する方法](https://giga-site.com/articles/share-html-email-template/index.md)
- [HTMLダッシュボードを関係者に安全に共有する方法](https://giga-site.com/articles/share-html-dashboard/index.md)
- [HTML5ゲームを共有する方法](https://giga-site.com/articles/share-html-game/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTMLプロトタイプを共有してテストする方法｜認証付きURLでユーザー確認まで完結",
  "description": "HTMLプロトタイプをファイル送付なしで触ってもらいたい方へ。相手の環境に左右されない共有URLで届けてフィードバックを集め、修正サイクルをスムーズに回す方法を解説します。",
  "datePublished": "2026-06-21",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/share-html-prototype",
  "url": "https://giga-site.com/articles/share-html-prototype",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "コンテンツ別",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "HTMLプロトタイプをスマホでも確認してもらうにはどうすればいいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ファイルをそのまま送る方法ではスマートフォンで開きにくいことが多いため、共有URLとして公開するのが確実です。URLをチャットなどで送れば、相手はPCでもスマホでも同じリンクから同じ画面を確認できます。レスポンシブ表示のテストにも向いています。"
      }
    },
    {
      "@type": "Question",
      "name": "未公開のプロトタイプを限られた人だけに見せることはできますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい、認証方式で閲覧範囲を絞れます。パスワード認証や、指定メール宛のワンタイムで確認するメール認証、特定ドメインの人だけに限定する会社ドメイン認証などから選べます。なお一時公開ページに付くnoindexはアクセス制御ではないため、限定したいときは認証を併用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "テスト中にプロトタイプを修正したら、URLを送り直す必要がありますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "送り直す必要はありません。同じURLのままファイルを差し替えられるので、修正版をアップロードすれば、テスターは最初に受け取ったリンクから最新版を確認できます。複数人にテストを依頼しているときほど手間が省けます。"
      }
    },
    {
      "@type": "Question",
      "name": "テストが終わったプロトタイプを見られないようにできますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "公開期限を設定しておけば、期限切れで自動的に閲覧できなくなります。テスト期間に合わせて日数を決めておくと消し忘れを防げます。登録なしの匿名公開には7日間の公開期限が付くため、短期のテストにも使えます。"
      }
    },
    {
      "@type": "Question",
      "name": "改善後の記事では何を確認できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。"
      }
    }
  ]
}
```