Communitygithub.com

doppe7gangar/motion-for-apple-platforms

Appleプラットフォームにおけるインターフェースの動き方 — SwiftUIのスプリング用語(.smooth、.snappy、.bouncy)とその適用場面、割り込み可能なトランジションやジェスチャ駆動の遷移、画面間のヒーロー/コンティニュイティ遷移、マイクロインタラクションと触覚のペアリング、Reduce Motionの尊重について。Appleらしい動作を目指すあらゆるアニメーション(SwiftUIの遷移、Web上のCSSやFramer Motionアニメーション、シートやモーダル表示、ボタン押下、ローディングや成功状態、あるいはUIが技術的に正しくとも硬く、浮いて、または遅く感じられる場合)に使用します。また、オーバーシュートや不適切なバウンス、途中で中断できないモーションをレビューする際にも使用します。アニメーションを *行うべきかどうか* に関するAppleのルールについては hig-guide を、色、タイポグラフィ、コントロールの形状については ui-kit-for-apple-platforms を参照してください。

motion-for-apple-platforms とは?

このスキルは、Appleプラットフォームらしい自然な動きを実現するための実践的なガイドです。AppleのHuman Interface Guidelines (HIG) はアニメーションの原理(目的、任意性、ジェスチャ追従)を述べるに留まりますが、このスキルはその先の「どのように動きを構築するか」に焦点を当てています。具体的には、SwiftUIの3つのスプリング(.smooth, .snappy, .bouncy)の特性と使い分け、割り込み可能なトランジション、ジェスチャ駆動の遷移(指に追従し離した後にスプリングが引き継ぐ)、マイクロインタラクションと触覚フィードバックの組み合わせ方、そしてReduce Motionへの対応方法を網羅します。対応プラットフォームはネイティブ(SwiftUI)に限らず、Web(CSS, Framer Motion)やその他クロスプラットフォーム環境にも適用可能な原理を提供します。ソースの信頼性にも配慮しており、Apple公式のHIG引用、SwiftUIのAPI仕様、そして実際のアプリ観察に基づく知見を明確に区別。モーションが硬すぎる、浮いている、遅い、あるいは不必要に跳ねるといった問題を診断・改善するための基準として機能します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/doppe7gangar/hig/tree/main/.claude/skills/motion-for-apple-platforms

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Appleのモーション

HIGはモーションを原則としてカバーしていますが、そこで止まっています。HIGのMotionページはアニメーションを行うべきかどうか(目的を持って、オプションとして、ジェスチャに従って)について92行の記述があり、スプリングパラメータは一つもありません。動きが実際にどのように構築されるかに関するすべてはその外側に存在しており、このドキュメントが存在する理由です。

ファイル内容
references/motion-animation.mdスプリングの用語、持続時間、トランジションの種類、割り込み可能性。
references/microinteractions-feedback.mdプレス状態、ローディング、成功・エラーフィードバック、触覚のペアリング。
references/gestures-interaction.mdスワイプ、ドラッグ、ピンチ、エッジジェスチャと、それらにモーションがどのように追従すべきか。

各情報の出どころ

はっきり述べておく価値があります。なぜなら、三つの情報源は立場が大きく異なり、それらを混同するとモーションに関するアドバイスが民間伝承になってしまうからです:

  • 原則 → hig-guide 「目的を持ってモーションを追加する」 「モーションをオプションにする」 「人々のジェスチャと期待に従った現実的なフィードバックモーションを目指す」 これらはApple自身の言葉であり、Motion に記載されています。これを引用してください。ここでの言い換えではありません。
  • スプリング名とその動作 → SwiftUIのAPI .smooth、.snappy、.bouncy は実際のデフォルト値を持つ実際のAPIです。motion-animation.md のバウンス率はそれらの特性を示すものであって、公開された定数ではありません — チューニングの出発点として扱い、Appleの仕様として引用しないでください。
  • その他すべて → 観察 これらのリファレンスは、MITライセンスの apple-design-skills コレクション(LICENSE.txt に記載あり)から改作されたもので、作者が出荷アプリから動作を推測した箇所には [observed] とマークされています。有用ではありますが、権威あるものではありません。

ここにあるものは、ui-kit-for-apple-platforms の値のように測定されたものは何もありません。その違いこそがポイントです。モーションは、このリポジトリの中で最も裏付けとなる根拠が少ない部分です。

スプリングの選択

最もフィーリングを左右する一つの選択:

スプリングバウンス使用場面
.smoothなしシート、モーダル、背景のトランジション — 注目を集めずに落ち着くべきものすべて
.snappyわずかボタン押下、トグル、選択 — 直接操作のデフォルト
.bouncy顕著アイコン押下、通知の到着、報酬のように感じられるべき瞬間

バウンスこそがすべてのシグナルです。バウンスするシートはおもちゃのように読み取られ、バウンスしないボタン押下は死んでいるように読み取られます。この一つの選択を正しく行うことは、持続時間をチューニングするよりも効果的です。

Appleのモーションを通常のモーションと区別するもの

  • 割り込み可能 ジェスチャは、アニメーションの途中でそれを逆行またはリダイレクトできなければならず、後ろにキューイングしてはいけません。応答する前に完了するものは、どれだけ速くても遅く感じられます。
  • 指を追跡し、その後引き継ぐ ドラッグ中、サーフェスはジェスチャに1:1で追従します。スプリングはリリース時にのみ引き継ぎ、ジェスチャが持っていた速度を運びます。これはHIGの 「人々のジェスチャと期待に従った現実的なフィードバックモーション」 を具体化したものです。
  • 持続時間は結果であり、入力ではない スプリングは物理法則で指定され、落ち着くときに落ち着きます。固定の300ミリ秒を求めることは、通常は間違ったツールを求めていることを意味します。
  • 位置と不透明度、サイズと色ではない 移動とフェードは物理的に読み取られます。拡大縮小と色変更はエフェクトとして読み取られます。

Reduce Motionはオプションではない

hig-guide は明確に述べています — 「モーションをオプションにする」 Web上ではそれは prefers-reduced-motion であり、動きを短くするのではなく置き換えることを意味します:スライドの代わりにクロスフェード、アニメートの代わりにカット。ui-kit-for-apple-platforms の ios-components.css は既に自身のトランジションをこのようにガードしています。それに合わせてください。

境界

  • 値(色、タイポグラフィ、コントロールの形状、マテリアル)は ui-kit-for-apple-platforms に属し、AppleのUIキットから測定されています。ここでそれらを言い直さないでください。モーションファイル内の16進カラーコードは、誰も見ない場所で古くなるコードです。
  • 何かをアニメーションさせるべきかどうか、どのプレゼンテーションを使用するか、レイアウトがどのように適応するかに関するルールは hig-guide に、実際の引用とともにあります。
  • このスキルは、動き自体がどのように構築されるかをカバーします。

関連スキル