---

---

「AIをWeb制作に活用したいけれど、具体的な使い方がイメージできない」「デザインシステムを遵守しながら、効率的にコード化する方法はないだろうか？」

このような悩みを抱えたことはありませんか？

Web制作の現場において、AI活用はもはや避けて通れないテーマとなっています。しかし、AIを具体的にどのように生かすことができるのかイメージがつかないという方も多いのではないでしょうか。

今回は、ニジボックスのAIスペシャリストが、『Figma Make』と『Cursor』を組み合わせてデザインシステムに沿ったワイヤーフレームの作成からデザイン、実装までを自動生成する制作プロセスを紹介した記事を、初学者の方でも分かりやすいように解説します。

AI活用の波が広がる中、実際の現場ではどのように活用できるのか。制作プロセスのご紹介だけではなく、AI活用のポイントも解説していきます。

AIのWeb制作への生かし方

ニジボックスのAI関連支援とAIスペシャリスト

ニジボックスでは、さまざまなAIサービスの利活用研究を行っております。

AIプロダクト改善の支援やAIサービスにおける新規設計の支援が可能です。

詳しくは以下の資料でご紹介していますのでぜひご覧ください。

ニジボックスにはAI活用への知見が深いAIスペシャリスト 吉川聡史が在籍しています。吉川は、最新の技術（ツール）を用いた、AI×UXのあり方について技術検証を行い、それらの取り組みをXやnoteを使って発信しています。

AIを活用して作る以下の作成方法やその工夫をnoteで紹介しています。

• KPIシート
• ペルソナ
• カスタマージャーニー
• 要件定義
• WBS
• サイトマップ
• ロゴ
• 動画
• 3Dモデル
• プレゼン資料

など

吉川の経歴は以下をご覧ください。

吉川 聡史
株式会社ニジボックス UX・ディレクション室 室長。AIクリエイター。

AIはWeb制作でどう生かせるか

現在、AIによる生成技術は飛躍的に進化していますが、AIが生成したものをそのまま修正なしで実際のWeb制作現場に投入するのは、まだ現実的ではありません。

AIの出力を完成品として捉えるのではなく、あくまでたたき台として活用し、そこに人間の手で細かな調整や編集を加えられる状態にすることが、現状況での現場にあった生かし方といえるでしょう。

そこで本記事では、ニジボックスのAIスペシャリストである吉川の以下note記事で紹介している、「AIで一度手動編集可能なデータを作成し、人の手でブラッシュアップした上で実装へつなげる」という、現場に合わせた制作フローを解説していきます。

なお本ブログでは以前、吉川の別の記事についても紹介しました。併せてご覧ください。

吉川によるnote記事

紹介記事

『Figma Make』とは

『Figma Make』は、デザインツール『Figma』が提供を開始したAIによるデザイン生成機能です。

言葉（テキストプロンプト）で指示を出すと、UIデザインの形を一瞬で作り上げてくれます。

例えば、「ログイン画面を作って」「フィットネスアプリのダッシュボードを構成して」といったプロンプトから、レイアウトやテキスト、ボタンなどを配置したデザイン案を自動で作成します。

また、この後説明していきますが、AIが作成した構成案をベースに、人間が細かな色調整や配置換えを行うといった効率的な使い方が可能です。

さらに、デザインシステムを活用することで、あらかじめ決めておいた自社のブランドルール（色やフォントなど）に沿った形で、統一感のあるデザインを生成させることもできます。

このように、これまでデザイナーが手作業で行っていた「要素を並べて構成を考える」という初期工程をAIが肩代わりしてくれるため、制作のスピードを圧倒的に高めることができるツールとして注目を集めています。

『Cursor』とは

『Cursor』は、AI（人工知能）との対話を前提に開発された、AI搭載型のコードエディタです。

例えば「Figmaで書き出したデザインを元に、HTMLとCSSを書いて」と指示するだけで、AIがその場でプログラミングコードを生成してくれます。

Cursorの利点の1つは、プロジェクト全体のファイルをAIが把握してくれる点です。「今のデザインシステムに合わせて、新しいボタンコンポーネントを作って」といった、前後の文脈をくみ取った指示が可能です。

