こんにちは！サービスデザイン部 技術推進チームです。

私たちは、事業部の業務とは別に、15%のリソースを使って、
「デザイナーとしてAIや新しい技術をどう活用できるか？」
をテーマに、さまざまなAI技術やツールを実際に試し、その可能性を探っています。

本記事では、2025年5月〜6月の2ヶ月に実施した調査・検証の内容をご紹介します。得られた気づきや、今後の活用可能性についての考察が、業務プロセスにおける技術活用のヒントになれば幸いです。

なぜ今、AI活用に取り組むのか？

「デザイナーもAIを活用すべき」といった記事や発信を、多く見かけるようになりました。

弊社では、デザイナーの役割は、ビジュアル制作だけでなく、情報設計やライティング、開発との連携まで多岐にわたります。 AIなどの技術進化がこれらすべての領域に影響を与えはじめています。 業務の効率化はもちろん、AIを中心とする新しい技術との組み合わせによって、新しいアプローチや価値が生まれる可能性も広がっています。

「AIによって、サービス開発のプロセスはどう変わっていくのか？」

そんな問いを持ちながら、私たちはツールの検証を通して、より実践的な活用方法を模索しています。

今回は、以下の3つのアプローチから検証を行いました。

1. コード生成・デザイン連携

2. 画像・クリエイティブ生成

3. UI生成・プロトタイピング

それぞれの分野で試してみたツールや手法、そこから見えてきた可能性をご紹介します。

1. コード生成・デザイン連携

GMOメディアでは、デザイナーがコーディングまで担当する体制のため、デザインと実装の同期は日常的な課題です。今回は、Figmaとの連携やコード自動生成に関するツールをいくつか試しました。

1-1. Figma MCP × RooCode

Figma MCPを通じてFigmaのレイアウト情報を取得し、RooCodeを使ってHTML/CSSを生成する手法を検証しました。

具体的なセットアップや手順は、下記の記事を参考にしました。

FigmaデザインをHTMLコードへ自動変換する方法 - GMOインターネットグループ グループ研究開発本部

FigmaのFrameのURLをプロンプトに入力すると、MCPがレイアウト情報を取得し、RooCodeがコードを生成してくれます（モデルはgemini-2.5-flashを使用）。

レイアウト崩れやアイコンパスの手動設定などの多少の調整は必要でしたが、フォントやカラーなどのスタイルの再現性は高く、実装にそのまま使えるレベルでした。プロンプトを細かく分けると、生成の精度が上がる傾向も確認できました。

※現在は、Figma公式のMCPサーバーもリリースされており、URL入力だけでなく、Figma上のFrameから直接コードを生成することも可能です。今後の検証では、こちらの公式サーバーを中心に活用を進めていく予定です。

Dev Mode MCPサーバー利用ガイド

1-2. Figma Raw

FigmaのデザインをJSON形式で出力できるプラグイン「Figma Raw」も試してみました。このプラグインは、Figmaのレイヤー構造やカラー、フォントサイズなどのスタイル情報を含んだJSONを出力できるのが特徴です。

FigmaのデザインデータをAIに伝えるプラグイン「Figma Raw」を公開しました｜Yasuhiro Yokota

使い方はとてもシンプルで、Figma上で対象のFrameを選択し、プラグインを実行するだけ。環境依存せず、MCPのようなセットアップも不要なので、さまざまなAIと柔軟に組み合わせて活用できました。

特に便利だったのが、Figmaで設定したバリアブル（カラーやスペーシングなど）の情報もJSONに含まれる点です。これにより、AIにSCSSの設定ファイル構成を伝えやすく、再現性の高いHTML/CSS生成が可能になりました。

また、MCPと同様に、セクションやパーツなどの小さい単位でJSONを渡したほうが生成精度が高いことも確認できました。MCPを使わずとも、手元で簡単に試せる点から、チーム内でもすぐに共有・展開ができ、実際のコーディング業務に取り入れやすかったのも利点です。

1-3. Storybook連携「story.to.design」の活用検証

Figmaでのコンポーネントメンテナンスには手間がかかることが多く、 「Storybookで定義したUIコンポーネントを、もっとスムーズにFigmaに取り込めないか？」 という課題意識から、Figmaプラグイン「story.to.design」を検証しました。

