AIに"動き"を頼む一言で、サイトはここまで変わる【動きの指定語彙集つき】
note.comでも読む
AIが作るサイトは、頼まなくても勝手に動きます。
実際、私が何も指定していないLPに、ローディング演出まで入っていました。問題は「動くかどうか」ではなく、「どんな動きになるかを言葉で決められる」ことに気づくかどうかです。
今回、同じサービスのLPを、頼み方の一言だけ変えて5回AIに作らせました。まずは、そのうち4案を2×2で並べて、同時にスクロールした比較を見てください。違うのは指示の一言だけです。
レイアウトの雰囲気だけでなく、スクロールしたときの「動きの密度」がまるで違うのが伝わるでしょうか。この記事では、この差がどの一言から生まれたのかを、検証結果そのままに公開します。最後に、頼み方をそのまま写して使える「動きの指定語彙集」も付けました。
「AIで作った感」が丸出しで、人に見せづらい
AIでサイトは一発で作れたけれど、どこか安っぽい。「AIで作った感」が丸出しな気がして、人に見せづらい——ネット上ではそんな声が目立ちます。
見覚えのある配色、どこかで見たレイアウト、そしてスクロールしても代わり映えのしない画面。時間をかけてAIと会話しながら作ったのに、完成してみたら「これ、テンプレートと変わらなくない？」と自分でがっかりしてしまいます。
特にもったいないのが「動き」です。プロのサイトを開いたときの「ちゃんとしてる感」の正体は、文字がスッと浮かび上がったり、数字が目の前で増えたり、ボタンが指に反応したりする小さな動きの積み重ねです。ここが薄いと、内容が同じでも一気に素人っぽく見えます。
でも、CSSやJavaScriptを勉強してから……と考えると気が遠くなりますよね。安心してください。この記事でやることは勉強ではなく、AIへの頼み方の言葉を変えるだけです。
動きはあった。ただ、「期待した動き」ではなかった
「アニメーション付けて」とAIに丸投げしたら、動きは付いたものの期待と全然違うものが返ってきた、という体験談もよく見かけます。
正直に書くと、私もまったく同じでした。
「Hanaso Talk」という架空のオンライン英会話サービスのLPをAIに作らせる検証で、最初に試したのが「アニメーション付けて」という一言です。結果は……動きは付きました。ただ、スクロールするたびに要素がふわっと現れるスクロールリビールがひたすら続くだけ。動きの種類が少なく、単調で印象に残りません。
「じゃあもっとイメージを伝えよう」と次に試したのが「Framerっぽくして」。今度はふわっと現れる動きの連発に加えて、紫グラデーションの、いかにも「AIが作りました」という没個性なUIが返ってきました。
このとき気づいたんです。AIは「動かすかどうか」は勝手に決めてくれる。でも「どんな動きにするか」は、こちらの言葉の解像度がそのまま反映される、と。
一言の差で、サイトの「動きの密度」がここまで変わる
5パターンの頼み方と結果を、そのまま共有します。すべて同じ「Hanaso Talk」のLP依頼で、変えたのは指示の一言だけです。
パターンa「アニメーション付けて」 スクロールリビール中心＋文字が流れるマーキー＋点滅。動きはあるが種類が少なく単調。
パターンb「Framerっぽくして」 リビールの連発＋紫グラデーション。「Framerっぽい」という言葉をAIが平均的に解釈した、没個性なUI。
パターンc「動きはFramerっぽく＋配色はオレンジ系と指定」 ここから一気に変わりました。マーキー・金額のカウントアップ・背景がゆっくり動くパララックス・ボタンが弾むバネホバーと、動きの種類が5案中で最多に。しかも、頼んでいないのにオレンジのカーテンが開くローディング演出まで自動で入っていました。冒頭に書いた「勝手に動く」の正体はこれです。
パターンd「a〜cのいいとこ取りで合成して」 cの動きを全部引き継ぎつつ、コードの見せ方がMac風ウィンドウになるなど、細部が足されたバージョン。このdの作り方（複数案からのいいとこ取り）は前回の実録に詳しく書いたので、この記事では割愛します。
パターンe「result-dにローディングアニメーションを付けて。それ以外変えない」 仕上げの検証です。この一言だけで、ロゴ表示＋タイピングドット＋0→100%のカウンター＋カーテンが上に開く演出が一発で生成されました。
百聞は一見にしかず。aとcを同じ速度でスクロールした比較がこちらです。左がa「アニメーション付けて」、右がc「動きの種類＋配色を指定」。
同じAIに、同じLPを頼んでいます。変えたのは一言だけ。ここから見えたポイントは3つです。
① 「アニメーション」という抽象語より「動きの種類」を名指しする 抽象的に頼むと、AIはいちばんよくあるパターンを返します。「パララックス・カウントアップ・バネホバー」のように種類を名指しすると、動きの密度が一気に上がります。
② 配色をセットで渡す bが紫グラデになったように、指定しないとAIは「それっぽい色」を選びます。動きの指定と配色の指定はセットです。
③ 「〇〇だけ付けて。それ以外変えない」という制約を付ける eの成功の鍵はここです。範囲を区切らないと、AIは一部を直すついでに全体を作り替えてしまうことがあります。
【特典】動きの指定語彙集——AIへの頼み方カンニングペーパー
とはいえ、「動きの種類を名指しする」には、動きの名前を知らないと始まりません。そこで、今回の検証で効果があった「頼み方の言葉」を一覧にしました。次にAIへ頼むとき、そのまま写して使ってください。
スクロールリビール（scroll reveal） — 画面を進むたびに要素が順番に登場する、いちばん基本の動き
スクロールに合わせて、各セクションの見出しと画像が下からふわっと現れるようにしてマーキー（marquee） — 電光掲示板のように文字やロゴが横に流れ続ける演出。実績・お客様の声と相性◎
導入企業のロゴを、横にゆっくり流れ続けるマーキーにしてカウントアップ — 金額や実績の数字が0から増えていく、視線が止まる動き
実績の数字（受講者数・満足度）を、画面に入ったら0からカウントアップさせてバネホバー — マウスを乗せるとプルンと弾む、思わず押したくなるボタンの手触り
ボタンはホバーしたときにバネのように少し弾むアニメーションにして
パララックス（parallax） — 背景がゆっくり追いかけてくる奥行き演出。ヒーロー画像に効く
ヒーローセクションは、背景と前景のスクロール速度を変えてパララックスにしてローディング演出 — サイトを開いた瞬間を「開幕」に変える演出。第一印象がワンランク上がる
result-dにローディングアニメーションを付けて。それ以外変えない（↑これは実際に検証eで使った文そのままです。「ロゴ→カウンター→カーテンが開く」まで一発で出ました）
そのローディング演出の実物がこちら。頼んだのは上の一言だけです。
使い方のコツは、この語彙集から**「動きの名前＋付けたい場所＋それ以外変えない」の3点セット**で頼むこと。これだけで、返ってくる結果の精度が別物になります。
「プロンプトを磨く」より「決める場所を知る」ほうが早い
ここまで読んで、「結局プロンプトの勉強が必要なのか」と思った方へ。少し違います。
大事なのは、AIに何を決めさせて、何は自分が決めるかの線引きです。
- 配色は自分が決める
- 動きの種類は語彙集から自分が選ぶ
- 変えたい一点だけを渡し、それ以外は守らせる
意図を渡さないと、AIは平均点のデザインを返してきます。それが「AIっぽいサイト」の正体です。逆に言えば、この3点さえ自分で握れば、コードを1行も書かずに「自分のサイト」と呼べるものになります。
ただ、今回の完成形にも修正の余地は残っています。たとえば実績の数字が、本来は大きく強調されるはずなのに、ラベル用の小さい文字サイズで表示されるCSSの取り違えがひとつ入っていました。動きは言葉で頼めるようになっても、検品はまだ人間の仕事です。
ちなみに、複数案を作らせて「案の選び方・いいとこ取りの合成」をするやり方は、前回の実録で詳しく書いています。
「AIっぽいサイト」のまま止まる人が、これから増える
「AIに任せると、押せない場所まで動く・配色がどれも同じ、いわゆる『AIっぽいサイト』になるだけでは？」という懐疑的な声もあります。
これは半分正しくて、半分違います。何も指定しない人のサイトは、確かにどれも似てきます。でも今回の検証のとおり、一言の指定で仕上がりは別物になります。
しかも、この「動き」はもう一部のプロだけの技術ではありません。デザイナーの72%が生成AIを制作に使うようになりました。それと並行して、スクロールに連動した動きやボタンの小さな反応は、2026年のWebデザインでは当たり前の水準になりつつあります。 出典: https://www.figma.com/resource-library/web-design-trends/
つまり、AIでサイトを作る人が増えるほど、「とりあえず作った人」と「動きまで言葉で決めた人」の差は開いていきます。語彙集を手に入れた今が、いちばん差をつけやすいタイミングです。
まとめ——動きは「頼めるもの」だと知るだけで変わる
今回の検証で見えたことを整理します。
- AIのサイトは頼まなくても勝手に動く。決めるべきは「どんな動きにするか」
- 「アニメーション付けて」は最も単調な結果を生む。動きの種類を名指しする
- 配色はセットで渡す。指定しないと「それっぽい色」になる
- **「〇〇だけ付けて。それ以外変えない」**が一点強化の最短ルート
- 迷ったら語彙集から「名前＋場所＋制約」の3点セットで頼む
最後に、完成形（パターンe）をローディングから最下部まで通しでスクロールした様子を置いておきます。「アニメーション付けて」から始まった検証の到達点です。
今すぐできることを一つだけ。あなたのサイトやLPで一番目立たせたい場所を思い浮かべて、語彙集から動きを1つ選んで頼んでみてください。 10分もあれば試せるはずです。
次にサイトを作るときに役立ちそうだと思ったら、この記事を保存（スキ）しておいてもらえると、見返すときに便利です。「この頼み方を試したらこうなった」という報告も、コメントで教えてもらえたら嬉しいです。次の検証のヒントにします。
これからも「非エンジニアがAIを使い倒す」をテーマに、実際に試した検証をそのまま書いていきます。フォローしておいていただけると、次の記事がタイムラインに届きます。