Atharva-Git01/experience-design

体験設計 (Experience Design)

ux-ui-kit は、インターフェースを「正しく」します。トークン、コンポーネント、状態、アクセシビリティ、検証済みレンダリング。このスキルは、インターフェースがどのように使われ、記憶されるべきかを決定し、それをキットが構築できる具体的な判断に変換します。次の問いに答えます：人々は最初に何に気づくべきか、何が親しみやすくなければならないか、独自性がどこでその価値を発揮するか、何が動き、何が静止しているか、インタラクションがどのようにコミュニケーションするか、体験のピークと終わりはどこか、そして印象的な層を取り除いたときに何が残るか。

位置づけ

レイヤー	担当	スキル
ウェブサイト戦略	サイトが達成すべきことと言うべきこと、ページ構造、証拠、信頼、コンバージョン、SEO	website-excellence
体験方向付け（このスキル）	注意、親しみやすさと独自性、アートディレクション、構成とペーシング、インタラクション、モーション、印象的な瞬間、適応、体験検証	experience-design
実行と検証	トークン、コンポーネント、コード、コピー、ゲート	apply-aesthetic、brandkit、design-tokens、design-component、design-code、image-to-code、ux-writing、prototype、redesign、design-review、a11y-audit、performance、design-qa

戦略的コンテキストは、それがインターフェースの決定を変える場合にのみ使用します。ウェブサイトのオーディエンス、オファー、ページ目的が未確定の場合は、最初に website-excellence から入手するか、前提を明示して続行します。製品UI、アプリ、ダッシュボードは直接ここに来ます。

ステップ0：プロセスの規模を決める

何よりも先に深さを選びます。リファレンス内のフレームワークは判断のためのツールであり、すべてのリクエストが通過すべき段階ではありません。

モード	使用する場面	生成するもの
Quick（簡易）	確立されたシステム内でのコンポーネント、状態、画面の微調整や修正	プロジェクトのデザイン決定記録があればそれを読む。影響を受けるビューの注意順序、変更がある部分のみのインタラクションまたはモーションカード、アンチパターンスキャン、そしてビルド。論文は不要。
Standard（標準）	新しいページ、フロー、画面ファミリー、またはそのリデザイン	体験ブリーフとテーゼ、注意マップ、新規性予算（代替案は真のトレードオフがある場合のみ）、リズムマップ、インタラクション・モーションマップ、適応ノート、自己批評、決定記録。
Signature（特徴的）	ブランドを定義するサイトやローンチ、アイデンティティのリデザイン、または記憶に残るものへの明示的な要求	Standardのすべてに加え、コンセプト探索（3つの真に異なる方向性を比較し1つを選択）、デザインされた印象的な瞬間、最もリスクの高い部分のプロトタイプ、体験検証計画。

抑制のチェック。 政府サービス、チェックアウト、認証、設定、ドキュメント、運用ダッシュボード、医療・金融タスクでは、タスクパスにおける新規性予算はほぼゼロです。個性は、タイポグラフィ、明瞭さ、トーン、精度、フィードバックの質に生きます。抑制がより強い判断であることを知るのも仕事の一部です。

ループ

モードに必要なステップを実行します。各ステップはメソッドを保持するリファレンスを指します。

