---
title: "Figmaプロトタイプ共有リンクとの違い｜デザイン確認とHTML確認"
description: "Figmaのプロトタイプでデザインを確認するフェーズと、実装後のHTMLをブラウザで動作確認するフェーズでは見るべきものが変わります。デザインと実装の確認フェーズを整理して選択肢を探している方向けに、両者の違いを解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/figma-prototype-share-vs-giga-site"
markdown: "https://giga-site.com/articles/figma-prototype-share-vs-giga-site/index.md"
category: "比較"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Figmaプロトタイプ共有リンクとの違い｜デザイン確認とHTML確認

Figmaのプロトタイプ共有は、画面遷移やインタラクションの設計をデザインの段階で確認できる便利な仕組みです。ただ、実際にコードで実装したHTMLがブラウザでどう動くかを確かめる段階になると、見るべき対象が変わります。ここではデザイン確認とHTML確認の違いと使い分けを整理します。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。

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

## Figmaプロトタイプ共有でできること

Figmaのプロトタイプ機能は、デザインした画面同士をつないで、画面遷移やタップ時の動きをデザインデータ上で再現できます。共有リンクを送れば、相手はブラウザでプロトタイプを操作し、画面の流れや見た目を確認できます。

デザイン段階で「この導線で迷わないか」「ボタンの位置は適切か」を関係者と確かめられるため、実装に入る前の合意形成に役立ちます。コメント機能で画面の特定箇所に指摘を残せるのも便利です。

つまりFigmaプロトタイプは、コードを書く前のデザインデータを使った確認に向いています。

## デザインデータと実装HTMLの違い

Figmaのプロトタイプはあくまでデザインデータ上の再現です。実際のフォーム入力、APIとの通信、ブラウザごとの表示差、レスポンシブの細かな崩れなど、コードで実装してはじめて分かる挙動はプロトタイプでは確認しきれません。

実装が進むと、デザイン通りに見えるか、想定どおりに動くかを「本物のHTML」で確かめたくなります。この段階では、デザインデータではなく実際のページを相手のブラウザで触ってもらう必要があります。

## 結論：この用途ならどちらを選ぶべきか

Figma プロトタイプ 共有で迷うときは、まず「本番公開したい」のか「確認用に短期間だけ見せたい」のかを分けます。前者はホスティングや開発基盤の比較、後者は認証・期限・差し替え・相手の開きやすさの比較になります。

Figmaプロトタイプ共有リンクとの判断では、機能名だけでなく、レビュー相手がアカウント作成なしで開けるか、共有後に古いURLが残らないか、修正後も同じURLで確認してもらえるかを見ます。比較して迷う場合は、まずレビュー用途か本番公開用途かを分けます。確認用なら、認証・期限・同じURLでの差し替えをまとめて扱える共有サービスで小さく試すのが安全です。

- 本番公開向き: 独自ドメイン、CI/CD、ソース管理、長期運用を重視する
- レビュー共有向き: 認証、期限、差し替え、非エンジニアへの渡しやすさを重視する
- 避けたいケース: 機密情報を含むHTMLを、認証なしの公開URLに置く
- 確認すること: 料金、公開範囲、URLの寿命、削除・差し替え手順、相手側の閲覧条件

## ギガサイト便で実装HTMLを確認に回す

ギガサイト便は、実装したHTMLファイルやCSS・JS・画像を含むZIPをトップにドロップすると共有URLが発行されるサービスです。確認相手は 〇〇.giga-site.com のURLを開くだけで、実装そのものをブラウザで操作できます。

HTTPSは自動で、CDNのエッジ配信により表示も速くなります。デザインデータの再現ではなく、コードで動く実物を確認してもらえるのがギガサイト便の役割です。

## デザイン確認から実装確認へつなぐ手順

Figmaでデザインの合意を得てから、実装後の確認へ移るときは次のように進めると分かりやすくなります。

1. Figmaプロトタイプでデザインと導線の合意を取る
2. 合意したデザインをHTML・CSS・JSで実装する
3. 実装一式をZIPにまとめる
4. ギガサイト便のトップにドロップして共有URLを発行する
5. 確認者に合わせて認証と公開期限を設定して送る

## 確認相手を限定する認証設定

ギガサイト便ではURLのみ・パスワード・メール認証（ワンタイムコード）・会社ドメイン認証の4種類から選べます。社内の実装レビューなら会社ドメイン認証、クライアント確認ならパスワードといった使い分けができます。

一時公開ページにはnoindexが付くため検索結果には出ませんが、noindexはアクセス制御ではありません。公開前の実装を見せるときは認証を併用してください。公開期限を設定すれば、確認期間が終わると自動的に閲覧できなくなります。

