AIでつなぐデザインワークフロー：実践9事例（2026年1月〜4月）

GMOメディア サービスデザイン部（以下、デザイン部）の出井です。

デザイナーとして20年以上働いてきましたが、これほどまでに情報の速度が速い時代はありませんでした。2022年の第4次AIブーム以前が牧歌的だったとすら思えるほどです。

情報収集の為のXは、これ以上ないほど便利で、消耗しやすいツールになってます。たぶん多くの人が、似た空気の中にいるのではないでしょうか。

この記事では、2026年1月〜4月にデザイン部がAIと向き合いながら試してきたことを、「活動ログ」としてまとめます。

現時点での有益な成果の共有もありますが、試行錯誤のプロセスの記録でもあります。どこかに共感できる部分があればうれしいです。

1. 今、感じていること

3ヶ月前の話が、もう昔話に感じられる。そんな過渡期の今をみなさんはどのように日々お過ごしでしょうか。

我々デザイン部もみなさんと同じように、変化の大きさと速さに圧倒されつつ、不確実な未来への不安と、可能性への期待と好奇心のあいだで、ほどよく（そして確実に！）疲れています。

今日つくったワークフロー改善も、きっと近いうちに、より便利でシンプルな手段に置き換わっていく。そう思うと、どこか虚しさを感じる瞬間もあります。ですよね。

それでも前に進むために、いま一番大事にしたい行動がひとつあります。

それは「理解しようとする」ことを、やめないことです。

無駄に思われる今日の改善への試行錯誤は、明日のAIに何をさせるかという発想の源泉として確実に活きてきます。

2. 2025年はまだ「ツール活用」のフェーズでした

我々デザイン部の2025年前半は、次々に登場するツールを試しながら、実務の中での活用方法を探っている段階でした。

そして2025年後半に入ると、次の2点を軸に、少しずつワークフローへ組み込みはじめました。

1つ目は、Nano Bananaなどを使ったAI画像生成やClaude Codeなどを使った動きのある表現の可能性探索です。Notionにプロンプト集と、そのカスタマイズの土台を用意し、誰でも扱いやすい状態に整えました。（詳細：https://blog.gmo.media/creative-ai-report）

2つ目は、FigmaとClaude Codeをつなぎ、Figmaのフレームをコード化することでした。これは同時に、Figmaデータやコーディングルール（md）など、AIに渡す前提情報を整備する取り組みでもありました。（詳細：https://blog.gmo.media/ai-coding-workflow）

この時期に「試して終わり」にせず、デザイナー全員を巻き込みながら運用に耐える形まで持っていく試行錯誤を重ねたことが、いまのAI画像生成ノウハウやSkill / Agent / MCP / コネクタの活用につながっていきました。

3. 2026年になり、ワークフローがつながり出す

2026年に入って、Claude Codeを中心にSkill / Agent / MCPのローカル実行が急速に進みました。

その結果、AIは単体の便利ツールではなく、作業と作業の間をつなぐ存在にもなりました。大きな転換点だったと思います。

実際にデザイン部でも、全員がClaude Codeを起点に作業を組み立てるスタイルへ一気に寄っていきました。

さらに、公式のMCPやコネクタがその流れを加速させています。この「オーケストレーション」を前提にするスタンスは、今も続いています。

4. デザイン部で試していたこと：事例集

ここからは、2026年1月〜4月の4ヶ月で試していた取り組みのうち、有益で汎用性があり、今（2026年5月）も利用しているものを9つ紹介します。

それぞれ細かく解説するとかなり長くなってしまうため、本記事では「どんなことを試していたのか」が伝わるよう、「タイトル」「使用ツール / 技術」「概要」を共有します。

なお、GMOインターネットグループでは、月に一度、集中して真剣にAIを使い倒す「GMO AI Day」という日があります。参考までに、2026年4月のGMOメディア社のデザイナーはこのような実験や検証を行いました。（詳細：https://blog.gmo.media/ai-day-report-202605）

4-1. デザインレビューのAI Agent化

🛠️ 使用ツール / 技術：Claude Code

Claude CodeのAgent Teamsを使って、デザインレビューを丸ごと任せられる状態にしました。

レビュー対象と要件を渡すと、Design OrchestratorというAgentが、目的に合いそうなDesign Teams（5つのチームを13名の専門家が構成しています）を呼び出し、それぞれの専門家の視点で議論した上で、結果をまとめて返してくれる、という仕組みです。

4-2. FigmaのAIレビューをコメントするSkill

🛠️ 使用ツール / 技術：Claude Code、Figma

FigmaのデザインをAIがレビューし、指摘事項を該当ノードにピンコメントとして自動投稿するClaude Codeスキルです。

