UI/UXにおけるAI活用の取組みと現在地 ~ 生成AIと向き合った1年と半年について ~

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
AI時代のUI UX~現場での試行錯誤から見えたリアル~
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2025年10月31日（金） 12:00 〜 13:00

MIXIの横断デザイン組織であるデザイン本部のUI UXを司る部署が1年以上にわたり取り組んできたAI活用・検証の実践事例を起点に、AI活用の成功・失敗のリアルな現場の声を共有。

橋本 卓朗 / Takuro Hashimoto
デザイン本部 プロダクトデザイン室 エクスペリエンスデザイン第1グループ マネージャー

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
AI時代のUI UX~現場での試行錯誤から見えたリアル~
https://nijibox.connpass.com/event/369529/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
◇◆◇ Information ◇◆◇
note | MIXI DESIGN
https://note.com/mixi_design/
Cocoda | MIXI DESIGN
https://cocoda.design/teams/mixi-design
Youtube | MIXI TECH&DESIGN
https://www.youtube.com/@mixi_developers
ミクデザキャンプ
https://mixi-design-camp.mixi.co.jp/
Slide (SpeakerDeck)
https://speakerdeck.com/mixi_design/

採用情報
https://mixigroup-recruit.mixi.co.jp/
Webサイト
https://mixi.co.jp/

Transcript

