四角い窓が開く リビールの動き

通称：クリップパスアニメーションClip Reveal

開く向き
速さの変わり方

要素の位置は動かさず、見える範囲（窓）が端から広がって中身が現れます。写真が動かないので、ふわっと出る動きより落ち着いた印象になります。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「クリップパスアニメーション」（Clip Reveal）と呼ばれる動きです。

# 作ってほしい動き
Clip Reveal（四角い窓が開く）。写真が画面に入ったとき、位置は動かさずに、見える範囲を端から広げて中身を見せる。

# 動き
- きっかけ：写真を包む枠が画面に 30% 入ったとき。1回だけ動かす（写真そのものは窓で全部隠れていて、画面に入っても知らせが来ないため、枠で見る）
- 始まり：clip-path: inset(0 100% 0 0)（左から開く。何も見えない状態）
- 終わり：clip-path: inset(0)（全部見える）
- 時間：0.9秒
- 速さの変わり方：ゆっくり始まりすっと止まる（cubic-bezier(0.77, 0, 0.18, 1)）

# 付ける場所
- 写真と文章を左右に並べたセクションの写真

# 守ってほしいこと
- 透明にはしない。窓の端が動いて見えることが、この動きの持ち味
- 文章には付けない。文字が端から欠けて見え、読みにくい

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

隠れていた写真や見出しが、窓・帯・幕・線によって現れる動き（リビール）を8種類の型に分け、AIへの指示文・動く見本・コードを載せています。見本の下のつまみや選択肢で時間や向きを変えると、指示文とコードの値も同じものに変わります。

リビールの動きはどの型を選ぶか

リビールは、要素そのものを動かすのではなく、要素を見せる範囲を動かす演出です。ふわっと出る動きより印象が強いので、写真や大きな見出しなど、そのページで特に見てほしいものに絞って使います。まず「写真に付けるか、文字に付けるか」を決め、次にサイトの雰囲気（落ち着いた・柔らかい・勢いがある）で型を選びます。迷ったら、写真には四角い窓が開く、見出しには文字が行ごとにのぞくが手堅い組み合わせです。

こんなとき 向いている型
写真を動かさず、きちんとした印象で見せたい四角い窓が開く
メインの写真を柔らかく、目を引くように見せたい丸い窓が広がる
速さや勢いを感じさせたい（スポーツ・車・IT）斜めの窓が開く
新商品や完成した作品のお披露目幕が左右に開く
見せ方に個性を出したいブランドサイト色の帯が横切る
要素ではなく、ページを移るときの画面全体を幕で切り替えたいワイプトランジション・シャッタートランジション（画面の切り替えの動き）
セクションの切り替わりをわかりやすくしたい線が伸びて見出しが出る
トップページの大きなキャッチコピー文字が行ごとにのぞく
見出しを1文字ずつ・1語ずつ動かしたい1文字ずつ順番に出る・タイプライターで打たれるなど（文字の動き）
空間の写真に奥行きを出したい（住まい・ホテル・飲食店）覆いが外れて写真が引く

どの型でも守ること

  1. 見せる範囲は clip-path か overflow: hidden で切る。width や height を 0 から広げると、写真の縦横の比が崩れ、まわりの要素も押されます。
  2. 動きを控える設定の人には、窓・帯・幕を出さない。@media (prefers-reduced-motion: reduce) の中で、中身をはじめから見せます。見本の「動きを控える設定で見る」で、その見え方を確かめられます。
  3. 最初に隠す指定は、JavaScript が付ける class の下に書く。JavaScript が読み込めなかったときに、写真や見出しが隠れたままになるのを防ぎます。
  4. 1ページで使うのは1〜2か所にする。リビールは目立つ動きです。あちこちで窓が開くと、どこを見てほしいのかが伝わらなくなります。
  5. 本文には付けない。文字が欠けた状態や、帯に隠れた状態で読ませることになります。付けるのは写真と大きな見出しまでにします。

よくある質問 (FAQ)

ふわっと出る動きは要素そのものを動かし、リビールは見せる範囲を動かします。リビールでは写真の位置や濃さは変わらず、窓や帯の端が動いて見えるので、輪郭のはっきりした強い印象になります。そのぶん、使う場所を絞ります。

いまの主なブラウザ（Chrome・Edge・Safari・Firefox）では、inset()・circle()・polygon() のどれも動きます。始まりと終わりで同じ形（inset どうし、polygon なら同じ点の数）にそろえることが、なめらかに動かすための条件です。

何で隠して、どちらから開くかです。「かっこよく出して」だけだと、ふわっと出る動きになりがちです。ここの指示文は、窓・帯・幕のどれを使うか、開く向き、始まりと終わりの clip-path の値、時間と速さの変わり方を書き、Clip Reveal のような英語の一般名も添えています。