Pointer Highlight (ポインターハイライト)
テキストがスクロールで画面に入ると、ポインターの矢印が単語の周りにハイライトの枠を描きます。
使いどころ
見出し、マーケティングコピー
バリエーション
- Pointer Highlight
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にポインターハイライト(Pointer Highlight)の効果を追加してください。
テキストがスクロールで画面に入ったら、キーワードの周りに左から右へ枠が描かれ、小さなポインターの矢印がその角に沿って動くようにしてください。なめらかで一定の速さで、誰かが手で単語に印をつけているような感じです。
最初に画面に入ったときに一度だけ、テキストをずらさずに描き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成した枠をすぐに表示してください。似ているモーション
ABC DEFG HIJ KL
Text Highlighter (テキストマーカー)
別名 Highlight Marker, Marker Underline, Hero Highlight
マーカーのような色の帯がフレーズの上に引かれ、強調します。
使いどころ
重要なフレーズの強調
[適用する場所]にテキストマーカー(Text Highlighter)エフェクトを追加してください。ハイライトマーカー(highlight marker)、マーカーアンダーライン(marker underline)とも呼ばれます。
マーカーのような色の帯が、ペンで線を引くようにキーフレーズの背後を左から右へなめらかに走るようにしてください。
フレーズがスクロールで画面に入ったときに一度だけ再生し、帯の上でもテキストが読みやすいようにし、フレーズが2行に折り返しても帯が正しく追従するようにしてください。ABC DEF
マウスを乗せてください
Underline Draw (アンダーラインドロー)
別名 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
ホバーすると、リンクの下に片側または中央から下線が伸びます。
使いどころ
ナビゲーションリンク、インラインリンク
[適用する場所]にアンダーラインドロー(Underline Draw)のホバーエフェクトを追加してください。アニメーション下線(animated underline)、ホバー下線アニメーション(hover underline animation)とも呼ばれます。
ポインターがリンクに乗ると、テキストの下に下線が左から右へなめらかに伸び、ポインターが離れると縮んで戻るようにしてください。素早く控えめな動きにしてください。
下線で周囲のレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を表示してください。Line Drawing (ラインドローイング)
別名 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
破線オフセットをアニメーションさせ、SVGの線がパスに沿って描かれていくように見せます。
使いどころ
アイコン、ロゴ、イラスト
[適用する場所]にラインドローイング(Line Drawing)アニメーションを追加してください。パスドローイング(path drawing)、セルフドローイングSVG(self-drawing SVG)とも呼ばれます。
各線がパスに沿って始点から終点まで滑らかに自分で描かれていくように見せ、チェックマークのような2本目の線は1本目のすぐ後に続けてください。
ループさせず画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は描き終わった線を表示してください。Micro-interactionのほかのモーション
A
クリックしてください
Press (Button Tap Scale) (プレス)
別名 Tap feedback, Active scale, Press state
押している間は要素が少し縮み、離すと弾むように元に戻ります。
使いどころ
ボタン、カード
[適用する場所]にプレス(Press (Button Tap Scale))の効果を追加してください。タップフィードバック(tap feedback)、押下状態(press state)とも呼ばれます。
押している間は要素が少し縮んでわずかに暗くなり、離すと小さく弾みながら元のサイズに戻るようにしてください。素早く控えめに。
キーボードやタッチで押したときも同じ反応を見せ、周りのレイアウトがずれないようにしてください。ドラッグしてください
Pull to Refresh (プルトゥリフレッシュ)
別名 Swipe to refresh
リストを下に引っ張るとスピナーが現れ、離すとコンテンツを再読み込みします。
使いどころ
フィード、受信トレイ
[適用する場所]にプルトゥリフレッシュ(Pull to Refresh)のインタラクションを追加してください。スワイプトゥリフレッシュ(swipe to refresh)とも呼ばれます。
リストを一番上から下に引っ張ると、少し抵抗を感じさせながら指に追従し、引く量に合わせて回るスピナーが現れるようにしてください。離したらコンテンツの再読み込み中もスピナーが回り続け、終わったらリストがなめらかに上へ戻るようにしてください。
リストがすでに一番上までスクロールされているときだけ開始し、キーボードやスクリーンリーダーの利用者向けに通常の更新ボタンも用意してください。クリックしてください
Ripple (リップル)
別名 Material ripple, Touch ripple, Ripple Button, Ink ripple
クリックやタップした位置から円形の波が広がり、フェードアウトします。
使いどころ
ボタン、リスト項目
[適用する場所]にリップル(Ripple)の効果を追加してください。マテリアルリップル(material ripple)、インクリップル(ink ripple)とも呼ばれます。
クリックやタップのたびに、押した位置からやわらかい円形の波が要素全体を覆うまで広がり、広がりながら薄れていくようにしてください。素早く軽やかに。
波は要素の形で切り抜き、素早く連続して押したときはそれぞれ別の波を出し、キーボードで押したときは中心から広げてください。