Button Loading State (ボタンローディングステート)
別名 Spinner button, Loading button, Button spinner, Submit loading state
処理の実行中、ボタンのラベルが小さなスピナーに置き換わるか、スピナーが追加されます。
使いどころ
フォーム送信、非同期の操作
バリエーション
- spinner + text
- spinner only
- spinner
- pulse loading
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にボタンローディングステート(Button Loading State)を追加してください。スピナーボタン(spinner button)、ローディングボタン(loading button)とも呼ばれます。
押すとボタンが軽く沈み、ラベルがフェードアウトして代わりに小さなスピナーが処理中に表示され、終わったらラベルが戻るようにしてください。
読み込み中もボタンの幅は変えず、連続して押せないようにし、処理中であることをスクリーンリーダーに伝えてください。似ているモーション
Circular Spinner (サーキュラースピナー)
別名 Spinner, Throbber, Circular indeterminate
リングや円弧が回り続け、読み込み中であることを示します。
使いどころ
ボタン、ページの読み込み
[適用する場所]にサーキュラースピナー(Circular Spinner)を追加してください。スピナー(spinner)、スロバー(throbber)とも呼ばれます。
円弧が薄いリングに沿って一定の速さで回りながら伸び縮みし、なめらかに途切れず動くようにしてください。
回転はつなぎ目なく続け、スクリーンリーダー向けに読み込み中のラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。クリックしてください
Copy-to-Clipboard Feedback (クリップボードコピーフィードバック)
別名 Copied state, Copy icon to checkmark
コピーアイコンがチェックマークに変わり、ラベルが一瞬「コピーしました」になります。
使いどころ
コードブロック、共有リンク
[適用する場所]にクリップボードコピーフィードバック(Copy-to-Clipboard Feedback)のアニメーションを追加してください。コピー済み表示(copied state)、コピーアイコンからチェックマーク(copy icon to checkmark)とも呼ばれます。
コピーボタンを押すと、コピーアイコンが素早く縮んで消え、代わりにチェックマークが描かれてラベルが「コピーしました」に変わり、少ししたらすべてなめらかに元に戻るようにしてください。
切り替え中もボタンのサイズを変えずに何もずれないようにし、コピー済みの状態をスクリーンリーダーに伝えてください。Success Checkmark (サクセスチェックマーク)
別名 Animated success tick
円とチェックマークが描かれ、操作が成功したことを伝えます。
使いどころ
フォーム送信、決済完了
[適用する場所]にサクセスチェックマーク(Success Checkmark)のアニメーションを追加してください。アニメーション付き成功チェック(animated success tick)とも呼ばれます。
円がなめらかな一筆で描かれ、続いて内側にチェックが描かれ、マーク全体が小さくやさしくポンと弾むようにしてください。落ち着いて確かな印象で。
操作が成功したときに一度だけ再生し、スクリーンリーダーが読み上げられるテキストメッセージを添え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したマークをすぐに表示してください。クリックしてください
Long Press (長押し)
別名 Press and hold, Touch and hold
要素をしばらく押し続けると、追加の操作や進行度の塗りが現れます。
使いどころ
コンテキストメニュー、長押しで確定
[適用する場所]に長押し(Long Press)のインタラクションを追加してください。プレスアンドホールド(press and hold)、タッチアンドホールド(touch and hold)とも呼ばれます。
押している間は要素が少し沈み、進行度の塗りが一定のペースで横切るようにしてください。塗りが満ちたら弾むように戻ってメニューを開き、途中で離したらキャンセルして塗りをリセットしてください。
キーボードやスクリーンリーダーの利用者にも同じ操作へたどり着く別の手段を用意し、長押しでテキスト選択やブラウザ標準のコンテキストメニューが出ないようにしてください。Loading & Progressのほかのモーション
Determinate Progress Bar (プログレスバー)
別名 Progress bar fill, Progress Indicator, Progress bar, Circular progress
タスクの進み具合に合わせて、バーが左から右へ満ちていきます。
使いどころ
アップロード、複数ステップのフォーム
[適用する場所]にプログレスバー(Determinate Progress Bar)を追加してください。プログレスバーフィル(progress bar fill)、プログレスインジケーター(progress indicator)とも呼ばれます。
バーは実際の進み具合に合わせて左から右へ満ちていき、更新のたびになめらかに動き、横にパーセンテージを表示してください。
現在値・最小値・最大値を持つ正しいプログレスバーのセマンティクスにしてスクリーンリーダーで読めるようにし、バーが逆戻りしないようにしてください。Indeterminate Linear Progress (不確定プログレスバー)
別名 Indeterminate progress bar, Buffer bar
所要時間がわからないとき、バーの一部がトラックの上を繰り返し流れます。
使いどころ
ページ上部やカードの読み込み
[適用する場所]に不確定プログレスバー(Indeterminate Linear Progress)を追加してください。インデターミネイトプログレスバー(indeterminate progress bar)とも呼ばれます。
タスクの長さがわからない間、短いバーがトラックの端から端へ素早くなめらかに何度も流れるようにしてください。
バーはトラックに完全に入ってから完全に出ていくようにしてループのつなぎ目を見せず、スクリーンリーダー向けに処理中のプログレスバーとしてマークしてください。