そのほか、コードを書いていてエラーが出た際、ボタン1つで原因を特定し、修正案を提示してくれます。

世界中のエンジニアが利用している『VS Code』という有名なエディタをベースに作られているため、使い心地はそのままに、強力なAI機能が統合されているのが特徴です。

デザインシステムに沿ったワイヤーフレームの作成〜デザイン〜実装の自動生成フロー

では、作成方法を紹介していきます。

順序は以下の4ステップです。

1. Figmaでライブラリを作成
2. Figma Makeでワイヤーフレームを自動生成
3. Figmaでデザイン編集
4. CursorにMCPでつなぎ自動で実装

1.Figmaでライブラリを作成

最初にFigmaでライブラリ（Library）を作成していきます。

使用したいデザインシステムを取得し、一緒に業務に取り掛かるチームメンバーにも共有できるようにするためです。

※ライブラリ（Library）とは？

デザインに使う共通の要素をまとめてチームで共有・再利用できる仕組みのことです。

デザインシステムやコンポーネントの「倉庫」のようなものというイメージをしてください。

具体的にはまず、使いたいデザインシステムのファイルを開き、ライブラリに追加します。
以下は例として使用するデザインシステム『@shadcn/ui – Design System』(by Pietro Schirano (@skirano) (X: @skirano) / CC BY 4.0)の画面です。左の「アセット」というボタン、ライブラリのアイコンマーク、公開ボタン、という順番の操作でライブラリに追加していきます。

追加できたら、このライブラリをFigma Makeにエクスポートします。

※ライブラリのエクスポートやインポートはFigmaの公式サイトで詳しく理解できます。

2.Figma Makeでワイヤーフレームを自動生成

次に、ライブラリを作ったものと同じチームでFigma Makeを開きます。

プロンプト入力エリアにライブラリを開くアイコンがあるので、そこから先ほどのライブラリを選択します。ここでは、前述のデザインシステム『@shadcn/ui – Design System』を利用しています。

その後、プロンプトを入力します。

以下はプロンプトの例です。※例示として簡易的なものとしています。

上記のプロンプトを入力したところ、デザインシステム『@shadcn/ui – Design System』に沿って以下のようなワイヤーフレームが生成されました。

3.Figmaでデザイン編集

手順2まででワイヤーフレームを作ることができました。

ですが、このワイヤーフレームはコードで実装されたものであり、Figma上で編集できません。

そのため、「デザインをコピー」機能でデザインだけをコピーし、別途空のデザインファイルを作成し、そこにペーストすることで、編集することができるようになります。

「デザインをコピー」機能は以下のメニューから選択できます。

以下は、空のファイルにペーストした結果です。

このペースト後の画面で、自由に編集し、デザインを完成させてください。

ここでは例として、「アカウントを作成」ボタンの色を黒からオレンジに編集してみました。

4.CursorにMCPでつなぎ自動で実装

最後に、今まで編集してきたデザインを実装するためにMCPを利用してCursorにつないでいきます。

※MCP（Model Context Protocol）とは？

MCPとは、ツール（『Figma』）とAI（今回でいう『Cursor』）同士をつなげる共通ルールのことです。

今回使うツール『Figma』・『Cursor』では、それぞれにMCPの設定箇所があります。

MCPを使うことで、『Figma』と『Cursor』を連携し、「この『Figma』のデザインをコードに変換して」など、これまで人が手動で操作していたことを“ツール間連携”として命令できるようになります。

具体的にはまず、編集したデザインファイルの画面右側に「MCPサーバー」という項目があるので、これを有効にします。

※「基本設定」からでも有効にできます。

ツール連携画面が表示されるので、『Cursor』を選択します。

するとCursorが自動で立ち上がり、MCPインストール画面に自動でFigma DesktopというMCPサーバーが追加されているため、これをインストールします。これで接続は完了です。

接続できているか確認するため、CursorからFigmaファイルを参照してみましょう。

「FigmaMCPで今選択中のファイル確認できる？」と聞いたところ、以下のようにつながっているデザインの情報を答えてくれ、無事参照できていることが確認できました。

確認できたので実装していきます。

以下のように「では、このFigmaのデザインを完全再現して実装して」と命令します。

