Tempo Labsで作ったUIをURLで共有する方法

Tempoで組んだUIを確認してもらう

TempoはReactのUIをビジュアルに作れるため、画面の見た目や挙動をすばやく形にできます。とはいえ、その画面をデザイナーや他のメンバーに見てもらうには、実際にブラウザで触れる状態で渡すのが一番伝わります。

スクリーンショットでは余白やレスポンシブの挙動まで伝わりません。書き出したUIを公開URLにしておけば、相手は自分の端末でレイアウトや表示を確認できます。

書き出したUIをURLにする

Tempoから書き出した画面は、HTMLにCSSやJS、画像が伴うことがあります。ギガサイト便はこうしたファイルをZIPにまとめてトップページにドロップするだけで、その場で共有URLを発行します。会員登録なしでも公開できます。

URLは 〇〇.giga-site.com 形式のサブドメインで、HTTPSは自動、CDNのエッジ配信で表示が速いです。UIの確認はテンポが大事なので、すぐ開ける状態で渡せるのは利点になります。

AI生成HTMLを共有する前の安全チェック

Tempo Labsで作ったUIをURLで共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。

ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。

• 外部送信: form action、fetch、script src、iframeの向き先を確認する
• 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
• 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
• 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める

TempoのUIを共有する手順

Tempoから書き出してから共有するまでの流れは次のとおりです。

1. Tempoで作ったUIを、表示できるHTML一式として書き出す。
2. HTMLとCSS/JS/画像をZIPにまとめる。
3. ギガサイト便のトップにドロップして共有URLを発行する。
4. 認証方式を選び、必要ならカスタムスラッグでURL末尾を整える。
5. 公開期限を設定し、発行されたURLをレビュアーに送る。

デザインレビューを回しやすくする

UIは何度も手直しが入るものです。Tempoで修正して書き出すたびに新しいリンクを送るのは手間ですが、ギガサイト便は同じURLのままファイルを差し替えられるので、レビュアーは同じURLを開くだけで最新の画面を確認できます。

複数人で確認する場合は、誰がいつ見たかをアクセスログで把握できます。スマートフォンでの見え方を確認してほしいときは、QRコード配布を使えば実機ですぐ開いてもらえます。

プロトタイプ共有としての位置づけ

Tempoで作ったUIを本番サービスとして継続運用するなら、Reactアプリをビルドして専用のホスティングにデプロイするのが基本です。ギガサイト便は独自ドメインでの本番Webサイト運用ではなく、確認・レビュー・一時共有に向いた位置づけです。

社内外を問わず限定で見せたいUIは、パスワードやメール認証、会社ドメイン認証を選びましょう。一時公開ページには noindex が付いて検索結果には出ませんが、noindex はアクセス制御ではないので認証を併用してください。公開期限が切れると自動的に閲覧できなくなり、古いプロトタイプのURLが残りません。