--- title: "Figma Makeの出力をURLで共有する方法" description: "Figma MakeのWebページを「URLを送るだけ」で誰かに確認してもらいたい方へ。出力ファイルの取り出し方から認証付き共有URLの発行までを順を追って解説します。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/share-figma-make" markdown: "https://giga-site.com/articles/share-figma-make/index.md" category: "AI活用" publishedAt: "2026-06-21" updatedAt: "2026-06-25" readingMinutes: 7 --- # Figma Makeの出力をURLで共有する方法 Figma MakeでつくったWebページを「URLを送るだけ」で誰かに見てもらいたい。けれど書き出したHTMLをどう公開すればいいか分からない、という方は少なくありません。この記事では、Figma Makeの出力を取り出す方法と、それを認証付きの共有URLとして手早く公開する流れを、専門知識なしで進められる形で整理します。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。 > Source HTML: https://giga-site.com/articles/share-figma-make > Article index: https://giga-site.com/articles/index.md ## 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を候補に入れておくと、デザインを届ける最後の一歩がスムーズになります。 ## よくある質問 ### Figma Makeで作ったページはそのままURLで公開できますか Figma Makeから取り出せるのはHTMLやCSS、画像などのファイル一式で、それ自体は共有用のURLではありません。これらをまとめて公開できるサービスに渡すことで、相手が開けばそのまま表示される1本のURLに変えられます。サーバーを用意しなくても公開できる方法があります。 ### リンクを知っている人以外に見られないようにできますか はい、閲覧できる相手を絞る認証方式を選べます。パスワード認証、指定メール宛のワンタイムで確認するメール認証、特定のメールドメインを持つ人だけに限定する会社ドメイン認証などがあり、用途に合わせて使い分けられます。リンクが転送されても無関係な第三者に見られにくくなります。 ### デザインを修正したらURLは送り直す必要がありますか 同じURLのままファイルを差し替えられる仕組みを使えば、送り直しは不要です。相手は最初に受け取ったリンクを開くだけで、常に最新版のデザインを確認できます。フィードバックを受けて何度も更新する場面で手間が減ります。 ### AIが書き出したHTMLをそのまま公開しても大丈夫ですか アップロード時にセキュリティスキャンが走り、APIキーらしき文字列や外部フォームへの送信、外部スクリプト依存、公開に不要なファイルなどの兆候を検出して警告してくれます。指摘内容を理解したうえで公開するか自分で判断できるため、意図しない情報の混入に気づきやすくなります。 ### AIツールで作ったHTMLはそのまま共有しても安全ですか？ そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。 ## 関連記事 - [bolt.newで作ったアプリをURLで共有する方法](https://giga-site.com/articles/share-bolt-new-app/index.md) - [AI製プロトタイプのフィードバックを集める共有方法](https://giga-site.com/articles/ai-prototype-feedback/index.md) - [Replitで作ったHTMLを外部に共有する方法](https://giga-site.com/articles/share-replit-html/index.md) - [ChatGPT Canvasの成果物を共有する方法](https://giga-site.com/articles/chatgpt-canvas-share/index.md) - [AIが生成したレポートHTMLを関係者に共有する方法](https://giga-site.com/articles/ai-report-share/index.md) - [OpenAI Codexで作ったHTMLを認証付きURLで共有する方法](https://giga-site.com/articles/share-codex-html/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "Figma Makeの出力をURLで共有する方法", "description": "Figma MakeのWebページを「URLを送るだけ」で誰かに確認してもらいたい方へ。出力ファイルの取り出し方から認証付き共有URLの発行までを順を追って解説します。", "datePublished": "2026-06-21", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/share-figma-make", "url": "https://giga-site.com/articles/share-figma-make", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "AI活用", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "Figma Makeで作ったページはそのままURLで公開できますか", "acceptedAnswer": { "@type": "Answer", "text": "Figma Makeから取り出せるのはHTMLやCSS、画像などのファイル一式で、それ自体は共有用のURLではありません。これらをまとめて公開できるサービスに渡すことで、相手が開けばそのまま表示される1本のURLに変えられます。サーバーを用意しなくても公開できる方法があります。" } }, { "@type": "Question", "name": "リンクを知っている人以外に見られないようにできますか", "acceptedAnswer": { "@type": "Answer", "text": "はい、閲覧できる相手を絞る認証方式を選べます。パスワード認証、指定メール宛のワンタイムで確認するメール認証、特定のメールドメインを持つ人だけに限定する会社ドメイン認証などがあり、用途に合わせて使い分けられます。リンクが転送されても無関係な第三者に見られにくくなります。" } }, { "@type": "Question", "name": "デザインを修正したらURLは送り直す必要がありますか", "acceptedAnswer": { "@type": "Answer", "text": "同じURLのままファイルを差し替えられる仕組みを使えば、送り直しは不要です。相手は最初に受け取ったリンクを開くだけで、常に最新版のデザインを確認できます。フィードバックを受けて何度も更新する場面で手間が減ります。" } }, { "@type": "Question", "name": "AIが書き出したHTMLをそのまま公開しても大丈夫ですか", "acceptedAnswer": { "@type": "Answer", "text": "アップロード時にセキュリティスキャンが走り、APIキーらしき文字列や外部フォームへの送信、外部スクリプト依存、公開に不要なファイルなどの兆候を検出して警告してくれます。指摘内容を理解したうえで公開するか自分で判断できるため、意図しない情報の混入に気づきやすくなります。" } }, { "@type": "Question", "name": "AIツールで作ったHTMLはそのまま共有しても安全ですか？", "acceptedAnswer": { "@type": "Answer", "text": "そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。" } } ] } ```