## 実装の更新を反映しやすい共有

実装の確認では、指摘を受けてコードを直し、再確認してもらう流れが繰り返されます。ギガサイト便なら同じURLのままファイルを差し替えられるので、修正版を見せるたびにリンクを送り直さずに済みます。

アクセスログで誰がいつ確認したかも分かります。デザイナーとエンジニアの間で、どこまで確認が進んだかを共有しやすくなり、対面の確認ではQRコードでその場で開いてもらうこともできます。

## よくある質問

### Figmaプロトタイプがあれば実装の確認は不要ですか？

プロトタイプはデザイン段階の確認に向いていますが、実際のフォーム動作やブラウザ差、レスポンシブの崩れなどは実装してはじめて分かります。実装後は本物のHTMLでの確認が別途必要になります。

### 実装したHTMLをどうやって確認してもらえばよいですか？

HTMLやZIPをギガサイト便のトップにドロップすると共有URLが発行され、確認相手はブラウザで実物を操作できます。デザインデータではなく動くページを確かめてもらえます。

### 公開前の実装を社外に見せても大丈夫ですか？

公開前の実装は、パスワードや会社ドメイン認証などを設定して限定共有するのが安全です。一時公開ページにはnoindexが付き検索結果には出ませんが、noindexはアクセス制御ではないため認証を併用してください。

### コードを直すたびにURLを送り直す必要がありますか？

ギガサイト便では同じURLのままファイルを差し替えられるため、再送は不要です。確認相手は一度受け取ったURLで常に最新の実装を確認できます。

### 結局、レビュー用途ならどの方法を選ぶべきですか？

公開後も長く運用するなら本番向けホスティング、短期間の確認なら認証・期限・差し替えが簡単な共有サービスを選びます。相手が非エンジニアの場合は、アカウント作成なしで開けることも重要です。

## 関連記事

- [Squarespaceとの違いと使い分け｜ノーコードサイトと一時HTML共有](https://giga-site.com/articles/squarespace-vs-share/index.md)
- [Shopifyとの違いと使い分け｜ECサイトと一時HTML共有](https://giga-site.com/articles/shopify-vs-share/index.md)
- [Google Apps ScriptのWebアプリ公開との違い](https://giga-site.com/articles/google-apps-script-vs-giga-site/index.md)
- [Obsidian Publishとの違い｜ナレッジ常設公開と一時レビュー共有](https://giga-site.com/articles/obsidian-publish-vs-giga-site/index.md)
- [Logseqの公開機能との違いと使い分け](https://giga-site.com/articles/logseq-publish-vs-giga-site/index.md)
- [READMEやリポジトリ閲覧との違い｜ソース閲覧とHTML実物の共有](https://giga-site.com/articles/readme-so-vs-giga-site/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Figmaプロトタイプ共有リンクとの違い｜デザイン確認とHTML確認",
  "description": "Figmaのプロトタイプでデザインを確認するフェーズと、実装後のHTMLをブラウザで動作確認するフェーズでは見るべきものが変わります。デザインと実装の確認フェーズを整理して選択肢を探している方向けに、両者の違いを解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/figma-prototype-share-vs-giga-site",
  "url": "https://giga-site.com/articles/figma-prototype-share-vs-giga-site",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "比較",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Figmaプロトタイプがあれば実装の確認は不要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "プロトタイプはデザイン段階の確認に向いていますが、実際のフォーム動作やブラウザ差、レスポンシブの崩れなどは実装してはじめて分かります。実装後は本物のHTMLでの確認が別途必要になります。"
      }
    },
    {
      "@type": "Question",
      "name": "実装したHTMLをどうやって確認してもらえばよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLやZIPをギガサイト便のトップにドロップすると共有URLが発行され、確認相手はブラウザで実物を操作できます。デザインデータではなく動くページを確かめてもらえます。"
      }
    },
    {
      "@type": "Question",
      "name": "公開前の実装を社外に見せても大丈夫ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "公開前の実装は、パスワードや会社ドメイン認証などを設定して限定共有するのが安全です。一時公開ページにはnoindexが付き検索結果には出ませんが、noindexはアクセス制御ではないため認証を併用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "コードを直すたびにURLを送り直す必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便では同じURLのままファイルを差し替えられるため、再送は不要です。確認相手は一度受け取ったURLで常に最新の実装を確認できます。"
      }
    },
    {
      "@type": "Question",
      "name": "結局、レビュー用途ならどの方法を選ぶべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "公開後も長く運用するなら本番向けホスティング、短期間の確認なら認証・期限・差し替えが簡単な共有サービスを選びます。相手が非エンジニアの場合は、アカウント作成なしで開けることも重要です。"
      }
    }
  ]
}
```