このプラグインは、Storybook上で定義されたUIコンポーネントを、Figmaのデザインコンポーネントとして自動インポートできるツールです。

主な利用ステップ

① StorybookのURLを入力して接続

② コンポーネントを選択してインポート

③ プロパティの自動マッピングを確認

インポートされたコンポーネントには、Storybook側で設定されていたパターンや状態のバリエーションが、Figmaのコンポーネントプロパティとして自動的に反映されていました。

ただし、現時点ではFigmaのVariablesにおいて、カラー以外（余白やフォントなど）のマッピングは非対応でした。そのため、完全に自動化できるわけではありませんが、それでも従来の手作業と比べると、非常に効率的に連携できることがわかりました。

実装・デザインの同期精度が高まる

Figma MCPの登場により、実装を意識したFigmaコンポーネントライブラリがあることの重要性が高まっています。「story.to.design」を活用することで、StorybookとFigma間の構成のズレを減らし、コードとデザインの一貫性を保ちやすくなると感じました。

さらに、Storybook側での変更があった際も、Figmaでワンクリック同期が可能なため、常に最新版の状態を保てるという点でも非常に実用的なプラグインです。

「コード生成・デザイン連携」の調査で見えてきたこと

Figma MCPの登場により、Figmaのデザインデータからコードを生成するプロセスの可能性は大きく広がっています。一方で、現時点では以下のような課題も見受けられました。

• デザインが複雑な場合、CSSの再現性にばらつきがある

• 広い範囲を一括で生成しようとすると精度が落ちる傾向にある

• 細かなレイアウト調整は、手動で補う必要がある

ただし、デザイン構造が整っていると、AIによるコード生成の精度は明らかに向上することも実感できました。特に、レイヤー設計やバリアブルの活用など、デザインの「構造化」が鍵になっていると感じています。

こうした背景から、今後は、

• MCP連携を前提としたデザインシステムの構築

• デザインとコードの一貫性を担保する運用設計

• AIが扱いやすい粒度・構造でのデザインデータ整理

といった観点で、「デザインシステムのMCP化」も視野に入れながら、よりスムーズにデザインと実装がつながるプロセスづくりを進めていきたいと考えています。

2. 画像・クリエイティブ生成

画像生成などのAI技術が身近になった今、実務レベルではどの程度活用できるのか？という観点から、複数のツールを検証しました。

2-1. ChatGPTで「使える」イラストを生成するには？

LPなどで「ちょっとした挿絵がほしい」といった場面では、これまでAdobe Stockなどの素材サイトを利用するのが一般的でした。しかし実際には、

• イメージに合う素材が見つからない

• トンマナが微妙に違う

といった課題がよくあります。

そこで、ChatGPTの画像生成機能を活用し、サービスの世界観に合ったイラストを自作できるかを検証しました。

実施手順

① プロンプトを作成（用途・シーン・スタイルを明確に）

オンライン授業管理サービスの紹介LPに使用するイラストを作成してください。
シーン：欠席・振替の対応に手間がかかっている
テイスト：シンプルなラインアート、大人向け

② ChatGPTで複数案を生成し、トンマナを調整しながら選定

③ Illustratorに取り込んでパス化し、色味などを微調整

一度スタイルが固まれば、同じトーンで異なるシーンのイラストも量産しやすく、シリーズ化もスムーズに行えました。

トンマナを保ったオリジナルイラストを短時間で仕上げられたのは大きな成果でした。

これまで社内では「実利用するクリエイティブはまだデザイナーが作ったほうがキレイ」といった声もあり、画像生成AIの活用はそこまで活発には進んでいませんでした。しかし、今回の検証を通じて、プロンプト設計や編集工程を工夫すれば、実務でも十分活用できるという感触を得られました。

2-2. Canva AIによるサイズ展開の自動化

続いて、CanvaのAI機能「Magic Resize」を使い、1つのクリエイティブを複数のサイズに展開するプロセスも試しました。

検証ステップ

① 500×500サイズで元のクリエイティブを作成

② 「リサイズ」メニューから別のサイズを選択

③ わずか数秒で変換が完了

