AIへの指示文は、英語で書いたほうがよいですか？

日本語で書いて、動きの名前だけ英語を添えれば十分に伝わります。伝わりにくいのは言葉の種類よりも、数字がないことです。ここの指示文は、きっかけ・始まりの状態・終わりの状態・時間・速さの変わり方を数字で書き、Fade Up のような英語の一般名も添えています。

AIに動きを付けてもらうと、安っぽく見えるのはなぜですか？

多くは、軽さと配慮の指定が抜けているためです。動きの数が多すぎる、時間が長い、何でも動かす、動きを控える設定を無視する、といったことが重なると安っぽく見えます。ここの指示文には、どの型にも「軽さと配慮」の段を付けてあります。

GSAP などのライブラリは使わなくてよいですか？

登場の動きなら、CSS と IntersectionObserver で足ります。ここのコードはどれもライブラリなしで動きます。複数の動きを細かく連ねる演出や、スクロールに合わせて何段階も変わる演出を作るときに、ライブラリを検討します。

ページの中でいくつの型を使ってよいですか？

基本の動き1つと、目立たせたいところ用の1つ、の2つくらいまでにします。たとえば、セクションは下からふわっと、申し込みのボタンだけ弾んで出る、のように役割で分けます。型が増えるほど、動きに意味がなくなります。

登場アニメーションのパターン14種｜フェードアップ・時間差・スクロール連動のCSSコード

その場でふわっと登場の動き

通称：フェードインFade In

PC タブレット SP

動きを控える設定で見る

時間 0.6秒

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

位置は動かさず、透明な状態から少しずつ濃くなって現れます。いちばん控えめな登場で、文章の多いページでも読む邪魔をしません。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「フェードイン」（Fade In）と呼ばれる動きです。

# 作ってほしい動き
Fade In（その場でふわっと出る）。要素が画面に入ったとき、位置は動かさずに透明から現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす（上へ戻って再び入っても動かさない）
- 始まり：opacity 0
- 終わり：opacity 1
- 時間：0.6秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- 見出し、本文の段落、カード

# 守ってほしいこと
- 1つの画面で同時に動かすのは5個くらいまでにする。並んだカードを順番に出したいときは、時間差を付ける
- ファーストビューの見出しなど、開いた瞬間に読ませたいものには付けない

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「フェードイン」（Fade In）と呼ばれる動きです。

# 作ってほしい動き
Fade In（その場でふわっと出る）。要素が画面に入ったとき、位置は動かさずに透明から現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす（上へ戻って再び入っても動かさない）
- 始まり：opacity 0
- 終わり：opacity 1
- 時間：0.6秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- 見出し、本文の段落、カード（表示例：「はじめての方へ」の見出しと、ご相談・ご提案・制作の3枚のカード）

# 守ってほしいこと
- 1つの画面で同時に動かすのは5個くらいまでにする。並んだカードを順番に出したいときは、時間差を付ける
- ファーストビューの見出しなど、開いた瞬間に読ませたいものには付けない

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="fi-demo">
  <h2 class="fi">はじめての方へ</h2>
  <p class="fi">ご相談から納品までを、3つの段階に分けてご案内します。</p>
  <ul class="fi-cards">
    <li class="fi"><h3>ご相談</h3><p>作りたいもの、困っていることをお聞きします。</p></li>
    <li class="fi"><h3>ご提案</h3><p>進め方と費用の目安をお出しします。</p></li>
    <li class="fi"><h3>制作</h3><p>途中で確かめながら形にしていきます。</p></li>
  </ul>
</section>

CSS

/* 時間と速さの変わり方（ここを変えれば全体が変わる） */
.fi { --fi-duration: 0.6s; --fi-easing: cubic-bezier(0.22, 1, 0.36, 1); }

/* 最初に隠すのは、JavaScript が html に fi-ready を付けたときだけ */
.fi-ready .fi { opacity: 0; transition: opacity var(--fi-duration) var(--fi-easing); }
.fi-ready .fi.is-in { opacity: 1; }

