---
title: "Tempo Labsで作ったUIをURLで共有する方法"
description: "Tempo LabsでビジュアルにReact UIを組んでも、確認フローでデザイナーやチームに渡す手段で迷いがちです。書き出した画面をブラウザで開ける形で認証付きURLとして共有する方法をステップで解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-tempo-ui"
markdown: "https://giga-site.com/articles/share-tempo-ui/index.md"
category: "AI活用"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Tempo Labsで作ったUIをURLで共有する方法

Tempo LabsはReactのUIをビジュアルに組み立てられるビルダーです。作ったUIをデザイナーやチームに確認してもらうとき、書き出した画面をブラウザで開ける形で渡せると話が早いです。ここではTempoで作ったUIを、認証付きの一時URLで共有する方法を整理します。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。

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

## 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が残りません。

## よくある質問

### Reactのインタラクションも動きますか。

ブラウザだけで完結するクライアント側の挙動であれば、書き出したHTML/JSをそのまま表示できます。サーバー処理を伴う本番運用は専用のホスティングが向いています。

### スマホでの見え方を確認してもらえますか。

QRコード配布に対応しているので、レビュアーにQRを渡せば実機ですぐ開いて確認できます。レスポンシブの確認に便利です。

### UIを直すたびにURLを送り直す必要がありますか。

いいえ。同じURLのままファイルを差し替えられます。レビュアーは同じURLを開き続けるだけで最新のUIを確認できます。

### 確認が終わったURLを残したくありません。

公開期限を設定すれば、期限が切れたときに自動的に閲覧できなくなります。古いプロトタイプの確認用URLが残らないので管理が楽です。無料プランの公開期限は最長7日です。

### AIツールで作ったHTMLはそのまま共有しても安全ですか？

そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。

## 関連記事

- [Same.devで複製・生成したUIを共有する方法](https://giga-site.com/articles/share-same-dev-ui/index.md)
- [Magic Patternsで作ったUIを共有する方法](https://giga-site.com/articles/share-magic-patterns-ui/index.md)
- [Google Stitch（旧Galileo AI）で作ったUIを共有する方法](https://giga-site.com/articles/share-galileo-stitch-ui/index.md)
- [AI生成HTMLのアクセシビリティを確認してから共有する方法](https://giga-site.com/articles/check-ai-html-accessibility/index.md)
- [AIで作ったHTMLを「生成→共有→レビュー→差し替え」まで一気通貫で回すワークフロー](https://giga-site.com/articles/ai-html-review-workflow-end-to-end/index.md)
- [AI生成HTMLを関係者に見せる前の最終チェックリスト10項目](https://giga-site.com/articles/ai-html-stakeholder-checklist-before-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Tempo Labsで作ったUIをURLで共有する方法",
  "description": "Tempo LabsでビジュアルにReact UIを組んでも、確認フローでデザイナーやチームに渡す手段で迷いがちです。書き出した画面をブラウザで開ける形で認証付きURLとして共有する方法をステップで解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/share-tempo-ui",
  "url": "https://giga-site.com/articles/share-tempo-ui",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Reactのインタラクションも動きますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザだけで完結するクライアント側の挙動であれば、書き出したHTML/JSをそのまま表示できます。サーバー処理を伴う本番運用は専用のホスティングが向いています。"
      }
    },
    {
      "@type": "Question",
      "name": "スマホでの見え方を確認してもらえますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "QRコード配布に対応しているので、レビュアーにQRを渡せば実機ですぐ開いて確認できます。レスポンシブの確認に便利です。"
      }
    },
    {
      "@type": "Question",
      "name": "UIを直すたびにURLを送り直す必要がありますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。同じURLのままファイルを差し替えられます。レビュアーは同じURLを開き続けるだけで最新のUIを確認できます。"
      }
    },
    {
      "@type": "Question",
      "name": "確認が終わったURLを残したくありません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "公開期限を設定すれば、期限が切れたときに自動的に閲覧できなくなります。古いプロトタイプの確認用URLが残らないので管理が楽です。無料プランの公開期限は最長7日です。"
      }
    },
    {
      "@type": "Question",
      "name": "AIツールで作ったHTMLはそのまま共有しても安全ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。"
      }
    }
  ]
}
```