apple-design

Name: apple-design
Author: gethamster

github.com/gethamsterデザイン・UI3365 回インストール5 週間前に更新

リポジトリ

apple-design について

apple-designは、AppleのWWDCで紹介されたモーション設計をWeb向けにまとめたスキルです。スプリングを使った、中断可能で速度を反映するインタラクションに焦点を当てています。

主な機能

01WWDCのUI原則をWebに応用
02画面上の現在値から動きを開始
03ユーザーの速度を引き継いで予測
04動きをいつでもつかんで反転
05中断可能なスプリングアニメーション

活用シーン

01ドラッグに応答するUIモーションの設計
02いつでも反転できる操作の構築
03CSSとPointer Eventsでの原則の適用

インストール

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

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

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

同梱ファイル

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

sections/

1-response-kill-latency.md

10-gesture-design-details-the-feel-checklist.md

11-frame-level-smoothness.md

12-materials-depth-translucency-conveys-hierarchy.md

13-multimodal-feedback-motion-sound-haptics.md

14-reduced-motion-accessibility.md

15-typography-optical-sizing-tracking-leading.md

16-design-foundations-the-eight-principles.md

17-process.md

2-direct-manipulation-1-1-tracking.md

3-interruptibility-the-single-most-important-principle.md

4-behavior-over-animation-use-springs.md

5-velocity-handoff-the-seam-between-drag-and-animation.md

6-momentum-projection-animate-to-where-the-gesture-is-going.md

7-spatial-consistency-symmetric-paths-anchored-origins.md

8-hint-in-the-direction-of-the-gesture.md

9-rubber-banding-soft-boundaries.md

quick-reference.md

the-core-idea.md

詳細

Appleのデザイン

Appleが、コンピューターを操作している感覚をなくし、自分自身の延長のように感じられるインターフェイスをどのように構築しているかをご紹介します。この知見は、AppleのWWDCのデザイントーク、主に Designing Fluid Interfaces（WWDC 2018）をもとに、ウェブプラットフォーム（CSS、Pointer Events、requestAnimationFrame、Motion／Framer Motionなどのスプリングライブラリ）向けにまとめ、翻訳したものです。

一貫しているのは、動きが現在画面に表示されている値から始まり、ユーザーの速度を受け継ぎ、勢いを先へと投影し、いつでもつかんで逆方向に動かせるとき、インターフェイスは生き生きと感じられるということです。スプリングは、いつでも動きを中断でき、速度を考慮する性質を本質的に備えているため、これらすべてを自然に実現するツールです。

Markdown 対応

ログインしてコメント