Light Rays (ライトレイ)
別名 God rays, Light shafts
柔らかな光の筋が背景の上でゆらゆらと揺れます。
使いどころ
雰囲気のあるヘッダー
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にライトレイ(Light Rays)の背景を追加してください。ゴッドレイ(god rays)、ライトシャフト(light shafts)とも呼ばれます。
柔らかく半透明な光の筋を上から扇状に広げ、少し明るくなったり暗くなったりしながら左右にゆっくり揺れるようにしてください。ゆったりと雰囲気のある動きで。
光の筋はコンテンツの背後に置き、読みやすさを損なわない程度に薄くし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。似ているモーション
Spotlight (スポットライト)
別名 Spotlight sweep, Light cone
柔らかな光の円錐や光だまりがすっと入ってきて、背景の一部を照らします。
使いどころ
ヒーロー見出し
[適用する場所]にスポットライト(Spotlight)のエフェクトを追加してください。スポットライトスイープ(spotlight sweep)、ライトコーン(light cone)とも呼ばれます。
ページが読み込まれたら、柔らかな光の円錐が角から斜めに差し込み、見出しの上で止まって、届くにつれて明るくなるようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から光が当たった状態で表示してください。Aurora Background (オーロラ背景)
別名 Northern lights gradient
ぼかしたやわらかな色の帯が、オーロラのようにコンテンツの背後を漂います。
使いどころ
ヒーローセクション
[適用する場所]にオーロラ背景(Aurora Background)を追加してください。ノーザンライツグラデーション(northern lights gradient)とも呼ばれます。
ぼかしたやわらかな色の帯がコンテンツの背後でゆっくり漂い揺れ、重なり溶け合ってオーロラのように見えるようにしてください。とてもゆっくり、夢のように。
上のテキストは読みやすく保ち、なめらかさを保つために帯のぼかしを毎フレームかけ直さないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は漂う動きを止めてください。Lamp Effect (ランプエフェクト)
別名 Lamp glow
光るランプのラインが横に広がり、下の見出しに光の円錐を投げかけます。
使いどころ
ダークなヒーロー見出し
[適用する場所]にランプエフェクト(Lamp Effect)を追加してください。ランプグロー(lamp glow)とも呼ばれます。
セクションが画面に入ったら、細く光るラインが中央から左右に広がり、下の見出しに柔らかな光の円錐を投げかけ、見出しは浮き上がりながらフェードインするようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は照らされた見出しを最初から表示してください。Background Beams (背景ビーム)
別名 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
細く光る線が経路に沿って進み、ときには面にぶつかって弾けます。
使いどころ
ヒーローの背景
[適用する場所]に背景ビーム(Background Beams)の効果を追加してください。ライトビーム(light beams)、背景ライン(background lines)とも呼ばれます。
薄い曲線の経路を背景に置き、その上を短く光る筋が一つずつ、落ち着いた一定のペースで進むようにしてください。
ビームはタイミングをずらして同時に動かないようにし、コンテンツの背後に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。Background & Ambientのほかのモーション
Mesh Gradient (メッシュグラデーション)
別名 Animated mesh gradient
複数の色の点がなめらかに混ざり合いながら漂い、有機的で多彩な背景を作ります。
使いどころ
ランディングページの背景
[適用する場所]にメッシュグラデーション(Mesh Gradient)の背景を追加してください。アニメーションメッシュグラデーション(animated mesh gradient)とも呼ばれます。
いくつかの柔らかな色の塊が互いに溶け合いながらエリア内をゆっくり漂い、背景が有機的に移り変わり続けるようにしてください。とてもゆっくりなめらかに。
どの色の混ざり具合でも上のコンテンツが読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は漂う動きを止めてください。Meteors (メテオ)
別名 Meteor shower, Shooting Stars
光る尾を引く斜めの筋が、カードやセクションを横切って流れ落ちます。
使いどころ
カードやヒーローのアクセント
[適用する場所]にメテオ(Meteors)のエフェクトを追加してください。流星群(meteor shower)、流れ星(shooting stars)とも呼ばれます。
消えていく尾を引く小さな筋をいくつか、ランダムなタイミングでエリアを斜めに横切らせてください。一つひとつは素早く流れてすぐ消えます。
アクセントにとどまるよう数は少なめにし、エリアの端で切り取り、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。Noise / Grain Texture (ノイズ/グレインテクスチャ)
別名 Film grain, Noise background
細かな粒状のテクスチャがページに重なり、ときにフィルムグレインのようにちらつきます。
使いどころ
グラデーションに手触りのある奥行きを加える
[適用する場所]にノイズ/グレインテクスチャ(Noise / Grain Texture)のオーバーレイを追加してください。フィルムグレイン(film grain)、ノイズ背景(noise background)とも呼ばれます。
細かく薄い粒状のテクスチャを表面に重ね、フィルムグレインのように小刻みにちらつかせてください。控えめに、コンテンツを濁らせるほど強くしないでください。
クリックはオーバーレイを通り抜けるようにし、テクスチャは毎フレームではなく一度だけ生成し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。