要素が多いクリエイティブの場合は配置の微調整が必要で、完成データはそのまま使える精度ではなかったものの、複数SNS向けにサイズ展開する起点としては有用でした。

「画像・クリエイティブ生成」の調査で見えてきたこと

画像やバナーの生成においても、現時点では「AIにすべて任せる」というよりは、素材づくりの補助として活用するのが現実的であると感じました。

特に、ブランド固有の構図や配色などが必要な場合でも、AIへの指示（プロンプト）を工夫することで、かなり意図に近いアウトプットが得られることも確認できました。

結果として、「AIに素材を作ってもらい、人が整える」という分業スタイルが、今のところ最も心地よく、実用的なバランスだと感じています。

今後はツールやプロンプトの精度も高めながら、さらに質の高いクリエイティブ制作につなげていきたいと考えています。

3. UI生成・プロトタイピング

近年、UIの自動生成やプロトタイピングを支援するAIツールが続々と登場しています。今回は、実際の業務で使えそうな機能・ツールをいくつか検証してみました。

UI生成やプロトタイピングを支える技術やツールについても、最新のものを含めて幅広く検証を行いました。

3-1. Figma Make

2025年のFigma Configで発表された新機能「Figma Make」は、テキストベースのプロンプトからUI・プロトタイプ・コードまでを生成できるAI搭載ツールです。

Figma Make: AI搭載のデザインツールで制作

高精度なUI生成とコード出力

まず驚いたのは、UIデザインそのものの生成能力です。たとえば既存画面を参照させながら、「同じトーンでこの機能の画面を追加してほしい」といったプロンプトを送ると、インタラクション（タブ切り替え・ページ遷移など）を含んだ画面が生成されました。

さらに、完成したLPデザインのFrameをそのまま渡してコード生成を試したところ、非常に高い精度で出力されました。

これまでの生成ツールでは、小さなパーツ単位での対応が中心でしたが、Figma MakeではLP全体のデザインを忠実に再現するコードが得られ、レスポンシブにもある程度対応していました。

特に、表現が複雑なLPなどにおいて、コーディングの工数を大幅に削減できる可能性が見えてきました。

3-2. Layermate

Layermateは、Figma上でAIチャットを使用してデザインを生成できるプラグインです。

Layermate - AI-powered design assistant for Figma

このように、プロンプトからFigma上にUI生成ができます。下記はゲームプラットフォームのUIを生成した一例です。

一部ナビゲーションに崩れはあるものの、Auto Layoutやレイヤー名などの基本的な構造はきちんと適用されており、生成されたUIをもとに調整しながら使っていくには十分なレベルでした。会議中に出たアイデアを即ビジュアル化する用途などにも適していると感じました。

さらに、Figmaのレイヤーを参照させて生成することも可能です。既存のFigmaコンポーネントを使用して、カード部分のデザインをブラッシュアップさせてみました。

ナビゲーションなど生成時に崩れていたレイアウトも、プロンプトの指示で微調整して仕上げていくことが可能です。プロンプトだけでもここまで形になるのは、十分実用的だと感じました。

3-3. Stitch（Google UI生成AI）

Googleが提供する「Stitch」も試してみました。特徴は、プロンプトから複数の画面をまとめて生成できる点と、Figmaにデザインとしてペーストすることができる点です。

Stitch - Design with AI

生成されたUIは、Tailwind CSSベースのコードとして出力され、構造も整っていて扱いやすい印象でした。コードベースでUIプロトタイプを作成したい場面には非常に有効だと感じました。

Figmaに直接コピーすると、一部のレイアウトが崩れるケースはあるものの、Auto Layoutが適用されているため、基本的な構成は保たれており、調整も比較的簡単です。

また、生成後に「テーマ（色・フォント・角丸など）」のカスタマイズも可能で、ある程度ブランドのトンマナに近い出力を促すこともできました。

プロトタイプの初期フェーズや複数画面構成のラフを短時間で作りたいときに、とても頼りになるツールです。

3-4. ChatGPTと一緒にFigmaプラグインをつくる

Figmaのプラグイン開発は、これまでエンジニアリングの知識が必要なイメージがあり、デザイナーにとっては少しハードルの高い領域でした。

しかし最近では、ChatGPTの支援を受けながら、自分たちの業務に合ったプラグインを自作する事例も増えてきています。

