Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for MIXI DESIGN MIXI DESIGN PRO
November 07, 2025
0

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/

Avatar for MIXI DESIGN

MIXI DESIGN PRO

November 07, 2025
Tweet

More Decks by MIXI DESIGN

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. 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利用 ガイドライン 全面改訂
  4. 11 ©MIXI FY25上期 どうだったか まさに模索時期 収穫はあった • ⽣成AIの利⽤イメージを提⽰できなかった。 • チームとしての⼀体感が⽋けていた。

    • ⽣成AI導⼊効果がある箇所を知れた。 • AIツール導⼊の懸念点を知れた。 • AI発表会により取組みを共有。
  5. 21 ©MIXI UX設計を支援 UXのフレームワークを提案してくれるアシスタントを作成 概要 課題に応じてワークショップを提案したり、フレームワークを一緒に実践したりできるアシスタントを開発。 「どう進めるか」「どう整理・可視化するか」を一緒に考える。 改善されたこと 制作⼯数: ワークショップの検討

    通常 1~2時間 → 5-15分で初稿 コスト: • 追加外注なし ◦ (過去のUXフレームを学ぶ研修は100万程度) ⼯程⽐較 Before: • 個々のフレーム知識に依存、選定に時間がかかる • 時間内に収まるアジェンダの設計に苦戦 • 資料化が⼿作業、レビューまで時間を要する After: • AIがフレーム候補、アジェンダ提⽰ • ⼿順‧準備物‧問いかけまで作成
  6. 22 ©MIXI AIでWF作成と案出しの量産と効率化 概要 社内のLPサイト案件において、WF作成やコンテンツの案出しにAIを活⽤してコスト削減+アイデアの量産 改善されたこと 制作⼯数: 企画書からWF作成(1ページ) 6時間→ 1時間

    コスト: • WF作成コストの削減 • 余剰でアイデア出しの量産 ⼯程⽐較 Before: • 企画書からWFを⼀から作成 After: • ⼤枠となるWFをAIで作成できたことで、ブラッシュアップの みの対応で、作成がすることが可能になり⼤幅な効率化に繋 がった。
  7. 23 ©MIXI UXライティング ライティングツールの実装による、ユーザー体験の向上‧ブランドイメージの統⼀‧開発効率の向上の実現 概要 サービス内の⽂⾔に⼀貫性がなかった。丁寧さが裏⽬に出て冗⻑になっていた。 AIツールを作成。表記を統⼀し、サービスらしい⽂章を⽀援するツールとして現場活⽤できる状態となった。 改善されたこと 制作⼯数: 2時間

    → 30分 コスト: • 作業コスト削減 ⼯程⽐較 Before: • 表記揺れが多く、確認や修正に時間がかかる • トーン&マナーが統⼀されず、レビュー指摘が増えて負担に • ⻑⽂化した⽂章が多く、改善に⼿戻り⼯数が発⽣ After: • AIで表記ルールを⾃動チェック → 修正時間を削減 • 「サービスらしい」トーンを維持 → レビュー指摘が減少 • 誰でも⼀定品質の⽂章を作成でき、レビュー⼯数が安定
  8. 24 ©MIXI デザインシステムメーカー 作ったUIコンポーネントを渡すと、解析してガイドラインを⽣成 概要 UIに関する疑問に答えながら、対話形式でガイドライン作成をサポート。 スクリーンショットなどをもとにガイドラインを⾃動⽣成することもでき、作成後のチェックや改善提案にも対応。 改善されたこと 制作⼯数: ガイドライン作成5時間

    → 30分 コスト: • リファレンス探し → 不要 • 命名検討 → 0分(⾃動提案) • 表記揺れによる⼿戻り → 0 ⼯程⽐較 Before: • 状態や注意点を⼿作業で⽂章化 • 命名を検討し、表やMarkdownを整形 • 他社ガイドラインを探して参照 After: • キャプチャ投⼊+不⾜値だけ回答 • AIがガイドラインをMarkdown形式で⾃動⽣成 • 命名‧優先度ルール‧参考リンクを⾃動付与 • 表記揺れや抜け漏れチェック込み
  9. 25 ©MIXI ユーザープロフィール画像の生成 概要 生成AIを活用して、サービスの世界観を反映した統一感あるユーザープロフィール画像を制作。 改善されたこと 制作⼯数: 約7⽇ → 約20時間

    コスト: • 1点数万円 → 実質0円 (AI利⽤料のみ) ⼯程⽐較 Before: • 制作リソース不⾜で、着⼿が後回しになりやすい After: • AIで複数案を短時間で⽣成
  10. 26 ©MIXI バナー量産webアプリの作成 専⾨知識不要で誰でもバナー作成が可能になる仕組みを構築 概要 フォーム⼊⼒だけで誰でも簡単にバナーを⽣成できる仕組みを構築。 これまでデザイナーが⼀つひとつ⼿作業で対応していたバナーの量産作業を、 ⾮デザイナーでも完結できるWebアプリを開発した。 改善されたこと 制作⼯数:

    バナーの作成 通常 約15-20分 → 1分で完成 コスト: • デザイナーの⼯数削減 • 依頼者のコミュニケーションコストの削減 • ⾮デザイナーによる作成で機会損失を低減 ⼯程⽐較 Before: • 依頼 → デザイナーが⼿作業 → 確認 → 修正 → 納品 After: • 担当者がAIツールに⼊⼒ → バナーをダウンロード