mcpField
U
universal-elements

universal-elements

github.com/dylantarreデザイン・UI132489 回インストール43 週間前に更新
リポジトリ

universal-elements について

ディズニーのアニメーション12原則をUI要素に適用するための、デザイナーや開発者向けガイドです。要素別の時間設定、主要なCSSプロパティ、CSSの基本設定を紹介します。

主な機能

  1. 0112のアニメーション原則のUIへの適用
  2. 02要素タイプ別の時間設定
  3. 03一般的なCSS動作プロパティの解説
  4. 04トランジション向けCSSの基本設定

活用シーン

  1. 01ボタンやアイコンの操作フィードバックの設計
  2. 02カードや入力欄の状態変化の設計
  3. 03ページやオーバーレイの切り替え設計
  4. 04UI全体の動きの階層とリズムの統一

インストール

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

$npx skills add https://github.com/dylantarre/animation-principles --skill universal-elements

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

詳細

あらゆる UI 要素に適用できるアニメーションの原則

ディズニーの12の原則をあらゆる UI 要素に適用し、一貫性のあるプロフェッショナルなモーションデザインを実現します。

原則をあらゆる要素に適用する

1. スクワッシュ＆ストレッチ

インタラクションに応答する要素は、押されたときに潰れ、離されたときに伸びます。控えめにし、UI では最大でも2〜5％に抑えます。

2. 予備動作

大きな動作の前に短い準備動作を入れ、これから起こることを示します。拡大する前に縮小し、前進する前に後ろへ引きます。長さは50〜100msです。

3. 演出

最も重要な要素に注意を向けます。動き、サイズ、色、z-index、ぼかしにコントラストをつけ、明確な視覚的階層を作ります。

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

ほとんどの UI にはポーズ・トゥ・ポーズを使い、開始状態と終了状態を明確に定義します。パーティクルや有機的な形状など、自然で流れるようなアニメーションにはストレート・アヘッドを使います。

5. フォロースルーとオーバーラッピング・アクション

すべてが一斉に止まることはありません。子要素は親要素より遅れて動きます。オブジェクトの後に影が落ち着きます。関連する要素の開始を20〜50msずつずらします。

6. イーズインとイーズアウト

重要なルールは、UI の動きにlinearを使わないことです。入場にはease-out、退場にはease-in、状態遷移にはease-in-outを使います。

7. アーク

自然な動きは曲線を描きます。水平方向の遷移に控えめな垂直移動を加えます。移動しながら回転させます。機械的な直線の動きは避けます。

8. 二次動作

主要な動作には、それを支えるアニメーションを加えます。影の変化、色の変化、アイコンの回転、光彩効果などは、動作を妨げずに強調します。

9. タイミング
要素の種類速い標準遅い
マイクロ（アイコン、ボタン）50-100ms100-200ms200-300ms
小（カード、入力欄）150-200ms200-300ms300-400ms
中（モーダル、メニュー）200-250ms250-350ms350-500ms
大（ページ、オーバーレイ）300-400ms400-600ms600-800ms
10. 誇張

アニメーションの強さは状況に合わせます。お祝いの場面では20〜30％の誇張が許容されます。プロフェッショナルな場面では10％未満に抑えます。エラー状態では、より劇的な表現にできます。

11. 立体感のある描画

視覚的な一貫性を保ちます。角丸の比率、影の方向、間隔のリズム、タイポグラフィのスケールを統一します。アニメーション中に歪んだり崩れたりする要素があってはいけません。

12. 魅力

目指すのは、注意をそらさずに楽しさを生み出すことです。滑らかなアニメーションは信頼感を高めます。キビキビしたフィードバックは応答性を感じさせます。優れたアニメーションは、気づかれるのではなく感じられるものです。

CSS の基礎

/* Universal transition base */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standard durations as custom properties */
:root {
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Apply to any interactive element */
.interactive {
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}

重要なプロパティ（あらゆる要素）

  • transform：位置と拡大縮小を自在に制御します
  • opacity：表示状態を遷移させます
  • transition：状態変化を表現します
  • animation：複雑なシーケンスを表現します
  • box-shadow：奥行きと強調を表現します

コメント

Markdown 対応