Figma Makeの出力をURLで共有する方法

Figma Makeの出力はそのままでは「URLで送れる」状態ではない

Figma MakeはAIへの指示や操作からWebページを生成してくれる便利なツールですが、できあがったものを社外の人やクライアントに見せようとすると、最初の壁にぶつかります。手元にあるのはHTMLやCSS、JavaScript、画像といったファイルの集まりであって、ブラウザのアドレス欄に貼れる『URL』そのものではないからです。

ファイルをそのままメールに添付して送る方法も考えられますが、相手がZIPを解凍してブラウザで開く手間が発生し、環境によっては画像やスタイルが正しく表示されないこともあります。本来見せたかったデザインの印象が、共有の段階で崩れてしまうのはもったいない話です。

つまり必要なのは、書き出したファイル一式を『開けばそのまま表示される1本のURL』に変えるステップです。ここを押さえれば、Slackでもメールでも、リンクひとつで相手に完成形を届けられます。

まずはFigma MakeからHTMLを書き出す

共有の前提として、Figma Makeから成果物をファイルとして取り出しておきます。生成されたページには、ページ構造を記述したHTMLのほか、見た目を整えるCSS、動きを担うJavaScript、そして画像などの素材が含まれます。

これらは1つのファイルではなく複数のファイルで成り立っているため、フォルダごとZIPにまとめておくと扱いやすくなります。後述する公開作業では、このZIPをそのまま渡すだけで一式を認識してくれるため、ファイルを並べ替えたり結合したりする必要はありません。

• 生成したページをHTML一式として書き出す
• HTML・CSS・JS・画像をフォルダにまとめる
• フォルダごとZIP（圧縮）にしておく
• 画像やフォントなど、表示に必要な素材が漏れていないか確認する

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

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

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

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

書き出したファイルを共有URLに変える

ファイルが手元にそろったら、あとはそれを認証付きの共有URLとして公開するだけです。ここでは「ギガサイト便」を使った手順を例に説明します。サーバーを立てたり、デプロイの設定を書いたりする作業は不要で、ファイルを渡せばその場でリンクが発行されます。

まず試したいだけなら、トップページにZIPをドロップするだけで、登録なしでも共有URLをすぐに受け取れます。ただし、お試しでの公開は検索結果に出ないnoindex扱いで、7日間という公開期限が付きます。継続的に使う、あるいは見せる相手を絞りたい場合は、無料アカウントを作っておくと管理がしやすくなります。

1. トップページに書き出したZIPをドロップする
2. 発行された共有URLを確認する
3. 相手を絞りたい場合は認証方式（パスワードやメール認証など）を選ぶ
4. 必要に応じて公開期限を設定する
5. 発行されたURLを相手に送る

「誰に見せるか」を選べる認証方式

デザインの初期段階や社外秘の案件では、リンクを知っている人なら誰でも見られる状態が不安なこともあります。そうしたときに役立つのが、閲覧できる相手をコントロールする認証方式です。用途に応じて使い分けられます。

たとえば社内レビューなら会社のドメインを持つ人だけに限定し、特定のクライアント1人に見せるならその人のメール宛の本人確認を使う、といった具合です。リンクが転送されても無関係な第三者に中身が見られにくくなるため、安心して送れます。

• URLのみ: リンクを知っていれば誰でも閲覧できる
• パスワード認証: 合言葉を知っている人だけが閲覧できる
• メール認証: 指定したメール宛のワンタイムで本人確認する
• 会社ドメイン認証: 指定したメールドメインを持つ人だけ閲覧できる

公開後の修正や安全面で頼れる機能

Figma Makeのデザインは、フィードバックを受けて何度も手を入れるものです。修正のたびにURLが変わると、リンクを送り直す手間がかかり、相手も古い版を見続けてしまいかねません。同じURLのままファイルを差し替えられる仕組みがあれば、相手は同じリンクを開くだけで常に最新版を確認できます。

また、AIが生成したHTMLには、意図せず外部のスクリプトに依存していたり、公開に不要なファイルが混ざっていたりすることがあります。アップロード時にはセキュリティスキャンが走り、APIキーらしき文字列や外部フォームへの送信、外部スクリプト依存などの兆候を見つけて警告してくれます。内容を理解したうえで公開するかを自分で判断できるので、うっかりした情報漏れを防ぎやすくなります。

なお、お試し公開に付くnoindexは検索結果への露出を抑えるものであって、アクセスを制限する仕組みではありません。本当に見せる相手を絞りたいときは、前述の認証方式を併用してください。このほか、誰がいつ見たかをアクセスログで確認したり、URL末尾のスラッグを分かりやすい文字列に編集したりもできます。

Figma Makeの出力をストレスなく届けるために

Figma Makeで生まれたアイデアは、相手に見てもらって初めて価値が動き出します。ファイルのまま渡して表示崩れに悩むより、書き出したHTML一式を1本のURLにまとめてしまえば、確認のやり取りはぐっと軽くなります。

見せる相手を認証で絞り、修正は同じURLのまま差し替える。この2点を押さえておけば、初稿から最終版まで一貫した動線でレビューを回せます。サーバー知識がなくても始められる手段として、ギガサイト便のような認証付き共有URLを候補に入れておくと、デザインを届ける最後の一歩がスムーズになります。