動きの名前を知ると、デザインの選択肢が増える。
「なんか動かす」ではなく、「写真をマスクで現す」「カードを少し持ち上げる」「数値を増やす」と言えるようになる。最初に見るべき8個だけを、実際に動く見本にした。
まず見る8個の動き
動きは、何を動かすかで選ぶ。写真は「登場」、カードは「ホバー」、長い記事は「スクロール」、ボタンは「反応」、ロゴや小さな飾りは「待機」。
最初から、ゆっくり繰り返し動く。見本は一つの役だけを見せている。
写真：フェードイン
写真を静かに登場させる。
見出し：下から出る
文章の始まりを伝える。
写真：マスクで現れる
写真を一枚、印象的に見せる。
カード：少し持ち上がる
選べる場所を伝える。
STORY
カード：3Dティルト
触れられる感じを足す。
進行：バーが伸びる
読み込み・手順を見せる。
ボタン：波紋
押した反応を返す。
ロゴ：ゆっくり浮く
待っている画面に空気を足す。
ライブラリを知ると、できることが見える
プログラミングの知識がなくても、ここだけ分かれば選べる。
たとえば、ブログのボタンを少し沈めるだけならCSSだけで足りる。記事のカードを押したときに内容を開くならJavaScriptを足す。Reactは、アプリの画面を部品ごとに作りたいときの土台だ。Reactを知らなくても、この8個の動きは使える。
全部を自作しなくていい。ライブラリは「どんな動きが世の中にあるか」を知る図鑑にもなる。
- Motion：Spring、レイアウト移動、スクロール、ドラッグ。Reactで画面の部品を自然につなげたいとき。
- GSAP：タイムライン、SVG、複数要素の細かな演出。LPや作品ページで、順番と間を作り込みたいとき。
- Lenis：なめらかなスクロール。スクロール演出の土台を整えたいとき。
- Barba.js：ページをまたぐ切り替え。作品一覧から詳細へ入る流れをつなげたいとき。
- Splide：スライド・カルーセル。写真や記事を横に見せたいとき。
- Lottie：After Effectsで作った動きをWebへ持ち込む。アイコンや短い絵の動きに向く。
- Three.js：3D、光、粒、立体の世界。ページ全体を作品として見せたいとき。
最初の順番は、CSSだけで一個作る → JavaScriptで再生のきっかけを足す → それでも足りないときだけライブラリを見る。React、GSAP、Three.jsを最初から覚える必要はない。
ライブラリを入れる目的は、派手にすることではない。「ここはスクロールで見せる」「ここはページをまたいでつなぐ」という選択肢を増やすことだ。名前が分かれば、ライブラリのデモを探せる。デモを見れば、自分のページに必要な一個を選べる。
最初の一個は用途で決める
| 目的 | 最初に選ぶ動き |
|---|---|
| 読ませたい | フェードイン、スタッガー、スクロールリビール |
| 押したと伝えたい | 押すと沈む、波紋、コピー完了 |
| 空気を作りたい | 浮く、光が横切る、粒が漂う |
| 画面を切り替えたい | アコーディオン、モーダル、タブ |
見た目の動きはCSSに置き、JavaScriptはクリックや画面に入った瞬間を受け取る役にする。
const observer = new IntersectionObserver((entries) => {
entries.forEach(({ isIntersecting, target }) => {
if (isIntersecting) target.classList.add('is-visible');
});
}, { threshold: 0.2 });
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));端末で「視差効果を減らす」が選ばれているときは、装飾の動きを止める。MDN: prefers-reduced-motion も、不要な動きを減らす方法を案内している。
@media (prefers-reduced-motion: reduce) {
.motion, .reveal { animation: none; transition: none; }
}8個を見たあと、残すのは一個でいい。その一個に、ページで果たす役を持たせる。
