お問い合わせ
資料ダウンロード【デザイン×AI】AI活用で現場に合ったワイヤーフレームを作成！デザインシステム連携の実例とポイント
リクルートや大手企業の実績多数！
ニジボックスのUIデザインフローや案件事例を
ご紹介！
AI技術が日々発展する中、Web制作現場では、現場に合った形でAIツールを活用しより質の高いアウトプットを出すことが求められています。
今回は、ニジボックスのAIスペシャリストがAIツールを活用したワイヤーフレームの作り方（フロー）を紹介した記事をAI初学者の方向けにも分かりやすく解説していきます。本フローはWeb制作現場の実態に合わせた内容となっています。
また、AIを効果的に使うための注意点・コツや、AI活用をさらに加速させるためのおすすめコンテンツもご紹介。
Web制作の効率を上げたい、現場に合ったAI活用術を知りたい方は、ぜひ最後までお読みください。
目次
AIと協業するワイヤーフレーム制作
AI技術の発展により、Web制作現場の効率化は大きく進んできました。
しかし、Web制作で生じるタスクを、全てAIで一度にやりきるのはまだ難しいと言えます。（2025年9月現在）
AIで制作物を1つ出したとしても、それをそのまま公開することはできず、人の手を加え調整することが必要となっている状況です。
その現状に合わせ、デザインシステムのルールを読み込んだワイヤーフレームを編集可能な状態で自動生成すれば、現場で大きく役立つのではないかと考え、その手順（フロー）をご紹介します。
なおこのフローは後々、デザイン制作や実装にも拡張できると考えています。
なお、本内容の出典はニジボックスのUX・ディレクション室室長である吉川が執筆した以下『note』の記事にあります。
【Figma × Claude】MCPでつなぐ、デザインシステムに沿ったワイヤーフレーム自動生成＆編集フロー！
今回は、この内容を初めてAIツールを使う方でも取りかかりやすいよう、分かりやすく要約して概要を説明していきます。
より具体的な方法を知りたい・実際に手を動かしながら読み進めたいという方はぜひ上記吉川の『note』もご覧ください。
なお、吉川の経歴は以下をご覧ください。
吉川 聡史
株式会社ニジボックス UX・ディレクション室 室長。AIクリエイター。
ワイヤーフレームをAIで作成するフロー
ワイヤーフレームをAIで作成するフローは以下3ステップです。
①MCPで『Figma』と『Claude』をつなぐ
②『Claude』でデザインシステムを読み込み、作りたいページ（ワイヤーフレーム）を実装する
③『Claude』で実装したhtmlを『Figma』のデザインデータとしてインポートする
前提は以下です。
・デザインツールは『Figma』 、生成AIは『Claude』（アプリ版）を使用
・デザインシステムは既に『Figma』上に用意されている状況
では、順に説明していきます。
①MCPで『Figma』と『Claude』をつなぐ
【Figma側】デザインシステムを読み込ませるための準備をする
1-1.『Figma』のAPIキーを取得
まずは、デザインツール（『Figma』）内で読み込むデザインシステムのAPIキーを取得します。
※APIキーとは？
Webサイトやアプリが、他のプログラムとやりとりするときに使う、特別なパスワードのようなものです。今回、『Figma』で作ったデザインシステムを『Claude』につなぐために、「そのデザインシステムはこれだ」と特定するパスワードを発行・取得するイメージでいてください。
なお、新規トークンを発行することでAPIキーを取得できます。
1-2.『Figma』のプラグイン『html.to.design』を設定する
次に、『Figma』のプラグイン『html.to.design』を使ってつなぐ準備をします。ここでMCPが出てきます。
※MCP（Model Context Protocol）とは？
MCPとは、AI（今回でいう『Claude』）とツール（『Figma』）同士をつなげる共通ルールのことです。
今回使うツール『Figma』・『Claude』では、それぞれにMCPの設定箇所があります。
MCPを使うことで、『Claude』のようなAIが「このHTMLを『Figma』にデザインとして反映して」や「このコードを実行して結果を返して」など、これまで人が手動で操作していたことを“ツール間連携”として命令できるようになります。
プラグイン『html.to.design』は、Webサイト（URL）を編集可能な『Figma』デザインに変換するプラグインです。この後のフローでClaudeで作ったワイヤーフレームを『Figma』デザインに変換するため準備しておきます。
これをインストールし、その中にあるMCPの設定箇所をアクティブにします。システムのスイッチをオンにする感じです。これでMCPを使えるようになります。
また、『Claude』につなぐための「MCP Configuration」を取得します。これも対象を特定するパスワードのようなもので、『Claude』にこれから埋め込みます。
【Claude側】『Figma』で取得したAPIキーとMCP Configurationを埋め込む
上記で取得した『Figma』のAPIキーとMCP Configurationを『Claude』側に埋め込みます。
『Claude』へ『Figma』のAPIキーとMCP Configurationの埋め込みが完了したら、次は『Figma』のデザインシステムを読み込ませていきます。
【Figma側】『Figma』のデザインシステムのリンクを取得する
『Figma』のデザインシステムのリンクを共有画面から取得（コピー）します。
②Claudeでデザインシステムを読み込み、作りたいページ（ワイヤーフレーム）を実装する
【Claude側】デザインシステムのリンクを伝えながらプロンプトを打つ
『Claude』を再起動し、無事『Figma』と『Claude』がつながったことを確認したら、前段でコピーしたデザインシステムのリンクを『Claude』に伝えながらワイヤー作成依頼のプロンプトを打っていきます。
プロンプト例
「”①でコピーしたデザインシステムのURL”
上記（shadcn/uiのコンポーネント）を読み込んで、会員登録画面を作って
読み込む際は一度に最大8000文字までにしてもらいたいので、最小単位のグループで分割して読み込んで」
すると以下のように、『Claude』がどんどんデザインシステムのファイルを読み込んでいきます。
最終的に、以下のようなワイヤーフレームが作成されました。
③『Claude』で実装したhtmlを『Figma』のデザインデータとしてインポートする
③で作成したワイヤーフレームをエクスポートしモックとして活用することも可能ですが、『Figma』上にインポートすることも可能です。
これにより、『Figma』上で手作業でデザインデータを編集できるようになります。
【Claude側】作成したワイヤーフレームを『Figma』にインポートするようコマンドを打つ
プロンプトを打つ箇所で実装データを『Figma』にインポートするコマンドを打ちます。（「/import-html」）
※コマンドとは？
システムに文字で「こういうことをしてほしい」と命令することです。プロンプトを打つ際は依頼内容を文章で説明しますが、コマンドを打つ場合はその依頼内容を合言葉のような決まった言葉（今回でいう「/import-html」）を入力します。
すると、『Figma』のプラグイン「html.to.design」を取得した際の『Figma』ファイルにワイヤーフレームがインポートされます。
以上でデザインシステムを読み込んだワイヤーフレームの完成です。
AIを効果的に活用する大切なポイント
ここからは、より効果的にAIを活用していくことにつながるポイントを2点紹介していきます。
制作現場のフローにおけるAIの役割・活躍領域を整理する
冒頭の繰り返しとなりますが、現在Web制作で生じるタスクを、全てAIで一度にやりきるのはまだ難しい状況です。（2025年9月現在）
その中で制作現場の意思決定において、どうすればAI活用を組み込めるのでしょうか。
まず前提として、組織における意思決定は以下のプロセスで進められていきます。
・達成したいゴール（KPI）
・現状理解
・課題仮説
・打ち手
次に、この「現状理解」「課題仮説」「打ち手」は定量（数字やデータに基づく根拠）と定性（ユーザーの声や現場感覚 ※暗黙知）のデータで生み出されます。
プロセスをさらに細かく分解すると「調査」「整理」「考察」「創造」というフェーズに分けられるでしょう。
この分解したフェーズそれぞれでAIに求める役割や活躍度合いは異なってきます。
例えば、AIの役割は調査・整理フェーズでは調査段階の補助です。ユーザー調査などのUXリサーチなど、人間が行う調査も含め十分な調査結果がそろった上でAIで整理を行います。
考察フェーズでのAIの役割は、人間の考察に対し、AIはアイデアの発散や収束における補助と言えます。
創造フェーズではアイデアの発散・もしくは暗黙知をインプットしたGPTsのようなものによって、思考の補助となることが役割と言えるでしょう。
今回紹介したワイヤーフレーム作成は主に創造フェーズのタスクでした。
自動生成したワイヤーフレームはあくまでたたき台であり、ここで現場感覚（暗黙知）などを組み込んでいくには人間の手による調整が必要と言えます。
このようにAIの役割を整理することで、Web制作の現場ではどのようにAIを活用することができるか、どこに人間の力が必要とされるかを考慮して進めることができるため、AIの価値を最大限発揮することができます。
なお、上記については2025年1月17日に開催されたTECH PLAY UX Design Conferenceにて登壇した吉川の講演「組織におけるAI時代のUX設計：なぜ作るのか？なにを作るのか？」にて話された内容になります。
イベントレポートを公開いただいているため、ぜひご覧ください。
イベントレポート「組織におけるAI時代のUX設計：なぜ作るのか？なにを作るのか？」
AIツールをいろいろ触ってみて、特徴・勘所といった芯をつかむ
AIツールごとに得意とする分野はそれぞれ異なります。
例えば、今回のワイヤーフレーム作成でいうと、ClaudeはFigmaの非公開ファイルも読み込むことができるというように連携しやすいため、ワイヤーフレーム作成にClaudeが向いていると判断し作成しました。
このように、それぞれのAIツールができることを探り、把握していくことでよりAIを効果的に使うことができます。
ぜひツールをいろいろ触っていき、AIツールの特徴や勘所を把握してみてください。
なお、上記については2025年2月に開催したニジボックスのオンラインイベント「シリコンバレーのAIツールから学ぶ、デジタルクリエイティブの進化」でも話された内容になります。
全3構成でアーカイブ動画もYouTubeで配信しています。ぜひご覧ください。
▼YouTubeアーカイブ
※上記AIの活用ポイントについてはパート3にてパネルトーク形式で話されています。
AI活用に役立つ参考コンテンツ
AI活用が事業やサービスの発展に不可欠となってきている昨今、ニジボックスでは、AI活用に役立つコンテンツを多数配信しています。
ぜひご活用ください。
▼ニジボックスAIスペシャリスト吉川の『note』
AIを面白く、分かりやすく解説した記事や漫画を投稿しています。
▼ニジボックス公式『note』
AI活用の記事の他、AIによるUXデザイン・UIデザインへの影響を語ったイベントのレポートなどを掲載しています。
記事例：「現役UXデザイナーがAIでジャーニーマップを書いてみた！」
▼ニジボックスブログ
現在ご覧いただいているブログでは、本記事の他にもAI活用に関する記事を複数掲載しています。以下からキーワードが「AI」記事の一覧を見ることができます。
▼イベントアーカイブ（YouTube）
UXデザイン・UIデザイン・フロントエンド開発におけるAIの影響や活用方法などにフォーカスをあてたイベントのアーカイブを多数配信しています。
なお、ニジボックスのコーポレートサイトで無料会員登録をすると、YouTubeでは公開されていないものも含めたイベント申込者限定公開のアーカイブ動画を見ることができます。ぜひチェックしてみてください。
また、ニジボックスがこれから開催するイベント情報は以下ページからご確認ください。
まとめ： ワイヤーフレームをAIで作成するフローとAI活用のポイント
今回は、ワイヤーフレームをAIで作成するフローとAI活用のポイントを紹介していきました。
まず、ワイヤーフレームを作るときのフローは以下の3ステップでした。
①MCPで『Figma』と『Claude』をつなぐ
②『Claude』でデザインシステムを読み込み、作りたいページ（ワイヤーフレーム）を実装する
③『Claude』で実装したhtmlを『Figma』のデザインデータとしてインポートする
次に、大切にするべき2点は以下2点でした。
①制作現場のフローにおけるAIの役割・活躍領域を整理する
②AIツールをいろいろ触ってみて、特徴・勘所といった芯をつかむ
また、AI活用に役立つニジボックスのコンテンツを複数ご紹介しました。
これらを活用しぜひAI活用を進めてください。
ニジボックスの実績
ニジボックスでは、さまざまなAIサービスの利活用研究を行っており、企業のAI活用支援を行っています。
AI技術をビジネス成果へとつなげる方法にお悩みの際にはぜひ以下バナーから資料をダウンロードしてご覧ください。
また、ニジボックスでは、サイト制作や開発における情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面のご支援も行っております。
下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。
ご興味を持たれた方はぜひ、以下バナーから資料をダウンロードしてご覧ください。
なお、ニジボックスでは顧客満足度を重要なKPIとして位置づけており、アンケートを定期的に取得しています。
2024年度の受託制作65案件で、75名のお客様から回答いただいた結果、0から10の11段階の評価（10を最高評価とする）で7点以上が91%といった高評価をいただきました。評価をいただいた点を継続しつつ、ご意見をいただいた点は組織全体で真摯（しんし）に受け止め改善策を検討、実行し、提供価値の向上に努めています。
このように、顧客満足度を重視することで、より良いパートナーシップを築き、プロジェクトの成功につなげています。
これらの資料を通じて、私たちの取り組みや成果をぜひご確認いただき、今後のプロジェクトにおいてもご一緒できる機会があれば幸いです。
以下よりぜひお問い合わせください。
監修者について
元ニジボックス 執行役員、TRTL Studio株式会社 CEO、その他顧問やエンジェル投資家として活動
コンサルティング会社でのUI開発経験を持つ技術者としてキャリアをスタート。リクルートホールディングス入社後、インキュベーション部門のUX組織と、グループ企業ニジボックスのデザイン部門を牽引。ニジボックスではPDMを経てデザインファーム事業を創設、事業部長に就任。その後執行役員として新しいUXソリューション開発を推進。2023年に退任。現在TRTL Venturesでインド投資・アジアのユニコーン企業の日本進出支援、その他新規事業・DX・UX・経営などの顧問や投資家として活動中。
X：@junmaruuuuu
note：junmaru228
