「GMO AI Day」とは、GMOインターネットグループで今年から行っている取り組みで、月に一度「集中して"真剣に"AIに取り組む日」として制定されています。当日は丸一日業務を行わず、AI活用の実践・セミナー受講・習得した知見の社内還元など、AIに集中して向き合う1日を過ごします (詳しくはこちら)。

GMOメディアのサービスデザイン部（以下、デザイン部）でも、業務の効率化・品質向上・新しいワークフローの探索を目的に、毎月各自が試したい取り組みを持ち寄って実践しています。普段の業務に追われているとなかなか確保できない「新しいことを試す時間」となっています。

今回はデザイナーたちがどんなことに課題を感じ、何に挑戦したかを紹介します。日々の業務にAIをどう活かせるか悩んでいる方の参考になれば幸いです！

取り組みの紹介

デザイン部の全デザイナーのAI Dayの取り組みを集計し、カテゴリーごとにいくつかピックアップして概要を紹介していきます。

Figma × Claude Code 自動化

ゲーム内のアバターアイテム画像をFigma上に一括整備するSkillを作成

ゲーム内で使用するアバターアイテムを作成する際、画像生成や生成後のリサイズ・リネーム・Figmaへの配置などをこれまで手動で整備していたのですが、これをClaude CodeのSkillとして自動化し、呼び出すだけで一括処理できるようにしました。

Skill化のポイントは「実際の手順をClaude Codeでひとつずつ実行させ、そのセッションをそのままSkill化する」というシンプルなアプローチ。これまでは一式整備するのに2時間ほどかかっていた作業が、スキルを呼び出すだけで5分程度で全手順が完了するようになりました。

WebサイトをFigmaに取り込むChrome拡張機能の作成・アップデート

WebページのデザインをFigmaにコピーできるChrome拡張機能を、Claude Codeで作成しました。ブラウザで閲覧中の画面を3秒でFigmaに貼り付けられます。使ってみて「画像がコピーされない」「SVG画像がフレームをはみ出す」「class名がレイヤー名にならない」など問題はたくさんありましたが、Claude Codeで都度修正し、必要レベルまで練り上げられました。

Figmaデータのないページの即時キャプチャ、コンポーネントとの突き合わせなどが格段に便利になりました。

FigmaバナーチェックをClaude Codeで全自動化

Figma上で多数サービス向けに管理しているバナーについて、媒体ごとに存在するレギュレーション（インセンティブ名・期間・copyright・ロゴ・サイズ整合性など）を目視でチェックしていた業務を、Claude Code + Figma Plugin APIで自動化。NGの判定から、Figmaへのアノテーション書き込みまで一気通貫で実行できます。

これまでは1媒体あたり30〜60分かかり、チェック漏れも発生しやすい状態でしたが、媒体名とプロンプトを渡すだけで30分以内に完了し、修正担当者はFigmaを開くだけでNGが一目瞭然になりました。

さらに、目視では気づきづらかった不正値もAIが検出するなど、品質面でも成果がありました。プロンプトの調整に約4時間かかりましたが、その分汎用的なチェックフローが完成しました。

バナーテンプレート編集の自動化に挑戦

Figmaで管理しているバナーテンプレートをClaude Codeから自動編集できるよう整備に挑戦しました。Figma MCPに接続し、テンプレートの構造・コンポーネントキーを読み込ませ、Skillに落とし込む流れです。

これまではチーム4人がかりで2〜3時間かかっていましたが、整備が進めば1人30分程度に短縮し、ディレクター完結の対応も視野に入る見込みです。

Claude Designのお試し

先日公開された「Claude Design」について、どんなことができるか試しているパートナーが多かったです。

外部イベント用のページをClaude Designで制作

外部イベントの企業ブースで使う景品くじのインターフェースを、Claude Designでゼロから制作しました。

ブースのコンセプトを踏襲し、効果音・アニメーション・賞区分ごとの演出・設定画面のコントロールまで詳細に指示してデザインを決定。その後コードをClaude Codeに渡し、動作の微調整をして完成させました。要件の壁打ちから完成まで、およそ30分ほどで完了しました。作成したインターフェースは実際にイベント会場で使用しています。

Figma Makeにて似たような作業はこれまでもできていましたが、Claude Codeへの接続が便利で、細かなデザイン調整や大きな出力前の壁打ちがしやすかったです。

研修資料をClaude Designでリデザイン

新しいパートナー向けのHTML/CSS研修資料の古いデザインを、社内クリエイティブにて使用しているデザインスタイルに揃えるため、Claude Designを使いました。FigmaファイルをベースにデザインシステムをAIに生成してもらい、それを適用した資料を出力。ほぼ手をかけずにリデザインが完了しました。

その他の調査

既存のFigmaデザインシステムを読み込んでの生成と、プロンプトベースでの1から作成を比較検証しました。

プロンプトで1から作る方がクオリティが高く、既存リソースの読み込みはまだ精度が安定しない。デザインシステムが整っていないFigmaファイルを読み込ませると精度が下がる傾向があります。

日常業務の自動化 × Routines

日報生成をClaude Routinesで完全自動化

