365日挑んだ、デザイナーAI活用・実務事例！圧倒的ボリュームで大公開

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　　MIXI MEETUP！AI DAY 2026 - SESSION ARCHIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

365日挑んだ、デザイナーAI活用・実務事例！圧倒的ボリュームで大公開

デザイン本部ではこの1年、UI/UX、動画、CG、プロモーション、フロントエンドなど、デザイン工程のほぼ全域にAIを実務として組み込み、日常業務の中で使い続けてきました。本イベントでは、そのAI活用の全体像を紹介したうえで、特にUI/UX・CG・フロントエンドの3領域にフォーカスし、実際の業務の中でどのように使われ、どんな成果につながっているのかを詳しく紹介します。

デザイン本部/プロダクトデザイン室/Advanced/Designグループ/第1チーム
滝山 智美
デザイン本部/プロダクトデザイン室/Advanced/Designグループ/第1チーム
ジウン
デザイン本部/動画クリエイティブ室/CGデザイングループ/第3チーム
田野 穂奈美
デザイン本部/動画クリエイティブ室/CGデザイングループ/第3チーム
山本 聡太
デザイン本部/テクニカルデザイン室/エンジニアリンググループ
梅山 直樹

────────────────────────────
□セッション情報
https://mixi.connpass.com/event/380889/
□イベントハッシュタグ
#miximeetup2026
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

◇◆◇ Information ◇◆◇
◎ エンジニアSNS/メディア
X
https://x.com/mixi_engineers
MIXI Developers Blog (medium)
https://mixi-developers.mixi.co.jp/
Slide (SpeakerDeck)
https://speakerdeck.com/mixi_engineers/

◎デザイン職メディア
MIXI DESIGN note
https://note.com/mixi_design/
MIXI DESIGN Cocoda
https://cocoda.design/teams/mixi-design
Slide (SpeakerDeck)
https://speakerdeck.com/mixi_design/

◎採用情報
https://mixigroup-recruit.mixi.co.jp/

HP
https://mixi.co.jp/
X
https://x.com/mixi_PR
connpass
https://mixi.connpass.com/

Transcript

