Draftbitで作ったアプリを共有する方法

Draftbitの成果物を共有する考え方

Draftbitはコンポーネントを並べてアプリのUIを組み立てられるビジュアルツールです。設計やデザインのレビューでは、相手に実物の画面を触ってもらうのが一番伝わります。とはいえ毎回プレビュー環境に招くのは段取りが重く、スクリーンショットだけでは導線が伝わりません。

Draftbitから書き出したWeb向けの成果物をブラウザで開ける一時URLにしておくと、相手は何もセットアップせずに画面を確認できます。確認・レビューが目的なら、本番化の前にこの軽い共有を挟むと意思決定が速くなります。

共有するファイルを整える

Draftbitの成果物をWebで見せる場合、index.html を起点に複数のアセットが連動して動くことが多いです。これらは一式で意味を持つため、フォルダごとZIPにまとめて扱うのが確実です。

ZIPに固める前に、ローカルで開いて表示崩れや読み込み漏れがないかを確認しておきましょう。AIやテンプレートで生成された部分は、意図しない空表示が紛れることがあるため、自分の目で先に確かめておくと安心です。

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

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

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

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

共有URLを発行する手順

ギガサイト便なら、Draftbitの成果物をドロップするだけで共有URLが発行されます。会員登録なしでも公開でき、表示はCDNのエッジ配信で速いです。

1. DraftbitからWeb向けに成果物を書き出す。
2. index.html とアセットをまとめてZIPにする。
3. ギガサイト便のトップページにZIPをドロップする。
4. 発行された 〇〇.giga-site.com の共有URLを確認する。HTTPSは自動。
5. 公開期限を設定し、社外共有なら認証方式を選ぶ。
6. URLをレビュー相手に送る。対面ならQRコードでも配れる。

レビューの往復を軽くする

デザインや画面のレビューは、指摘を受けて直して再確認、という往復が必ず発生します。ギガサイト便は同じURLのままファイルを差し替えられるので、Draftbitで修正したら成果物を入れ替えるだけで、相手には同じリンクを再読み込みしてもらえます。

リンクが版ごとに増えないため、相手が古い画面を見て混乱することがありません。誰がいつ見たかはアクセスログでわかるので、レビューが進んでいるかの把握にも使えます。

見せたい相手だけに絞る

社外のクライアントに見せる場合は、URLを知る人が誰でも開ける状態を避けたいことがあります。ギガサイト便ではURLのみ・パスワード・メール認証（ワンタイムコード）・会社ドメイン認証から選べます。

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