1. 理解する。 体験ブリーフを作成します：ユーザーの意図、到達コンテキスト、主な注意、成果、トーン、親しみやすいもの、制約、覚えておくべきこと。[01]
2. 確立する。 各主要ビューに対して、体験テーゼと注意階層（レベル1～4）を作成します。テーゼはその後のすべての判断をフィルタリングします。[01]
3. 探索する（Signatureモード、または最初のアイデアがカテゴリーのデフォルトである場合）。コンセプトが異なる3つの方向性（色ではなく）を比較します：保守的、差別化された、大胆。選択し、却下された理由を記録します。選択が明確になったら探索を停止します。[02]
4. 方向付ける。 3～7つのアートディレクションルールを設定し、テーゼをレイアウト、タイプ、スケール、スペース、密度、色、画像、サーフェス、コンポーネント、インタラクション、モーション、レスポンシブ動作への影響に変換します。[02]
5. 構成する。 リズムマップを描きます：各セクションの役割、密度と強度、静寂が置かれる場所、ピーク、終わり方。コンテンツが見出し、段落、3つのカードではなく、自身の形式を選べるようにします。[03]
6. インタラクションを設計する。 意味のあるインタラクションごとにインタラクションカードを作成します（意図、アフォーダンス、トリガー、応答、フィードバック、状態、回復、継続性）。ローディング、空、エラー、成功、中断、エッジ状態をカバーします。[04]
7. 振付する。 モーションマップを作成します：何が動き、何が静止するか。重要なモーションごとに1つのモーションカード（予算クラスと設計されたモーション軽減版を含む）。[05]
8. ピークを設定する。 0～3つの印象的な瞬間を選び、それぞれでシグネチャーテストを実行します。[06]
9. 適応する。 小画面、タッチ、キーボード、ズームとリフロー、モーション軽減、低電力デバイス向けに体験を再決定します。劣化ラダーを定義します。[07]
10. ストレステストと編集。 主要な判断を意思決定フィルターに通し、野心的な判断を実装現実性チェックに通します。次に、アンチパターンスキャン、互換性テスト、コンセプト整合性テスト、7つの視点からの自己批評を実施します。その後、価値のないものを削除します。[08]
11. 引き渡しと検証。 体験仕様書をビルドスキルに渡します。キットのゲートと motion_audit.mjs を実行します。約375pxと1440pxでレンダリングし、キーボードのみ、モーション軽減をエミュレートして確認します。[07, 08]
12. 検証、洗練、記録。 最もリスクの高い仮定を、それに答えられる最も安価な方法でテストします。低価値の詳細を磨くのではなく、影響の大きい弱点を修正します。デザイン決定記録を更新します。[08]

必須事項（非交渉）

• 必要なものは親しみやすく、意味のあるものは差別化する。 ナビゲーション、フォーム、チェックアウト、認証、検索、設定、エラー回復は、オーディエンスの証拠が変更を支持しない限り、従来の動作を維持します。その周りでブランドを表現します。
• アクセシビリティは設計のインプットである。 WCAG 2.2 AA が最低基準です。ホバー、ドラッグ、モーション、色、音だけに依存するものは本質的にあってはなりません。すべてのモーションには、単に削除されたものではなく、設計されたモーション軽減版が必要です。
• 役割のないモーションは禁止。 各重要モーションは、それが伝えることと予算クラスを指定します：必須、強化、表現、実験、または回避。
• フィードバックと回復のないインタラクションは禁止。 すべての意味のあるアクションは約100ms以内に認識され、意味がある場合は元に戻す、キャンセルする、または再試行できる必要があります。
• すべての拡張には失敗モードがある。 コンテンツとコアタスクは、JavaScript、ヘビーメディア、アニメーションが削除されても機能します。
• バリエーションは意味を持つこと。 構成、密度、強度の変更は、コンテンツ、ペーシング、階層、感情がそれを要求する場合のみ行い、繰り返しを避けるためだけに行ってはなりません。
• リファレンスは原則を与え、表面を与えない。 他人のために実際の企業のアイデンティティを再構築しないでください。リファレンスがなぜ機能するかを抽出し、それを別の方法で表現します。
• 新規性は振りまくのではなく、集中して使う。 典型的な予算：Quick 0、Standard 0～1、Signature 1～2の馴染みのないアイデア。意味や記憶を生み出す場所に集中させます。
• 確信度ラベルを付ける（下記参照）。測定していない結果を述べてはいけません（キット検証プロトコル）。
• 分析は判断の規模に合わせる。 明白な選択に理論は不要。決定して次に進みます。

出力：体験仕様書（Experience Spec）

templates/experience-spec.md をモードの深さに応じて記入します：Quick は約10行、Standard は1～2ページ、Signature は2～4ページ。構築時、仕様書はコードを駆動する作業計画です。その言葉をページコピーやコードコメントに含めず、引き継ぎで重要な判断だけを要約します。Standard および Signature の作業では、templates/design-decision-record.md からプロジェクトのデザイン決定記録を作成または更新し、そのプロジェクトの以降のすべてのタスクで最初にそれを読みます。

