Multi-Step Loader (マルチステップローダー)
別名 Step loader, Checklist loader
長い処理が進むにつれて、ステップの一覧が一つずつ強調されたりチェックされたりします。
使いどころ
AI による生成、オンボーディング中の処理
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にマルチステップローダー(Multi-Step Loader)を追加してください。ステップローダー(step loader)、チェックリストローダー(checklist loader)とも呼ばれます。
ステップが上から下へ一つずつ点灯し、完了するたびに小さなチェックマークがポンと現れるようにしてください。落ち着いて読みやすいペースで。
ステップは固定タイマーではなく実際の処理の進み具合に合わせて進め、完了したステップをスクリーンリーダーに伝えてください。似ているモーション
Success Checkmark (サクセスチェックマーク)
別名 Animated success tick
円とチェックマークが描かれ、操作が成功したことを伝えます。
使いどころ
フォーム送信、決済完了
[適用する場所]にサクセスチェックマーク(Success Checkmark)のアニメーションを追加してください。アニメーション付き成功チェック(animated success tick)とも呼ばれます。
円がなめらかな一筆で描かれ、続いて内側にチェックが描かれ、マーク全体が小さくやさしくポンと弾むようにしてください。落ち着いて確かな印象で。
操作が成功したときに一度だけ再生し、スクリーンリーダーが読み上げられるテキストメッセージを添え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したマークをすぐに表示してください。クリックしてください
Checkbox Check Draw (チェックボックスチェックドロー)
別名 Animated checkbox, Checkmark draw
チェックを入れると、ボックスの中にチェックマークが一筆ずつ描かれます。
使いどころ
フォーム、ToDo リスト
[適用する場所]にチェックボックスチェックドロー(Checkbox Check Draw)のアニメーションを追加してください。アニメーションチェックボックス(animated checkbox)、チェックマークドロー(checkmark draw)とも呼ばれます。
チェックを入れるとボックスが色で塗られ、チェックマークが素早くなめらかな一筆で描かれるようにしてください。チェックを外すと同じように消えます。
チェック状態を持つ本物のチェックボックスのままにし、キーボードで操作でき、フォーカスリングが見えるようにしてください。Loading & Progressのほかのモーション
Progress Ring (プログレスリング)
別名 Circular progress, Radial progress, Animated Circular Progress Bar
円弧がリングに沿って伸び、完了した割合を示します。
使いどころ
アップロード、目標、タイマー
[適用する場所]にプログレスリング(Progress Ring)を追加してください。サーキュラープログレス(circular progress)、ラジアルプログレス(radial progress)とも呼ばれます。
上端から円弧が時計回りにリングに沿って伸びて完了した割合を示し、止まるときはゆるやかに減速し、同時に中央の数字もカウントアップするようにしてください。
円弧と数字は同期させ、値は正しいプログレスバーのセマンティクスでスクリーンリーダーに伝えてください。Pulse Placeholder (パルスプレースホルダー)
別名 Skeleton pulse, placeholder-glow
グレーのプレースホルダーブロックがゆっくり明滅し、読み込み中であることを示します。
使いどころ
スケルトンスクリーン
[適用する場所]にパルスプレースホルダー(Pulse Placeholder)を追加してください。スケルトンパルス(skeleton pulse)とも呼ばれます。
これから表示されるコンテンツの形をしたグレーのブロックが、そろってゆっくり明るくなっては戻るようにしてください。穏やかで一定のリズムで。
プレースホルダーは実際のレイアウトに合わせてコンテンツが届いたときにずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。Skeleton Shimmer (スケルトンシマー)
別名 Skeleton wave, Shimmer effect, placeholder-wave
グレーのプレースホルダーの上を、明るいハイライトが横切ります。
使いどころ
コンテンツ読み込み中のプレースホルダー
[適用する場所]にスケルトンシマー(Skeleton Shimmer)を追加してください。スケルトンウェーブ(skeleton wave)、シマーエフェクト(shimmer effect)とも呼ばれます。
やわらかな光の帯がグレーのプレースホルダーの上を左から右へ横切り、次の通過まで少し間を置くようにしてください。なめらかで、ゆったりと。
プレースホルダーの形は実際のレイアウトに合わせてコンテンツ読み込み時にずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止したプレースホルダーを表示してください。