/* 動きを控える設定の人には、動かさずに見せる */
@media (prefers-reduced-motion: reduce) {
  .fi-ready .fi { opacity: 1; transition: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('fi-ready');

const fiObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    fiObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { threshold: 0.2 });

document.querySelectorAll('.fi').forEach((el) => fiObserver.observe(el));

向いているサイト

文章が中心のコラム・お知らせ・会社案内のページ
動きで目立たせるより、落ち着いた印象を保ちたいサイト

作るときのポイント

動かすのは opacity だけなので軽い。数が多くても重くなりにくい
時間は 0.4〜0.8秒に収める。1秒を超えると「待たされる」感じが出る
最初に隠す指定は html に付けた fi-ready の下に書き、JavaScript が動かなくても読めるようにする
1回だけ動かす（unobserve）。上下にスクロールするたびに消えて出ると、読みにくい

よくある失敗

ページ全体の要素に付けて、スクロールするたびに何かが現れ、読むリズムが切れる
最初から opacity: 0 を CSS に書き、JavaScript が読み込めなかったときに何も見えなくなる
ファーストビューの見出しにも付けて、開いた直後の一瞬、画面が空になる

下からふわっと登場の動き

通称：フェードアップFade Up

PC タブレット SP

動きを控える設定で見る

時間 0.6秒動く距離 24px

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

少し下の位置から、上へ動きながら現れます。Webサイトの登場の動きでいちばんよく使われる形で、どんな見た目にも合わせやすい動きです。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「フェードアップ」（Fade Up）と呼ばれる動きです。

# 作ってほしい動き
Fade Up（下からふわっと出る）。要素が画面に入ったとき、少し下の位置から上へ動きながら現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 始まり：opacity 0、translateY(24px)
- 終わり：opacity 1、translateY(0)
- 時間：0.6秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- 見出し、本文の段落、カード

# 守ってほしいこと
- 動く距離は 40px までにする。大きく動かすと、文字を目で追いにくくなる
- 並んだカードは、同じ時間に一斉に動かさず、0.08秒ずつ時間差を付けてもよい

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「フェードアップ」（Fade Up）と呼ばれる動きです。

# 作ってほしい動き
Fade Up（下からふわっと出る）。要素が画面に入ったとき、少し下の位置から上へ動きながら現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 始まり：opacity 0、translateY(24px)
- 終わり：opacity 1、translateY(0)
- 時間：0.6秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- 見出し、本文の段落、カード（表示例：「はじめての方へ」の見出しと、ご相談・ご提案・制作の3枚のカード）

# 守ってほしいこと
- 動く距離は 40px までにする。大きく動かすと、文字を目で追いにくくなる
- 並んだカードは、同じ時間に一斉に動かさず、0.08秒ずつ時間差を付けてもよい

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="fu-demo">
  <h2 class="fu">はじめての方へ</h2>
  <p class="fu">ご相談から納品までを、3つの段階に分けてご案内します。</p>
  <ul class="fu-cards">
    <li class="fu"><h3>ご相談</h3><p>作りたいもの、困っていることをお聞きします。</p></li>
    <li class="fu"><h3>ご提案</h3><p>進め方と費用の目安をお出しします。</p></li>
    <li class="fu"><h3>制作</h3><p>途中で確かめながら形にしていきます。</p></li>
  </ul>
</section>

CSS

/* 時間・距離・速さの変わり方 */
.fu { --fu-duration: 0.6s; --fu-distance: 24px; --fu-easing: cubic-bezier(0.22, 1, 0.36, 1); }

/* 最初に隠すのは、JavaScript が html に fu-ready を付けたときだけ */
.fu-ready .fu {
  opacity: 0;
  transform: translateY(var(--fu-distance));
  transition: opacity var(--fu-duration) var(--fu-easing), transform var(--fu-duration) var(--fu-easing);
}
.fu-ready .fu.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fu-ready .fu { opacity: 1; transform: none; transition: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('fu-ready');

const fuObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    fuObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { threshold: 0.2 });

document.querySelectorAll('.fu').forEach((el) => fuObserver.observe(el));

向いているサイト

会社・サービス・お店のサイトで、セクションごとに読み進めてもらうページ
動きをはじめて入れるサイト（迷ったらこれ）

作るときのポイント

動く距離は 16〜40px。小さいほど上品に、大きいほど元気に見える
top や margin ではなく transform: translateY() で動かす。まわりの要素が押されず、描き直しも軽い
速さの変わり方は「すっと止まる」（cubic-bezier(0.22, 1, 0.36, 1)）にすると、終わり際が落ち着いて見える
要素が 20% 見えたところで動かす。0% だと、画面の端で動いてしまい見逃す

よくある失敗

距離を 100px 近くにして、文字が大きく揺れて見え、読みにくくなる
margin-top を変えて動かし、下にある要素まで一緒に上下して、ページ全体がガタつく
画面の下端ぎりぎりで動かして、動きを見る前に終わっている

上からふわっと登場の動き

通称：フェードダウンFade Down

PC タブレット SP

動きを控える設定で見る

時間 0.6秒動く距離 20px

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

少し上の位置から、下へ動きながら現れます。上から降りてくる向きなので、ページの上の方にある告知・見出し・メニューの登場に合います。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「フェードダウン」（Fade Down）と呼ばれる動きです。

# 作ってほしい動き
Fade Down（上からふわっと出る）。要素が画面に入ったとき、少し上の位置から下へ動きながら現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 見張りの範囲：IntersectionObserver に root: document と rootMargin: "20px 0px 0px 0px" を付け、画面の上を 20px 広げて見る（ページの上の端の要素は、上へずらした位置で画面の外へ出てしまい、そのままでは知らせが来ない。root: document は、iframe の中や埋め込みでも rootMargin を効かせるため）
- 始まり：opacity 0、translateY(-20px)
- 終わり：opacity 1、translateY(0)
- 時間：0.6秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- ページの上の方にある見出しや告知、カード

# 守ってほしいこと
- 本文の途中では使わない。下へ読み進める流れと逆向きの動きになり、目が上へ引き戻される
- 動く距離は 32px までにする

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「フェードダウン」（Fade Down）と呼ばれる動きです。

# 作ってほしい動き
Fade Down（上からふわっと出る）。要素が画面に入ったとき、少し上の位置から下へ動きながら現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 見張りの範囲：IntersectionObserver に root: document と rootMargin: "20px 0px 0px 0px" を付け、画面の上を 20px 広げて見る（ページの上の端の要素は、上へずらした位置で画面の外へ出てしまい、そのままでは知らせが来ない。root: document は、iframe の中や埋め込みでも rootMargin を効かせるため）
- 始まり：opacity 0、translateY(-20px)
- 終わり：opacity 1、translateY(0)
- 時間：0.6秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- ページの上の方にある見出しや告知、カード（表示例：「はじめての方へ」の見出しと3枚のカード）

# 守ってほしいこと
- 本文の途中では使わない。下へ読み進める流れと逆向きの動きになり、目が上へ引き戻される
- 動く距離は 32px までにする

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="fd-demo">
  <h2 class="fd">はじめての方へ</h2>
  <p class="fd">ご相談から納品までを、3つの段階に分けてご案内します。</p>
  <ul class="fd-cards">
    <li class="fd"><h3>ご相談</h3><p>作りたいもの、困っていることをお聞きします。</p></li>
    <li class="fd"><h3>ご提案</h3><p>進め方と費用の目安をお出しします。</p></li>
    <li class="fd"><h3>制作</h3><p>途中で確かめながら形にしていきます。</p></li>
  </ul>
</section>

CSS

.fd { --fd-duration: 0.6s; --fd-distance: 20px; --fd-easing: cubic-bezier(0.22, 1, 0.36, 1); }

/* 上から：translateY をマイナスにする */
.fd-ready .fd {
  opacity: 0;
  transform: translateY(calc(var(--fd-distance) * -1));
  transition: opacity var(--fd-duration) var(--fd-easing), transform var(--fd-duration) var(--fd-easing);
}
.fd-ready .fd.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fd-ready .fd { opacity: 1; transform: none; transition: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('fd-ready');

const fdObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    fdObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { root: document, rootMargin: '20px 0px 0px 0px', threshold: 0.2 });

document.querySelectorAll('.fd').forEach((el) => fdObserver.observe(el));

向いているサイト

ページの上部にある見出し・告知・お知らせの一覧
ヘッダーの下に出すメニューやパンくずなど、上から「降りてくる」意味を持たせたい部品

作るときのポイント

向きに意味を持たせる。上にある部品が上から降りてくると自然に見える
translateY をマイナスの値にするだけで、下からふわっとと同じ書き方で作れる
本文のセクションには、下からふわっとを使い、向きを混ぜない
距離は 12〜32px くらいにとどめる
画面の上を、ずらした距離だけ広げて見張る（rootMargin）。ページの上の端にある要素は、上へずらすと画面の外へ出てしまい、広げないと知らせが来ない

よくある失敗

ページのいちばん上の告知に付けて、ずらした位置が画面の外になり、いつまでも現れない
ページの途中の段落に使い、読み進める向きと逆に動いて落ち着かない
下からふわっとと交互に使い、向きがばらばらで意味が読み取れない
ヘッダーの下に固定した部品に付けて、スクロールのたびに降りてくる

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「フェードインレフト／ライト」（Fade Left / Fade Right）と呼ばれる動きです。

# 作ってほしい動き
Fade Left / Fade Right（横からふわっと出る）。要素が画面に入ったとき、横にずれた位置から動きながら現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 始まり：opacity 0、左から 40px ずれた位置（translateX）
- 終わり：opacity 1、translateX(0)
- 時間：0.7秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 向きは要素ごとに HTML の属性（data-side="left" / "right"）で変えられるようにする

# 付ける場所
- 写真と文章を左右に並べたセクション。写真は外側（左に置いた写真なら左）から寄せる

# 守ってほしいこと
- 横に動く要素の親に overflow-x: clip を付け、動く前の位置で横スクロールが出ないようにする
- SP（画面幅 640px 以下）で1列に並ぶときは、横の動きをやめて下からふわっとにする

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「フェードインレフト／ライト」（Fade Left / Fade Right）と呼ばれる動きです。

# 作ってほしい動き
Fade Left / Fade Right（横からふわっと出る）。要素が画面に入ったとき、横にずれた位置から動きながら現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 始まり：opacity 0、左から 40px ずれた位置（translateX）
- 終わり：opacity 1、translateX(0)
- 時間：0.7秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 向きは要素ごとに HTML の属性（data-side="left" / "right"）で変えられるようにする

# 付ける場所
- 写真と文章を左右に並べたセクション。写真は外側（左に置いた写真なら左）から寄せる（表示例：「はじめての方へ」の見出しと3枚のカード）

# 守ってほしいこと
- 横に動く要素の親に overflow-x: clip を付け、動く前の位置で横スクロールが出ないようにする
- SP（画面幅 640px 以下）で1列に並ぶときは、横の動きをやめて下からふわっとにする

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="fs-demo">
  <!-- 向きは CSS の --fs-side で全体に決まる。要素ごとに変えるときは data-side="left" / "right" を付ける -->
  <h2 class="fs">はじめての方へ</h2>
  <p class="fs">ご相談から納品までを、3つの段階に分けてご案内します。</p>
  <ul class="fs-cards">
    <li class="fs"><h3>ご相談</h3><p>作りたいもの、困っていることをお聞きします。</p></li>
    <li class="fs"><h3>ご提案</h3><p>進め方と費用の目安をお出しします。</p></li>
    <li class="fs"><h3>制作</h3><p>途中で確かめながら形にしていきます。</p></li>
  </ul>
</section>

CSS

/* 向き（左から＝-1・右から＝1）・時間・距離・速さの変わり方 */
.fs { --fs-side: -1; --fs-duration: 0.7s; --fs-distance: 40px; --fs-easing: cubic-bezier(0.22, 1, 0.36, 1); }
/* 要素ごとに向きを変えるときは data-side を付ける（付けない要素は上の --fs-side の向き） */
.fs[data-side="left"] { --fs-side: -1; }
.fs[data-side="right"] { --fs-side: 1; }

/* 動く前の位置で横スクロールが出ないようにする */
.fs-demo { overflow-x: clip; }

.fs-ready .fs {
  opacity: 0;
  transform: translateX(calc(var(--fs-side) * var(--fs-distance)));
  transition: opacity var(--fs-duration) var(--fs-easing), transform var(--fs-duration) var(--fs-easing);
}
.fs-ready .fs.is-in { opacity: 1; transform: none; }

/* SP で1列のときは、横ではなく下から */
@media (max-width: 640px) {
  .fs-ready .fs { transform: translateY(var(--fs-distance)); }
}

@media (prefers-reduced-motion: reduce) {
  .fs-ready .fs { opacity: 1; transform: none; transition: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('fs-ready');

const fsObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    fsObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { threshold: 0.2 });

document.querySelectorAll('.fs').forEach((el) => fsObserver.observe(el));

向いているサイト

写真と説明を左右に並べたサービス紹介・事例紹介
「ビフォー・アフター」のように、2つを左右で対比させるセクション

作るときのポイント

向きを要素ごとに変えられるよう、data-side 属性で左右を決める
動く前の位置が画面の外にはみ出ると、横スクロールが出る。親に overflow-x: clip を付ける
SP で1列になったら、横の動きをやめる。縦に並んだものが左右から来ると落ち着かない
写真は外側から、文章は内側から寄せると、2つが中央で出会う形になる

よくある失敗

親に overflow-x の指定がなく、動く前の位置のせいでスマホで横に揺れる
1列の並びでも左右交互に動かし、ジグザグに目が振られる
距離を大きくしすぎて、動いている間に隣の要素と重なる

少し大きくなって出る登場の動き

通称：スケールインScale In

PC タブレット SP

動きを控える設定で見る

始まりの大きさ 0.92倍時間 0.6秒

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

少し小さい状態から、元の大きさに広がりながら現れます。カードや写真など、まとまりのある四角い部品に付けると、手前に置かれたように見えます。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「スケールイン」（Scale In）と呼ばれる動きです。

# 作ってほしい動き
Scale In（少し大きくなって出る）。要素が画面に入ったとき、少し小さい状態から元の大きさに広がりながら現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 始まり：opacity 0、scale(0.92)
- 終わり：opacity 1、scale(1)
- 時間：0.6秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- カード、写真、ボタンなど四角いまとまりのある部品

# 守ってほしいこと
- 文字だけの段落には付けない（文字の大きさが変わって見え、読みにくい）
- 始まりの大きさは 0.9 倍前後にする。小さくしすぎると「飛び出す」動きになり、別の印象になる

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「スケールイン」（Scale In）と呼ばれる動きです。

# 作ってほしい動き
Scale In（少し大きくなって出る）。要素が画面に入ったとき、少し小さい状態から元の大きさに広がりながら現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 始まり：opacity 0、scale(0.92)
- 終わり：opacity 1、scale(1)
- 時間：0.6秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- カード、写真、ボタンなど四角いまとまりのある部品（表示例：ご相談・ご提案・制作の3枚のカード）

# 守ってほしいこと
- 文字だけの段落には付けない（文字の大きさが変わって見え、読みにくい）
- 始まりの大きさは 0.9 倍前後にする。小さくしすぎると「飛び出す」動きになり、別の印象になる

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="sc-demo">
  <h2 class="sc">はじめての方へ</h2>
  <p class="sc">ご相談から納品までを、3つの段階に分けてご案内します。</p>
  <ul class="sc-cards">
    <li class="sc"><h3>ご相談</h3><p>作りたいもの、困っていることをお聞きします。</p></li>
    <li class="sc"><h3>ご提案</h3><p>進め方と費用の目安をお出しします。</p></li>
    <li class="sc"><h3>制作</h3><p>途中で確かめながら形にしていきます。</p></li>
  </ul>
</section>

CSS

.sc { --sc-from: 0.92; --sc-duration: 0.6s; --sc-easing: cubic-bezier(0.22, 1, 0.36, 1); }

.sc-ready .sc {
  opacity: 0;
  transform: scale(var(--sc-from));
  transition: opacity var(--sc-duration) var(--sc-easing), transform var(--sc-duration) var(--sc-easing);
}
.sc-ready .sc.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sc-ready .sc { opacity: 1; transform: none; transition: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('sc-ready');

const scObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    scObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { threshold: 0.2 });

document.querySelectorAll('.sc').forEach((el) => scObserver.observe(el));

向いているサイト

料金プラン・サービス・商品のカードを並べたセクション
ギャラリーや事例の写真の一覧

作るときのポイント

始まりの大きさは 0.88〜0.96 倍。控えめなほど上品に見える
transform: scale() だけで大きさを変える。width を変えると、まわりの要素が動いてしまう
transform-origin は中央のまま。下を基準にすると、浮き上がる印象が加わる
カードの影や枠を動かさず、カードそのものだけを動かす

よくある失敗

見出しや本文にも付けて、文字が伸び縮みして見える
0.5 倍から始めて、ぽんっと飛び出す派手な動きになり、サイトの印象と合わない
width や height を変えて動かし、隣のカードが押されて並びがずれる

小さな点から広がる登場の動き

通称：ズームインZoom In

PC タブレット SP

動きを控える設定で見る

始まりの大きさ 0.4倍時間 0.5秒

速さの変わり方

少し行き過ぎて戻るすっと止まるだんだん遅く

小さな状態から大きく広がり、少し行き過ぎてから元の大きさに収まります。アイコン・数字・バッジなど、小さく目立たせたい部品に向く、元気な登場です。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「ズームイン」（Zoom In）と呼ばれる動きです。

# 作ってほしい動き
Zoom In（小さな点から広がる）。要素が画面に入ったとき、小さな状態から大きく広がって現れる。

# 動き
- きっかけ：要素が画面に 30% 入ったとき。1回だけ動かす
- 始まり：opacity 0、scale(0.4)
- 終わり：opacity 1、scale(1)
- 時間：大きさは 0.5秒。透明から見えるまでは、その 0.6倍の時間で ease-out（行き過ぎて戻る速さを透明さに使うと、終わり際がちらつくため）
- 速さの変わり方（大きさ）：少し行き過ぎて戻る（cubic-bezier(0.34, 1.56, 0.64, 1)）。「少し行き過ぎて戻る」は、終わり際に1倍を少し超えてから戻る
- 並んだ2つ目・3つ目は、0.1秒・0.2秒遅らせる

# 付ける場所
- アイコン、実績の数字、「人気」「新着」などのバッジ

# 守ってほしいこと
- 付けるのは1つの画面に3〜4個まで。多いと、どれを見ればよいかわからなくなる
- 大きな写真やセクション全体には付けない（画面が揺れて見える）

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「ズームイン」（Zoom In）と呼ばれる動きです。

# 作ってほしい動き
Zoom In（小さな点から広がる）。要素が画面に入ったとき、小さな状態から大きく広がって現れる。

# 動き
- きっかけ：要素が画面に 30% 入ったとき。1回だけ動かす
- 始まり：opacity 0、scale(0.4)
- 終わり：opacity 1、scale(1)
- 時間：大きさは 0.5秒。透明から見えるまでは、その 0.6倍の時間で ease-out（行き過ぎて戻る速さを透明さに使うと、終わり際がちらつくため）
- 速さの変わり方（大きさ）：少し行き過ぎて戻る（cubic-bezier(0.34, 1.56, 0.64, 1)）。「少し行き過ぎて戻る」は、終わり際に1倍を少し超えてから戻る
- 並んだ2つ目・3つ目は、0.1秒・0.2秒遅らせる

# 付ける場所
- アイコン、実績の数字、「人気」「新着」などのバッジ（表示例：「満足度」「継続率」「対応件数」の3つの丸いアイコン）

# 守ってほしいこと
- 付けるのは1つの画面に3〜4個まで。多いと、どれを見ればよいかわからなくなる
- 大きな写真やセクション全体には付けない（画面が揺れて見える）

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="zi-demo">
  <ul class="zi-stats">
    <li><span class="zi zi-icon">98</span><p>満足度（%）</p></li>
    <li><span class="zi zi-icon">92</span><p>継続率（%）</p></li>
    <li><span class="zi zi-icon">1.2k</span><p>対応件数</p></li>
  </ul>
</section>

CSS

.zi { --zi-from: 0.4; --zi-duration: 0.5s; --zi-easing: cubic-bezier(0.34, 1.56, 0.64, 1); }

.zi-ready .zi {
  opacity: 0;
  transform: scale(var(--zi-from));
  transition: opacity calc(var(--zi-duration) * 0.6) ease-out, transform var(--zi-duration) var(--zi-easing);
}
.zi-ready .zi.is-in { opacity: 1; transform: none; }
/* 2つ目・3つ目は少し遅らせる */
.zi-stats li:nth-child(2) .zi { transition-delay: 0.1s; }
.zi-stats li:nth-child(3) .zi { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .zi-ready .zi { opacity: 1; transform: none; transition: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('zi-ready');

const ziObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    ziObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { threshold: 0.3 });

document.querySelectorAll('.zi').forEach((el) => ziObserver.observe(el));

向いているサイト

実績の数字・特長のアイコンを並べたセクション
子ども向け・イベント・キャンペーンなど、にぎやかさを出したいページ

作るときのポイント

少し行き過ぎて戻る動きは、cubic-bezier の2つ目の数を1より大きくして作る（例 cubic-bezier(0.34, 1.56, 0.64, 1)）
時間は 0.4〜0.6秒と短めにする。長いと、ゆるんで見える
小さな部品にだけ付ける。大きな部品で行き過ぎると、画面全体が揺れて見える
3つ並べるなら、0.1秒ずつ時間差を付けると、ぽん・ぽん・ぽんと続いて見える

よくある失敗

カードや写真など大きな部品に付けて、画面の大部分が伸び縮みする
落ち着いた業種のサイトに使い、そこだけ浮いたにぎやかさになる
始まりを 0 倍にして、動きの最初の数フレームが何も見えず、遅れて見える

ぼかしが晴れる登場の動き

通称：ブラーインBlur In

PC タブレット SP

動きを控える設定で見る

ぼかしの強さ 10px 時間 0.8秒

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

ぼやけた状態から、ピントが合うようにくっきり現れます。キャッチコピーや大きな見出しに付けると、印象に残る登場になります。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「ブラーイン」（Blur In）と呼ばれる動きです。

# 作ってほしい動き
Blur In（ぼかしが晴れる）。要素が画面に入ったとき、ぼやけた状態からくっきり現れる。

# 動き
- きっかけ：要素が画面に 30% 入ったとき。1回だけ動かす
- 始まり：opacity 0、filter: blur(10px)
- 終わり：opacity 1、filter: blur(0)
- 時間：0.8秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- キャッチコピー、大きな見出し

# 守ってほしいこと
- filter は transform と opacity より描くのが重い。付けるのは1つの画面で1〜2個までにし、カードの一覧や大きな写真には使わない（軽さの決まりの例外として、この数に限って使う）
- 動き終わったら filter を外す（none にする）

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「ブラーイン」（Blur In）と呼ばれる動きです。

# 作ってほしい動き
Blur In（ぼかしが晴れる）。要素が画面に入ったとき、ぼやけた状態からくっきり現れる。

# 動き
- きっかけ：要素が画面に 30% 入ったとき。1回だけ動かす
- 始まり：opacity 0、filter: blur(10px)
- 終わり：opacity 1、filter: blur(0)
- 時間：0.8秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- キャッチコピー、大きな見出し（表示例：「はじめての方へ」の見出しとリード文）

# 守ってほしいこと
- filter は transform と opacity より描くのが重い。付けるのは1つの画面で1〜2個までにし、カードの一覧や大きな写真には使わない（軽さの決まりの例外として、この数に限って使う）
- 動き終わったら filter を外す（none にする）

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="bl-demo">
  <h2 class="bl">はじめての方へ</h2>
  <p class="bl">ご相談から納品までを、3つの段階に分けてご案内します。</p>
</section>

CSS

.bl { --bl-blur: 10px; --bl-duration: 0.8s; --bl-easing: cubic-bezier(0.22, 1, 0.36, 1); }

.bl-ready .bl {
  opacity: 0;
  filter: blur(var(--bl-blur));
  transition: opacity var(--bl-duration) var(--bl-easing), filter var(--bl-duration) var(--bl-easing);
}
/* 動き終わったら filter を外す（描き直しの負担を残さない） */
.bl-ready .bl.is-in { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .bl-ready .bl { opacity: 1; filter: none; transition: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('bl-ready');

const blObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    blObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { threshold: 0.3 });

document.querySelectorAll('.bl').forEach((el) => blObserver.observe(el));

向いているサイト

ブランドサイト・採用サイトのキャッチコピー
セクションの冒頭に大きな見出しを置くページ

作るときのポイント

filter: blur() は重いので、1つの画面で1〜2個まで。見出しだけに付ける
ぼかしは 6〜12px くらい。強すぎると、文字があることすらわからない
動き終わったら filter: none にして、描き直しの負担を残さない
時間は 0.6〜1秒と、ほかの登場より少し長めにすると、ピントが合う感じが出る

よくある失敗

カードの一覧や写真の一覧にまとめて付け、スクロールがカクつく
ぼかしを 30px 近くにして、動きの前半が何も見えない時間になる
動き終わっても filter: blur(0) を残し、スクロールのたびに描き直しが続く

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「スライドイン」（Slide In）と呼ばれる動きです。

# 作ってほしい動き
Slide In（画面の外から滑り込む）。要素が画面に入ったとき、枠の外に隠れていた要素が横から滑り込む。

# 動き
- きっかけ：要素の枠が画面に 30% 入ったとき。1回だけ動かす
- 始まり：左から、要素の幅の分（translateX(100%) またはマイナス）だけ外にずれた位置。透明にはしない
- 終わり：translateX(0)
- 時間：0.8秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

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

# 守ってほしいこと
- 動く要素は枠（overflow: hidden の箱）で包み、枠の外は見えないようにする。ページに横スクロールを出さない
- 文章は滑り込ませず、その場でふわっと出す（読む部分を大きく動かさない）

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「スライドイン」（Slide In）と呼ばれる動きです。

# 作ってほしい動き
Slide In（画面の外から滑り込む）。要素が画面に入ったとき、枠の外に隠れていた要素が横から滑り込む。

# 動き
- きっかけ：要素の枠が画面に 30% 入ったとき。1回だけ動かす
- 始まり：左から、要素の幅の分（translateX(100%) またはマイナス）だけ外にずれた位置。透明にはしない
- 終わり：translateX(0)
- 時間：0.8秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- 写真と文章を左右に並べたセクションの写真（表示例：灰色の面の写真と、「現場の様子」の見出しと説明文）

# 守ってほしいこと
- 動く要素は枠（overflow: hidden の箱）で包み、枠の外は見えないようにする。ページに横スクロールを出さない
- 文章は滑り込ませず、その場でふわっと出す（読む部分を大きく動かさない）

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="sl-demo">
  <div class="sl-frame">
    <div class="sl sl-photo" role="img" aria-label="現場の写真"></div>
  </div>
  <div class="sl-text">
    <h2>現場の様子</h2>
    <p>着工から引き渡しまで、毎日の作業を写真で記録しています。</p>
  </div>
</section>

CSS

.sl { --sl-side: -1; --sl-duration: 0.8s; --sl-easing: cubic-bezier(0.22, 1, 0.36, 1); }

/* 枠の外は見せない（横スクロールを出さない） */
.sl-frame { overflow: hidden; }

.sl-ready .sl {
  transform: translateX(calc(var(--sl-side) * 100%));
  transition: transform var(--sl-duration) var(--sl-easing);
}
.sl-ready .sl.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sl-ready .sl { transform: none; transition: none; }
}

JavaScript

document.documentElement.classList.add('sl-ready');

const slObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.querySelectorAll('.sl').forEach((el) => el.classList.add('is-in'));
    slObserver.unobserve(entry.target);
  });
}, { threshold: 0.3 });

