ホームページに「動き」を付けるか、付けないか

1. 「もう少し、動きのあるサイトにしたいんです」

中小企業の経営者の方とお話していて、こんな言葉を聞くことがあります。

「同業のサイトを見たら、スクロールすると文字がふわっと出てきたり、写真が切り替わったりして、なんだか今っぽいんですよね。うちのは止まっていて、古く見える気がして。ああいう動き、付けたほうがいいんでしょうか」

気持ちはよく分かります。動いているサイトは、開いた瞬間に手をかけているように見えます。止まっているサイトが、置いていかれたように感じるのも自然です。

ただ、動きはあれば良いものではありません。読む人の役に立つ動きと、読む邪魔をする動きがあります。そして、邪魔をする動きのほうが、作る側からは気づきにくいのです。作った人は、次に何が出てくるかを知っているからです。

この記事では、動きを付けるかどうかを、見た目の好みではなく読む人にとって何が起きるかで決められるように整理します。

この記事で書くこと

• 動きを3つの種類に分けて考える
• 動きが役に立つ場面と、邪魔になる場面
• 表示が重くなる理由と、動かなかったときの姿
• 画面の動きで気分が悪くなる人と、動きを減らす設定への配慮
• スマートフォンでの見え方と、制作会社への伝え方

なお、動画を載せるかどうかは別の話として ホームページに、動画は載せたほうがいいのか にまとめてあります。この記事で扱うのは、文字や写真やボタンそのものが動く演出のほうです。

2. 動きは、3つに分けて考える

ひとくちに「動き」と言っても、役割はまったく違います。まず3つに分けてください。分けるだけで、付けるかどうかの判断がずっと楽になります。

① 返事の動き

ボタンを押したら色が変わる。メニューを開いたら、横から出てくる。送信したら「送りました」と出る。読む人がした操作に、サイトが返事をする動きです。

これは、ほとんどの場合あったほうがいい動きです。押したのに何も変わらないと、人は「押せていないのかな」と思って、もう一度押します。問い合わせが二重に届く原因にもなります。返事の動きは、目立たなくても働いています。

② 案内の動き

目を向けてほしい場所を、そっと示す動き。手順の順番を、1つずつ見せる動き。読む人を、次に見る場所へ連れていく動きです。

これは、使う場所を選べば役に立ちます。ただし、置きすぎると案内になりません。全部が「ここを見て」と言っていたら、どこも見なくていいのと同じだからです。

③ 飾りの動き

スクロールすると文字がふわっと浮かぶ。背景の写真がゆっくりずれる。開いた瞬間にロゴが回る。雰囲気のための動きです。

迷いの中心は、ここです。悪いものではありません。ただ、読む人の得になることは少なく、重さや待ち時間という形で、読む人に何かを払わせることが多い動きです。

3. 動きが役に立つ場面

ここからは、付けてよい場面を具体的に見ます。大きく分けると3つです。

注目させたい1か所

いちばん分かりやすいのは、ページの中で、どうしても見てほしい1か所です。たとえば、問い合わせのボタン。読み進めて、ボタンが画面に入ったときに、一度だけ軽く目を引く。それだけで、ボタンの場所に気づいてもらいやすくなります。

大事なのは「一度だけ」と「1か所」です。ボタンがずっと揺れ続けていると、読む人は落ち着きません。本文を読んでいる間も、視界の端で何かが動いている状態になるからです。

それに、動きを足す前にやることがあります。ボタンの文言と置き場所です。そこが整っていないまま動かしても、目は引いても押されません。考え方は 「お問い合わせはこちら」のボタンを、何と書き、どこに置くか にまとめました。

手順の流れ

もう1つは、順番に意味がある情報です。「お問い合わせ → 現地確認 → お見積もり → 工事」のような流れ。これを上から1つずつ順に出していくと、読む人は順番を目で追えます。

ここでの動きは、飾りではなく説明の一部です。順番が伝われば役目は終わるので、一度出たら、それ以上は動かさないようにします。スクロールを戻すたびに出直す作りにはしないでください。2回目からは、ただの待ち時間になります。

変化を見せたいとき

施工前と施工後、使う前と使った後。変化そのものが伝えたいことなら、動きが効きます。たとえば、2枚の写真の境目を指で左右に動かして、前と後を見比べる形です。

この場合、動かすのは読む人です。サイトが勝手に切り替えるのではなく、読む人が自分の速さで見比べられる。ここが大事です。

共通しているのは、読む人が速さを決めていること

3つに共通しているのは、動きの速さと回数を、読む人の行動が決めていることです。押したら、見えたら、指を動かしたら。サイトの側が、時計に合わせて勝手に動いていません。

ここが、役に立つ動きと邪魔になる動きの分かれ目です。次の章では、その逆の場面を見ていきます。

4. 動きが邪魔になる場面

邪魔になる場面を、作る側が気づきにくいものから順に挙げます。

読み終わる前に、動く

