アニメーションのあるホームページは重い？スマホで遅くしない5つの確認

アニメーションのあるホームページが重いかどうかは、動きの有無ではなく動きの種類と読み込むデータの量で決まります。文字や写真がふわっと出る程度の小さな動きなら、作り方しだいで表示の速さはほとんど変わりません。重くなりやすいのは大きな動画や3Dを読み込む演出で、これはスマホでの速さを先に数字で決めておけば防げます。

社長から「動きのあるサイトにしたい」と言われた。でも前に見たおしゃれなサイトはスマホで開くと待たされた。検索や問い合わせが減らないか心配だけれど、制作会社に何を聞けばよいか分からない。そんなWeb担当者の方に向けて書きました。

最後に、制作会社に相談する前に上司と確かめたいチェックリストを付けています。動きを控えた方がよい場面も正直に書きました。

重くなるかは動きの種類と読み込む量で決まる

「動き」とひとくちに言っても、ブラウザにかかる負担はまったく違います。費用の考え方と同じく、まずは種類で分けてみると見通しがよくなります。

小さな動きが軽く済むのには理由があります。Googleが公開している高性能な CSS アニメーションの解説では、移動や拡大には transform を使うよう勧めています。表示と非表示の切り替えには opacity を使うのがよいとされています。どちらもブラウザが得意な動かし方なので、スマホでもなめらかに動きやすくなります。

反対に、動かすたびに周りの配置まで計算し直すような作り方は避けるよう書かれています。つまり同じ「ふわっと出る」動きでも、作り方によって重さが変わるということです。見た目だけでは分からないので、作る前に制作会社へ確かめておく価値があります。

3Dや動画を入れた場合の費用の違いは、3Dや動きのあるホームページの費用の記事で表にしています。

速さはスマホの数字で確かめる

「重くないか」を感覚で話し合うと、社内でも制作会社とも話がかみ合いません。Googleが示している目安を使えば、誰が見ても同じ数字で話せます。

Googleが示している3つの目安

Googleは、ページの使いやすさを測る目安としてCore Web Vitals（ページの体験を測る3つの目安）を示しています。「良好」とされる数字は次のとおりです。

• LCP（画面でいちばん大きな画像や文字が出るまでの時間）：2.5秒以内
• INP（ボタンを押してから画面が反応するまでの時間）：200ミリ秒以下
• CLS（読み込み中に画面の中身がずれる度合い）：0.1以下

この数字はスマホとパソコンを分けて測ります。訪れた人の75%がこの目安を満たしていれば合格という考え方です。動きの多いサイトで落ちやすいのは、大きな写真や動画を待つLCPです。動きが終わるまで文字が出ない作りだと、ここが遅くなります。

Googleの検索セントラルの説明には、Core Web Vitals はランキングを決めるときに考慮する要素の1つだと書かれています。ただし検索の順位は内容など多くの要素で決まります。数字が良ければ上位に出るというものではないので、まずは訪れた人を待たせないための目安として使ってください。

PageSpeed Insightsで今のサイトを測る

速さは無料のPageSpeed Insightsで測れます。手順は3つです。

1. PageSpeed Insightsを開いてサイトのURLを入れる
2. 結果の画面で「携帯電話」のタブを選ぶ
3. 上の段の実際の利用者の数字と下の段の点数をメモする

PageSpeed Insightsの説明によると、上の段は過去28日間の実際の利用者の数字です。アクセスが少ないサイトでは出ないこともあります。下の段は性能が中くらいのスマホを想定した試しの結果です。点数は90点以上が良好で、50点未満は不良とされています。

作り替える前に今のサイトの数字を残しておくと、公開後に「遅くなっていないか」を比べられます。Core Web Vitals の考え方はCore Web Vitalsの基礎知識の記事でもくわしく書いています。

自分で測るのが難しいときは、無料のサイト診断で御社のいまのサイトの状態を確かめられます。

弊社が動きを入れるときに先に決めていること

弊社は「モーションがあり、メッセージが伝わる」サイトづくりを強みにしています。そのぶん動きで遅くしないことには気をつけています。作り始める前に決めていることは次の5つです。

大事な情報は動きを待たずに出す

会社名やサービス名と電話番号や予約のボタンは、動きが終わるのを待たずに表示します。演出を見せたいあまり、いちばん伝えたいことが後から出てくるのでは本末転倒です。

動かし方はブラウザが得意なものに絞る

先ほどの transform と opacity のような軽い動かし方を基本にします。動きの長さも短めにします。動きの長さは0.2〜0.5秒ほどが自然だとするWebアニメーションの解説もあります。長すぎる動きは、待たされている印象につながります。

動画と3Dはスマホで出し分ける

背景の動画や3Dを入れるときは、スマホでは写真に置き換えるか軽い素材に切り替えるかを先に決めます。パソコンで見栄えがする演出が、通信の遅いスマホでも同じように動くとは限りません。

動きが苦手な人の設定に合わせる

大きな動きでめまいや不快感を覚える人がいます。MDNの解説にあるように、スマホやパソコンには「視覚効果を減らす」などの設定があります。この設定がオンの人には、動きを止めるか控えめにして表示します。

公開前と公開後にスマホで測る

公開前にPageSpeed Insightsで測り、目安を外れていれば動きや素材を見直します。公開後も写真を差し替えたときなどに測り直します。弊社が作ったサイトの保守は月額5,000円からで、部品の更新と表示や動作の確認が入っています。

動きを控えた方がよい場面もある

正直に書くと、動きを入れない方がよいサイトもあります。たとえば次のような場合です。

• 訪れる人の多くが営業時間や場所だけを急いで知りたい
• 写真や料金の更新が多く毎回動きの調整まで手が回らない
• 動きを入れたい理由を社内で一言にできない

また動きでできないこともあります。動きは伝えたいことを目立たせる手段で、伝えたいこと自体を作ってはくれません。文章や写真が決まらないまま動きだけを足しても、問い合わせが増えるとは限りません。

弊社のコーポレートサイト制作は150,000円からで、基本のページ一式と自分で更新できるCMS（文章や写真を管理画面から直せる道具）が入ります。どこまで動きを入れるかはページ数や動きの数をうかがってお見積もりします。見積もりは無料です。

制作会社に頼む前に上司と確かめたいチェックリスト

次の項目は、そのまま社内の打ち合わせで見せて使えます。当てはまらない項目があれば、制作会社に聞く質問の候補です。

• 今のサイトのスマホの数字をPageSpeed Insightsで測ってメモした
• 動きを入れたい理由を一言で言える
• 動きを入れたいページを決めた（トップだけか全ページか）
• 背景の動画や3Dが本当に必要かを話し合った
• 電話番号や予約のボタンが動きを待たずに出るかを制作会社に聞く
• スマホでは動画や3Dをどう出し分けるかを制作会社に聞く
• 「視覚効果を減らす」設定の人への対応を制作会社に聞く
• 公開後に速さを測り直すのは誰かを決めた

制作会社への質問は「重くなりませんか」だけでは答えがあいまいになりがちです。「スマホでLCPが2.5秒以内に収まりますか」のように数字で聞くと、できることとできないことがはっきりします。