--- title: "【作って活かそうFigmaMake：後半】FigmaMakeとGeminiで3時間では終わらなかったが！多忙な社長の“赤入れ”が捗るLPの叩き台からWebデザイン完了までの道のり" date: 2026-01-29 categories: column author: 長橋 canonical: https://www.liberogic.jp/topics/20260130_figmamake-gemini-lp-real/ --- # 【作って活かそうFigmaMake：後半】FigmaMakeとGeminiで3時間では終わらなかったが！多忙な社長の“赤入れ”が捗るLPの叩き台からWebデザイン完了までの道のり ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/0f1833929d8e423db1a8f73310795c4a/20260130_figmamake-gemini-lp-real.png) 前回の記事で、「FigmaMakeとGeminiを使って3時間でLPの叩き台を作った！」と意気揚々と報告した僕。 「【作って活かそうFigmaMake：前半】FigmaMakeとGeminiで3時間！多忙な社長の“赤入れ”が捗るLPの叩き台を爆速で作る新世代のWeb制作フロー」この記事はその後半戦です。 この記事は昨年のLP構築時に執筆したものになります。当時の記事ですがAIの進歩が早く、今公開となると内容が古くなってます…。AIの進歩のスピードの速さには驚きですね。2026年はさらに加速していくことを考えるとデザイナーの働き方や情報のキャッチアップもしっかり追いついて行かないと置いてかれそうですね…。いやはやすごいですね。今のFigmaMakeやGemini3ではもっとできることが増えています。この記事はAIを駆使しながらもAIの進化に右往左往していたデザイナーの日記だと思って流し見で見ていただけたら幸いです。そして加筆した箇所はこのように補足文（と言う名のツッコミ）を入れていくので副音声としてお楽しみください。 こんにちは！ リベロジック株式会社でUIデザイナーをしている、はっしーです。 前回の記事で、「FigmaMakeとGeminiを使って3時間でLPの叩き台を作った！」と意気揚々と報告した僕。 こちらは前回の成果物です。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/6f062176c9284365b358932fc909e00f/%E5%89%8D%E5%9B%9E%E3%81%AE%E5%8F%A9%E3%81%8D%E5%8F%B0.png) 前回の記事はこちらをみてください。 **【作って活かそうFigmaMake：前半】FigmaMakeとGeminiで3時間！多忙な社長の“赤入れ”が捗るLPの叩き台を爆速で作る新世代のWeb制作フロー** [https://www.liberogic.jp/topics/20250723-figmamake/](/topics/20250723-figmamake/) この記事はその後半戦です。 社長に報告後の僕はふんふん気分でした。 > これなら社長の無茶振りにも爆速対応できるぜ！ > 3時間でこのクオリティなら文句ないでしょ！ ……そんなふうに考えていた時期が、僕にもありました 笑 今回は、意気揚々と社長に提出したその後の **「地獄の修正編」**をお届けします⭐️･:*+.\(( °ω° ))/.:+✨ 結論から言うと、 **FigmaMakeで作ったあの綺麗なレイアウトは、社長のコメントで跡形もなく消え去りました。** これはAIが進化した今も変わらず起こることと思います。 今回の教訓：FigmaMakeは「ダッシュボードやワイヤー作成」には最強だが、「情緒あふれるLP」にはまだ早い…かもしれない。 最近のAIの進化スピードは早くて最近のAIはもっと多角的に利用できますね。びっくりだよ！ ## 社長プレゼン：「いい感じにして」の壁 前回作成した、そこそこ整ったSaaS風のLP案。自信満々で社長に見せたわけです。 > 社長！例のLPの叩き台、AI駆使して爆速で作ってみました！構成はこんな感じでどうでしょう？」 > おー、早いね。（画面を見ながら）……んー、でもなんか硬いんだよね」 > 硬い？（いや、信頼感が必要なBtoBサービスだし、このくらい整然としてた方が…） > もっとこう、ワクワクするというか、ドーン！とインパクトがあって、シュッとした感じにできない？ あとここ、もっと動きつけて“いい感じ”に装飾盛ってよ 出ました。必殺**「いい感じにして」。** 全デザイナーが最も恐れ、そしてAIが最も理解できない指示ランキング第1位です。 「いい感じ」にとか「バタくさい」とかよく言われます。その言葉の奥の意味を読み取ることが大切だよね。デザイナーってコミュ力も試される時代になってきたよね。コミュ障でKYな私には難しいことも多く毎日が修行です…。（デザイナーにコミュ力必要なら幼少期からもっと鍛えてたのに…。とほほのほ。） クライアントワークの場合はここで相手の深層心理や求めることなどをさらに深掘り追求していきますが、社長は多忙のため中々ヒアリングする時間が取れません。 社長と社員という関係上そこはなあなあになり適当なワードと依頼になってしまう場合もあります。 そして多忙な社長のセリフを皆で咀嚼し直して作るフェーズ突入です。 これは言い訳ですね。僕の言い訳にすぎませんでした。本当に。 **心の声** （「いい感じ」って何！？Gemini先生もそこまでは読み取れないよ！「ドーン」で「シュッ」って、擬音語だけで修正指示出すのやめてもらっていいですか！？） この気持ちは今も変わらないです ### FigmaMake VS 社長の鬼コメント そこからが本当の戦いでした。 社長の頭の中にある「いい感じ」を具現化すべく、FigmaMakeで作ったベースに修正を入れていくのですが……。 ここでツールの相性が牙を剥きます。 FigmaMakeが生成してくれるのは、あくまで**「論理的に正しいWebレイアウト」**です。Auto Layout（オートレイアウト）でガチガチに組まれた綺麗な箱組み。 これがまたAIの進化のすごいところです。今同じプロンプトで生成すると制度がかなりいいです。AIの進歩を感じますね（参考画像を下に添付しておきます）。 美しくて勉強になる部分やテンプレートテーマとしては使いやすいです。 しかし、社長の要望は > 「背景にテクスチャ散りばめたりさぁ！！」 > > 「要素を枠からハミ出させて」 > > 「斜めのスリッドを入れてみたら？」 といった、**論理を無視したエモーショナルな装飾**ばかり。 FigmaMakeの生成データに無理やり装飾画像をねじ込むたびに、Auto Layoutが悲鳴を上げ、全体のレイアウトがガタガタに崩れていきます。 > 心の声 > （ああっ！その背景画像を入れたら、下のセクションまでズレた！FigmaMakeくん、君は悪くない、君は正しい。ただ、社長が求めている要望にはまだ答えきれないんだ…！） **結局「手作業」で作り直す虚無感** > 「ここの余白はもっと詰めて！」 > > 「ボタンはもっとプルプルさせて！」 次々と入る**鬼コメント（赤入れ）**に対応するために、僕は泣く泣くFigmaMakeが作ってくれたAuto Layoutを解除し、生成されたコンポーネントを分解し、手作業で配置し直しました。 数時間後。画面に残っていたのは、**FigmaMakeの面影が1ミリもない、完全に別物のデザインデータ。** ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/8a1d66ba4bcb41339f41bcea09ba9648/Frame%2010696.png) そして色々手を加えた初稿がこちらになります。初稿とはまるっきり異なるデザインになりました。 しかも既存の要素は全てオートレイアウトはされているのですがFigmaMakeからFigmaにコピーすると何故かオートレイアウトが解除される部分があり、再度オートレイアウトをし直さなければいけないなどの作業も発生します。 気がついたら手直しにかなり時間を要してしまいました。 > 心の声 > （あれ？ これ……最初からPhotoshopやFigmaで手作業したほうが早かったのでは……？ 僕の爆速3時間は何だったの……？） 深夜のオフィスで、その事実に気づいた時の虚無感といったらありません。そしてそんな私にエナジードリンクをくれたのは先輩でした。 > 先輩「私は仕事終わったから帰るわ！！」 颯爽と去る先輩。手伝ってはくれないんですね…。 ### 結論：FigmaMakeの「得意」と「苦手」 今回の泥沼修正を経て、FigmaMakeというツールの特性が分かりました。 使い所を間違えると、かえって修正工数が増えます。 ### ✅ FigmaMakeが得意なこと（＝爆速で終わる） - **管理画面・ダッシュボードUI・アプリ画面など** - 整然としたグリッドレイアウト、フォーム、テーブルなどは最強です。 - 「ロジカルな構造」を一瞬で作ってくれるので、SaaSの管理画面などはそのまま使えるのでは？と言うクオリティのものが出来上がります（もちろん手直しは必須ですが）。 - **初期のワイヤーフレーム・構成案** - 「要素の過不足を確認する」段階なら、LPでも十分使えます（デザインを作り込む前なら）。 - また要件を詰めていく際にも色々なパターンを作れるので大変便利です。 - クライアントの要望を言語化し、その場で形にしてイメージのすり合わせなどに使う場合にかなり重宝しました。 ### ❌ FigmaMakeが苦手なこと（＝手作業必須） - **LP（ランディングページ）のビジュアル作り込み** - 「あしらい」や「装飾」で魅せるデザインはまだ苦手 - 生成されるのはあくまで整理された使いやすいUI。グラデーションやパターンなどの装飾もできますが、しっかり指示を出さないと2010年代くらいの仕上がりになることも。 - デザイン制作時のプロンプトの精度を上げるためには時間が必要。 - **「いい感じ」という曖昧なニュアンスの具現化** - ここにはまだ、人間のデザイナーの翻訳能力が必要です。 - プロンプトをある程度使い込んでいけばもっと的確な指示でスムーズに作成できそう（私にはまだ無理 ### まとめ：それでも「叩き台」としては優秀だった というわけで、**「社長の曖昧な指示によるLP制作」には、FigmaMakeの生成データをそのまま使うのは厳しかった**です。 ただ、前回の記事で書いた通り、**「白紙の状態から3時間でとりあえずの形にして、社長の要望を引き出す」**という点では、間違いなく役に立ちました。そして以前はそこにかなり時間を使っていて作業進行までに時間がかかっていました。 「ドーンとしてシュッとして」という要望も、**叩き台があったからこそ出てきた意見**ですからね（ポジティブ思考）。 **今回の学び** - **FigmaMakeは「構造」を作るプロ。** - **「装飾（あしらい）」はデザイナーの腕の見せ所。** - **社長の「いい感じ」に対応できるAIはまだいない。** 次回は、懲りずに「社内管理ツールのUI刷新」でFigmaMakeにリベンジしたいと思います。（管理画面なら…管理画面ならきっと輝けるはず…！） LPのデザイン修正は……。 うん、今後も地道に手作業で頑張ります！ そしてAIの進化ですが…。前編の記事を作った時と同じプロンプトで生成したデザインがこちらになります。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d0df1be57e724a8ab2fc0df1e263e7dc/%E7%94%9F%E6%88%90AI2026%E5%B9%B4%E7%89%88.png) 数ヶ月で初回生成のクオリティ爆上がりしてます。これはかなりびっくりですね。 精度爆上がりで怖いですね。私もAIの進化に負けないように日々デザインの勉強に勤しみたいと思う今日この頃です。 そして[今回完成したWebサイトがこちら](https://www.liberogic.jp/lp/accessibility/) ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/b4ad5a224bc64a64a15785a31892b543/Section.png) [LP自体もWCAG2.2AAに準拠](https://www.liberogic.jp/lp/accessibility/accessibility_report/vpat/)してるし、 Lighthouseも高得点（時間ちょっとかかるけど診断してみてください！たまにフルマークでますよ！） しかも謎に勝手に[多言語化対応](https://www.liberogic.jp/en/lp/accessibility/)！ [多言語化対応はこちらの記事](https://www.liberogic.jp/topics/20251111-translation/)も見てくださいね！ 最近はブラウザ翻訳が主流ではありますが、切り替え無しで勝手にお安く翻訳サイト出来るの超便利ですよ！ **どうでしょうか？ だいぶ綺麗に仕上がったと思いませんか🎵** > あーだこーだ書いてみましたが、まぁやっぱり叩き台があったおかげでかなり工数を削減できたという感覚はあります！！ > > 以前だったらWF段階でかなり時間かけてましたし、そのあとデザインに落とし込んでさらに内容変えてという工数がかなり削減できました。 > > 次回AI使う場合はしっかりとしたプロンプトを生成してから挑もうと思いました。 > > ご褒美にビールのも。