【Figma Make】でつくったWebアプリやWebサイトを公開する3つの方法!

【Figma Make】でつくったWebアプリ・Webサイトを公開する3つの方法!
この記事をシェアする:

記事より動画で見たい方はこちらから!(見たいシーンをリンクから再生できます)

【動画のChapter】
01:35 今回のお題~タイトル紹介
01:45 さっそく3つの方法を見てみます!
02:50 (1)Figma Make組込の[公開]機能を使う方法
04:00 Figma Makeの生成物の特徴(1の方法でかかる制約)
04:48 (2)プロンプトを打って「html」ディレクトリにまとめてもらい、それを手動アップロードする方法
06:10 生成クレジットがどれくらいかかるか?というお話
07:28 (3)DLしたコードをNode.jsを使って npm run build。そのビルドされたファイルをデプロイする方法
08:03 (3)の方法で実際に公開したブラウザゲーム実物( https://hayamo.me/typing/
12:08 今回のまとめ

動画全体のリンクはこちら

こんにちは。上武 ハヤです!今回はFigma MakeでつくったWebアプリやサイトを!どうやって公開すればいいの?というお話です🪄

みなさんこんにちは☺️
私は「上武 ハヤ(うぇぶ はや)」といいます✨

Web制作に関する動画配信をしているVの者(Vtuber)ですよー!

さて2026年になりましたね🥳!

この年末、私はFigma Makeの実験をかねて、ブラウザゲーム をつくったりしていたわけですが…

それをやりつつ思ったのが「これ、どうやって公開するのが効率いいのかな…😐❓」ということでした!

そこで2026年1本目の動画は!
「Figma MakeでつくったWebアプリ・Webサイトを公開する方法」
をテーマにつくってみました🎬✨

いまの時点では3通りくらいの方法があるのかなー、とおもいました

「Figma MakeでつくったWebアプリ・Webサイトを公開する方法」

どうやって公開するのがいいんだろう…?
きっと、Figma MakeでなんらかのWebアプリやWebサイトをつくったことのある人なら、思ったことがある部分だと思います😐

私がいろいろ実際に試してみて、
「だいたい現状では、この3つくらいの方法になるかな😐❓」と。

そう感じている、3つのやり方を、今回の動画ではご紹介しています!

  • (1). Figma Make組込の[公開]機能を使う方法(…と、その制約)
  • (2). プロンプトを打って任意のディレクトリにまとめてもらい、それを手動アップロードする方法
  • (3). DLしたコードをNode.jsを使ってビルド、それをデプロイする方法

↑こちらの3つのやり方について、それぞれの特徴をあげながら、今回の動画でお話しています📢✨

ぜひとも!ご覧くださいね~☺️

【実践動画】【Figma Make】でつくったWebアプリ・Webサイトを公開する3つの方法!

【動画のChapter】
01:35 今回のお題~タイトル紹介
01:45 さっそく3つの方法を見てみます!
02:50 (1)Figma Make組込の[公開]機能を使う方法
04:00 Figma Makeの生成物の特徴(1の方法でかかる制約)
04:48 (2)プロンプトを打って「html」ディレクトリにまとめてもらい、それを手動アップロードする方法
06:10 生成クレジットがどれくらいかかるか?というお話
07:28 (3)DLしたコードをNode.jsを使って npm run build。そのビルドされたファイルをデプロイする方法
08:03 (3)の方法で実際に公開したブラウザゲーム実物( https://hayamo.me/typing/
12:08 今回のまとめ

動画全体のリンクはこちら

ぜひぜひ、みなさんのチャンネル登録をお待ちしてますっ!

上武 ハヤでした~!またねっ😉!!

(※この記事は内容の品質向上を目的に、随時更新を行う場合があります。)


※この動画は個人によって制作されたものです。
 Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites、Figma Make は、Figma, Inc. の商標です。
※動画は自身の責任において閲覧ください。本記事掲載の動画の内容を無断で講座や教材等に転用することを禁じます。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。

この記事をシェアする: