mcpField
F
feedback-indicators

feedback-indicators

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

feedback-indicators について

ディズニーのアニメーション12原則を使い、操作確認アニメーションを設計するためのスキルです。成功・エラー表示のタイミング、動き、アクセシビリティ、実装パターンを扱います。

主な機能

  1. 0112原則に基づくフィードバック指針
  2. 02種類別のタイミング推奨
  3. 03成功・エラーの動きのパターン
  4. 04テキスト表示と動きの軽減への配慮

活用シーン

  1. 01フォーム検証アニメーションの設計
  2. 02成功・エラー通知の作成
  3. 03アクセシブルな保存状態表示の追加

インストール

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

$npx skills add https://github.com/dylantarre/animation-principles --skill feedback-indicators

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

詳細

フィードバックインジケーターのアニメーション

アクションの確認アニメーションにディズニーの12の原則を適用します。

原則の適用

スクワッシュ＆ストレッチ：成功を示すチェックマークは、オーバーシュートするように拡大できます。描画時に縮み、完了時に拡大します。

予備動作：フィードバックを表示する前に、短い予備動作を入れます。確認の前に50msの準備時間を設けます。

演出：フィードバックはアクションが行われた場所に表示します。ボタンにはチェックマーク、フィールドにはバリデーションを表示します。

ストレート・アヘッドとポーズ・トゥ・ポーズ：フィードバックの状態を定義します：ニュートラル → 処理中 → 成功／エラー。

フォロースルーとオーバーラッピング：アイコンをアニメーションさせてから、ラベルを表示します。確認要素の表示に時間差をつけます。

スローイン・スローアウト：成功：イーズアウト（確信を感じさせる登場）。エラー：イーズイン・アウト（揺れが収まります）。

弧：チェックマークは直線ではなく弧を描いて表示します。エラーのX印は自然に交差させます。

二次動作：チェックマークの描画に、色の変化とスケールのバウンスを加えて、豊かなフィードバックにします。

タイミング：

  • 即時フィードバック：100～200ms（フォームのバリデーション）
  • 成功の確認：300～500ms（チェックマークの描画）
  • エラー表示：400ms（揺れ＋メッセージ）
  • 自動非表示：表示から2000～4000ms後

誇張：成功は祝福する価値があります。スケールを1.2までオーバーシュートさせ、鮮やかな色と確信に満ちた動きを使います。

立体感のある描画：フィードバックアイコンは一目でわかるようにします。100ms以内に認識できるようにします。

魅力：肯定的なフィードバックは、報われたと感じられるものにします。否定的なフィードバックは、罰を与えるのではなく、毅然としたものにします。

タイミングの推奨事項

フィードバックの種類継続時間自動非表示イージング
インラインバリデーション150msなしイーズアウト
チェックマークの描画400ms3000msイーズアウト
成功トースト300ms4000msイーズアウト
エラーの揺れ400msなしイーズイン・アウト
エラートースト300ms6000msイーズアウト
保存インジケーター200ms2000msイーズアウト

実装パターン

/* Checkmark draw */
.checkmark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: draw-check 400ms ease-out forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* Success with scale */
.success-icon {
  animation: success 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes success {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Error shake */
.error-shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Inline validation */
.field-valid {
  animation: valid-pop 200ms ease-out;
}

@keyframes valid-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

SVGチェックマークのパターン

<svg class="checkmark" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#10B981"/>
  <path
    class="check-path"
    d="M7 13l3 3 7-7"
    stroke="white"
    stroke-width="2"
    fill="none"
  />
</svg>

自動非表示のパターン

// Show success, auto-hide
element.classList.add('success-visible');

setTimeout(() => {
  element.classList.remove('success-visible');
  element.classList.add('success-hidden');
}, 3000);

主なルール

  1. フィードバックはアクションから100ms以内に表示する必要があります
  2. 成功状態：短く祝福し、表示し続けないようにします
  3. エラー状態：ユーザーが確認するまで表示し続けます
  4. アクセシビリティのため、アイコンと必ずテキストを併記します
  5. prefers-reduced-motion：状態を即時に切り替え、アニメーションは行いません

コメント

Markdown 対応