// 動く前の要素は枠の外にあるので、枠（.sl-frame）が画面に入ったかで見る
document.querySelectorAll('.sl-frame').forEach((el) => slObserver.observe(el));

向いているサイト

施工事例・作品紹介など、写真を大きく見せるセクション
色の帯や区切りの面を、セクションの切り替わりで見せたいとき

作るときのポイント

動く要素を overflow: hidden の枠で包み、枠の中だけで動かす
距離は translateX(-100%) のように要素の幅を基準にすると、画面幅が変わっても同じ見え方になる
透明にはしない。面が端から押し出されてくる感じが、この動きの持ち味
文章は大きく動かさず、写真だけを滑り込ませる

よくある失敗

枠で包まず、動く前の写真が画面の外にはみ出して横スクロールが出る
本文の段落を滑り込ませ、読もうとした文字が横に流れて読めない
時間を 1.5秒以上にして、写真が入りきるまで待たされる

めくれて出る登場の動き

通称：フリップインFlip In

PC タブレット SP

動きを控える設定で見る

始まりの傾き 60度時間 0.7秒

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

奥に倒れていた要素が、上の辺を軸に起き上がるように現れます。立体的に見えるので、カードの一覧に付けると、札をめくって並べたような印象になります。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「フリップイン」（Flip In）と呼ばれる動きです。

