SECTION 01 · PREMISE

UIを生成できる時代に、
AIへ何を渡すべきか。

AIによって、画面を作ること自体は急速に簡単になった。
しかし、作れることと、正しい体験を作れることは同じではない。

SCROLL TO BEGIN

SECTION 02 · EXPERIMENT START

同じAIに、同じ課題を渡す。

条件を一つずつ追加しながら、生成されるUIがどう変わるかを見る。変えるのはAIではない。AIが判断に使える情報だ。

requirement.md

中学生向け学習アプリを作ってください。

学習状況、教材、進捗、保護者向け情報を表示してください。

Same requirement · 3 generations

SECTION 03 · REQUIREMENT ONLY

AIは作れる。
正解は、毎回違う。

要件は満たしている。それでも、色、レイアウト、情報の優先順位、最初に促す行動は生成ごとに揺れる。

Requirementだけで生成した青い学習アプリ画面。前回学習、統計、おすすめ、課題が並ぶ — 前回の学習を中心に構成

Requirementだけで生成した黒を基調にした学習アプリ画面。今すぐ10分を強調 — 「今すぐ10分」を中心に構成

Requirementだけで生成した赤い学習アプリ画面。全国順位を強調 — 全国順位を中心に構成

OBSERVATION

同じRequirementでも、AIが選ぶ「重要」は一致しない。

SECTION 04 · + DESIGN SYSTEM

AIに、企業の
デザイン言語を渡す。

Design.md6 foundations

Color#FF385C
TypographyScale / Weight
Spacing4px grid
Radius8 / 12 / 16
ComponentsShared UI
Design TokensSemantic rules

Design.mdは「どう見えるか」をAIに教える。

BEFORE · REQUIREMENT ONLY生成ごとに、見た目が揺れる。

色・余白・カード・情報の強弱が、生成ごとに変わる。

INTRODUCE+ Design.md

AFTER · DESIGN SYSTEM同じデザイン言語へ、揃う。

カラー・タイポグラフィ・コンポーネントが共通になる。

Design.md適用後の学習アプリ画面1。共通の赤いブランドカラーとカード表現

RESULT見た目が、揃った。

SECTION 05 · BUT…

でも、
これで十分だろうか？

見た目は揃った。けれど、Design Systemだけでは決められないことがある。

01このプロダクトは何のために存在する？PURPOSE
02ユーザーをどんな状態に導きたい？DESIRED STATE
03その状況ごとに何を優先して提示するのか？PRIORITY
04どういう順序で体験させる？SEQUENCE
05迷ったとき、何を選ぶ？PRINCIPLE

SECTION 06 · EXPERIENCE SYSTEM

画面ではなく、
プロダクトの思想を渡す。

Experience Systemは、目的・ユーザー・状況・体験原則・デザイン判断を構造化されたファイル群として内部に保持し、AIと人が同じ体験判断を再現するための知識基盤である。

Purpose.md

なぜ存在するのか

Product.md

何を実現するのか

User.md

誰のためなのか

Scenario.md

どんな状況で使うのか

Experience.md

どんな体験にするのか

Principles.md

迷ったとき何を優先するのか

Design.md

どう表現するのか

SECTION 07 · EXPERIENCE SYSTEM × AI

DESIGN SYSTEMで見た目を揃えたUIへExperience Systemを導入すると。

綺麗になったのではない。
UIの意思決定が変わった。

生徒、学習の振り返り、保護者。それぞれの場面で「次に必要な状態」を先に定義した結果、同じデザイン言語から異なる最適な体験が生まれる。

Design System適用後の生徒ホーム。情報が同じ優先度で並ぶ画面 — 情報を揃えて表示する

INTRODUCEExperience
System

Experience System適用後の生徒ホーム。まなびノートと揃えたタブバーで、前回の続きと10分で始める行動を中心にした画面 — 前回の続きと10分で始める行動を優先

Design System適用後の学習ホーム。今日すぐ始める行動を中心にした画面 — 今日やることを中心に構成する

INTRODUCEExperience
System