引き継ぎ

ここで行われた決定	実行するスキル
アートディレクションルールがトークンになる（色の役割、タイプ、スペース、半径、奥行き、モーションモードと期間）	新しい基盤には brandkit、既存のものには apply-aesthetic、その後 design-tokens
インタラクションカードからのコンポーネントとその状態	design-component、その後 design-code
仕様書からのページと画面	design-code、またはリファレンスから構築する場合は image-to-code
凡庸診断後の既存UIのアップグレード	redesign
アクション、エラー、空状態、フィードバックのコピー	ux-writing
印象的な瞬間とリスクの高いインタラクションのプロトタイプ	prototype
ゲート：全状態でのコントラスト、axe、フォーカストラップ、レスポンシブオーバーフロー、テイスト、モーション	a11y-audit、design-qa、performance、および node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page>
基盤と体験レンズを通した画面のスコアリングレビュー	design-review

キットのルールはビルドにも適用されます：トークンのみ、8つのコンポーネント状態、~/.claude/ux-ui-kit/CLAUDE.md の検証プロトコル、絵文字禁止。

確信度ラベル

読者が事実と誤解する可能性のある推奨事項に使用します。すべての文にラベルを付ける必要はありません。

ラベル	意味	Website-excellence 相当
High-confidence convention（高信頼性の慣習）	広く確立されたパターンで、強いユーザビリティ価値がある	Current convention、または Standard
Evidence-supported guidance（エビデンスに基づくガイダンス）	標準や関連研究によって裏付けられている。エビデンスがカバーする範囲を明記する	Standard / requirement、Strong evidence
Project-specific inference（プロジェクト固有の推論）	これらのユーザー、制約、目標から推論されたもの。前提を明記する	Inference
Creative hypothesis（クリエイティブ仮説）	感情や記憶を生み出すための判断。テスト可能であり、研究では証明できない	Practical heuristic
Experimental opportunity（実験的機会）	新しく、結果が不確か。正当化し、それに依存する前にテストする	Limited/contextual evidence、および検証計画

研究は制約を設定し、リスクをフラグ付けできます。唯一の正しいアートディレクションを選択することはできません。

リファレンス

モードと問題に必要なものだけを読み込みます。

• 01 ブリーフ、テーゼ、注意：体験ブリーフ、テーゼ、3つの応答レベル、注意階層、コンテキストによる比例性、抑制が勝つとき。
• 02 コンセプトとアートディレクション：クリエイティブテリトリー、概念的差異、方向性カードと比較、意図から実行へ、タイポグラフィ、色、画像、サーフェス、リファレンスとスタイルライブラリの使用。
• 03 構成、リズム、コンテンツ：時間をかけたデザイン、リズムマップ、コントラストとペーシング、密度と間、コンテンツ主導のインターフェース、カード、構成ツール。
• 04 インタラクションデザイン：インタラクションカード、コミュニケーションテスト、新規性予算、フィードバックタイミング、楽観的更新、元に戻す、フォーム、体験状態、入力パリティ、パターンの変換、シグネチャーインタラクション、繰り返し使用。
• 05 モーションシステム：エビデンス、モーションの役割、予算クラス、モーションマップとカード、タイミング、イージングとスプリング、振付、スクロール連動モーション、ビュートランジション、デザインとしてのモーション軽減、パフォーマンス、モバイル、ツール、テスト。
• 06 印象的な瞬間：瞬間のタイプ、スペクタクルなしでの記憶に残る、ピークとエンド、選択、シグネチャーテスト、静的な形式、プロトタイピング。
• 07 適応と劣化：適応としてのレスポンシブ、入力・機能クエリ、コンテナクエリ、ズームとリフロー、リーチ、デバイス階層、劣化ラダー、失敗モード、表現機能のためのアクセシビリティ、レンダーチェック。
• 08 批評、検証、記憶：意思決定フィルター、実装現実性チェック、AIアンチパターンスキャン、互換性と整合性テスト、自己批評ループ、無慈悲な編集、クラフトパス、明瞭性と感情のための検証方法、デザイン決定記録。