# 作ってほしい動き
Flip In（めくれて出る）。要素が画面に入ったとき、奥に倒れていた状態から、上の辺を軸に起き上がって現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 始まり：opacity 0、perspective(800px) rotateX(60deg)、transform-origin は上の辺の中央
- 終わり：opacity 1、rotateX(0)
- 時間：0.7秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 並んだカードは 0.1秒ずつ時間差を付ける

# 付ける場所
- カードの一覧

# 守ってほしいこと
- 文字の多い段落には付けない（傾いている間は読めない）
- 遠近は perspective() を transform の中に書き、親の 3D の指定に頼らない

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「フリップイン」（Flip In）と呼ばれる動きです。

# 作ってほしい動き
Flip In（めくれて出る）。要素が画面に入ったとき、奥に倒れていた状態から、上の辺を軸に起き上がって現れる。

# 動き
- きっかけ：要素が画面に 20% 入ったとき。1回だけ動かす
- 始まり：opacity 0、perspective(800px) rotateX(60deg)、transform-origin は上の辺の中央
- 終わり：opacity 1、rotateX(0)
- 時間：0.7秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 並んだカードは 0.1秒ずつ時間差を付ける

# 付ける場所
- カードの一覧（表示例：ご相談・ご提案・制作の3枚のカード）

