mcpField
A
apple-design-interaction

apple-design-interaction

github.com/s1gmamale1デザイン・UI3155 回インストール22 週間前に更新
リポジトリ

apple-design-interaction について

画面のナビゲーション、状態変化への応答、入力処理を検討するためのデザインスキルです。Appleのビジュアルやモーションのデザインスキルを補い、機能面の判断を支援します。

主な機能

  1. 01ナビゲーション方式の選択
  2. 02読み込み・空・エラー・無効状態
  3. 03即時フィードバックと楽観的更新
  4. 04フォーカス・キーボード・タッチ入力
  5. 05スクロールと視差効果の抑制指針

活用シーン

  1. 01タブ、シート、階層ナビゲーションの選択
  2. 02エラーや空状態からの回復設計
  3. 03時間のかかる処理の応答改善
  4. 04キーボードとタッチで操作可能な設計

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/s1gmamale1/apple-design-skills --skill apple-design-interaction

インストール後、Claude Code で/apple-design-interactionを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
navigation-models.md
perceived-performance-and-input.md
state-and-feedback-logic.md

詳細

Apple Design — インタラクションロジック(見た目ではなく、どのように振る舞うか)

機能的な意思決定レイヤー: どのナビゲーションを使うか、どのような状態の振る舞いにするか、どのように応答するか、そしてなぜそうするのか。これは Apple デザインの技術的・機能的な半分であり、見た目を超えてインターフェースをしっくり感じさせるものです。振る舞いの決定についてはここを参照し、それを実行するアニメーションについては apple-design-motion を、それらが設定するコンポーネントについては apple-design-os を参照してください。

使用する場面

  • ナビゲーション/プレゼンテーションの選択: push vs シート vs モーダル vs タブ vs ポップオーバー vs スプリットビュー vs 全画面。
  • 状態の振る舞いの設計: ローディング/空/エラー/無効、楽観的更新、プル・トゥ・リフレッシュ、ページネーション。
  • 体感パフォーマンス/応答性の調整。
  • フォーカス、キーボード、入力、ヒットターゲット、ポインター対タッチの扱い。

中核となるルール

  • ナビゲーションを情報階層に合わせる。 push = 階層を掘り下げる; シート/モーダル = 自己完結したサブタスクで、終わると戻る; タブ = 対等なトップレベルセクション; スプリットビュー = ワイドスクリーンでのマスター/詳細; 全画面カバー = 没入的/集中的なモード。戻るは明白で予測可能でなければならず、戻ったときに状態を保持・復元します。
  • 常に 100 ms 未満で応答する。 タッチに対して即座の視覚的フィードバック; 成功しそうなアクションには楽観的 UI; スピナーは 1 秒超のみ、コンテンツ形状の待機にはスケルトン。スピナーの背後で入力をブロックしないこと。
  • ハッピーパスだけでなく、あらゆる状態を設計する: ローディング、空(先へ進む道を示す)、エラー(回復手段を示す)、無効(理由を示す)、成功。空/エラー状態は機能であり、後付けではありません。
  • ターゲットを到達可能でアフォーダントにする: 44 pt 以上、主要アクションは親指ゾーンに、可視フォーカス、完全なキーボード操作可能性; すべてのジェスチャーには可視のフォールバックを用意する。
  • スクロールは入力である — 意識的に決める。 継続的なスクロール進行のモーション(scrollY にバインドされたプロパティ)は、ユーザーがインターフェースを操作していると感じさせます。ペーシングとナラティブが目的となるフラッグシップ/マーケティング/プロダクト/オンボーディングのサーフェスでは役立つ — 徹底的にやるか完全に省くかのどちらかで、中途半端は不具合のように見えます。ユーティリティ/生産性のサーフェス(リスト、ダッシュボード、フォーム、設定、ドキュメント)では害になる — タスク完了を遅くし、筋肉記憶と衝突します。そこではスクロールを素のまま、高速に保ってください。絶対則: スクロールジャックは決してしない(wheel/touchmove を決して preventDefault しない、overflow:hidden による偽スクロールを決してしない、ページレベルの垂直スナップを決してしない)。lerp を介して読み取り値を滑らかにすることはできますが、スクロールバーの位置の制御を奪っては決してなりません。常に動作するネイティブスクロールバーとキーボードスクロールを保持してください。ポインター反応型のモーション(チルト、マグネティック、スポットライト)は (pointer:fine) のデスクトップ専用の砂糖です — タッチユーザーが何かを失ってはなりません。すべてのスクロール駆動トランスフォームは prefers-reduced-motion の下でゲートしてください。 → サーフェス軸の分類については references/perceived-performance-and-input.md §Scroll as a continuous input/affordance および apple-design → restraint-and-antislop.md を参照してください。

リファレンス

ファイル用途
references/navigation-models.mdpush/シート/モーダル/タブ/ポップオーバー/スプリットビュー/全画面の意思決定フレームワーク、戻るの振る舞い、ディープリンク、状態の復元
references/state-and-feedback-logic.mdローディング/スケルトン/空/エラー/無効/楽観的の振る舞い、プル・トゥ・リフレッシュ、ページネーション/無限スクロール、バリデーションのタイミング
references/perceived-performance-and-input.mdレイテンシのしきい値、即時フィードバック、プリフェッチ/プログレッシブローディング; フォーカス/キーボード/入力/ポインター対タッチ + ヒットターゲットのアフォーダンス; スクロールを継続的入力として扱う決定(役立つ/害になるサーフェス軸、モメンタム/慣性、スクロールジャック禁止の絶対則、reduced-motion へのデグレード)

よくある間違い

  • モーダルの使いすぎ(プッシュ遷移にすべきところでシートを使用)、予測できない戻る動作、戻ったときの状態喪失。
  • 何にでもスピナー、入力をブロック、楽観的 UI なし、知覚パフォーマンスのカクつき。
  • ハッピーパスしか考慮しない — 空・エラー・無効状態の設計がない。
  • フォールバックのないジェスチャー専用アクション、到達できない主要アクション、表示されないフォーカスリング。

関連: これらのトランジションをアニメーションするモーション → apple-design-motion · これらの決定が設定するコンポーネント → apple-design-os · グリッドのリフロー/適応性 → apple-design-foundations。

コメント