Slackの会話履歴やGoogleカレンダーなどを参照して、前日の日報を自動生成・保存してくれる仕組みをRoutinesで構築しました。PC起動前の場合は起動後に自動再実行する細かい配慮もあります。

毎朝手動でSkillを呼び出していた頃は忘れることも多かったのですが、今は毎日勝手に実行されるので忘れずに済み、「勝手にやってくれる状態になったのがとてもありがたい」という声が出ていました。

Routinesで毎朝のSlack・カレンダー整理を自動化

毎朝7時にSlackの前日活動とGoogleカレンダーを整理してDMで送ってくれるRoutinesを構築しました。

デザイナーの業務初動を半自動化

コエテコチームのデザイナー業務について、施策検討の初動（現状UI確認・GA4数値取得・競合調査）を、Claudeとの1セッションの壁打ちだけで完結させるSkillを構築しました。各調査にかかるトークン数と時間も提示してくれるため、「やるべきか？」の判断材料にも活用できます。チームでの開発全ワークフローを見直す中で、デザイナーの施策検討フローの重さに気づき生まれた取り組みです。

AIプロンプト・ツール探求

バナーの数字変更を誰でも高精度に行えるプロンプトを作成

運用業務で頻繁に発生する「バナーの数字変更」を、ChatGPT Images 2.0で誰でも安定したクオリティで行えるプロンプトを作成しました。「厳守事項」「品質指定」「優先順位」を細かく盛り込むことで、ピクセルパーフェクトに近い品質で数字変更が可能に。デザイナー不在・超急ぎの場面で非デザイナーが対応できる手段として活用できます。

BDD/Gherkin構文を活用したUI提案プロンプトを作成

UI改善の初動でアイデアが湧かないときのために、BDD（Behaviour Driven Development）のGherkin構文を活用したプロンプト生成の仕組みを構築。解決したい課題をGeminiでBDD形式のプロンプトに変換し、それをClaudeに渡してUI提案を生成するフローです。たった30分でlocalにUI改善案を出力でき、「提案時の叩きとして自由度があり、良い」という評価でした。

ChatGPT Images 2.0でSNS広告用画像を生成

2Dのパッケージデザイン画像から、リアルな製品3D画像を生成する試みを行いました。手元に実物がなくても製品画像を作れるだけでなく、レイアウト構成の複数パターンをすぐに出せるため、検討・壁打ちツールとして有効活用できることがわかりました。

デザイン環境・AIフレンドリーな整備

IR資料作成用のFigmaプラグインの機能追加

IR資料作成でグラフを出力するFigmaの独自プラグインを作成して使っています。これまでは棒グラフのみ対応だったため、円グラフ機能をClaude Codeで追加しました。既存のプラグインのコードを参照させて機能追加を指示するだけで、IRの実業務で使えるレベルのプラグインが完成。同じプラグインで両方のグラフを作れるようになり、オペレーションコストが削減されました。

DESIGN.mdを作成

これまでDESIGN.mdの整備が進められていなかったチームについて、Figmaデザインシステム（カラー・タイポグラフィ・余白）をDESIGN.mdに落とし込みました。GoogleのDESIGN.md仕様を参考にClaude Codeに依頼し、CLAUDE.mdから参照させることで、デザインシステムに沿ったコード生成やUI作成がしやすくなります。

AIフレンドリーなデザインシステムの調査

エンジニアがデザインを作っても統一されるよう、「AIフレンドリーなデザインシステム」の構築に着手しました。現在使われているカラーを洗い出し、AIにprimitiveカラーの提案をしてもらい、Figmaへ書き出してもらいながら微調整。まだ途中ですが、方針が固まり着実に前進中です。

デジタル庁のダッシュボードガイドブックをSkill化

デジタル庁のダッシュボードデザインガイドラインをSkill化し、IRや営業資料向けのFigmaデザイン出力に活用を試みました。カラーのトークン化（1文字変更で全チャートが追従）、グラフのレシピを2種→9種に拡充などの工夫を加えました。既存のSkillなしでもグラフはきれいに作れるため、劇的な変化はなかったものの、自社文脈のテンプレートをさらに盛り込む余地があります。

Claude CodeのSkill・設定を大掃除

Claude Codeを利用する上で直面した「ルールを守らないサブエージェント」「コンテキストが多すぎる」といった問題の改善を行いました。Skills・Hooks・CLAUDE.md・メモリを整備したり、人によってはサブエージェントを廃止してSkillsで強制実行する設計に変更したり、それぞれの環境をチューニングすることで、より安定した動作を目指しました。

まとめ

今月のGMO AI Dayでは、デザイン部から27件の取り組みが生まれました。

各取り組みについての自己評価は下記の通りです。

• かなりうまくいった：7件

• うまくいった：5件

• 部分的にうまくいった：8件

• 期待したものにならなかった：2件

• まだ進行中：5件

最近は特に、毎日のように新しいアップデートやノウハウがリリースされており、日頃使っていたツールや手法がすぐ「時代遅れ」になってしまう場面が増え、こういった定期的な学びの機会の重要性を噛み締めています。

試行錯誤を繰り返しながら、デザイナーとしての仕事をより楽しく・より価値のあるものにしていけるよう、引き続きAIとの共創を続けていきます。次回のAI Dayも楽しみです！

ご覧いただき、ありがとうございました！