いちばん困るのは、読んでいる途中で、文字が消えたり入れ替わったりすることです。自動で切り替わる写真に言葉を重ねている場合や、お知らせが横に流れていく場合がこれに当たります。

読む速さは、人によって違います。作った人がちょうどいいと思った速さは、ゆっくり読む人には速すぎます。読み直したくても、一周するまで待つしかありません。

トップの写真が自動で切り替わる形については トップページの最初の画面に、何を置くか で詳しく書きました。結論だけ言えば、最初の画面の写真は1枚に決めるほうが伝わります。

待たせる

開いたときに、ロゴや丸い印がくるくる回る読み込み画面。これは中身が出る前に、待ち時間を1枚足していることになります。

読み込み画面は、本来は「時間がかかるので、少し待ってください」という案内です。中身がすぐに出せるなら、案内そのものが要りません。演出として数秒見せている場合は、その数秒で閉じる人がいます。ページを移るたびに同じ画面が出る作りだと、なおさらです。

出てくるまで、読めない

スクロールすると、文字や写真が下からふわっと出てくる演出。いまはとても多く見かけます。これには、出てくるまでの間、その場所が空っぽに見えるという弱点があります。

速くスクロールする人は、出てくる前に通り過ぎます。読みたい場所で止まっても、一呼吸待たないと文字が出ません。ページ全体が同じ演出だと、この一呼吸が段落ごとに積み重なります。

同じ演出が、何度も繰り返される

見出しが出るたびに同じ動き、写真が出るたびに同じ動き。1回目は目を引きますが、10回目は、ただの待ち時間です。動きは、回数が増えるほど効き目が薄れ、手間だけが残ります。

5. 重くなる理由と、動かなかったときの姿

動きの損は、見た目の外にもあります。重さと、動かなかったときの姿です。

動きのための部品を、読み込んでいる

動きを付けるには、たいていその動きのためのプログラムや、大きな画像を読み込みます。1つずつは小さくても、重なるとページが開くまでの時間が延びます。電波の弱い場所で見るスマートフォンでは、特に差が出ます。

重さの測り方と、減らす順番は ホームページが重いと言われたときに、まず見るところ にまとめました。動きを足す前と後で一度ずつ測ってみると、その動きのためにどれくらい払っているかが見えます。

動かなかったときに、中身が見えるか

もう1つ、作る側が見落としやすいことがあります。スクロールで出てくる演出は、多くの場合、最初は見えない状態で置かれていて、条件がそろうと見えるようになる作りです。

ということは、何かの理由で動きが働かないと、見えないまま残ることがあります。古い端末、通信が途中で途切れたとき、ページを印刷したとき。文字はあるのに、白い空白しか見えないページになります。

制作会社には、「動きが働かなくても、中身は全部見えるようにしてください」と一言伝えてください。動きは、中身が見えている状態に、あとから足すものです。順番が逆になると、こういうことが起きます。

増やすより、外すほうが難しい

動きは、一度入れると外しにくくなります。ページ全体に同じ演出がかかっていると、どこか1か所だけ外すのにも手がかかるからです。最初は少なく入れて、足りなければ足す。この順番のほうが、あとで困りません。

6. 画面の動きで、気分が悪くなる人がいる

ここは、作る側がいちばん知らないところかもしれません。

動きで、酔う人がいる

画面の中の動きで、乗り物酔いのような気分の悪さを感じる人がいます。背景がスクロールと違う速さでずれる動き、大きく拡大や縮小をする動き、画面全体が横に流れる動きは、特に起きやすいと言われています。

本人は理由が分からないまま、「なんだか見ていて疲れるサイト」として閉じます。困っても、何も言わずにやめる。これは年配の方に限らず、よくあることです。年配のお客様が多い会社に向けた直し方は 年配のお客様が多い会社の、ホームページの直し方 にまとめましたが、動きを控えめにすることは、そこにも通じます。

動きを減らす設定をしている人がいる

スマートフォンやパソコンには、画面の動きを減らす設定があります。動きで気分が悪くなる人や、動きが気になって集中できない人が、自分でこの設定をオンにしています。

この設定は、サイトの側から読み取ることができます。つまり、設定をオンにしている人には、動きを止めて見せることができるのです。制作の現場では「prefers-reduced-motion への対応」と呼ばれます。手間の大きな作業ではないので、動きを付けるなら、セットで頼んでください。

止めるボタンと、点滅

自動で動き続けるもの、たとえば切り替わる写真や横に流れる文字を置くなら、読む人が止められるボタンを付けるのが基本です。自分のタイミングで止めて、読めるようにします。

また、激しく点滅する表現は使わないでください。光の点滅で体調を崩す人がいるためです。目を引きたい場所ほど、点滅ではなく、色や大きさや余白で目立たせるほうが安全です。

7. スマートフォンでの見え方と、制作会社への伝え方

最後に、確かめ方と頼み方です。

スマートフォンでは、パソコンと違って見える