1. 1 ©MIXI UI UXにおけるAI活⽤の取組みと現在地 ~ ⽣成AIと向き合った1年と半年について ~ 橋本 卓朗 2025.10.31 デザイン本部 プロダクトデザイン室 エクスペリエンスデザイン第1G 株式会社MIXI
2. ©MIXI 橋本 卓朗 デザイン本部 プロダクトデザイン室 エクスペリエンスデザイン第1G 株式会社MIXI Web制作会社にてWebデザイン、フロントエンド、グラフィック、ディレクションなど幅広いスキルを経 験。 2016年にミクシィ（現MIXI）へ⼊社。 ひっぱりハンティングRPG「モンスターストライク」をはじめとするWebサイトや広告媒体デザインに携 わった後、デザイン本部へ異動。 2024年春に、デザイン本部でAI検証‧推進チーム体制を構築し、AI検証の全体⽅針とミッションを策定。 現在は、AI活⽤によるUI/UXワークフローの再構築や、事業部へのAI活⽤⽀援を推進中。
3. ©MIXI PURPOSE 存在意義 豊かなコミュニケーションを広げ、世界を幸せな驚きで包む。 MISSION やるべきこと 「⼼もつながる」場と機会の創造。 MIXI WAY 意思決定の軸 ユーザーサプライズファースト
4. 4 ©MIXI 事業紹介 デジタルエンターテインメント スポーツ ライフスタイル
5. 5 ©MIXI MIXI AI活⽤年表
6. 2024.1 画像生成AI ガイドライン Ver1.0 2025.7 Google Agentspace 導入！ MIXI AI活用年表 2023年4月以降 2023.4 ChatGPT Plus利用料 補助 2025.2 Gemini 導入！ 2025.3 NotebookLM 導入！ 2025.3 AI発表会 #2 2025.4 ChatGPT Enterprise 導入！ 2025.4 AI項目追加 ・本部目標 ・評価指針 ・新卒研修 2025.7 画像・動画 生成AI ガイドライン Ver2.0 手探りでAI活用や 支援を開始 第 1 フェーズ 2023.9 GitHub Copilot 導入！ 2024.9 AI発表会 #1 第 3 フェーズ AI委員会発足 活用/推進の強化 2025.9 AI発表会 #3 AIDX設立 活用全体の整理 第 2 フェーズ 2024.6 生成AI利用 ガイドライン 全面改訂
7. 7 ©MIXI AI検証期 FY25上期‧下期 AI活⽤期 FY26上期 プロダクトデザイン室 1年と半年のAIへの取り組み
8. 8 ©MIXI AI検証期
9. 9 ©MIXI FY25 上期 AIプロジェクト 発⾜ デザイン本部から⽣成AIに興味‧関⼼があるメンバーが集結。 20〜30名ほどのチーム体制。 検証チーム AIツール検証 推進チーム AI活⽤推進
10. 10 ©MIXI FY25上期 ⽣成AI、触ってみよう。 UI UX検証チームで制作⼯程の洗い出しから始めた 制作⼯程 洗い出し どのようなAIツールを 活⽤できるか調査 AIツール検証 検証結果 ナレッジシェア
11. 11 ©MIXI FY25上期 どうだったか まさに模索時期 収穫はあった • ⽣成AIの利⽤イメージを提⽰できなかった。 • チームとしての⼀体感が⽋けていた。 • ⽣成AI導⼊効果がある箇所を知れた。 • AIツール導⼊の懸念点を知れた。 • AI発表会により取組みを共有。
12. 12 ©MIXI FY25 下期 検証体制 強化
13. 13 ©MIXI FY25下期 3つの検証体制 プロダクト軸の検証 ツール軸の検証 ⾃由研究的な検証 実案件活⽤で 結果を出すチーム 必要となるツールを 検証するチーム 各⾃の成⻑を⽬的とした 検証とナレッジ共有
14. 14 ©MIXI FY25下期 30%までコミット 検証チーム 30%を目安にコミット 検証チーム以外 10%のコミット 個々のAI検証へのリソース上限を半期⽬標の30%まで
15. 15 ©MIXI FY25下期 社内向けの既存サイトリニューアル 実案件 導⼊ 社内向けの決裁ツール改修 UI自動生成ツールを使用 AIを予め改修プロセスに取り入れる
16. 16 ©MIXI FY25下期 プラグインも開発してみました
17. 17 ©MIXI FY25下期 どうだったか AI活⽤への⼀歩前進 • AIを業務プロセスの⼀部に組み込むことができた。 • AIツールの特性を知ることができた
18. 18 ©MIXI AI活⽤期
19. 19 ©MIXI FY26 上期 業務効率化×品質向上を⽬指す
20. 20 ©MIXI AI活⽤の事例
21. 21 ©MIXI UX設計を支援 UXのフレームワークを提案してくれるアシスタントを作成 概要 課題に応じてワークショップを提案したり、フレームワークを一緒に実践したりできるアシスタントを開発。 「どう進めるか」「どう整理・可視化するか」を一緒に考える。 改善されたこと 制作⼯数： ワークショップの検討 通常 1~2時間 → 5-15分で初稿 コスト： • 追加外注なし ◦ (過去のUXフレームを学ぶ研修は100万程度) ⼯程⽐較 Before： • 個々のフレーム知識に依存、選定に時間がかかる • 時間内に収まるアジェンダの設計に苦戦 • 資料化が⼿作業、レビューまで時間を要する After： • AIがフレーム候補、アジェンダ提⽰ • ⼿順‧準備物‧問いかけまで作成
22. 22 ©MIXI AIでWF作成と案出しの量産と効率化 概要 社内のLPサイト案件において、WF作成やコンテンツの案出しにAIを活⽤してコスト削減＋アイデアの量産 改善されたこと 制作⼯数： 企画書からWF作成（1ページ） 6時間→ 1時間 コスト： • WF作成コストの削減 • 余剰でアイデア出しの量産 ⼯程⽐較 Before： • 企画書からWFを⼀から作成 After： • ⼤枠となるWFをAIで作成できたことで、ブラッシュアップの みの対応で、作成がすることが可能になり⼤幅な効率化に繋 がった。
23. 23 ©MIXI UXライティング ライティングツールの実装による、ユーザー体験の向上‧ブランドイメージの統⼀‧開発効率の向上の実現 概要 サービス内の⽂⾔に⼀貫性がなかった。丁寧さが裏⽬に出て冗⻑になっていた。 AIツールを作成。表記を統⼀し、サービスらしい⽂章を⽀援するツールとして現場活⽤できる状態となった。 改善されたこと 制作⼯数： 2時間 → 30分 コスト： • 作業コスト削減 ⼯程⽐較 Before： • 表記揺れが多く、確認や修正に時間がかかる • トーン＆マナーが統⼀されず、レビュー指摘が増えて負担に • ⻑⽂化した⽂章が多く、改善に⼿戻り⼯数が発⽣ After： • AIで表記ルールを⾃動チェック → 修正時間を削減 • 「サービスらしい」トーンを維持 → レビュー指摘が減少 • 誰でも⼀定品質の⽂章を作成でき、レビュー⼯数が安定
24. 24 ©MIXI デザインシステムメーカー 作ったUIコンポーネントを渡すと、解析してガイドラインを⽣成 概要 UIに関する疑問に答えながら、対話形式でガイドライン作成をサポート。 スクリーンショットなどをもとにガイドラインを⾃動⽣成することもでき、作成後のチェックや改善提案にも対応。 改善されたこと 制作⼯数： ガイドライン作成5時間 → 30分 コスト： • リファレンス探し → 不要 • 命名検討 → 0分（⾃動提案） • 表記揺れによる⼿戻り → 0 ⼯程⽐較 Before： • 状態や注意点を⼿作業で⽂章化 • 命名を検討し、表やMarkdownを整形 • 他社ガイドラインを探して参照 After： • キャプチャ投⼊＋不⾜値だけ回答 • AIがガイドラインをMarkdown形式で⾃動⽣成 • 命名‧優先度ルール‧参考リンクを⾃動付与 • 表記揺れや抜け漏れチェック込み
25. 25 ©MIXI ユーザープロフィール画像の生成 概要 生成AIを活用して、サービスの世界観を反映した統一感あるユーザープロフィール画像を制作。 改善されたこと 制作⼯数： 約7⽇ → 約20時間 コスト： • 1点数万円 → 実質0円 (AI利⽤料のみ) ⼯程⽐較 Before： • 制作リソース不⾜で、着⼿が後回しになりやすい After： • AIで複数案を短時間で⽣成
26. 26 ©MIXI バナー量産webアプリの作成 専⾨知識不要で誰でもバナー作成が可能になる仕組みを構築 概要 フォーム⼊⼒だけで誰でも簡単にバナーを⽣成できる仕組みを構築。 これまでデザイナーが⼀つひとつ⼿作業で対応していたバナーの量産作業を、 ⾮デザイナーでも完結できるWebアプリを開発した。 改善されたこと 制作⼯数： バナーの作成 通常 約15-20分 → 1分で完成 コスト： • デザイナーの⼯数削減 • 依頼者のコミュニケーションコストの削減 • ⾮デザイナーによる作成で機会損失を低減 ⼯程⽐較 Before： • 依頼 → デザイナーが⼿作業 → 確認 → 修正 → 納品 After： • 担当者がAIツールに⼊⼒ → バナーをダウンロード
27. 27 ©MIXI FY26上期 どうだったか AIで余剰を⼿に⼊れ、品質向上が実現できる未来をつくれた。 • 総合すると、従来⽐で平均して 50〜90％ の⼯数削減を実現。 • 数⽇〜数時間規模の削減を達成。
28. 28 ©MIXI 現在地、そして次のステップ。
29. ©MIXI AIでワークフローが変化している 現在地 • AI利⽤が当たり前ではなかった • AIの使い所が分からなかった • AI利⽤が前提の仕事の進め⽅に変化した • 現場での効率化が実現できている • 品質向上に向き合える状態となった Before After
30. ©MIXI AIを使って事業価値を⾼める。 次のステップ
31. ©MIXI DesignOps×AI デザイナーが価値創出にもっと集中できるように ⽬標設定をAIで⽀援 今取り組んでいること 定例MTGをAIで効率化
32. ©MIXI 品質向上×AI 効率化の先の品質向上を⽬指す デザインレビューをAIで定量化‧⾃動スコア化 今取り組んでいること
33. ©MIXI コミュニケーション×AI MIXIらしいAIの使い⽅ 「⼈と⼈のコミュニケーション」にこだわり抜いたプロダクトを AIと共に作り上げる 取り組んでいくこと