サイトリニューアルの打ち合わせで、いちばんよく出る要望が「もう少し動きが欲しい」です。伝えた側に具体的なイメージはなく、他社サイトを見て「なんとなく古く見える」と感じただけ、というケースがほとんどです。
この一言の後、たいてい2つのことが起きます。 見積りに演出分の工数が積まれること。そして公開後、スマホで見たときに表示が遅くなること。どちらも、動きを入れたこと自体が原因ではありません。どの形式で作るかを決めないまま発注したことが原因です。
動きには3つの役割があり、必要な形式が違う
先に整理しておくと、Web 上の動きは目的で3種類に分かれます。ここを混ぜたまま話すと、話が「かっこいいかどうか」に流れます。
- 伝える動き — グラフが伸びる、手順が順番に現れる。内容の理解を助けるもの
- 反応する動き — ボタンを押した、送信された、開閉した。操作の結果を返すもの
- 飾る動き — 背景がゆっくり流れる、スクロールに応じて要素が浮かぶ。印象を作るもの
費用と速度の問題が起きるのは、ほぼ3番だけです。 2番は数行の CSS で終わり、1番は必要な箇所が限られます。にもかかわらず、打ち合わせで語られる「動き」は3番のことが多く、そこに一番お金がかかります。
形式ごとの向き不向き
実装の選択肢は主に3つです。制作会社が黙って選んでいることも多いのですが、発注側が知っていると見積りの読み方が変わります。
| 形式 | 向いている用途 | 注意点 |
|---|---|---|
| CSS アニメーション | 反応する動き、軽い演出、スクロール連動 | 複雑なイラストの動きは表現しきれない |
| Lottie（dotLottie） | イラストやキャラクターの動き、ローディング演出 | 再生用のライブラリが必要。凝りすぎると CPU を食う |
| 動画・GIF | 実写、質感のある表現 | ファイルが重い。自動再生は通信量とバッテリーに響く |
CSS はブラウザに元から備わっており、transform や opacity の変化であればブラウザ側が効率よく処理します。追加のファイルもライブラリも要りません。スクロールに応じた演出も、いまはCSS だけで書ける範囲がかなり広がっています。
Lottie は、デザインツールで作ったアニメーションを JSON として書き出し、Web で再生する形式です。イラストが動く演出を、動画より軽く、拡大しても劣化しない形で載せられます。近年は .lottie 形式と WebAssembly ベースの再生エンジンが整い、描画の効率も上がりました。ただし再生のためのコードを読み込む前提であることは変わりません。1か所のために数十 KB のライブラリを足すなら、CSS で近い表現を作れないかを先に確認する価値があります。ライブラリを足す前にブラウザ標準でできることを見直すという判断は、ここでも効きます。
動画は、実写や質感が要るときの選択肢です。トップページの背景に動画を敷く演出は今も人気がありますが、モバイル回線での読み込みとバッテリー消費は避けられません。 静止画にして、必要な人だけ再生できるようにするだけで、体感速度は明確に変わります。
重くなる原因は、形式より「枚数」と「自動再生」
形式の話をしてきましたが、実際に表示が遅くなるサイトを調べると、原因はもっと単純なところにあります。
1つは、同時に動いているものの数です。 ファーストビューに背景動画があり、ロゴが動き、スクロール演出が3か所あり、ローディングアニメーションが乗っている。1つひとつは軽くても、同時に走れば端末は苦しくなります。
もう1つは、見えていない場所の自動再生です。 ページ下部にある演出が、画面に入る前から動き続けている。ユーザーには一度も見えないまま、CPU だけ消費します。「画面に入ってから動かす」指定を入れるだけで解決しますが、指定は明示的に書かないと入りません。
見積りで「アニメーション実装一式」とだけ書かれている場合、この辺りの制御が含まれているかは分かりません。含まれているかを聞くだけで、公開後の速度は変わります。
見積りの「アニメーション一式」を分解する
制作会社の見積りで演出が1行にまとまっている場合、中身は次のどれかです。デザイナーが動きを設計する工数、素材を作る工数、それを実装する工数。このうち費用が読みにくいのは、最初の2つです。
CSS で書ける演出なら、実装工数はごく小さくなります。一方でイラストを新規に描いて動かす場合、素材制作にデザイン費が乗り、修正のたびに素材から作り直しになります。「1か所だけ直したい」が効かないのは、たいていこの型です。
聞き方としては、「この演出は素材の作り直しが必要ですか」が最も実務的です。答えが「必要」なら、公開後に微調整する前提を捨てるか、最初から CSS で作れる表現に寄せるかの判断になります。リニューアル後に必ず出る「もう少し速く」「もう少し控えめに」の要望が、追加費用になるかどうかがここで決まります。
止められる作りにしておく
もう1つ、発注時に必ず決めておきたいのが、動きを止めたい人への配慮です。
OS には「視差効果を減らす」「アニメーションを減らす」という設定があり、Web 側からは prefers-reduced-motion として受け取れます。この設定を有効にしている人には、動きを止めるか、控えめなものに差し替える。数行で対応できますが、指定がなければ実装されません。
これは配慮の話であると同時に、実務的な話でもあります。動きが原因で気分が悪くなる利用者は実在し、企業サイトが動きを理由に「見られないサイト」になるのは、ブランドとして損です。余計な UI 部品を足す前に必要性を問うのと同じで、入れるかどうかと同じくらい、止められるかどうかが効きます。
発注書に書いておく一行
打ち合わせで「動きが欲しい」と伝える代わりに、次のように書けると、見積りも成果物も安定します。
演出は原則 CSS で実装し、イラストの動きが必要な箇所のみ Lottie を用いる。画面外の要素は自動再生しない。
prefers-reduced-motionが有効な環境では動きを停止する。
そのうえで、公開前にスマートフォンの実機で、Wi-Fi を切って開いてみてください。 開発用の高速回線と PC のブラウザでは、重さはほぼ分かりません。実機で3秒待たされる演出は、来訪者にとっては離脱の理由になります。
サイトリニューアルにおける演出の設計、表示速度とのバランス調整、既存サイトの重さの原因調査については、グリームハブの HP 制作・リニューアル相談で承っています。現状のサイト構成によって効く打ち手が変わるため、個別にご相談ください。お問い合わせからどうぞ。