今回は「こんな機能があったら便利かも」というアイデアから、実際にいくつかのプラグインを作ってみました。

3-4-1. 頻出単語集計プラグイン

選択中のFrame内のテキストから頻出単語を抽出し、一覧表示・CSV出力できるプラグインです。

トンマナや表現の偏りを確認したいときに活用できます。

FigmaではテキストやFrameなどの要素を「ノード」として扱うため、まずは選択中のレイヤーから対象ノードを取得し、テキストを抽出・処理する構成にしました。

このような基本的なデータ処理も、ChatGPTのサポートがあればスムーズに構築可能でした。

3-4-2. 表現チェックプラグイン

あらかじめCSVで登録した「非推奨 → 推奨」表現のリストをもとに、テキスト内容をチェックできるプラグインです。

検出された非推奨表現とその置き換え候補はFigma上で一覧表示され、ワンクリックで修正も可能。トンマナの統一や表現の見直しをサポートする、簡易チェックツールとして活用できます。

3-4-3. ライティングAIレビュープラグイン

選択中のFrame内のテキストを抽出し、ライティングガイドラインに基づいてAIがレビューしてくれるプラグインです。

文体、構成、トーン、読みやすさなどを総合的に評価し、改善点をフィードバックする仕組みです。Figma Plugin APIと外部AI（API連携）を組み合わせて構築しています。

文体、構成、トーン、読みやすさなどを総合的に評価し、改善点をフィードバックする仕組みです。Figma Plugin APIと外部AI（API連携）を組み合わせて構築しています。

これらのプラグインは、どれもChatGPTを活用しながら1〜2時間程度でプロトタイプとして完成させることができました。 これまでであれば、「必要な機能がFigmaのプラグインに存在しなければ諦める」ことも多かったのですが、今は「見つからなければ自分でつくる」ことも現実的な選択肢になってきています。

「UI生成・プロトタイピング」の調査で見えてきたこと

UIの自動生成やプラグイン開発の領域でも、AIの活用によって可能性が大きく広がっていることを実感しました。

UI生成に関しては、まだそのまま実装に使えるほど完成された出力ではないものの、

• たたき台としての初期デザイン

• アイデア出し・構成案の可視化

といったフェーズでは、非常に有効な支援ツールになると感じました。

特に「Figma Make」のように既存データを活用しながらプロトタイプ化できるツールは、ブランドの世界観を保ちつつスピーディに構成を検討できるため、実務での導入にも十分耐えうると考えています。

また、ChatGPTを活用したプラグイン開発では、デザイナー自身が業務にフィットするツールを素早く形にできる環境が整いつつあります。

これにより、静的なデザイン検討だけでなく、プロトタイプベースで動きや使い勝手を確認しながら進めていく流れが主流になっていくかもしれません。

さまざまなAIツールを試してみて分かったこと

今回、さまざまなAIツールを実際の業務プロセスに組み込んで検証したことで、単なる機能紹介にとどまらず、「実務でどこまで活用できるか？」という視点から可能性を探ることができました。

検証を通して特に強く感じたのは、AIと共に実務レベルのアウトプットを生み出すには、「生成結果に何が足りないのか」を言語化し、それをプロンプトとして的確に伝える力が必要だということです。

つまり、ただAIを使いこなすのではなく、AIと対話しながら精度を高めていく力＝レビュー力がこれからのデザイナーには求められると感じました。

また、AIの支援によって、デザイナー自身がより高度なコーディングやプロトタイプ作成まで担う機会も増えていくでしょう。そうなると、設計・実装に関する基礎知識が、AI生成のアウトプットを活かすうえでこれまで以上に重要になってくると考えています。

おわりに

AIをはじめとした技術の進化により、デザイナーの関わり方や役割にも大きな変化が訪れています。

こうした中で、私たちは今後も、技術を実践の中で理解し、試行錯誤しながら、自分たちなりの活用方法を見つけていく姿勢を大切にしていきたいと思っています。

事業やサービスにとって本質的な価値につながるAI活用を目指して、デザイナー自身が手を動かし、学び、共有しながら、チーム全体のスキルと可能性を広げていけるような取り組みを今後も続けていきます！