Webページ制作の属人化はFigma AIで解消できる？「Make kits」を活用した実践フロー検証

はじめに

メンバーズルーツカンパニーのデザイナー、木下です。

「Webサイトに新しいキャンペーンページを追加したいけれど、デザイナーやエンジニアのリソースが空いておらず、公開が1ヶ月先になってしまう……」

企業のWeb担当者やマーケターの方であれば、一度はこんな歯がゆい思いをしたことがあるのではないでしょうか。

近年、施策をスピード感をもって推進する手段として、生成AIを活用したWebページ制作が注目されています。

しかし、いざ実務で使おうとすると「デザインのトンマナや既存のルールに合わず、結局手直しに膨大な時間がかかる」といった課題に直面したことはありませんか？

ツールが便利だからといって、そのまま企業の実務レベルで使えるわけではないのが実情です。

そこで本記事では、FigmaのAI機能「Figma Make」と、自社のデザイン資産を学習・活用させる「Make kits」を使って、自然言語の指示から実務で使えるWebページを制作できるかを検証しました。 

専門知識のないメンバーでもページ制作に参加できる可能性とそのために不可欠な「事前の環境づくり」について詳しく解説します。

※本記事で紹介しているFigmaのAI機能や検証データは、2026年8月時点の情報に基づいています。今後のツールアップデートにより仕様が異なる場合があります。

Webページ制作が特定の人に集中していませんか？

Webサイトに新しいページを1つ追加するだけでも、以下のようなプロセスが発生します。

• 要件定義・ワイヤーフレーム作成

• デザイナーへのデザイン依頼

• エンジニアへの実装依頼

専門知識が不可欠なため特定の担当者に業務が集中し、ちょっとしたページ追加でも制作依頼が詰まってしまい、施策のスピードが落ちてしまうのが多くの企業の課題です。

なお、今回のFigma AI活用で効率化できるのはワイヤーフレームからデザイン制作までの工程です。Figma Makeではコードも生成されますが、案件の仕様や既存の開発環境に適合した本番利用可能なHTML/CSSがそのまま完成するわけではありません。そのため、実装工程では生成結果をベースに、これまで通りエンジニアによる確認・調整が必要です。

一方で、デザイン制作においてボトルネックだったデザイン完成までの待ち時間や細かな修正ラリーを削減できるため、実装工程へより早く移行できます。結果、制作全体のリードタイム短縮につながると考えています。

「Figma Make」とは？専門知識なしでWeb制作ができる理由と課題

Figmaには、プロンプト（自然言語）を入力するだけでUIデザインを自動生成してくれるAI機能「Figma Make」があります。これを使えば、デザインの専門知識がないディレクターやマーケターでも、テキストベースの指示でWebページのベースを作ることが可能です。

しかし、ここに一つ落とし穴があります。ただAIに自由に生成させるだけでは、既存の自社サイトとは全く異なるちぐはぐなデザインが出力されてしまうのです。

企業サイトには、ブランドカラー、フォント、適切な余白の取り方など、厳格なガイドラインが存在します。実務でAIを活用するには、「AIに自社のルールを守らせる」仕組みが極めて重要になります。

「Make kits」とは？自社デザインをAIに学習させる仕組み

そこで注目したのが「Make kits」という機能です。

Make kitsを活用すると、既存のコンポーネント（ボタンや見出しなどの単体パーツ）やモジュール（複数のパーツを組み合わせたヘッダーや入力エリアなどのまとまり）をFigma Makeに読み込ませ「このパーツを使ってページを組み立てて」とAIに指示できるようになります。 

つまり、自社専用のモジュールを用意しAIにそれだけを使ってページを組み立てさせるというアプローチです。

今回はサンプルサイト用のモジュールを事前に用意し、実際にMake kitsを構築して検証を行いました。

【検証】実際にMake kitsを構築してサンプルページを作ってみた

ステップ1：環境づくり

検証は以下の流れで進めました。

1. モジュールの用意：ヘッダーや特徴エリア、CTAなどの基本パーツを作成する（既存の物があればそのデータを流用）

   

   今回は、テキストやボタン、ヘッダーなど簡易的なパーツのみを使用しました。

