ClaudeやChatGPTにホームページを作ってもらうと、文章や配色はそれらしく整うのに、動きだけが思った形にならないことがあります。「この辺をおしゃれに動かして」と頼んでも、AIはどの動きを選べばいいのか分かりません。

このとき役に立つのが、Web制作の現場で使われている「動きの名前」です。パララックス、スティッキーといった名前を1つ知っているだけで、AIへの頼み方が具体的になります。この記事では、ホームページでよく使われる動きを6つに絞り、それぞれの意味と、AIへの頼み方の例を紹介します。

▼記事を3分で理解できる！マンガ風スライドはこちら

「おしゃれに動かして」がAIに伝わりにくい理由

「おしゃれ」という言葉には、決まった動きが含まれていません。ふわっと現れる動きも、横から入ってくる動きも、奥行きが出る動きも、どれも「おしゃれ」と言えます。AIはその中から1つを選ぶしかなく、選んだ動きが頼んだ人の頭の中と合うかは運次第になります。

一方で、Web制作には動きごとに決まった呼び名があります。名前で頼むと、AIが選ぶ余地が減ります。制作会社に頼むときに「ここはパララックスで」と伝えるのと同じで、相手が人でもAIでも、共通の言葉があるほうが話は早く進みます。

ホームページでよく使う動きの名前6つ

下の挿絵は、6つの動きを1枚にまとめたものです。名前と動きを見比べながら読み進めてください。

01 フェードイン（ふわっと現れる）

透明な状態から、少しずつ見えるようになる動きです。スクロールして写真や文章が画面に入ったときに使うと、ページ全体が落ち着いた印象になります。6つの中でいちばん控えめで、どのお店や会社のサイトにも合わせやすい動きです。

02 スライドイン（横からすっと入ってくる）

画面の外や少し離れた位置から、横や下にすべり込んでくる動きです。サービスの特長を順番に見せたいときや、写真と文章を交互に並べるときに向いています。

03 スタッガー（時間差で1つずつ出てくる）

並んだカードやメニューを、同時ではなく少しずつ時間をずらして表示する動きです。「スタッガー」は英語で「ずらす」という意味があり、制作用の道具でも同じ名前で呼ばれています。商品一覧やスタッフ紹介のように、同じ形のものが並ぶ場所で使うと、目が自然に左から右へ流れます。

04 パララックス（奥と手前が違う速さで動く）

スクロールしたとき、背景をゆっくり、手前の文章や写真を速く動かして、奥行きを出す動きです。日本語では「視差効果」とも呼ばれます。お店の外観や地域の風景など、印象に残したい写真が1枚あるときに効果が出ます。

05 スティッキー（スクロールしても見出しが上に残る）

ページを下に読み進めても、見出しやメニューが画面の上にとどまり続ける動きです。メニュー表や料金表のように縦に長いページで、「今どこを読んでいるか」が分かるようになります。見た目の演出というより、読みやすさのための動きです。

06 テキストリビール（文字が順に現れる）

見出しの文字が、下から1文字ずつ、または1行ずつせり上がって現れる動きです。トップページの最初のひと言など、いちばん読ませたい言葉に1か所だけ使うと目を引きます。

AIへの頼み方は「場所・名前・強さ」の3点で

動きの名前が分かったら、次の3点をセットにして頼みます。

・場所：どこを動かすか（例：トップの写真、サービス紹介のカード）

・名前：どの動きにするか（例：パララックス、スタッガー）

・強さ：どのくらい目立たせるか（例：控えめに、1回だけ）

そのまま使える依頼文の例です。場所の名前やかっこ内の強さは、自分のサイトに合わせて書き換えてください。

このホームページに動きを付けてください。

・トップの写真：パララックス（背景をゆっくり動かす程度で、控えめに）
・「選ばれる理由」の3つのカード：スタッガー（左から順に、時間差で表示）
・料金表のページ：見出しをスティッキーにする
・それ以外の場所：フェードインだけにして、動きは増やさない

