はじめに
こんにちは、プロモーション・デザインユニット（以下プロモ・デザインU）の清水です。
前回はデザインシステムのイベント登壇レポートについて書きました。
今回はオプティムにおけるUIデザインでのAI活用事例をお届けいたします。
UIデザインのAI活用がもたらす変化
v0をはじめとした生成AIの登場により、簡単な画面構成デザインであればUIデザイナーに依頼をしなくても作れるようになってきました。
オプティムでは、nucleus（ニュークリアス）というWebアプリ製品向けの社内用デザインシステムを開発しているため、このデザインシステムと生成AIを上手く活用することで、以下のようなメリットを得られないかと考えています。
- Figmaデザインの作成作業および実装の高速化による人手不足の解消
- v0や生成AIによるUIラフ案精度が上がり、事前の合意がスムーズになり手戻りを減らせ、工数削減
- 画面デザインだけでなくライティング等のレビューも効率化、製品単体ではなくサービスを横断したUXの統一実現
しかし、現状ではまだまだ以下のような課題が残っています
- カラーコードやフォントスタイルが「それっぽい」だけでスタイルガイドやデザインシステムとは異なるものが適用されてしまう
- デザインシステムで定義していないコンポーネントが使われてしまう
- デザインシステムとは異なっていることを把握しないまま生成AIを元に実装されると、再利用可能なコンポーネントにならないため実装側で再理解して組み立て直す必要がある
そこで、UIデザインチームでは、上記のような課題を解決するためにエンジニアと共同して「AIを活用するための」下準備をさまざま行っています。
本記事では、 具体的な３つの取り組みとその効果を紹介していきます。
具体的なAI活用にむけた取り組み
①v0 テンプレートへのデザインシステム適用
v0 は、Vercel社が開発した、自然言語（プロンプト）でWebサイトやアプリのUIコンポーネントとコードを自動生成するAIツールです。React、Tailwind CSS、shadcn/uiなどのモダンな技術をベースにし、日本語の指示で即座にUIをプレビュー・修正できるのが特徴です。
オプティム社内では、この特徴を生かして企画や開発が新しく画面を作成する際に、プロンプトとして入力するだけで高精度な動くモックアップを作成しています。
しかし、何も指定せずに利用してしまうと、デザインシステムで定義したルールとは違うものを出力してしまいます。
そこで、“最初からオプティム製品らしいUIを生成できるように、v0内のDesign Systemの設定とテンプレートの作成を進めています。
🔽nucleusのカラーパレットと画面イメージ
🔽v0 のDesign SystemにnucleusをベースにColor / Typography / Radius / Shadow を設定
🔽v0に登録したテンプレート
テンプレートが整ってくると、“ちょっと画面イメージ作りたい” という時にすごく便利になります。
この取り組みにより初稿作成が大幅に短縮され、「デザイナー以外もnucleusっぽいUIが作れる」状態が実現できています。
ただし、あくまで「ラフとして」の作成をお願いしています。
資料用やアイディアスケッチとして合意形成フェーズでのみ利用し、最終品質はデザイナーがFigmaに起こすことで担保する仕組みにより、スピード×品質の両立に寄与 しています。
②Figma MCPの活用
Figma MCPは、FigmaのデザインデータをAIが直接読み取るための接続の仕組みです。ClaudeやCursorなどのAIツールからFigma MCPを用いて接続することで、デザインを構造的に理解した上でコードを生成できる点が特徴です。
制作したFigmaを読み込ませると、ただそれらしいコードを生成するだけじゃなく、画面全体をみた上で"こういうUIの構造だよね" という理解をベースに動いてくれるため、再利用可能な出力ができます。
主に開発側の作業時短につながりますが、デザイナーにとっても設計と実装の連携がスムーズになるメリットがあります。
以下は、社内でFigma MCPを製品開発に活用しているチームへのヒアリングです。
Q.どんなタイミングでFigma MCPを利用していますか？
A.新規コンポーネント実装時や、顧客向けの画面設計書作成時に利用しています。
Q.導入前にどんな課題がありましたか？
A.以前は、v0を使って画面を生成していたんですが、デザインシステムのスタイルが反映されず、手直しが多いという課題がありました。
そこで、もっと“デザインシステムに沿ったUIが作れる”ことが求められたのが、MCP導入のきっかけになっています。
Q.Figma MCPのメリットは何ですか？
A.一発生成で“かなり使えるレベル”のアウトプットが出るという点です。
特に“画面設計書用の項目抽出”が高精度で、作業時間が3〜4時間 → 約1.5時間まで短縮できました。
さらに、デザインツール側と開発側の連携がしやすくなるのも大きなメリットで、設計 → 開発 の橋渡しがスムーズになっています。
以下は、左がFigmaで設計した画面・右が実際にMCP経由でAI Agentが実装した画面です。ほとんどそのまま実装できていることがわかります。
Q.Figma MCPのデメリット・改善点はなんですか？
A.実際にMCPでかなりの恩恵を感じていますが、一方ですぐに全社導入に踏み切れない理由として以下のような課題を感じています。
- アカウント費用の高さ
- Figma MCPは、フルシート（3,000円/月）だけなくDevシート（2,250円/月）でも利用が可能です。
ただし１利用者に対して１ライセンスの払い出しが必要なため、MCPを利用するタイミングが限られている場合、アカウント費用が割高に感じる。 - Figma MCP以外に利用できる他機能を十分使いこなせておらず、現段階ではコスパを実感しづらい。
- Figma MCPは、フルシート（3,000円/月）だけなくDevシート（2,250円/月）でも利用が可能です。
- Figma作成時にNext.jsのPresentational構造を意識していないと、レイアウトが崩れることがある。
- デザイントークンのFigma側の定義ミス・未定義項目があると取得が失敗し、AIが混乱しやすい。
これらは多くが “使い方やルール整備で改善できる” 類のものです。
Figmaデータの制作を担当しているUIデザインチーム側でも、より扱いやすくするためにFigmaのルールづくりを推進予定です。
③nucleusのMarkdown化
元々Figma上に存在していたnucleusのガイドラインおよびUIトークンをMarkdown形式で構造化し、ドキュメントとしてGitLabで参照できるようにしました。
これによって、AIを使った UI生成の品質を安定させやすくなり、今後の自動化にも使える仕組みになります。
一例として、nucleusのMarkdown化を活用しデザイントークンの実装レビューの実施など今後活用していく予定です。
nucleusのスタイル情報をMarkdown形式で整理し、それをAIが利用できる仕組みに組み込むことで、AIがオプティムのデザインルールに沿ったUIを自動で作れるようになります。
さらに、Figma MCPと組み合わせれば、“たたきのUI生成 → 実装レベルのコード生成 → 修正の自動化”という一連の流れの自動化が見えてきます。
このあたりはまだ研究段階ですが、将来は“UIワイヤー作成 → コーディング”まで自動化できる可能性もあります。
今後の展望
今回ご紹介した事例はほんの一端だけだと感じていますが、UIデザインにAIは十分活用できるフェーズに来ています。
特に、“非デザイナーのたたき作成”には効果が大きいため、設計・要件定義の議論をより深いものへとできる期待があります。
そのために以下の取り組みを引き続き実施していきたいと考えています。
- nucleusのさらなる拡張・改善、細かい要素のMarkdown化
- MCPに読み込ませやすいFigmaデータ作りのためのルール検討
- v0テンプレートの高精度化、mobile対応
- 社内でのFigma MCP利用促進活動
AIに任せるべき領域 と 人が担うべき領域 を明確に線引きしていくことで、UIデザインチームとしても、“誰でもそれっぽく作れる” 環境を整えつつ、デザイナーはデザインのルール制定と最後の品質担保に集中でき、ゆくゆくは、「AIと人が共創するデザインプロセス」を確立できればと考えています。
おわりに
オプティムでは、エンジニアだけではなくプロモ・デザインUで一緒に働いてくださるメンバーも探しています。
プロモ・デザインUでは、UI/UXデザインやブランディング、Web制作、マーケティングなどオプティム製品にまつわる様々なデザインのお仕事をしています。
