Figmaプロトタイプ共有リンクとの違い｜デザイン確認とHTML確認

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コードでその場で開いてもらうこともできます。