# 守ってほしいこと
- 文字の多い段落には付けない（傾いている間は読めない）
- 遠近は perspective() を transform の中に書き、親の 3D の指定に頼らない

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="fl-demo">
  <h2 class="fl">はじめての方へ</h2>
  <p class="fl">ご相談から納品までを、3つの段階に分けてご案内します。</p>
  <ul class="fl-cards">
    <li class="fl"><h3>ご相談</h3><p>作りたいもの、困っていることをお聞きします。</p></li>
    <li class="fl"><h3>ご提案</h3><p>進め方と費用の目安をお出しします。</p></li>
    <li class="fl"><h3>制作</h3><p>途中で確かめながら形にしていきます。</p></li>
  </ul>
</section>

CSS

.fl { --fl-angle: 60deg; --fl-duration: 0.7s; --fl-easing: cubic-bezier(0.22, 1, 0.36, 1); }

.fl-ready .fl {
  opacity: 0;
  transform: perspective(800px) rotateX(var(--fl-angle));
  transform-origin: top center;
  transition: opacity var(--fl-duration) var(--fl-easing), transform var(--fl-duration) var(--fl-easing);
}
.fl-ready .fl.is-in { opacity: 1; transform: perspective(800px) rotateX(0); }
/* カードは順にめくる */
.fl-cards .fl:nth-child(2) { transition-delay: 0.1s; }
.fl-cards .fl:nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .fl-ready .fl { opacity: 1; transform: none; transition: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('fl-ready');

const flObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    flObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { threshold: 0.2 });

document.querySelectorAll('.fl').forEach((el) => flObserver.observe(el));

向いているサイト

料金プラン・特長・メンバー紹介など、同じ形のカードの一覧
クイズやキャンペーンなど、めくる・当たるといった遊びのあるページ

作るときのポイント

transform-origin: top center で上の辺を軸にすると、起き上がる動きになる
perspective() を transform の中に書くと、親に 3D の指定がなくても立体に見える
傾きは 45〜75度。90度だと、真横から見た線の状態から始まり、最初が見えない
カードが並ぶときは、0.1秒ずつ時間差を付けて順にめくる

よくある失敗

本文の段落に付けて、傾いている間の文字が読めない
親に transform-style: preserve-3d を付けたまま中に iframe や動画を入れ、Safari で中身が描かれない
左右の辺を軸に回して、横幅が縮んで見え、まわりの要素とぶつかって見える

弾んで出る登場の動き

通称：バウンスインBounce In

PC タブレット SP

動きを控える設定で見る

時間 0.8秒動く距離 40px

下から勢いよく上がり、少し行き過ぎてから小さく弾んで止まります。ボタンやバッジなど、押してほしい・気づいてほしい部品に1つだけ付けると効きます。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「バウンスイン」（Bounce In）と呼ばれる動きです。

# 作ってほしい動き
Bounce In（弾んで出る）。要素が画面に入ったとき、下から上がり、少し行き過ぎてから小さく弾んで止まる。

# 動き
- きっかけ：要素が画面に 50% 入ったとき。1回だけ動かす
- @keyframes で作る：0% は opacity 0・translateY(40px)／60% は opacity 1・translateY(-10px)／80% は translateY(4px)／100% は translateY(0)
- 時間：0.8秒、速さの変わり方は ease-out

# 付ける場所
- 申し込み・予約のボタン、「キャンペーン中」のバッジなど、気づいてほしい部品を1つ

# 守ってほしいこと
- 1つの画面で1つだけにする。いくつも弾むと、どれも目立たなくなる
- 弾むのは最初の1回だけ。繰り返し弾ませない（読む邪魔になる）

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「バウンスイン」（Bounce In）と呼ばれる動きです。

# 作ってほしい動き
Bounce In（弾んで出る）。要素が画面に入ったとき、下から上がり、少し行き過ぎてから小さく弾んで止まる。

# 動き
- きっかけ：要素が画面に 50% 入ったとき。1回だけ動かす
- @keyframes で作る：0% は opacity 0・translateY(40px)／60% は opacity 1・translateY(-10px)／80% は translateY(4px)／100% は translateY(0)
- 時間：0.8秒、速さの変わり方は ease-out

# 付ける場所
- 申し込み・予約のボタン、「キャンペーン中」のバッジなど、気づいてほしい部品を1つ（表示例：「無料で相談する」のボタン）

# 守ってほしいこと
- 1つの画面で1つだけにする。いくつも弾むと、どれも目立たなくなる
- 弾むのは最初の1回だけ。繰り返し弾ませない（読む邪魔になる）

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="bo-demo">
  <p>まずは気軽にご相談ください。</p>
  <a class="bo bo-btn" href="/contact/">無料で相談する</a>
</section>

CSS

.bo { --bo-duration: 0.8s; --bo-distance: 40px; }

@keyframes bo-in {
  0%   { opacity: 0; transform: translateY(var(--bo-distance)); }
  60%  { opacity: 1; transform: translateY(-10px); }
  80%  { transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}

/* 画面に入るまでは隠す。入ったあとの見え方は @keyframes が決める */
.bo-ready .bo:not(.is-in) { opacity: 0; }
.bo-ready .bo.is-in { animation: bo-in var(--bo-duration) ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .bo-ready .bo:not(.is-in), .bo-ready .bo.is-in { opacity: 1; animation: none; }
}

JavaScript

// 最初に隠す指定を効かせる（JavaScript が動かない環境では、最初から見えたままになる）
document.documentElement.classList.add('bo-ready');

const boObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-in');
    boObserver.unobserve(entry.target); // 1回だけ動かす
  });
}, { threshold: 0.5 });

document.querySelectorAll('.bo').forEach((el) => boObserver.observe(el));

