2025.09.15

ノーコードでWebUIを構築・公開！Figma Makeでいろいろ作ってみた。

Web制作, クリエイティブ

こんにちは。
Maromaro デザイナーのshunです。

Figma Makeとは、テキストベースで作りたいものを指示するとAIが自動でデザイン、コーディングしてくれるサービスです。

Figmaで作ったデザインを指定して、そのデザインをコーディングしてもらえるだけでなく、
デザインを指定せず、構想をそのままテキスト化したプロンプトだけで指示しても、UI設計から構築してくれるツールです。
また、作成したものをそのまま公開することも可能です。

デザイナーやディレクターでもノーコードでWeb UIを作成、公開することができます。
今回はそんなFigma Makeを使って、いろんなツールを作ってみたのでその作成の軌跡とともに紹介していきます。

【作ったもの①】Maromaroタスク報告くん、進捗報告くん【Webツール】

毎日の出勤時、退勤時に今日やるタスク予定を共有、実績を報告するルーティンがあるのですが、
フォーマットがある程度決まっているので、内容を入れたら自動で報告フォーマットにしてくれるツールを作ってみました。完成版はこちら

指定したプロンプト

案件進捗を報告するテキストをまとめるシステムが作りたいです。
案件名（テキスト）、案件内容（テキスト）、進捗率（数値%）が複数行入力できるフォームあり、「出力」ボタンを押下すると
・”案件名（テキスト）”｜”案件内容（テキスト）”（”進捗率（数値%）”）
のスタイルで””の間にそれぞれ入力したものが入ったテキストが表示されるようにしたいです。

最初にこれだけ入れると、完成版にほぼ近いUIを出してくれました。
そこから朝のタスク報告もできるタスク報告くんも追加してみました。

Maromaroタスク報告くんも作りたいです。項目は「案件名」「案件内容」として基本機能は進捗報告くん同様とする。進捗報告くんとタブで切り替えられるようにする。

これで完成。
出力したいフォーマットが明確にあったので、こう出して欲しい！と最初のプロンプトの時点で明確に言えていたのでとても簡単に作れました。

また、実装が終わった後、Figma Make側から

次に追加できる機能として以下があります：
• データの保存・読み込み機能（localStorage利用）
• 進捗率のバリデーション強化
• CSVエクスポート機能

と機能提案があり、「思い付いてなかったけど、あったら確かに便利かも。」と思い、データのlocal Storage保存機能などを組み込んでもらったりもしました。

毎日のルーティンがちょっとだけ楽になって、作って良かったなと思っております。

【作ったもの②】デモサイト【Webサイト構築】

Figma上のフレームをそのまま実装も可能ということでしたので、デモのLPデザインを読み込ませて実装してもらいました。

完成版はこちら

用意したのは、PC,タブレット,SPレイアウトの3つのデザインフレームのみです。

指定したプロンプト

（フレームをコピペした上で）このサイトを構築してください

最初は恐る恐るPCだけ読み込ませてシンプルに指定してみました。
するとものの数分でぱっと見サイトが構築されたように見えるところまで作れていました。
が、細かくみていくと、フレームで用意した幅以上は背景が伸びなかったり、アイコンそれぞれに勝手にドロップシャドウ入れていたり、一発でデザイン完全再現！とまではいかないようです。

細かく指示出しして見た目を直しながら、次は動きの面を指示してみました。

スクロールに合わせてコンテンツごとにふわっと表示するようにしたいです

実際のエンジニアに言ったら怒られそうな何とも感覚的なプロンプト指示してみました。
すると・・・

各セクションにスクロールに連動したふわっと表示するアニメーション効果を追加します。Motion（旧Framer Motion）とIntersection Observerを使用して、視界に入ったタイミングでセクションがフェードインするようにします。

アニメーション効果の種類：

フェードイン: opacity 0から1へ

上下左右スライド: 各方向から50pxスライドしてフェードイン

ステージングアニメーション: 複数要素が順次表示

各セクションに適用した効果：

ヒーロー: ナビゲーションが上から、メインコンテンツが左から、スマホ画像が右からスライドイン

ロゴクラウド: 各パートナーロゴが順次フェードイン

機能セクション: タイトルが上から、各機能カードが順次上からスライドイン

・・・中略・・・
これで、スクロール時に各セクションが美しくアニメーションしながら表示される、プロフェッショナルなランディングページが完成しました！

と、私の表現を尊重しつつ、いろんな工夫をしてくれました。オノマトペもいけるんですね。
もっと細かく指定すれば、想像しうる範囲のものなら大抵のものは実現できそうだなと感じました。

【作ったもの③】Maromaro将棋部【ミニゲーム】

ゲームなんかも作れるのかな？と思っていたところ、たまたま藤井聡太七冠のニュースを見たので、将棋ゲームを作ってみました。
もちろんAIには将棋のルールも理解してくれていて、簡単な指示だけであっという間に作ってくれました。

やったー！なんとかAIレベル：７に勝てました！

完成版はこちら

指定したプロンプト

AIと対戦できる将棋ゲームが作りたいです。AIの強さはレベル1~10を選べる様にしたいです。

本当は駒の形のスタイルとか、駒が移動するアニメーションとか入れたかったのですが、駒が盤面からずれてしまって、何度指摘しても治らなかったので諦めたところもあります。
あっちが立てば、こっちが立たずみたいなことも多いので、修正入れる際や追加の機能つける時は、こちらのプロンプト力が試されている感じがします。