Experience System適用後のまなびノート。できるようになったこと、現在、次の課題を順に示す画面 — できたこと・現在・次の課題を順に示す

Design System適用後の生徒ホーム。順位と進捗を提示する画面 — 順位と進捗を生徒本人へ提示する

INTRODUCEExperience
System

Experience System適用後の保護者ダッシュボード。成長、課題、家庭でできる支援を示す画面 — 成長・課題・家庭でできる支援へ変換する

SECTION 08 · BEFORE / AFTER

変わったのは、
カラーではなく体験の意味。

BEFORE教材一覧情報を列挙する

AFTER今日やるべき10分今すぐ始められる状態へ

BEFORE学習時間 32分計測値を報告する

AFTER今週できるようになったこと成長を理解できる状態へ

BEFORE未達成と順位結果を評価する

AFTER家庭でできる声かけ次の支援を選べる状態へ

表示内容・優先順位・言葉・順序。Experience Systemが、すべての判断をつないだ。

SECTION 09 · THREE LEVELS

AIによるUI生成は、
3段階で変わる。

01 · REQUIREMENT作れるFUNCTION

02 · DESIGN SYSTEM揃うCONSISTENCY

03 · EXPERIENCE SYSTEM意図を持つEXPERIENCE

Design.mdを適用して見た目を統一した学習アプリのUI — AIが見た目のルールを共有する

Experience Systemによって学習の振り返りを優先した、まなびノートのUI — AIが体験の意図を判断する

SECTION 10 · FOR ENTERPRISE

企業が残すべき
デザイン資産を拡張する。

Design Systemを捨てるのではない。その上に、組織の判断と体験の再現性を積み重ねる。

PHASE 01 · DESIGN SYSTEM見た目を再現するための、企業の設計資産。

PHASE 02 · THE QUESTIONAIは、何を基準に
体験を判断すればいいのか。

PHASE 03 · EXPANSION暗黙知を、共有できるKnowledge Layerへ。

PHASE 04 · COMPLETE見た目の再現性から、判断と体験の再現性へ。

WHYPurpose存在理由

WHOUser Contextユーザーと文脈

WHENScenarios利用状況

PRINCIPLEExperience Principles体験の原則

JUDGEMENTDecision Rules判断基準

ACTIONBehavior振る舞い

VOICEToneらしさと言葉

Design Systemは、見た目を再現する。

Experience Systemは、判断と体験を再現する。

担当者や部署が変わっても、AIが生成するUI/UXの品質を個人技に戻さない。

SECTION 11 · FUTURE

固定画面を大量に作る世界から、
必要な体験が、その瞬間に生まれる世界へ。

01人間の目的 02Experience System 03AI 04その瞬間に必要なUI

ExperienceSystem

最高の体験のために。

UIを生成できる時代に、AIへ何を渡すべきか。

同じAIに、同じ課題を渡す。

AIは作れる。正解は、毎回違う。

AIに、企業のデザイン言語を渡す。

でも、これで十分だろうか？

画面ではなく、プロダクトの思想を渡す。

Purpose.md

Product.md

User.md

Scenario.md

Experience.md

Principles.md

Design.md

綺麗になったのではない。UIの意思決定が変わった。

変わったのは、カラーではなく体験の意味。

AIによるUI生成は、3段階で変わる。

企業が残すべきデザイン資産を拡張する。

固定画面を大量に作る世界から、必要な体験が、その瞬間に生まれる世界へ。

UIを生成できる時代に、
AIへ何を渡すべきか。

AIは作れる。
正解は、毎回違う。

AIに、企業の
デザイン言語を渡す。

でも、
これで十分だろうか？

画面ではなく、
プロダクトの思想を渡す。

綺麗になったのではない。
UIの意思決定が変わった。

変わったのは、
カラーではなく体験の意味。

AIによるUI生成は、
3段階で変わる。

企業が残すべき
デザイン資産を拡張する。

固定画面を大量に作る世界から、
必要な体験が、その瞬間に生まれる世界へ。