すると、以下のようにHTMLで実装できました。きちんとデザイン通りです。

※今回は例としてシンプルな内容にしたので、スムーズに一発で実装できました。

しかし現場ではRulesなどできちんと実装ルールを定義しながら作っていくことを推奨します。

以上で手順は完了です。

まとめ

今回は、ワイヤーフレームの作成からデザイン、実装をAIで自動生成するフローを紹介しました。

そのフローは以下の4ステップでした。

①Figmaでライブラリを作成　

→デザインシステムを取得してライブラリに格納する

②Figma Makeでワイヤーフレームを自動生成　

→ワイヤーフレームをAIで自動生成する

③Figmaでデザイン編集　

→自動生成されたワイヤーフレームのデザインをコピー＆別ファイルにペーストして手直しをする

④CursorにMCPでつなぎ自動で実装

→デザインをMCPでCursorにつなぎコード化する

AI活用において参考になるコンテンツ

AI活用が事業やサービスの発展に不可欠となってきている昨今、ニジボックスでは、AI活用に役立つコンテンツを多数配信しています。

ぜひご活用ください。

ニジボックスAIスペシャリスト吉川の『note』

AIを面白く、分かりやすく解説した記事やマンガを投稿しています。

ニジボックス公式『note』

AI活用の記事の他、AIによるUXデザイン・UIデザインへの影響を語ったイベントのレポートなどを掲載しています。

記事例

ニジボックスブログ

現在ご覧いただいているブログでは、本記事の他にもAI活用に関する記事を複数掲載しています。以下からキーワードが「AI」の記事一覧を見ることができます。

ニジボックスブログ　キーワード「AI」記事一覧

イベントアーカイブ（YouTube）

UXデザイン・UIデザイン・フロントエンド開発におけるAIの影響や活用方法などにフォーカスをあてたイベントのアーカイブを多数配信しています。

なお、ニジボックスのコーポレートサイトで無料会員登録をすると、YouTubeでは公開されていないものも含めたイベント申込者限定公開のアーカイブ動画を見ることができます。ぜひチェックしてみてください。

ニジボックスイベントアーカイブページ

また、ニジボックスがこれから開催するイベント情報は以下ページからご確認ください。

ニジボックスconnpassページ

---

◾️【お知らせ】2026/3/5(木)・6(金)『UI UX Camp! 2026』を開催します！

年に一度の大型デザインカンファレンス、5回目の開催となります。
AIの発展と普及に伴って社会が急速に変化していく中、デザイナーはどのように考え、振る舞うべきか。
今すべきことや今後の可能性など、さまざまな観点から語り尽くします！

詳細は下記特設サイトからご覧ください。

UI UX Camp! 2026 | いま、見つめなおすデザイン

---

ニジボックスの実績

ニジボックスでは、さまざまなAIサービスの利活用研究を行っており、企業のAI活用支援を行っています。

AI技術をビジネス成果へとつなげる方法にお悩みの際にはぜひ以下バナーから資料をダウンロードしてご覧ください。

また、ニジボックスでは、サイト制作や開発における情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面のご支援も行っております。

下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。

ご興味を持たれた方はぜひ、以下のバナーから資料をダウンロードしてご覧ください。

なお、ニジボックスでは顧客満足度を重要なKPIとして位置づけており、アンケートを定期的に実施しています。

2024年度の受託制作65案件で、75名のお客様から回答していただいた結果、0から10の11段階の評価（10を最高評価とする）で7点以上が91%といった高評価をいただきました。評価をいただいた点を継続しつつ、ご意見をいただいた点は組織全体で真摯（しんし）に受け止め改善策を検討、実行し、提供価値の向上に努めています。

このように、顧客満足度を重視することで、より良いパートナーシップを築き、プロジェクトの成功につなげています。

これらの資料を通じて、私たちの取り組みや成果をぜひご確認いただき、今後のプロジェクトにおいてもご一緒できる機会があれば幸いです。

以下よりお気軽にお問い合わせください。

◾️本記事で使用したリソース：『@shadcn/ui – Design System』(by Pietro Schirano (@skirano) (X: @skirano) / CC BY 4.0)