動きを減らす設定にしている人には、動きを止めて表示してください。

最後の1行は、次の章で説明する見る人への配慮です。

動きは入れすぎない。見る人への配慮も一緒に頼む

動きは多いほど良いわけではありません。どの場所も動くと、何を見せたいのかがかえって伝わりにくくなります。目安として、1ページの中で目立つ動きは1〜2か所に絞り、残りはフェードイン程度にとどめるのがおすすめです。

また、画面の大きな動きで、めまいや気分の悪さを感じる人がいます。Webの見やすさの国際的な指針（WCAG）でも、こうした人のために、操作に合わせて起きる動きを止められるようにすることが勧められています。

iPhoneやMacには、画面の動きを減らす設定があります。ホームページの側でこの設定を読み取り、設定している人には動きを止めて表示することができます。AIに頼むときは、依頼文に「動きを減らす設定にしている人には、動きを止めて表示して」と1行足しておけば十分です。パララックスのような大きな動きほど、この1行が効いてきます。

実際にClaude Codeで挿絵を作ってみて

この記事の挿絵は、筆者がClaude Codeに6つの動きの名前と並べ方、使う色を伝えて作ってもらったものです。名前で指定したことで、どのカードにどの動きを入れるかで迷う場面はありませんでした。

ただ、一度で完成したわけではありません。最初の版では、パララックスの見本で奥の山が手前の地面に隠れてしまい、奥行きが伝わりにくくなっていました。山の位置をずらして見えるようにしたことで、意図した見え方になりました。

名前で頼むと「どの動きか」は伝わりますが、「どう見えるか」は実際に画面で確かめるまで分かりません。できあがったら必ず自分の目で動きを確かめ、気になる点を言葉で返してください。このやり取りを1〜2回はするつもりで頼むと、思った形に近づきます。

よくある質問

Q. 動きの名前は英語で伝えないといけませんか？

A. カタカナのままで伝わります。「パララックス」「スティッキー」のように、Web制作で使われている呼び方をそのまま書けば大丈夫です。迷うときは「パララックス（背景をゆっくり動かす）」のように、かっこで説明を添えると確実です。

Q. 動きを入れると、ホームページは重くなりませんか？

A. 動きの種類や作り方によっては、表示が重くなることがあります。特にパララックスは作り方によって差が出やすい動きです。気になるときは、AIに「スマホで重くならない作り方にして」と条件を足して頼んでください。

Q. 今のホームページに後から動きを足せますか？

A. 足せる場合が多いですが、ホームページの作り方によって変わります。制作会社が管理しているサイトや、編集できる範囲が決まっているサービスで作ったサイトでは、まず自分で変えられる範囲を確認してください。

Q. どの動きから試せばいいですか？

A. フェードインから始めるのがおすすめです。どんなサイトにもなじみやすく、失敗しても目立ちにくい動きです。慣れてきたら、いちばん見せたい場所に1つだけパララックスやテキストリビールを足してみてください。

まとめ

AIにホームページの動きを頼むときは、「おしゃれに」ではなく動きの名前で伝えると、狙った動きに近づきます。

・まずは6つの名前（フェードイン、スライドイン、スタッガー、パララックス、スティッキー、テキストリビール）を覚える

・「場所・名前・強さ」の3点をセットにして頼む

・目立つ動きは1〜2か所に絞り、動きを減らす設定への配慮も一緒に頼む

まずは自分のサイトのトップページで、動かしたい場所を1つ決めるところから始めてみてください。

あわせて読みたい：Claudeでホームページを作る順番｜言葉が先・見た目は後（claude-homepage-words-first）／見た目のお手本をAIに渡す方法（refero-styles-design-md-guide）

▼3分で理解できる！マンガ風スライドはこちら

AI活用について、社内でどう進めるべきか迷っていませんか？
AI-Brainでは、中小企業向けに30分の無料相談を実施しています。
まずはお気軽にご相談ください。

30分無料相談はこちら