2026 02/06 これからの体験設計と品質 

omote 表 洋樹 趣味 マラソン 音楽 ガンダム 2022 2019 2012 Design Engineer Manager Scheeme Tech Lead BUBO Freelancer 

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

つくるコスト≒0時代 いま、開発におこっていること 実装スピードの優位性がなくなった 1枚のカンプ、1つのコンポーネント → AIが瞬時に出 力 AIの進化 AIエージェント・Vibe Codingで 実装速度が桁違いに向上。 誰でもつくれる時代に 「つくる」こと自体は、もう差別化要因ではない。 何を作るかが大事。 

ボトルネックは人間になった 質のいい決定ができるのか？ 特に0 → 1の立ち上げはこれまでよりも高速に。 何をつくるか 体験として成立しているか 品質を守れるか what, experience, quality 

「つくる」の前後にある意思決定が律速になっている 

問いの転換 ヒトがボトルネックなら、 我々が介入すべきポイントを絞る。
 それ以外はAI＋仕組みに任せるてみるのはどうだろうか プロダクトのレイヤー設計で整理する 

汎用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を組み合わせた体験の流れ。検索 → 結果 → 絞り込み → 詳細遷 移。前後関係、状態変化、エラー時の振る舞い= 体験設計。
 ユーザーの価値は体験ありきである。 

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を組み合わせた体験の流れ。検索 → 結果 → 絞り込み → 詳細遷 移。前後関係、状態変化、エラー時の振る舞い= 体験設計。
 ユーザーの価値は体験ありきである。 

GUI + AIの複合的なインタラクション フォーム、ボタン、入力、ナビゲーションの他、 AIチャットの登場でインタラクションの選択肢が増えた。 自然言語で検索・フィルタ・アクション実行ができる。 GUIが唯一のインターフェースではなくなった。 体験や学習のためのビュー 注力！ データ可視化、一覧表示、ダッシュボード。 俯瞰する、比較する、傾向を読み取る。 → 視覚的なUIでしか実現できない。 心地よいデザインに対する知見をため、表現していく必要性が高まった。 

レイヤーと責務 組織・ヒト・AIが担う 3つの層に分類 基盤層：組織全体で持つ Critical User Journey（CUJ）による品質担保。
 認証など、一般的なプロダクトとしてのあるべき部分。
 アプリケーションのそのものの重要なフロー。 ストーリー層：人間が介入する ヒトが介入する唯一のポイント
 ドメインロジックを集約する。
 変更が多く、壊れやすい箇所のため、 UIの組み合わせによる体験設計を行う。 汎用UI層：AIやライブラリで自動化 AIやライブラリを使用。テストで自動化する。
 Storybook / Visual Regression Test など。 品質保証し、開発コスト・ドメインを持たない。 

ディレクトリで見るレイヤー構造 コンポーネントと責務 🔵 基盤層（組織の責務）
 🟠 ストーリー層（体験設計） 🟢 汎用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 

仕様設計・フロー ヒト×AIの連携 凝集度で理解する コロケーション Input, Button, Title, Dialog… 「UIパーツである」という共通性 = 汎用UIの倉庫 _components/PropertySearch/ FormUI + ResultUI + データ取得 + 状態管理 一つの体験を実現するために必要なものすべて = ストーリーの居場所 論理的凝集 機能的凝集 Property
 Search Register
 Content ヒトの開発する領域 AI / ライブラリで担保 Button Title Input 

仕様設計・ フロー 1 情報収集 Slackやドキュメントに記載さ れている情報をAIが収集す る。特に一次情報をコンテキ ストとして持たせることが大 事。 2 要件定義 収集された情報を元に、
 機能開発に落とし込む要件を 定義。必要に応じて、Figma との連携でフローを構築。 ClaudeをFigma / チケット / ドキュメントのMCPと接続する ことで、ほとんどが自動化できた。 顧客の体験設計にまつわる、初期設計や可視化も可能に。
 大きなスピードアップすることで、より顧客に集中できる。 3 タスク起票 要件定義された内容に対し て、チケットを起票する。 必要に応じて、サブタスクに 分割。 4 実装 タスク・サブタスクをもとに PRを分割。
 並列で実行とAIのレビューに より、完成度も高められる。 

🧪 Test Runner Vitest / Jestを使って複合的な コンポーネントのシナリオを 記載。 🤖 自然言語CUS 自然言語を記載して、AIエー ジェントがCUSのシナオリを 解釈。 → ⚡ hooks → 🌐 ブラウザ操作 ブラウザを自動操作し、実際 のUIを操作する。 → 📡 fetcher ✅ アサーション 一連の体験フローを検証す る。
 通過したら、必要に応じてテ ストコードに落とす。 🔗 UI ユニットテスト と Agent-Browser e2e 

🧪 Test Runner Vitest / Jestを使って複合的な コンポーネントのシナリオを 記載。 🤖 自然言語CUS 自然言語を記載して、AIエー ジェントがCUSのシナオリを 解釈。 → ⚡ hooks → 🌐 ブラウザ操作 ブラウザを自動操作し、実際 のUIを操作する。 → 📡 fetcher ✅ アサーション 一連の体験フローを検証す る。
 通過したら、必要に応じてテ ストコードに落とす。 🔗 UI ユニットテスト と Agent-Browser e2e めっちゃお金かかる 

主戦場は体験設計に移る 汎用UIをつくるコストは0に近くなった。
 エンジニアもデザイナーも、 汎用UIを組み合わせてストー リーにすること。そのストーリーの品質をどう守るか。 職種における基礎的な専門性と、顧客理解という原点回帰になる 

レイヤー✖️ 品質/手段 レイヤー 基盤層 ストーリー層 汎用UI層 ストーリー層をいかに追い求めていくか。
 システムと開発者が仕組み上でも分離し、集中するかが大切 誰が持つ 品質/手段 人間の介入 組織 CUJ / E2Et 不要 開発チーム 複合テスト / agent E2E 不要 ライブラリ＋テスト ユニットテスト / Storybook 不要 

THANK YOU ・専門性と基礎力 ・つかう顧客の理解をより深く ・スピードではなく深さ