向いているサイト

申し込み・予約・資料請求など、押してほしいボタンが決まっているページ
キャンペーン・セールの告知

作るときのポイント

transition では行き過ぎて戻る動きを細かく作れないので、@keyframes で段階を書く
行き過ぎる量は 6〜12px。大きいと、ゴムまりのような軽い印象になる
animation-fill-mode: both で、動きの前は最初の状態、後は最後の状態を保つ
1つの画面で1つだけ。目立たせたいものを1つに絞る

よくある失敗

ページ中のボタンすべてに付けて、どれが大事かわからなくなる
infinite で弾み続け、読んでいる間ずっと視界の端で動く
行き過ぎを 30px 以上にして、隣の要素と重なる

時間差で順番に登場の動き

通称：スタッガーStagger

PC タブレット SP

動きを控える設定で見る

ずらす時間 0.08秒時間 0.6秒動く距離 20px

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

並んだ要素が、少しずつ時間をずらして順番に現れます。一覧が「上から順に」「左から順に」読むものだと伝わり、まとめて出すよりも目が流れに沿います。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「スタッガー」（Stagger）と呼ばれる動きです。

# 作ってほしい動き
Stagger（時間差で順番に出す）。並んだ要素が画面に入ったとき、少しずつ時間をずらして順に下からふわっと出す。

# 動き
- きっかけ：要素1つずつ、画面に 20% 入ったとき。1回だけ動かす
- 時間差：同じときに画面に入った要素どうしで、HTML の順に 0.08秒ずつずらす。何番目かは JavaScript で CSS 変数（--i）に入れ、transition-delay を計算する。あとから入ってきた要素は、また 0 番目から数える
- 1つずつの動き：opacity 0・translateY(20px) から opacity 1・translateY(0)、0.6秒、すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 9番目より後ろは、9番目と同じ遅れにする（数が多くても待たせない）
- 並びを包む箱で見張らない（箱が画面の高さの5倍を超えると、20% に届かず、いつまでも出ない）

# 付ける場所
- カード・リスト・ロゴの一覧など、同じ形のものが並ぶところ

# 守ってほしいこと
- 同じときに出る分が出そろうまでの時間（0.08秒 × 8 ＋ 0.6秒）は、1.6秒を超えないようにする
- 並びの順番（HTML の順）と、出る順番をそろえる

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「スタッガー」（Stagger）と呼ばれる動きです。

# 作ってほしい動き
Stagger（時間差で順番に出す）。並んだ要素が画面に入ったとき、少しずつ時間をずらして順に下からふわっと出す。

# 動き
- きっかけ：要素1つずつ、画面に 20% 入ったとき。1回だけ動かす
- 時間差：同じときに画面に入った要素どうしで、HTML の順に 0.08秒ずつずらす。何番目かは JavaScript で CSS 変数（--i）に入れ、transition-delay を計算する。あとから入ってきた要素は、また 0 番目から数える
- 1つずつの動き：opacity 0・translateY(20px) から opacity 1・translateY(0)、0.6秒、すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 9番目より後ろは、9番目と同じ遅れにする（数が多くても待たせない）
- 並びを包む箱で見張らない（箱が画面の高さの5倍を超えると、20% に届かず、いつまでも出ない）

# 付ける場所
- カード・リスト・ロゴの一覧など、同じ形のものが並ぶところ（表示例：ご相談・ご提案・制作など6枚のカード）

# 守ってほしいこと
- 同じときに出る分が出そろうまでの時間（0.08秒 × 8 ＋ 0.6秒）は、1.6秒を超えないようにする
- 並びの順番（HTML の順）と、出る順番をそろえる

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="st-demo">
  <h2>できること</h2>
  <ul class="st-group">
    <li class="st"><h3>ご相談</h3><p>作りたいもの、困っていることをお聞きします。</p></li>
    <li class="st"><h3>ご提案</h3><p>進め方と費用の目安をお出しします。</p></li>
    <li class="st"><h3>デザイン</h3><p>見本を見ながら決めていきます。</p></li>
    <li class="st"><h3>制作</h3><p>途中で確かめながら形にします。</p></li>
    <li class="st"><h3>公開</h3><p>表示と動きを確かめてから出します。</p></li>
    <li class="st"><h3>運用</h3><p>更新や改善も続けてお手伝いします。</p></li>
  </ul>
</section>

CSS

.st-group { --st-step: 0.08s; --st-duration: 0.6s; --st-distance: 20px; --st-easing: cubic-bezier(0.22, 1, 0.36, 1); }

.st-ready .st {
  opacity: 0;
  transform: translateY(var(--st-distance));
  transition: opacity var(--st-duration) var(--st-easing), transform var(--st-duration) var(--st-easing);
  /* 何番目か（--i）× ずらす時間。9番目より後ろは同じ遅れにする */
  transition-delay: calc(min(var(--i, 0), 8) * var(--st-step));
}
.st-ready .st.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .st-ready .st { opacity: 1; transform: none; transition: none; }
}

JavaScript

document.documentElement.classList.add('st-ready');

// 1つずつ見張り、同じときに画面に入ったものどうしで何番目かを --i に入れる（遅れは CSS が付ける）
// 並びを包む箱で見ると、箱が縦に長い SP で 20% に届かず、いつまでも出ないため
const stObserver = new IntersectionObserver((entries) => {
  const count = new Map(); // 並びごとの、今回の番号
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    const group = entry.target.closest('.st-group');
    const i = count.get(group) || 0;
    count.set(group, i + 1);
    entry.target.style.setProperty('--i', i);
    entry.target.classList.add('is-in');
    stObserver.unobserve(entry.target);
  });
}, { threshold: 0.2 });

document.querySelectorAll('.st').forEach((el) => stObserver.observe(el));

向いているサイト

サービス・特長・料金プランなど、カードの一覧
取引先のロゴやメンバーの写真を並べたセクション

作るときのポイント

ずらす時間は 0.05〜0.1秒。0.2秒を超えると、1つずつ待たされる感じになる
何番目かを --i に入れ、transition-delay: calc(var(--i) * 0.08s) で計算する。番号ごとに CSS を書かずに済む
遅れに上限を付ける（min()）。20個並んでも最後まで1.2秒ほどで出そろう
1つずつ見張り、同じときに画面に入ったものどうしで順番を数える。SP で1列になっても、画面の外のカードが先に動いてしまうことがない

よくある失敗

30個並んだ一覧に上限なしで付け、最後の1つが出るまで3秒待たされる
nth-child で番号ごとに遅れを書き、数が増えたときに書き足し忘れる
並びを包む箱を見張り、SP で箱が縦に長くなったときに 20% に届かず、いつまでも出ない
箱が入ったときに全部を動かし、SP で画面の外にあるカードまで先に動いて、見たときには終わっている

格子を斜めに順番に登場の動き

通称：グリッドスタッガーGrid Stagger

PC タブレット SP

動きを控える設定で見る

ずらす時間 0.06秒時間 0.5秒

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

格子に並んだタイルが、左上から右下へ斜めの波のように順に現れます。写真やロゴの一覧で、行ごとに区切らず全体をひとつながりに見せられます。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「グリッドスタッガー」（Grid Stagger）と呼ばれる動きです。

# 作ってほしい動き
Grid Stagger（格子を斜めに順番に出す）。格子のタイルが画面に入ったとき、左上から右下へ斜めの波のように順に出す。

# 動き
- きっかけ：タイル1枚ずつ、画面に 20% 入ったとき。1回だけ動かす
- 1つずつの動き：opacity 0・scale(0.9) から opacity 1・scale(1)、0.5秒、すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 遅れ：同じときに画面に入ったタイルどうしで、（行の番号 ＋ 列の番号）× 0.06秒。行と列は、表示された位置（offsetTop・offsetLeft）から JavaScript で数える
- 列の数は画面幅で変わるので、動かす直前に数える
- 格子の箱で見張らない（箱が画面の高さの5倍を超えると、20% に届かず、いつまでも出ない）

# 付ける場所
- 写真・作品・ロゴのタイルの一覧

