apple-design-interaction について
画面のナビゲーション、状態変化への応答、入力処理を検討するためのデザインスキルです。Appleのビジュアルやモーションのデザインスキルを補い、機能面の判断を支援します。
主な機能
- 01ナビゲーション方式の選択
- 02読み込み・空・エラー・無効状態
- 03即時フィードバックと楽観的更新
- 04フォーカス・キーボード・タッチ入力
- 05スクロールと視差効果の抑制指針
活用シーン
- 01タブ、シート、階層ナビゲーションの選択
- 02エラーや空状態からの回復設計
- 03時間のかかる処理の応答改善
- 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.mdperceived-performance-and-input.mdstate-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.md | push/シート/モーダル/タブ/ポップオーバー/スプリットビュー/全画面の意思決定フレームワーク、戻るの振る舞い、ディープリンク、状態の復元 |
references/state-and-feedback-logic.md | ローディング/スケルトン/空/エラー/無効/楽観的の振る舞い、プル・トゥ・リフレッシュ、ページネーション/無限スクロール、バリデーションのタイミング |
references/perceived-performance-and-input.md | レイテンシのしきい値、即時フィードバック、プリフェッチ/プログレッシブローディング; フォーカス/キーボード/入力/ポインター対タッチ + ヒットターゲットのアフォーダンス; スクロールを継続的入力として扱う決定(役立つ/害になるサーフェス軸、モメンタム/慣性、スクロールジャック禁止の絶対則、reduced-motion へのデグレード) |
よくある間違い
- モーダルの使いすぎ(プッシュ遷移にすべきところでシートを使用)、予測できない戻る動作、戻ったときの状態喪失。
- 何にでもスピナー、入力をブロック、楽観的 UI なし、知覚パフォーマンスのカクつき。
- ハッピーパスしか考慮しない — 空・エラー・無効状態の設計がない。
- フォールバックのないジェスチャー専用アクション、到達できない主要アクション、表示されないフォーカスリング。
関連: これらのトランジションをアニメーションするモーション → apple-design-motion · これらの決定が設定するコンポーネント → apple-design-os · グリッドのリフロー/適応性 → apple-design-foundations。
コメント
Markdown 対応