--- title: "【作って活かそうFigmaMake：前半】FigmaMakeとGeminiで3時間！多忙な社長の“赤入れ”が捗るLPの叩き台を爆速で作る新世代のWeb制作フロー" date: 2025-07-22 categories: column author: 長橋 canonical: https://www.liberogic.jp/topics/20250723-figmamake/ --- # 【作って活かそうFigmaMake：前半】FigmaMakeとGeminiで3時間！多忙な社長の“赤入れ”が捗るLPの叩き台を爆速で作る新世代のWeb制作フロー ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/c87e10ad50934b608bec34aaa8ccda0f/hero%20(1).png) AI（Gemini）とデザイン自動化ツール（FigmaMake）を使った爆速LP制作。今回は、その全手順と僕のリアルな心の声を、デザイナー目線で余すところなくお伝えします！ こんにちは！リベロジック株式会社でUIデザイナーをしている、はっしーです。 僕の最近の悩み事、それはアクセシビリティサービスの新しいLP（ランディングページ）制作がなかなか進まないこと。 自社サイトの構成担当の社長は、ありがたいことに別件で超多忙。でも、このままじゃ前に進まない…。 > 「よし、社長のレビューが少しでも楽になるように、こっちで叩き台だけでも作ってみよう！」 そんな思いつきから始まった、**AI（Gemini）とデザイン自動化ツール（FigmaMake）を使った爆速LP制作**。今回は、その全手順と僕のリアルな心の声を、デザイナー目線で余すところなくお伝えします！ ### 今回のゴール：叩き台で社長の「赤入れ」を引き出す！ > 完璧なものなんて最初から無理だしな！うん！まずは社長がツッコミやすいボールを投げるのが大事なんだ、きっとそうだ！ ### 爆速LP制作の全手順（慣れればもっと速い！） 今回試した制作フローのリアルな時間配分はこんな感じです。一番時間がかかるのは、デザインの精度を上げる「繰り返し」のパートでした。 1. **【分析】** Gemini先生、このLPどうですか？ **（15分）** 2. **【テキスト生成】** 改善点を含めたLPテキストをGeminiに作ってもらう **（15分）** 3. **【プロンプト作成】** FigmaMakeに投げる「魔法の呪文」をGeminiに唱えてもらう **（5分）** 4. **【デザイン生成】** FigmaMake、まずは一発頼んだ！ **（5分）** 5. **【繰り返しループ】** 分析と生成の往復で精度を上げる **（1時間半）** 6. **【Figma化】** Html to DesignプラグインでFigmaにインポート **（5分）** 7. **【Figma修正】** レイアウト崩れなどを最終調整 **（30分）** では、各ステップを詳しく見ていきましょう！ ### STEP 1：【分析】Gemini先生、このLPどうですか？ (15分) まずは、弊社の既存アクセシビリティページをGeminiに読ませて、忖度なしのフィードバックをもらいます。 > 【Geminiへのプロンプト例】 > > 以下のURLのウェブアクセシビリティに関するLPを分析し、優れている点と改善点をリストアップしてください。（後略） すると、数秒で分析結果が。「『導入事例や顧客の声がなく、サービス導入後の具体的なメリットがイメージしにくい』…うわっ、的確すぎてグサグサくる…！でも自分じゃ言えないやつだ、ありがとうGemini！」 自分でも薄々感じていた課題を的確に言語化してくれました。 > さてと、まずは現状把握から。今のページ、僕が作ったけど…とにかく、自分じゃ気づかないこと、Gemini先生にバシッと言ってもらおう！ ### STEP 2：【テキスト生成】改善点を含めたLPテキストをGeminiに作ってもらう (15分) STEP1の分析結果をコピペして、改善案を盛り込んだテキスト作成を依頼します。 > 【Geminiへのプロンプト例】 > > 先ほどの分析結果を元に、ウェブアクセシビリティLPのテキスト構成案を作成してください。（中略）新しく追加する要素には【サンプルテキスト】と明記してください。 「【お客様の声サンプル】株式会社〇〇様：サイト経由の問い合わせが1.5倍に！」みたいな具体的なテキストが出てくると、一気にLPっぽくなります。これだけで仕事した気になっちゃいますね。 > よーし、さっきもらったダメ出しリストをそのままGeminiに渡して、イケてる文章にしてもらおう。これぞAIの有効活用！…おっと、後で自分が混乱しないように、『【サンプルテキスト】』って目印つけといてもらわないと。僕、早とちりだからな… ### STEP 3：【プロンプト作成】FigmaMakeに投げる「魔法の呪文」をGeminiに唱えてもらう (5分) STEP2で作ったテキスト構成案と、作りたいデザインのイメージを伝えて、FigmaMake用の英語プロンプトを生成してもらいます。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/12bec6e942774af8823a730e1fc6308a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-16%2018.46.08.png) > テキストができたらいよいよデザイン！一番楽しいところ！…の前に、FigmaMake様への『お願い状（プロンプト）』を作らなきゃ。僕のカタコト英語じゃ伝わらないから、ここはGemini先生にお任せ。頼りにしてます！ ### STEP 4：【デザイン生成】FigmaMake、あとは頼んだ！ (5分) > さあ、魔法の呪文をコピペして、エンターをターン！…ってね。一発で神デザイン、来ちゃったりして？…来ないか。いや、来るかも？このドキドキ、ちょっとガチャみたいで楽しいな。 生成されたプロンプトをコピペして、デザイン生成ボタンをクリック。この数秒の待ち時間が、地味にドキドキします。そして出てきた最初のデザイン。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d23dd2f7ab1a47d29e69b4d75fa8ece1/FireShot%20Capture%20041%20-%20%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%92%E3%82%99%E3%83%AA%E3%83%86%E3%82%A3LP%E5%8F%A9%E3%81%8D%E5%8F%B0%20-%20%5Bitem-pad-36048235.figma.site%5D%201.png) おお、できた！！でもまだ簡素ですね…。さらにデザイン面での調整や文言などを繰り広げていきます。 でも、まあ、やっぱりここからが本番でした。 ### STEP 5：【繰り返しループ】分析と生成の往復で精度を上げる (1時間半) ここからは、AIとのブレストタイム。FigmaMakeで生成したデザインを見ながら、「もっとこうしたい」というのをGeminiに相談し、プロンプトを改善していく地道な作業です。 「あーっ、そっちじゃない！」って、つい独り言が大きくなる。たぶんオフィスに響いてる。でも、このラリーがだんだん楽しくなってくるから不思議です。 > はい、やっぱり一発OKとはいきませんでしたー！知ってた！でも、ちょっとは期待した！ここからが本番、AIとの二人三脚。僕が監督で、Geminiがコーチみたいな感じ？ そして最終的な出力がこちら ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/9e33cb56259844e388a349fa84fca2a2/Container%201.png) 初回の作図よりだいぶ整ってきた。ただ…不要な部分を消したり追加したりが面倒（おそらく日本語を英語に変換して指示出しているのでそこでうまく意図が伝わらない場合が多いのか…）。 FigmaMake上でこれ以上するのは無理かもと思ったので一旦Figmaデータに変換してから修正という力技に出ました。 ### STEP 6：【Figma化】Html to DesignプラグインでFigmaにインポート (5分) ある程度デザインの方向性が固まったら、いよいよFigmaにデータを移します。以下に手順を掲載します。 1. FigmaMakeで生成したデザインを一旦Webページとして公開します。 2. Figmaのプラグイン「Html to Design」を立ち上げます。 3. 公開したFigmaMakeのURLを入力し、インポートを実行！ 使うのはプラグインの「Html to Design」。FigmaMakeで公開したページのURLをコピペして、ボタンをポチッ。これだけで、WebページがFigmaのレイヤーに変換されるんだから、本当に便利な世の中になったもんだ…。 ### FigmaMakeの公開 まずはFigmaMakeを公開します。公開をクリックするとステータスが公開済みに切り替わります。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/af97db9a0c6243779ae033618313b524/%E5%85%AC%E9%96%8B%E8%A8%AD%E5%AE%9A.png) ### Figmaのプラグイン「Html to Design」を立ち上げ公開したFigmaMakeのURLを入力し、インポートを実行！ プラグインを立ち上げて先ほど取得したURLを貼り付けます。あとはインポートボタンをクリックすれば完了です！ ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/04db39568d1f4a6a87c25b9f95005242/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-16%2020.07.29.png) 数分経過するとFigma上に出力されたデザインが表示されます。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/b79602a82a3746f981776f9914d31326/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-16%2020.09.59.png) ### 最後は公開状態を非公開に 一連の作業が終わったら公開を取り消すで非公開状態に戻しましょう。 ### 懸念点 現在は公開状態にパスワードをかけたり開発環境を作ったりなどの機能がないので企業サイトのリニューアルなどに使う場合には情報漏洩など注意が必要です。 基本的には自社のコンテンツ限定で作るかダミー情報を使って叩き台を作った場合などは影響がないと思いますので案件に応じて使い分けるのがいいと思います（外出しNGの案件には絶対に使わないでください）。 > よし、だいぶいい感じになってきたぞ！ここからは僕のホームグラウンド、Figmaの出番だ！待たせたな、相棒！ ### STEP 7：【Figma修正】レイアウト崩れなどを最終調整 (30分) インポートしたてのデータは、まだまだ荒削り。謎のグループ化がされていたり、テキストボックスがはみ出ていたりと、ツッコミどころが満載です。 ここからはひたすら地道な修正作業。オートレイアウトをかけ直し、バラバラになった要素をコンポーネント化し、全体の余白を整えて…。この一手間が、デザインのクオリティをぐっと引き上げ、「ちゃんとした叩き台」にしてくれるんです。 完成したものがこちら ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/add1589119f24959bbebafd2cb8f4a6d/Group%2020.png) LPの下の方にいくとデザインの粒度が下がるのはAIのしかたない点なのか私の指示だしが悪いのか…。これからも色々試行錯誤していこうと思います。 > インポート、と。…うん、思ったより元気な感じでレイアウトが暴れてるな！まあ、AIが頑張ってくれた結果だからね。ここから綺麗に整えてあげるのが、僕の愛の見せ所よ。 ### まとめ：作ってみて分かった「AI協業デザイン」の勘所 今回の制作フローで実感したのは、AIは「魔法の杖」ではなく、「優秀な相棒」だということ。 - **叩き台作成の時短効果は絶大:** ゼロから構成案とにらめっこするより、圧倒的に速い。 - **試行錯誤のループがキモ:** 良いデザインを作るには、AIとの対話を繰り返す根気が必要。 - **最後は人の手で:** AIが作ったものを鵜呑みにせず、デザイナーが意図を持って仕上げることが品質を左右する。 ちなみに、この叩き台を恐る恐る社長に見せたら… **「おお、面白い！これなら話が進めやすいね！叩き台があるだけで全然違うよ、ありがとう！」** とのこと。 > よっしゃー！頑張った甲斐があった…！今夜はビールがうまいぞ！ 今回はここまで！実際のLP化する部分は社長の赤入れ後にデザイン仕上げて【後半】として公開します！ 皆さんも、AIとの協業による新しいデザイン制作、試してみてはいかがでしょうか？