制作会社から見せてもらう確認の画面は、パソコンの大きな画面であることが少なくありません。けれど、お客様はスマートフォンで見ていることも多いはずです。スマートフォンでは、次のようなことが起きます。

• 画面が狭い ― 横から出てくる演出が画面の外にはみ出して、ページが横に揺れることがある
• 指で操作する ― マウスを乗せたときに出る動きは、スマートフォンでは起きない。そこに大事な情報を隠さない
• 背景のずれる動きが引っかかる ― パソコンでは滑らかでも、スマートフォンでは止まりながら動いて見えることがある
• 電池と通信を使う ― 動き続ける部分があると、そのぶん端末に負担がかかる

確かめ方は簡単です。自分のスマートフォンで、いつもの速さで指でスクロールしてみてください。読みたいところで、すぐ読めるか。ページが横に揺れないか。それだけで、多くのことが分かります。ほかに人が離れる原因は スマートフォンで見たときに、人が離れる7つのこと にまとめました。

「動きを付けたい」を、具体的な言葉にする

制作会社に「動きのあるサイトにしたい」とだけ伝えると、全体に飾りの動きが入りがちです。伝えるべきなのは、どこに、何のために動きを付けたいかです。

• 場所を指定する ― 「問い合わせボタンが画面に入ったときに、一度だけ目を引くように」
• 目的を添える ― 「工事の流れが、順番に伝わるように」
• 付けない場所も伝える ― 「本文と料金表は、動かさずにすぐ読めるように」
• 条件を3つ添える ― 動きを減らす設定の人には止める／動かなくても中身は全部見える／スマートフォンで確かめてから見せてほしい

参考にしたいサイトがあるなら、そのサイトの、どの動きが良かったのかまで伝えてください。「このサイトみたいに」だけだと、良いと思った部分とそうでもない部分の区別がつきません。

公開前に、自分で確かめる3つ

• 速くスクロールする ― 空白のまま通り過ぎる場所がないか
• 動きを減らす設定をオンにして開く ― 動きが止まり、中身が全部見えるか
• 2ページ目、3ページ目を開く ― ページを移るたびに、同じ演出で待たされないか

この3つで引っかかる場所があれば、公開前に直してもらってください。公開後に気づくより、ずっと手間が少なく済みます。

8. 雄喜晃の伴走：動きは、付ける場所を決めてから足します

私たち雄喜晃のホームページ制作では、動きを最初から全体に入れることはしません。まず止まった状態で、中身がすぐに読める形を組みます。そのうえで、効く場所にだけ動きを足します。

私たちがやること

• 動きを付ける場所を一緒に決める ― 見てほしい1か所と、順番を見せたい流れを伺い、そこに絞ります
• 動きを減らす設定に合わせる ― 設定をオンにしている方には、動きを止めて表示します
• 動かなくても読める形にする ― 動きが働かない環境でも、中身が全部見える状態を先に作ります
• スマートフォンで確かめる ― 指でスクロールして、空白や横揺れが出ないかを見てからお渡しします

料金と条件

料金は制作費0円、月額8,800円（税別）です。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守は月額に含まれます。月5回までの更新代行も同じ月額の中なので、公開後に「この動きは要らなかった」と感じたときの取り外しも、ご連絡いただければこちらで反映します。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

• 読み込み画面を、演出のためだけに置くことはしません。中身の前に待ち時間を足すことになるからです
• 言葉を重ねた写真を、自動で切り替える形にはしません。読み終わる前に言葉が消えるからです
• 動きを付ければ問い合わせが増える、というお約束もしません。動きは伝え方の道具の1つで、それ以上のものではありません

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。

「今のサイトは止まっていて古く見える。でも、何を動かせばいいのか分からない」という方は、一度ご相談ください。

9. まとめ：動きの速さは、読む人に決めてもらう

ホームページに動きを付けるかどうかで押さえることは、5つです。

• 動きを3つに分ける ― 返事・案内・飾り。返事はあったほうがよく、飾りは慎重に
• 役に立つのは、1か所と順番と変化 ― 見てほしい1か所、手順の流れ、前と後の見比べ
• 読む人の速さを奪わない ― 読み終わる前に動く、待たせる、出てくるまで読めない、は避ける
• 動かなくても読めるようにする ― 重さを測り、動きが働かないときも中身が見える作りに
• 動きで困る人に合わせる ― 動きを減らす設定に対応し、止めるボタンを付け、点滅は使わない

止まっているサイトは、古いわけではありません。開いてすぐ読めることは、それだけで読む人への親切です。動きは、その上に、必要な場所にだけ足せば十分です。

まず、今日できること

自分のスマートフォンで貴社のサイトを開いて、いつもの速さでスクロールしてみてください。待たされた場所、勝手に動いて読めなかった場所があれば、そこが最初に見直す場所です。

動きを付けるかどうかで迷ったまま、サイトの見直しが止まっている、という方は、一度ご相談ください。