3つのボタンを順にタップして、指を離したあとの戻り方を比べてみてください
タップするたび往きと戻りが自動で再生される。伸びるところはどれも似ているのに、指を離したあと――素っ気なくスッと戻るか、バネのように揺れて収まるか――が実装ごとにこれだけ違う。この戻りの手触りを覚えておくと、AIへの注文が「なんとなくかっこよく」から一歩具体的になる。
静的デザイン（CSS）と動的表現（JS）の境界線
色・余白・タイポグラフィのような「見た目そのもの」はCSSの領分。「時間の経過とともに変化する」「ユーザーの操作に反応する」ものはJavaScriptの領分になる。ホバーで色が変わるだけならCSSで足りるが、スクロール量に応じて複数要素が連動して動くような演出はJSが要る、という境界線を持っておくと依頼の粒度が変わる。
夕暮れを、設計する。
1本のスクラブが持つ連続した数値が、閾値の違う要素へ配り分けられ、ポスターが順に立ち上がる。「どこまで進んだか」を読んで複数要素をまとめて動かす——これは2状態しか持たないCSSの :hover には荷が重く、JavaScriptの出番になる。
1本のスクラブが持つ連続した数値が、閾値の違う要素へ配り分けられ、キッカー→大見出し→本文→画像→CTAの順にポスターが立ち上がる。「どこまで進んだか」を読んで複数要素をまとめて動かす――これは2状態しか持たないCSSの :hover には荷が重く、JavaScriptの出番になる。
transform と opacity は合成だけで済むのでカクつきにくい。width や left はレイアウトからやり直すため、同じ「右へ動く」でも下のレーンだけ飛び飛びに遅れて着く。
上のレーンは常に transform（合成のみ）で滑らかに進み、下のレーンは選んだプロパティで進む。width や left を選ぶと、同じ「右へ動く」でも下だけ飛び飛びに遅れて着く。レイアウトからやり直す段を踏むほど、コマ落ちして重くなる。
Canvas・Three.jsが使われる場面の見分け方
画面に「板」や「線」を描いてアニメーションさせる程度ならCanvas（2D）で十分。奥行き・回転・立体的な光の当たり方が必要になった瞬間にThree.js（WebGL）の領分になる。「平面上で動くか」「立体として回り込めるか」が見分けの基準になる。
左の正方形はどれだけ回しても表を向いたまま。右の立方体だけが側面へと回り込む。裏側があるかないか――この差が、Canvas 2Dで間に合うか、それともThree.jsを持ち出すことになるかを分けている。
方式を切り替えても画面の動きは同じ。でもDOM方式は点の数だけ本物の要素が生まれ、Canvas方式は何点でも1枚のまま。数が増えるほど、この管理コストの差がものを言う。
方式を切り替えても、画面の中の漂い方はまったく同じ。違うのは裏側だ。DOM方式は点の数だけ本物の要素が生まれ、数が増えるほどブラウザの抱える荷物が増える。Canvasは何点でも1枚に描くだけ。たくさんの小さなものが動く演出でCanvasが選ばれるのは、この身軽さのためだ。
組み合わせることで生まれる表現の幅
CSSだけのサイトは軽快だが平坦になりがちで、JS・Canvas・Three.jsを重ねるほど表現の幅は広がるが実装・保守のコストも増える。「このセクションだけWebGLの背景を敷き、他はCSSのみ」のように、演出の濃淡を意図的に作ることが、コストと表現力のバランスを取る鍵になる。
重ねて、魅せる。
架空サイトのヒーロー部分
レイヤーを足すほど画面は豊かになり、歩調を合わせてコストのバーも伸びる。どこまで重ねるかをページ一律で決めず、セクションごとに手加減する——それが濃淡をつけるということ。
レイヤーを足すほど画面は豊かになり、それと歩調を合わせてコストのバーも伸びていく。どこまで重ねるかをページ全体で一律に決めず、セクションごとに手加減する。それが濃淡をつけるということ。
生きた面。
「生きている質感」の正体は、時間で揺れる値を面いっぱいに敷き詰めること。実サイトではこれをGPUで走らせるWebGLシェーダーが担い、CSSだけでは出せない濃さを効かせたい所にだけ足す。ここではCanvas 2Dで粗く近似している。
時間とともに揺れる値を画面いっぱいに敷き詰めると、平らな面が「生きている」ように見えてくる。色（ムード）を変えれば雰囲気ごと切り替わる。実サイトではこれをGPUで走らせるWebGLシェーダーが担い、CSSだけでは出せない濃さを、効かせたい場所にだけ足していく。
AIに依頼する際の技術用語の使い分け
「かっこよくして」だけでは実装方針が定まらない。「スクロールで要素がふわっと出てくる（CSS/JSのreveal）」「背景がぬるぬる動く（WebGLのシェーダー）」「立体的なオブジェクトが回る（Three.js）」のように、見たい動きを技術用語に紐づけて伝えると、狙った実装に近づきやすい。
スクロールで要素がふわっと浮かび上がる動き
この動き、AIに頼むならどの用語？
見たい動きを技術用語に翻訳できると、AIへの依頼が「かっこよく」から一段具体的になる。ちなみにこのプレビューは全部CSSアニメーションで動いている。
動きと用語を一度結びつけておくと、次に頼むときは「かっこよく」ではなく「立体が回る＝Three.js」と言える。当てるたびに小さく気持ちいいこの対応づけが、そのままAIに伝わる語彙として残る。
2本とも同じ目盛り（最大 24）
全部が光って主役が消える。コストは振り切れ
「そのまま」に切り替えると全セクションが光り、コストのバーだけが振り切れる。「仕上げ」はヒーロー一箇所だけを濃くして、軽いまま主役が立つ。濃淡をつけるとは、この一箇所を選ぶこと。
「そのまま」は全セクションを全部盛りにして、全部が光り主役が消え、コストのバーだけ振り切れる。「仕上げ」はヒーロー一箇所だけを濃くして、軽いまま主役が立つ。同じ目盛りで並べると、この非線形なふくらみが数値で見える。「ここはリッチに、他は軽く」とAIに伝える判断軸が、そのまま手に入る。
AIに投げるプロンプト例
Webサイトに動きをつけたいですが、技術的な知識があまりありません。 以下のイメージを伝えるので、適切な実装方法（CSS/JS/Canvas/Three.jsのどれが適切か）を提案してください。 - 画面をスクロールすると、要素がふわっと浮かび上がるように出てきてほしい - ヒーロー部分の背景に、何か「生きている」ような質感の動きが欲しい - ボタンにカーソルを乗せたときに気持ちよく反応してほしい 技術は問わないので、それぞれ何を使うのが適切か、なぜそれが適切かも教えてください。
速く動かすと細く、ゆっくりだと太くなる——この曲がった一本を同じ形のDOM要素で組むのは至難。Canvasは1枚の面にピクセルを直接置くので、任意の軌跡・図形・可視化を自由に描ける。これがCanvasを選ぶもう一つの理由。
速く動かすと細く、ゆっくりだと太くなるネオンの一本。この曲がりくねった線を、同じ形のDOM要素で組み上げるのはほぼ不可能に近い。ピクセルを1枚の面へ直接置けるCanvasだからこそ、こういう自由が利く。可視化やお絵描きのような表現でCanvasが選ばれるのは、この描きやすさゆえだ。