forms-inputs

フォームと入力アニメーションの原則

Disneyの12の原則をフォームに適用し、明確なフィードバックと快適なインタラクションを実現します。

フォーム要素に適用する原則

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

入力フィールドはフォーカス時にわずかに拡大できます（高さを1～2px）。送信ボタンはクリック時に縮みます。チェックボックスは切り替え時に弾みます。

2. 予備動作

ユーザーが入力する前にラベルを上に移動させます。入力を始める前にフォーカスリングを表示します。入力操作に備えることができます。

3. 演出

フォーカス中の入力フィールドは、境界線の色、シャドウ、ラベルの位置によって目立たせます。他のフィールドは少し薄く表示できます。視線を誘導します。

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

入力フィールドの状態を定義します。デフォルト、フォーカス、入力済み、有効、無効、無効化。各状態を明確なポーズで表現し、滑らかに切り替えます。

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

フローティングラベルは最終位置に到達してから落ち着きます。検証アイコンは少し弾ませることができます。文字数カウンターは控えめな動きで更新します。

6. スローイン＆スローアウト

フォーカスのトランジションにはease-out、検証フィードバックにはease-in-out、ラベルの移動にはcubic-bezier(0.4, 0, 0.2, 1)を使います。

7. アーク

フローティングラベルは上に移動する際、直線ではなく少し弧を描くようにします。機械的な動きに自然な印象を加えます。

8. 副次アクション

境界線を強調する（主動作）間に、ラベルを移動させ（副次動作）、ヘルパーテキストを表示します（第3の動作）。過剰にならないよう調整します。

9. タイミング

• フォーカスの境界線：100～150ms
• ラベルの移動：150～200ms
• 検証フィードバック：200ms
• エラー時の揺れ：300ms（3～4サイクル）
• 成功チェック：250ms
• チェックボックスの切り替え：150ms

10. 誇張

エラー状態では揺らすことができます（4～6px、2～3回）。成功状態では短く緑色に点滅させることができます。無効な入力には、明確で目立つフィードバックが必要です。

11. 立体感のある描画

境界線の角丸を統一します。変形中もラベルのタイポグラフィが鮮明に保たれるようにします。アイコンは縦横比を保って拡大縮小します。

12. 魅力

レスポンシブなフォームはモダンな印象を与えます。マイクロアニメーションでユーザーを誘導します。満足感のあるフィードバックはフォームの途中離脱を減らします。投資する価値があります。

CSSの実装

.input-field {
  transition: border-color 150ms ease-out,
              box-shadow 150ms ease-out;
}

.floating-label {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              font-size 200ms ease-out,
              color 150ms ease-out;
}

.input-field:focus + .floating-label {
  transform: translateY(-24px) scale(0.85);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

主なプロパティ

• transform：translateY（ラベル）、translateX（揺れ）
• border-color：状態の表示
• box-shadow：フォーカスリング
• color：ラベル／テキストの状態
• opacity：ヘルパーテキスト、アイコン