レビュー時にAIが参照するガイドラインファイル集もセットで用意しています。

4-3. スクリーンショットによる業務観測の自動化

🛠️ 使用ツール / 技術：Claude Code、screencapture

画面のスクリーンショットを設定した分数で一定間隔で取得し、分析の依頼をするとAIがそれらを分析してレポート化する仕組みです。

Googleカレンダーの予定もあわせて渡すことで行動の文脈が補われ、より解像度の高いレポートを出せるようになります。

4-4. 競合サイトのデザイン分析とまとめ

🛠️ 使用ツール / 技術：Playwright、Figma MCP、Claude Code

PlaywrightとFigma MCPを組み合わせて、競合サイトのURLを渡すだけで、デザイン比較ボード（Figma）の作成から、分析レポートの生成までを一気通貫で行えるようにしました。

以下5項目の分析を実行します。

• レイアウト・情報設計

• カラー・タイポグラフィ

• CTAボタンの設計

• ナビゲーション構造

• ファーストビューの比較

4-5. WebページのデザインをFigmaにコピペするChrome拡張機能

🛠️ 使用ツール / 技術：Claude Code、Figma、Chrome拡張機能

拡張機能の「このページをコピー」ボタンを押すだけで、対象ページをFigmaのオブジェクト（レイヤー付き）として貼り付けられるようにしたものです。（Figmaプラグインのhtml to designに近い動きです）

裏側では、ページのHTML / CSS / 画像などの情報をまとめて読み取り、Figmaが扱える形式へ変換しています。

4-6. analytics-mcp自動レポート

🛠️ 使用ツール / 技術：Claude Desktop、analytics-mcp、slack-mcp

Claude DesktopアプリのRoutinesを使い、analytics-mcpで取得したデータをSlackに自動投稿する仕組みです。

自然言語で「期間」や「対象」を柔軟に調整できるため、KPIのような大きな指標ではなく、小さな施策の結果をカジュアルに追いたいときに役立ちます。

また、Claudeが変化量の検知や簡易分析まで行ってくれるので、数字を見るだけで終わらず、次のアクションにつなげやすくなります。

4-7. OGP画像生成ツール

🛠️ 使用ツール / 技術：Figma Make

Figma Makeで作った、OGP画像を作成してそのままPNGで書き出せるアプリです。イメージとしてはCanvaのテンプレートに近いものになります。

できることはこちら。

• 決められたエリアのテキストを任意の文言に差し替える

• 画像をアップロードして所定の位置に差し込む

• PNGで書き出せる

決まった型の中で、デザイナーを介さずに「作成 → 書き出し」まで完結できます。

4-8. リンク切れ画像の検知ツール

🛠️ 使用ツール / 技術：Playwright、JavaScript

ページを自動巡回し、画像・アイコン・OGP画像のリンク切れを検出するツールです。（HTTP 404/403 の判定＋ブラウザ上での検証）

検出結果はレポートとしてまとめ、あわせてスクリーンショットも取得して、タイムスタンプ付きフォルダへ自動保存まで行います。

さらに、Networkタブのログも出力できるため、原因の切り分けや詳細確認までスムーズに進められます。

4-9. AIによるゲームアイテムの簡易制作

🛠️ 使用ツール / 技術：Gemini（Gem / 画像生成）、Claude Code、Figma

Geminiの「画像生成の一貫性」を活かして、ゲームアイテムを手早く生成する取り組みです。

画像生成Gemを2つ用意します。

• 1つ目のGem：テーマを受けてレギュレーションに沿った完成形を、グリーンバックで生成する

• 2つ目のGem：完成形をパーツごとに分割する（不要な部分を削除する）形で再生成する

生成した画像はClaude CodeのSkillを用いて、Figma上でサイズ調整やリネームまで自動で行い入稿します。

5. まとめ

各種公式のMCPやコネクタとローカル環境の自動化によって、これまで分断されていたデジタルツール同士が、急速につながりはじめています。おそらくこの流れはこれからも加速し、必要なものは順にもれなく接続されていくはずです。

また、Claude Design、GPT Image 2、Seedance 2、Design.md、Code Wikiなど、あんなこといいなできたらいいな、の波はまだ続いています。

さて、3ヶ月先の未来さえ不確実な今、何を灯台にして進めばいいのでしょうか？

結局のところ、いま取るべき行動はシンプルだと思っています。

それは冒頭に触れたように、「理解しようとする」という姿勢を継続することだと信じています。

この先も最新の事例や便利なやり方は、すぐに置き換わっていきます。

それでも「これを使って何ができそうか」「どうつながりそうか」を理解しようとし続けることは、次の変化に追いつくための、一番確かな足場になるはずです。