これからの体験設計と品質

つくるコスト≒0時代
AIの進化はとどまることを知りません。
デザイン領域にもAIが入り、テクノロジーは進化し続け、誰でもアイデアを実現できる時代に近いています。

AI時代、何に注力していくのかをデザインとエンジニアリングの観点で解説しました。

Transcript

1. 2026 02/06 これからの体験設計と品質
2. omote 表 洋樹 趣味 マラソン 音楽 ガンダム 2022 2019 2012 Design Engineer Manager Scheeme Tech Lead BUBO Freelancer
3. つくるコスト≒0時代 AIの進化はとどまることを知りません。 デザイン領域にもAIが入り、テクノロジーは進化し続けてます。 誰でもアイデアを実現できる時代に近いている
4. つくるコスト≒0時代 いま、開発におこっていること 実装スピードの優位性がなくなった 1枚のカンプ、1つのコンポーネント → AIが瞬時に出 力 AIの進化 AIエージェント・Vibe Codingで 実装速度が桁違いに向上。 誰でもつくれる時代に 「つくる」こと自体は、もう差別化要因ではない。 何を作るかが大事。
5. ボトルネックは人間になった 質のいい決定ができるのか？ 特に0 → 1の立ち上げはこれまでよりも高速に。 何をつくるか 体験として成立しているか 品質を守れるか what, experience, quality
6. 「つくる」の前後にある意思決定が律速になっている
7. 問いの転換 ヒトがボトルネックなら、 我々が介入すべきポイントを絞る。
 それ以外はAI＋仕組みに任せるてみるのはどうだろうか プロダクトのレイヤー設計で整理する
8. 汎用UI（スナップショット） 静止したUI。LPや、1コンポーネント。 ボタン、フォーム、カード、テーブルなどのUI。 ライブラリ配信や、AIでも高品質につくれる。 Search Keyword input . Submit Loading Error Re-search Error 200 OK Retry Results Sort / filter 0 hits Empty Select item Back Detail Full information 体験設計・フローモデリング 汎用UIを組み合わせた体験の流れ。検索 → 結果 → 絞り込み → 詳細遷 移。前後関係、状態変化、エラー時の振る舞い= 体験設計。
 ユーザーの価値は体験ありきである。
9. Search Keyword input . Submit Loading Error Re-search Error 200 OK Retry Results Sort / filter 0 hits Empty 体験設計がデザインの主戦場になる Back Select item Detail Full information 汎用UI（スナップショット） AI 静止したUI。LPや、1コンポーネント。 ボタン、フォーム、カード、テーブルなどのUI。 ライブラリ配信や、AIでも高品質につくれる。 体験設計・フローモデリング ヒト 汎用UIを組み合わせた体験の流れ。検索 → 結果 → 絞り込み → 詳細遷 移。前後関係、状態変化、エラー時の振る舞い= 体験設計。
 ユーザーの価値は体験ありきである。
10. GUI + AIの複合的なインタラクション フォーム、ボタン、入力、ナビゲーションの他、 AIチャットの登場でインタラクションの選択肢が増えた。 自然言語で検索・フィルタ・アクション実行ができる。 GUIが唯一のインターフェースではなくなった。 体験や学習のためのビュー 注力！ データ可視化、一覧表示、ダッシュボード。 俯瞰する、比較する、傾向を読み取る。 → 視覚的なUIでしか実現できない。 心地よいデザインに対する知見をため、表現していく必要性が高まった。
11. レイヤーと責務 組織・ヒト・AIが担う 3つの層に分類 基盤層：組織全体で持つ Critical User Journey（CUJ）による品質担保。
 認証など、一般的なプロダクトとしてのあるべき部分。
 アプリケーションのそのものの重要なフロー。 ストーリー層：人間が介入する ヒトが介入する唯一のポイント
 ドメインロジックを集約する。
 変更が多く、壊れやすい箇所のため、 UIの組み合わせによる体験設計を行う。 汎用UI層：AIやライブラリで自動化 AIやライブラリを使用。テストで自動化する。
 Storybook / Visual Regression Test など。 品質保証し、開発コスト・ドメインを持たない。
