🎉

「ニュッと大きく」の地獄 ─ LPアニメーションを言葉で伝えられない人のための辞書

に公開
web制作
アニメーション
フロントエンド開発
ai活用
idea

「スクロールしたら、コンテンツがふわっと表示される感じにしたいんです」
「このボタン、マウスを乗せたらニュッと大きくできませんか？」

Web制作、特にランディングページ（LP）の現場で、こんな 感覚的な表現 でアニメーションを説明したことはありませんか？

これらの言い回しは、雰囲気や方向性を共有するうえでは便利です。
しかし、AIに生成を依頼したり、エンジニアに実装を渡したりする際には、終わりの見えない “認識すり合わせの往復” が始まってしまいます。

なぜ「感覚で伝える」と地獄になるのか

「ふわっと」は、フェードインかもしれません。
でも、「スライドしながら」かもしれません。
あるいは、「スケールアップを伴うふわっと」かもしれません。

つまり “1つの言葉に、複数の動きの可能性が含まれている” のです。

その結果、

  • 認識のズレ
  • 修正依頼の往復
  • 「なんか違うんだよな…」の無限ループ
  • 時間とメンタルの消耗

が発生します。

これは あなたが悪いのではなく、言葉の解像度が低いだけ です。
この記事は、まず押さえておきたい基本アニメーションをまとめた “辞書” です。

よくあるLPアニメーションと正式名称・指示文

以下は、現場でよく出る “感覚語彙” を 正式名称 と
AI / エンジニア / ChatGPT へ依頼するとき そのままコピペで使える指示文 に翻訳したものです。

よく言われる表現 正式名称／実装キーワード AIに依頼するときの指示例（コピペOK） 概要
スクロールすると ふわっと出る Scroll Reveal / Fade-in + Slide-up 「要素が画面内に入ったら opacity: 0 → 1 / y: 20px → 0 / duration 0.6s で表示」 最も一般的なスクロール表示演出
画像が パラパラ動く / 奥行きある感じ Parallax Scrolling 「背景と前景に異なるスクロール速度を設定し、奥行き感を演出してください」 視差効果でリッチな印象
ボタンが ニュッと大きくなる Scale-up on Hover / Grow Animation 「hover時に transform: scale(1.05) / transition 0.3s ease」 ホバーのフィードバックと強調
ロゴが スーッと描かれる SVG Stroke Animation / Path Animation 「SVGパスのstroke-dasharray / stroke-dashoffset を利用して描画アニメーションを付与」 ブランド演出に有効
数字が ふわっと増える Count-up Animation / Number Counter 「数値を0から指定値まで duration 1.2s でインクリメント表示」 実績・信頼の訴求に活用
テキストが 一文字ずつ現れる Typing Effect / Text Animation 「文字列を1文字単位で逐次表示するアニメーションを追加」 メッセージ性の強調
ページ遷移が おしゃれに切り替わる Page Transition Animation 「ページ遷移時に fade / slide などのトランジションを噛ませてスムーズなUXに」 サイト全体の統一感

AIへの依頼文テンプレ（コピペOK） 

対象要素: （例：ヒーローセクションの見出し）
アニメーションの名称: （例：Scroll Reveal / Fade-in + Slide-up）
初期状態: opacity 0 / y: 20px
表示状態: opacity 1 / y: 0
duration: 0.6s
トリガー: 要素が画面内に入ったら開始
技術スタック: React / Tailwind / Framer Motion

→ 具体 → 一発で伝わる

アニメーションを選べないときは？

「何を使えば正解かわからない」という場合は、
LPの目的 / トンマナ / 読みやすさ を伝えてAIに提案させればOKです。

あなたはUI/UXデザイナーです。
「自然 / 上品 / 余白多め」のブランドに合うアニメーションを3つ提案してください。
過剰に動かず、読みやすさを損なわないことを最優先してください。

まとめ

  • 「ふわっと」「ニュッと」 は複数の動きを含むため、手戻りが発生しやすい
  • 正式名称で指示するだけで AIも人も迷わなくなる
  • この記事の表は そのままコピペして依頼に使える

今日から、感覚語ではなく “名前” でアニメーションを伝えてみてください。
それだけで、制作の進行がぐっと楽になります。

Discussion