# 守ってほしいこと
- 同じときに出る分が出そろうまでの時間（（行＋列のいちばん大きい値）× 0.06秒 ＋ 0.5秒）は、1.2秒以内にする
- SP（画面幅 640px 以下）では2列になるので、遅れもその並びで数え直す

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「グリッドスタッガー」（Grid Stagger）と呼ばれる動きです。

# 作ってほしい動き
Grid Stagger（格子を斜めに順番に出す）。格子のタイルが画面に入ったとき、左上から右下へ斜めの波のように順に出す。

# 動き
- きっかけ：タイル1枚ずつ、画面に 20% 入ったとき。1回だけ動かす
- 1つずつの動き：opacity 0・scale(0.9) から opacity 1・scale(1)、0.5秒、すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 遅れ：同じときに画面に入ったタイルどうしで、（行の番号 ＋ 列の番号）× 0.06秒。行と列は、表示された位置（offsetTop・offsetLeft）から JavaScript で数える
- 列の数は画面幅で変わるので、動かす直前に数える
- 格子の箱で見張らない（箱が画面の高さの5倍を超えると、20% に届かず、いつまでも出ない）

# 付ける場所
- 写真・作品・ロゴのタイルの一覧（表示例：灰色の12枚のタイル、PC は4列・SP は2列）

# 守ってほしいこと
- 同じときに出る分が出そろうまでの時間（（行＋列のいちばん大きい値）× 0.06秒 ＋ 0.5秒）は、1.2秒以内にする
- SP（画面幅 640px 以下）では2列になるので、遅れもその並びで数え直す

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<ul class="gs-grid">
  <li class="gs"></li><li class="gs"></li><li class="gs"></li><li class="gs"></li>
  <li class="gs"></li><li class="gs"></li><li class="gs"></li><li class="gs"></li>
  <li class="gs"></li><li class="gs"></li><li class="gs"></li><li class="gs"></li>
</ul>

CSS

.gs-grid { --gs-step: 0.06s; --gs-duration: 0.5s; --gs-easing: cubic-bezier(0.22, 1, 0.36, 1); }

.gs-ready .gs {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--gs-duration) var(--gs-easing), transform var(--gs-duration) var(--gs-easing);
  /* --d は「行＋列」。JavaScript が入れる */
  transition-delay: calc(var(--d, 0) * var(--gs-step));
}
.gs-ready .gs.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gs-ready .gs { opacity: 1; transform: none; transition: none; }
}

JavaScript

document.documentElement.classList.add('gs-ready');

// 同じときに画面に入ったタイルどうしで、表示された位置から行と列を数えて「行＋列」を --d に入れる
const gsNumber = (items) => {
  const tops = [...new Set(items.map((el) => el.offsetTop))].sort((a, b) => a - b);
  const lefts = [...new Set(items.map((el) => el.offsetLeft))].sort((a, b) => a - b);
  items.forEach((el) => {
    el.style.setProperty('--d', tops.indexOf(el.offsetTop) + lefts.indexOf(el.offsetLeft));
  });
};

// タイル1枚ずつ見張る（格子の箱で見ると、縦に長い SP で 20% に届かず、いつまでも出ないため）
const gsObserver = new IntersectionObserver((entries) => {
  const groups = new Map(); // 格子ごとに、今回入ったタイル
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    const grid = entry.target.closest('.gs-grid');
    groups.set(grid, [...(groups.get(grid) || []), entry.target]);
  });
  groups.forEach((items) => {
    gsNumber(items); // 動かす直前に1回だけ数える
    items.forEach((el) => {
      el.classList.add('is-in');
      gsObserver.unobserve(el);
    });
  });
}, { threshold: 0.2 });

document.querySelectorAll('.gs').forEach((el) => gsObserver.observe(el));

開いたときに順番に登場の動き

通称：オープニングアニメーションPage Load Sequence

PC タブレット SP

動きを控える設定で見る

ずらす時間 0.12秒時間 0.6秒動く距離 16px

速さの変わり方

すっと止まるだんだん遅くゆっくり始まりゆっくり終わる一定の速さ

ページを開いた直後に、小見出し → 大見出し → 説明 → ボタン → 写真の順に、ファーストビューの要素を出します。スクロールを待たずに動くので、トップページの最初の印象づくりに使います。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「オープニングアニメーション」（Page Load Sequence）と呼ばれる動きです。

# 作ってほしい動き
Page Load Sequence（開いたときに順番に出す）。ページを開いた直後に、ファーストビューの要素を決めた順番で出す。

# 動き
- きっかけ：ページを開いて最初の描画が終わったとき（スクロールは待たない）。1回だけ
- 順番：小見出し → 大見出し → 説明 → ボタン → 写真。順番は HTML の style="--order: 1" のように要素ごとに書く
- 1つずつの動き：opacity 0・translateY(16px) から opacity 1・translateY(0)、0.6秒、すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 遅れ：--order × 0.12秒

# 付ける場所
- トップページのファーストビュー

# 守ってほしいこと
- 全部が出そろうまでの時間（0.12秒 × 4 ＋ 0.6秒）は 1.2秒以内にする。大見出し（2番目）は 0.12秒で見え始める。0.3秒より遅らせない
- ほかのページへ移るたびに毎回動かすのは、トップページだけにとどめる

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「オープニングアニメーション」（Page Load Sequence）と呼ばれる動きです。

# 作ってほしい動き
Page Load Sequence（開いたときに順番に出す）。ページを開いた直後に、ファーストビューの要素を決めた順番で出す。

# 動き
- きっかけ：ページを開いて最初の描画が終わったとき（スクロールは待たない）。1回だけ
- 順番：小見出し → 大見出し → 説明 → ボタン → 写真。順番は HTML の style="--order: 1" のように要素ごとに書く
- 1つずつの動き：opacity 0・translateY(16px) から opacity 1・translateY(0)、0.6秒、すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 遅れ：--order × 0.12秒

# 付ける場所
- トップページのファーストビュー（表示例：「家づくりの相談窓口」の小見出し、「暮らしに合う家を、いっしょに」の大見出し、説明文、「相談する」のボタン、写真）

# 守ってほしいこと
- 全部が出そろうまでの時間（0.12秒 × 4 ＋ 0.6秒）は 1.2秒以内にする。大見出し（2番目）は 0.12秒で見え始める。0.3秒より遅らせない
- ほかのページへ移るたびに毎回動かすのは、トップページだけにとどめる

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="ls-hero">
  <div class="ls-text">
    <p class="ls ls-kicker" style="--order: 0">家づくりの相談窓口</p>
    <h1 class="ls" style="--order: 1">暮らしに合う家を、いっしょに</h1>
    <p class="ls" style="--order: 2">土地探しから設計・施工まで、ひとつの窓口でお受けします。</p>
    <a class="ls ls-btn" href="/contact/" style="--order: 3">相談する</a>
  </div>
  <div class="ls ls-photo" style="--order: 4" role="img" aria-label="家の写真"></div>
</section>

CSS

.ls-hero { --ls-step: 0.12s; --ls-duration: 0.6s; --ls-distance: 16px; --ls-easing: cubic-bezier(0.22, 1, 0.36, 1); }

.ls-ready .ls {
  opacity: 0;
  transform: translateY(var(--ls-distance));
  transition: opacity var(--ls-duration) var(--ls-easing), transform var(--ls-duration) var(--ls-easing);
  transition-delay: calc(var(--order, 0) * var(--ls-step));
}
.ls-ready.is-loaded .ls { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ls-ready .ls { opacity: 1; transform: none; transition: none; }
}

JavaScript

const lsRoot = document.documentElement;
lsRoot.classList.add('ls-ready');

// 最初の描画が終わってから動かす（同じ描画の中で付けると、動かずにいきなり出る）
requestAnimationFrame(() => {
  requestAnimationFrame(() => lsRoot.classList.add('is-loaded'));
});

向いているサイト

トップページのファーストビュー
キャンペーン・新商品の特設ページの冒頭

作るときのポイント

順番は CSS の番号ではなく、HTML の style="--order: 2" で決める。並べ替えても CSS を直さずに済む
最初の描画が終わってから動かす（requestAnimationFrame を2回重ねる）。早すぎると、動かずにいきなり表示される
大見出しは早めに出す。読ませたい言葉が最後に来ると、待たされた感じが残る
写真は大きいので、ほかより距離を小さくするか、透明からだけにする