12. ディレクトリで見るレイヤー構造 コンポーネントと責務 🔵 基盤層（組織の責務）
 🟠 ストーリー層（体験設計） 🟢 汎用UI層（AIやライブラリ） app/ ├ ─ layout.tsx 🔵 ├ ─ properties/ │ ├ ─ page.tsx 🔵 │ ├ ─ _components/ │ │ └─ PropertySearch/ │ │ ├ ─ index.tsx │ │ ├ ─ PropertySearch.domain.tsx 🟠 │ │ ├ ─ PropertySearch.ui.tsx 🟢 │ │ └─ PropertySearch.module.css │ ├ ─ _hooks/ │ └─ _types/ └─ tenants/ ├ ─ page.tsx 🔵 └─ _components/ └─ TenantList/ └─ TenantList.tsx └─ components/ 🟢 ├ ─ Input.tsx ├ ─ Button.tsx
13. 仕様設計・フロー ヒト×AIの連携 凝集度で理解する コロケーション Input, Button, Title, Dialog… 「UIパーツである」という共通性 = 汎用UIの倉庫 _components/PropertySearch/ FormUI + ResultUI + データ取得 + 状態管理 一つの体験を実現するために必要なものすべて = ストーリーの居場所 論理的凝集 機能的凝集 Property
 Search Register
 Content ヒトの開発する領域 AI / ライブラリで担保 Button Title Input
14. 仕様設計・ フロー 1 情報収集 Slackやドキュメントに記載さ れている情報をAIが収集す る。特に一次情報をコンテキ ストとして持たせることが大 事。 2 要件定義 収集された情報を元に、
 機能開発に落とし込む要件を 定義。必要に応じて、Figma との連携でフローを構築。 ClaudeをFigma / チケット / ドキュメントのMCPと接続する ことで、ほとんどが自動化できた。 顧客の体験設計にまつわる、初期設計や可視化も可能に。
 大きなスピードアップすることで、より顧客に集中できる。 3 タスク起票 要件定義された内容に対し て、チケットを起票する。 必要に応じて、サブタスクに 分割。 4 実装 タスク・サブタスクをもとに PRを分割。
 並列で実行とAIのレビューに より、完成度も高められる。
15. 🧪 Test Runner Vitest / Jestを使って複合的な コンポーネントのシナリオを 記載。 🤖 自然言語CUS 自然言語を記載して、AIエー ジェントがCUSのシナオリを 解釈。 → ⚡ hooks → 🌐 ブラウザ操作 ブラウザを自動操作し、実際 のUIを操作する。 → 📡 fetcher ✅ アサーション 一連の体験フローを検証す る。
 通過したら、必要に応じてテ ストコードに落とす。 🔗 UI ユニットテスト と Agent-Browser e2e
16. 🧪 Test Runner Vitest / Jestを使って複合的な コンポーネントのシナリオを 記載。 🤖 自然言語CUS 自然言語を記載して、AIエー ジェントがCUSのシナオリを 解釈。 → ⚡ hooks → 🌐 ブラウザ操作 ブラウザを自動操作し、実際 のUIを操作する。 → 📡 fetcher ✅ アサーション 一連の体験フローを検証す る。
 通過したら、必要に応じてテ ストコードに落とす。 🔗 UI ユニットテスト と Agent-Browser e2e めっちゃお金かかる
17. 主戦場は体験設計に移る 汎用UIをつくるコストは0に近くなった。
 エンジニアもデザイナーも、 汎用UIを組み合わせてストー リーにすること。そのストーリーの品質をどう守るか。 職種における基礎的な専門性と、顧客理解という原点回帰になる
18. レイヤー✖️ 品質/手段 レイヤー 基盤層 ストーリー層 汎用UI層 ストーリー層をいかに追い求めていくか。
 システムと開発者が仕組み上でも分離し、集中するかが大切 誰が持つ 品質/手段 人間の介入 組織 CUJ / E2Et 不要 開発チーム 複合テスト / agent E2E 不要 ライブラリ＋テスト ユニットテスト / Storybook 不要
19. THANK YOU ・専門性と基礎力 ・つかう顧客の理解をより深く ・スピードではなく深さ