Dot Pattern Glow (ドットパターングロー)
別名 Dotted glow background, Dot grid
ドットのグリッドが波のように明滅したり光ったりします。
使いどころ
控えめなセクション背景
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にドットパターングロー(Dot Pattern Glow)の背景を追加してください。ドットグロー背景(dotted glow background)、ドットグリッド(dot grid)とも呼ばれます。
細かいドットのグリッドは動かさず、柔らかい光の帯がその上をゆっくり横切り、通ったドットを光らせるようにしてください。穏やかで控えめに。
上に載るコンテンツが読みやすいようドットは薄くし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は光を止めてください。似ているモーション
Animated Grid Pattern (グリッドパターンアニメーション)
別名 Flickering grid, Grid background
線や正方形のグリッドで、セルがフェードしたり明滅したりします。
使いどころ
テック系・SaaS のヒーロー
[適用する場所]にグリッドパターンアニメーション(Animated Grid Pattern)の背景を追加してください。フリッカリンググリッド(flickering grid)、グリッド背景(grid background)とも呼ばれます。
薄い線のグリッドは動かさず、散らばったいくつかのセルがそれぞれ違うタイミングでゆっくりフェードイン・アウトするようにしてください。静かで控えめに、一斉には光らせないでください。
コンテンツの背後に置いてクリックを受け取らないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は明滅を止めてください。マウスを乗せてください
Background Boxes (背景ボックス)
別名 Tile hover background
斜めに傾いたタイルのグリッドが、ポインターが通るたびに色づいて光ります。
使いどころ
ヒーローの背景
[適用する場所]に背景ボックス(Background Boxes)のエフェクトを追加してください。タイルホバー背景(tile hover background)とも呼ばれます。
エリアを斜めに傾いたタイルのグリッドで埋め、ポインターが通ったタイルはすぐに光ってからゆっくり元に戻り、短い軌跡が残るようにしてください。
タイルはコンテンツの背後に置いてクリックを妨げないようにし、タッチデバイスではタップしたタイルを光らせてください。Starfield (スターフィールド)
別名 Stars background, Twinkling stars
宇宙のような暗い背景の上で、小さな星がまたたいたり漂ったりします。
使いどころ
宇宙や夜がテーマのヒーロー
[適用する場所]にスターフィールド(Starfield)の背景を追加してください。星空背景(stars background)、またたく星(twinkling stars)とも呼ばれます。
大きさの異なる小さな星がそれぞれのペースで柔らかくまたたき、星空全体はとてもゆっくり漂うようにしてください。静かで穏やかに。
軽く動くよう星の数は控えめにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はまたたきと漂う動きを止めてください。Background & Ambientのほかのモーション
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)にしている場合は止めてください。Mesh Gradient (メッシュグラデーション)
別名 Animated mesh gradient
複数の色の点がなめらかに混ざり合いながら漂い、有機的で多彩な背景を作ります。
使いどころ
ランディングページの背景
[適用する場所]にメッシュグラデーション(Mesh Gradient)の背景を追加してください。アニメーションメッシュグラデーション(animated mesh gradient)とも呼ばれます。
いくつかの柔らかな色の塊が互いに溶け合いながらエリア内をゆっくり漂い、背景が有機的に移り変わり続けるようにしてください。とてもゆっくりなめらかに。
どの色の混ざり具合でも上のコンテンツが読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は漂う動きを止めてください。