よくある失敗

全部が出そろうまで2秒以上かかり、ボタンを押そうとしたときにまだ見えない
全ページのファーストビューに付けて、ページを移るたびに同じ演出を見せられる
描画の前に class を付けてしまい、動きが見えずにいきなり出る

スクロールに合わせて濃くなる登場の動き

通称：スクロール連動フェードScroll-driven Fade

PC タブレット SP

動きを控える設定で見る

動き終わる位置 35% 動く距離 40px

見本の中をスクロールしてください。止めると動きも止まり、上へ戻ると薄くなります。Firefox では動かずに最初から見えます。

時間で動くのではなく、スクロールした分だけ少しずつ現れます。止まれば止まり、戻れば戻るので、読む速さに動きがついてきます。JavaScript を使わず CSS だけで作れます。

この形で作る見本を作る

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

この形で作る

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

# 動きの呼び名
一般に「スクロール連動フェード」（Scroll-driven Fade）と呼ばれる動きです。

# 作ってほしい動き
Scroll-driven Fade（スクロールに合わせて濃くなる）。要素が画面に入ってくる間、スクロールした分だけ少しずつ現れる。時間では動かさない。

# 動き
- CSS の scroll-driven animations で作る：animation-timeline: view()、animation-range: entry 0% cover 35%
- @keyframes：from は opacity 0・translateY(40px)、to は opacity 1・translateY(0)
- animation-timing-function は linear（スクロールの量と動きをそろえる）
- 上へ戻ると、動きも戻る

# 付ける場所
- 縦に長いページのセクションごとの見出しとカード

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでは動かさずに最初から見せる
- JavaScript の scroll イベントで同じことをしない
- 対応ブラウザ：Chrome・Edge 115 以降、Safari 26 以降。Firefox は 2026年10月時点で初期設定では動かないので、最初から見える形になる

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

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

この見本と同じものを作らせる指示文です。文言は表示例のまま入っています。

見本を作る

# 動きの呼び名
一般に「スクロール連動フェード」（Scroll-driven Fade）と呼ばれる動きです。

# 作ってほしい動き
Scroll-driven Fade（スクロールに合わせて濃くなる）。要素が画面に入ってくる間、スクロールした分だけ少しずつ現れる。時間では動かさない。

# 動き
- CSS の scroll-driven animations で作る：animation-timeline: view()、animation-range: entry 0% cover 35%
- @keyframes：from は opacity 0・translateY(40px)、to は opacity 1・translateY(0)
- animation-timing-function は linear（スクロールの量と動きをそろえる）
- 上へ戻ると、動きも戻る

# 付ける場所
- 縦に長いページのセクションごとの見出しとカード（表示例：「ご相談」「ご提案」など6つのブロック）

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでは動かさずに最初から見せる
- JavaScript の scroll イベントで同じことをしない
- 対応ブラウザ：Chrome・Edge 115 以降、Safari 26 以降。Firefox は 2026年10月時点で初期設定では動かないので、最初から見える形になる

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

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

HTML

<section class="sd-list">
  <div class="sd"><h3>ご相談</h3><p>作りたいもの、困っていることをお聞きします。</p></div>
  <div class="sd"><h3>ご提案</h3><p>進め方と費用の目安をお出しします。</p></div>
  <div class="sd"><h3>デザイン</h3><p>見本を見ながら決めていきます。</p></div>
  <div class="sd"><h3>制作</h3><p>途中で確かめながら形にします。</p></div>
  <div class="sd"><h3>公開</h3><p>表示と動きを確かめてから出します。</p></div>
  <div class="sd"><h3>運用</h3><p>更新や改善も続けてお手伝いします。</p></div>
</section>

CSS

.sd { --sd-distance: 40px; }

@keyframes sd-in {
  from { opacity: 0; transform: translateY(var(--sd-distance)); }
  to   { opacity: 1; transform: none; }
}

/* 使えるブラウザだけで動かす（使えないブラウザでは最初から見える） */
@supports (animation-timeline: view()) {
  .sd {
    animation: sd-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd { animation: none; }
}

向いているサイト

読みものページ・会社の歩み・制作の流れなど、縦に長く読ませるページ
JavaScript を増やしたくない、軽く作りたいサイト

作るときのポイント

animation-timeline: view() は、要素が画面のどこにあるかで動きが進む。時間の指定（animation-duration）は使わない
animation-range: entry 0% cover 35% で、要素の上の端が画面の下の端に入ったところから動き始め、要素が画面を通り抜ける道のり（画面の高さ＋要素の高さ）の 35% まで来たところで動き終わる
速さの変わり方は linear。スクロールの量と見た目の変化がそろう
@supports で囲み、使えないブラウザでは最初から見える状態にする

よくある失敗

@supports で囲まず、使えないブラウザで opacity: 0 のまま何も見えない
animation-range を広くしすぎて、画面の中央に来てもまだ薄い
JavaScript の scroll イベントで同じ動きを作り、スクロールのたびに計算が走って重くなる

こんなとき	向いている型
文章の多いページで、控えめに動かしたい	その場でふわっと
セクションごとに読み進めてもらう、ふつうの会社・お店のサイト	下からふわっと
ページの上の方の告知や見出し	上からふわっと
写真と文章を左右に並べたセクション	横からふわっと・画面の外から滑り込む
カードや写真を手前に置いたように見せたい	少し大きくなって出る
実績の数字やアイコンを元気に見せたい	小さな点から広がる
キャッチコピーを印象に残したい	ぼかしが晴れる
カードの一覧に立体感を出したい	めくれて出る
押してほしいボタンを1つだけ目立たせたい	弾んで出る
同じ形のものが並ぶ一覧	時間差で順番に・格子を斜めに順番に
トップページを開いた直後の印象	開いたときに順番に
重いページの読み込みを、ロゴと進みで待ってもらいたい	ローディング画面（読み込み中の動き）
読む速さに動きを合わせたい・JavaScript を増やしたくない	スクロールに合わせて濃くなる

その場でふわっと 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

下からふわっと 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

上からふわっと 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

横からふわっと 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

少し大きくなって出る 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

小さな点から広がる 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

ぼかしが晴れる 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

画面の外から滑り込む 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

めくれて出る 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

弾んで出る 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

時間差で順番に 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

格子を斜めに順番に 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

開いたときに順番に 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

スクロールに合わせて濃くなる 登場の動き

check_circle向いているサイト

build作るときのポイント

warningよくある失敗

登場の動きはどの型を選ぶか

どの型でも守ること

よくある質問 (FAQ)

AIへの指示文は、英語で書いたほうがよいですか？

AIに動きを付けてもらうと、安っぽく見えるのはなぜですか？

GSAP などのライブラリは使わなくてよいですか？

ページの中でいくつの型を使ってよいですか？

その場でふわっと登場の動き

向いているサイト

作るときのポイント

よくある失敗

下からふわっと登場の動き

向いているサイト

作るときのポイント

よくある失敗

上からふわっと登場の動き

向いているサイト

作るときのポイント

よくある失敗

横からふわっと登場の動き

向いているサイト

作るときのポイント

よくある失敗

少し大きくなって出る登場の動き

向いているサイト

作るときのポイント

よくある失敗

小さな点から広がる登場の動き

向いているサイト

作るときのポイント

よくある失敗

ぼかしが晴れる登場の動き

向いているサイト

作るときのポイント

よくある失敗

画面の外から滑り込む登場の動き

向いているサイト

作るときのポイント

よくある失敗

めくれて出る登場の動き

向いているサイト

作るときのポイント

よくある失敗

弾んで出る登場の動き

向いているサイト

作るときのポイント

よくある失敗

時間差で順番に登場の動き

向いているサイト

作るときのポイント

よくある失敗

格子を斜めに順番に登場の動き

向いているサイト

作るときのポイント

よくある失敗

開いたときに順番に登場の動き

向いているサイト

作るときのポイント

よくある失敗

スクロールに合わせて濃くなる登場の動き

向いているサイト

作るときのポイント

よくある失敗