2. Make kitsへ読み込み：用意したパーツをFigma上でMake kitsにプロンプトで登録する（Make kitsの設定方法はこちら）

   

3. 調整（.mdや各パーツ）：Figma AIが各パーツの役割を正しく理解できるよう、Markdown（.md）ファイルやコンポーネントの設定をプロンプトで繰り返し調整する

   

   kitsが完成！

4. Make kitsを公開：kitsが完成したらチーム内で利用できる状態にする
   

   

5. Figma Makeから指示：kitsを読み込んだ状態でプロンプトを入力し、ページを生成
   

   

実務レベルに引き上げるための調整

ここで強調しておきたいのは、「登録すればすぐに完璧に動くわけではない」ということです。実務レベルの検証では、期待する状態になるまで複数回の微調整が必要でした。

• Markdownの整備：AIへの指示書となる.mdの構築は、一度では期待通りに伝わらず何度かに分けて指示をし整備していく必要がありました。

• 個別パーツの細かな指示：この場合はこのパーツを使う、という細かな指示が必要でした。

Markdownの整備で実際に入力したプロンプトの例

↑この解析結果を元に、guidelines.mdやsetup.mdなど全てのkitsを一つずつ整備していきます。

ステップ2：ページ生成

整備したMake kitsを使い、サンプルページの制作の指示をして生成してみました。

実際に入力したプロンプトの例

ステップ3：【検証結果】生成されたデザインと削減できた工数

結果として、事前に用意したデザインルールとモジュールに沿ったページを生成することができました！

↓よりデザインシステムに沿ったページにしたい場合のプロンプト例

↑AI独自の解釈での構築をプロンプトで制限することで、コンポーネントパーツをほぼ完璧に再現したサイトを生成することができます。

今回の検証にかかった実際の工数は以下の通りでした。

• モジュール用意〜.md整備：約3時間

• ページ生成（初稿ベースの出力）：10分以内

• 最終チェック・微調整：15〜30分程度

• トータル作業時間：約30〜40分

従来なら1営業日（約8時間）かかっていたページデザインが、最初に3時間投資して環境をつくれば、以後は微調整まで含めても30〜40分程度で完了します。

※記載の作業時間および削減割合は、特定のサンプルモジュールを用いた社内検証環境における実績値です。実際の作業時間はデザインの規模や案件の要件によって異なります。

「誰でも作れる」を実現するには、AIより先に環境づくりが必要

今回の検証から、Figma MakeとMake kitsを組み合わせることで、専門知識のないメンバーでもページ制作のベースを作り上げ、制作のハードルを大きく下げられる可能性が見えてきました。

しかし、企業のWeb制作フローに本格導入するためには、AIというツールを入れるだけでは不十分です。

• デザインルールをどう整理・モジュール化するか

• AIにどこまでの制作/工程を任せるか

• 入力データのセキュリティ管理（Figma AIの学習利用オフ設定等）をどう担保するか

• 生成されたページの品質を誰がどのようにレビューし、公開するか

このように、AIをスムーズに活用するための「制作環境」と「運用フロー」をあらかじめ設計しておくことがプロジェクト成功の最大のカギを握ります。

まとめ：運用フローの設計で安全なAI活用へ

Figma MakeとMake kitsを活用すれば、Webページ制作の初期工程を自動化し、より多くのメンバーが制作に参加できるようになります。属人化の解消とスピードアップには非常に有効な手段です。

ただし、魔法のようにツールを導入すれば誰でも明日から完璧なページが作れるわけではありません。既存のデザイン資産の整理、Make kitsの構築、そしてAIを前提とした制作ルールやレビュー体制の構築こそが最も重要で時間のかかる部分です。

「Webページ制作の属人化を減らし、施策のスピードを上げたい」

 「既存のデザイン資産を活用して、AIによる制作環境を整えたい」

このような課題をお持ちの企業様は、ぜひ一度私たちにご相談ください。

AIツールの導入から貴社に最適なデザインシステムの構築、運用フローの設計まで、実務で使える環境づくりをサポートいたします。