Spotlight (スポットライト)
別名 Spotlight sweep, Light cone
柔らかな光の円錐や光だまりがすっと入ってきて、背景の一部を照らします。
使いどころ
ヒーロー見出し
バリエーション
- sweep in
- pulsing
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスポットライト(Spotlight)のエフェクトを追加してください。スポットライトスイープ(spotlight sweep)、ライトコーン(light cone)とも呼ばれます。
ページが読み込まれたら、柔らかな光の円錐が角から斜めに差し込み、見出しの上で止まって、届くにつれて明るくなるようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から光が当たった状態で表示してください。似ているモーション
Lamp Effect (ランプエフェクト)
別名 Lamp glow
光るランプのラインが横に広がり、下の見出しに光の円錐を投げかけます。
使いどころ
ダークなヒーロー見出し
[適用する場所]にランプエフェクト(Lamp Effect)を追加してください。ランプグロー(lamp glow)とも呼ばれます。
セクションが画面に入ったら、細く光るラインが中央から左右に広がり、下の見出しに柔らかな光の円錐を投げかけ、見出しは浮き上がりながらフェードインするようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は照らされた見出しを最初から表示してください。Light Rays (ライトレイ)
別名 God rays, Light shafts
柔らかな光の筋が背景の上でゆらゆらと揺れます。
使いどころ
雰囲気のあるヘッダー
[適用する場所]にライトレイ(Light Rays)の背景を追加してください。ゴッドレイ(god rays)、ライトシャフト(light shafts)とも呼ばれます。
柔らかく半透明な光の筋を上から扇状に広げ、少し明るくなったり暗くなったりしながら左右にゆっくり揺れるようにしてください。ゆったりと雰囲気のある動きで。
光の筋はコンテンツの背後に置き、読みやすさを損なわない程度に薄くし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
ポインターを動かしてください
Cursor Spotlight (カーソルスポットライト)
別名 Flashlight cursor, Spotlight effect
ポインターの周りの光の円がコンテンツを照らし出し、それ以外は暗いままです。
使いどころ
ヒーローセクション、リビール演出
[適用する場所]にカーソルスポットライト(Cursor Spotlight)の効果を追加してください。懐中電灯カーソル(flashlight cursor)、スポットライト効果(spotlight effect)とも呼ばれます。
やわらかな光の円がポインターを追いかけてその下のコンテンツを照らし出し、それ以外の部分は暗くしたままにしてください。
追いかけるポインターがないタッチデバイスでは、代わりにコンテンツ全体を明るく表示してください。A
ポインターを動かしてください
Card Spotlight (カードスポットライト)
別名 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
やわらかな放射状の光がポインターを追ってカードの表面を移動し、下の背景を浮かび上がらせます。
使いどころ
機能紹介カード、ベントーグリッド
[適用する場所]にカードスポットライト(Card Spotlight)のエフェクトを追加してください。スポットライトホバー(spotlight hover)、ポインターグロー(pointer glow)、マウス追従グロー(mouse-following glow)、ラジアルグラデーションホバー(radial gradient hover)とも呼ばれます。
やわらかくほのかな放射状の光がポインターを追ってカードの表面を移動し、ポインターが入ったらフェードイン、離れたらフェードアウトするようにしてください。
文字が読みやすいよう光はカードの内容の背後に置き、タッチデバイスではカードを光らせないでください。Background & Ambientのほかのモーション
Starfield (スターフィールド)
別名 Stars background, Twinkling stars
宇宙のような暗い背景の上で、小さな星がまたたいたり漂ったりします。
使いどころ
宇宙や夜がテーマのヒーロー
[適用する場所]にスターフィールド(Starfield)の背景を追加してください。星空背景(stars background)、またたく星(twinkling stars)とも呼ばれます。
大きさの異なる小さな星がそれぞれのペースで柔らかくまたたき、星空全体はとてもゆっくり漂うようにしてください。静かで穏やかに。
軽く動くよう星の数は控えめにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はまたたきと漂う動きを止めてください。Vortex (ボルテックス)
別名 Swirling particles
粒子が渦潮のように中心の周りをらせん状に回ります。
使いどころ
ドラマチックなヒーロー背景
[適用する場所]にボルテックス(Vortex)の背景を追加してください。スワーリングパーティクル(swirling particles)とも呼ばれます。
小さな粒子が渦潮のように中心点の周りをらせん状に内側へ回り込み、外縁でフェードインして中心に近づくとフェードアウトする、なめらかで途切れない渦にしてください。
粒子の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は渦を止めてください。Wave Background (ウェーブ背景)
別名 Wavy background, Animated waves
重なり合う波線や波形が横方向にうねるように動きます。
使いどころ
セクションの区切り、ヒーローの下端
[適用する場所]にウェーブ背景(Wave Background)を追加してください。ウェービー背景(wavy background)、アニメーテッドウェーブ(animated waves)とも呼ばれます。
重なった数本の波形が少しずつ違う速さで横へ流れ、水のように重なり合いながら移ろうようにしてください。ゆっくり、なめらかに。
各波はつなぎ目が見えないように途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波を止めてください。