1. ©MIXI AIを相棒に デザインシステムを 守る仕組みを作った話 ジウン デザイン本部 UI/UXデザイナー
2. ©MIXI デザインレビュー、 「もっとよくできるはず」 そんな小さなもやもやから始まりました
3. ©MIXI デザインルール違反を、 自動で検出する Figmaプラグイン フレームをスキャンし、違反箇所 を一覧表示 1. 検出 プレビューで確認、ボタンで該当 要素を自動選択 2. 確認 バリアブル値を提案してボタン一 つで反映。 提案がない場合は付箋でメモ 3. 修正 WHAT WE BUILT
4. ©MIXI 3つのタブで、デザインの品質を網羅的にチェック WHAT IT CHECKS ©MIXI
5. ©MIXI 何が変わったか TEAM FEEDBACK ★★★★★ 基本的なバリアブルの当てミスが減ったような気がする ★★★★　 プラグインを使うことで、細かい修正コメントが減って、　 やり取りの回数も少し減った気がする ★★★★　 コンポーネントレビューの時間が、半分くらい短くなってきた
6. ©MIXI 対話型AIと一緒に、 作り上げた HOW WE MADE IT
7. ©MIXI 一人のツールが、チームのツールになった HOW IT GREW
8. ©MIXI Cursor AI Agentで、みんなで開発 HOW WE USE AI
9. ©MIXI やってみてわかったこと
10. ©MIXI WHAT'S NEXT 自分たちの「考え方」を、 仕組みにしていく。 その積み重ねの先に、 「私たちらしいデザイン」が自然と育っていく。
11. ©MIXI AIを相棒にし、進化し続け 次の時代をつくるデザイナー みなさんはどう思いますか？ ぜひどこかでお話しできることを楽しみにしています。 AI won't replace designers, but designers who use AI will replace those who don't.
12. ©MIXI CG映像領域のAI活用 　 山本 聡太 / 田野 穂奈美 デザイン本部 CGデザイナー
13. ©MIXI AIによる 2つの拡張
14. ©MIXI 2つの拡張 実務ツールの (After Effects,DCC) 機能拡張 生成の 活用による 表現拡張
15. ©MIXI After Effects Photoshop Blender Maya 実務ツール ChatGPT Gemini Visual Studio Code AI 機能拡張をChatGPTやGeminiを使用し作成 実務ツールの機能拡張
16. ©MIXI After Effectsでカラーパレットを登録し、レイヤーの塗り・線カラーをワンクリックで適用できるパネルスクリプト。 実務ツールの機能拡張 カラーパレットスクリプトを活用
17. ©MIXI 実務ツールの機能拡張 カラーパレットスクリプトを活用 色味、キーフレーム制御が可能に 実際の演出
18. ©MIXI 実務ツールの機能拡張 コンポジションの一括管理が可能に コンポジション一括設定ツールの活用
19. ©MIXI その他機能拡張ツール作成事例 実務ツールの機能拡張 Photoshop、Illustrator Adobe Maya、Blender DCC ファイル操作　など ユーティリティ ツール
20. ©MIXI 生成による表現拡張 ‧制作⼯数の削減 ‧外注費⽤の削減etc コストカット ‧ならではの表現の模索 ‧質感モックや別パター ンの作成による深化etc 表現模索 指針/ 生成による 表現模索とコストカット
21. ©MIXI Nano Bananaで差分画像を作成し映像制作に活用。 生成による表現拡張 提供素材 差分生成 連番・映像化 制作工数目安(※3Dモデリング、アニメーション制作)： 約5日→ 約0.5日　 コスト： 約20万円→ 0円
22. ©MIXI キャラアニメーションを生成 ©MIXI
23. ©MIXI PJ毎にメンバー間の共有ワークフローを構築 生成による表現拡張 他ver 量産 書き 起こし 生成のテンプレ化→属人化防止+スピード向上
24. ©MIXI 生成による表現拡張 AdobeFireflyでタイムラプスを作成し映像制作に活用。 課題：使える素材に限りがある状況での動画制作依頼。 仮説：外観で「夜と昼の写真」があったので、同ポジが取れれば タイムラプスの撮影をせずとも、生成できるのでは？と挑戦。 制作工数目安(※撮影/編集)： 約3日→ 約0.5日　 制作費用： 約80万 カメラマン/ドローン/空撮申請/編集/コンポジット → 外注費0円
25. ©MIXI 今後 実務ツールの 機能拡張 生成による 表現拡張 UXPやPluginなどの作成による さらなる機能拡張 Claude Codeなどと連携した ワークフロー改善 (部分的な脱After Effects？) etc
26. ©MIXI デザイン組織での Claude Code活用 梅山直樹 デザイン本部 エンジニア
27. ©MIXI デザイン本部 テクニカルデザイン室とは • デザイン組織内におけるエンジニアリングを担う室 ◦ 映像配信・3DCG制作・Webサイト制作 • 「デザイン職のAI活用をブーストする」がミッション
28. ©MIXI エンジニア Claude Code 活用事例 室のAI活用事例 全52件のうち半分が Claude Code 関連
29. ©MIXI 10年ぶりのモンスターストライク公式サイトのリニューアル 約50%削減 制作⼯数
30. ©MIXI モンストオフラインイベント向けサイネージ開発 3ヶ⽉想定 → 1ヶ⽉ 制作⼯数
31. ©MIXI • イベント来場者が プレゼントガチャを 体験できるアプリケーション • Claude Codeが 実装の約80%を担当 モンスト オフラインイベント向け サイネージ開発
32. ©MIXI • Claude Codeで開発 • Codexでレビュー • Geminiでデザイン Claude Code × Codex × Gemini 3エージェント連携 機能追加 開発対応
33. ©MIXI 35F 体験展示スペースでもご紹介していますので 是非お立ち寄りください モンスト オフラインイベントにおけるAI活⽤ 体験展⽰
34. ©MIXI 開発フロー全てでClaude Code活用 設計 実装 レビュー QA
35. ©MIXI 設計 ├── CLAUDE.md ‧‧‧  Claude に最適化した指⽰ファイル。claude 起動時に⾃動的に読み込まれる。 └── .claude └── rules ├── 01_rules-for-ai.md‧‧‧  AIエージェント全般に守らせたいルールをまとめたファイル ├── 02_structure.md‧‧‧ プロジェクト概要と構造を定義したファイル ├── 03_architecture.md‧‧‧ 技術スタックとアーキテクチャを定義したファイル ├── 04-01_coding-standards-code-style.md‧‧‧ コードスタイル（Biome設定）をまとめたファイル ├── 04-02_coding-standards-css-style.md‧‧‧ スタイルガイド ├── 04-03_coding-standards-naming.md‧‧‧ 命名規則 ├── 04-04_coding-standards-typescript.md‧‧‧ TypeScript規約 ├── 04-05_coding-standards-react.md‧‧‧ React規約 ├── 04-06_coding-standards-api-database.md‧‧‧ API 規約 ├── 04-07_coding-standards-error-handling.md‧‧‧ エラーハンドリング ├── 04-08_coding-standards-performance-security.md‧‧‧ パフォーマンス & セキュリティ ├── 05_database.md‧‧‧ データベース構造 └── 06_flows.md‧‧‧ アプリケーション動作フロー 「CLAUDE.md」「.cluade/rules/」 にAIへの指示配置 複数人・複数ページ作業でも「Claude Code」が統一されたルールで実装
36. ©MIXI Claude CodeからFigmaデザインを 読み取りデザイン実装 Claude Code 実装 Figma Dev Mode MCPサーバー連携でデザイン実装 1 デザイン リクエスト 3 コード 生成 2 コンテキスト 返却 Figma Code ©MIXI
37. ©MIXI • /codex-plan-review ◦ Claude CodeがPlanモードで実装計画をたてるとCodexがレビュー。 結果を元にClaude Codeが計画をブラッシュアップ。 Agent Skills（特定のタスクを実行させる仕組み）活用 Claude Code Codex 1 計画立案 2 修正提案 レビュー Code 3 実装
38. ©MIXI 「Claude Code GitHub Actions」による不具合対応 不具合・仕様変更タスクを立てるとAIが対応開始 QA
39. ©MIXI Claude Code を デザイン職へ
40. ©MIXI Claude Code をデザイン職へ ◦ デザイン組織内で Claude Code 利用者が急増 • CDO（Chief Design Officer）も利用中 ◦ デザイン職のAI活用をブーストするための取り組み • Claude Code 契約・利用の流れをドキュメント化、 導入サポート • 作成したツール・モックの公開環境整備 • Claude Code 学習動画制作
41. ©MIXI 「Claude Code」学習動画を「Claude Code」で制作
42. ©MIXI まとめ • デザイン組織での Claude Codeの活用紹介 ◦ エンジニア職 ▪ Webサイト・アプリケーション実装にフル活用 ▪ Claude Codeが実装の80%以上を担当 ◦ デザイン職 ▪ 急激に利用が拡大 ▪ 誰もがツールや実装ができるフェーズとなり、 デザインフローが大きく変わろうとしている
43. ©MIXI