トップページに載せたキャンペーンの図解に「9月30日まで」と書かれている。期限が1ヶ月延びたので日付だけ差し替えたい。担当者が画像を開いてみると、拡張子は .gif で、文字はすでに絵になっている。制作会社にメールを書き、見積もりを待ち、2営業日を使って、数字が2つ変わります。
同じことが年に4回起きるなら、年間の費用と待ち時間は無視できない額になります。しかもこれは、制作会社が不当な請求をしているわけではありません。直せない形式で納品されているので、直すには作り直すしかないという、それだけの話です。
分かれ目は動きの作り方ではなく、納品物の形式にあります。
「動く画像」は、動きごと絵にしてしまっている
GIF や MP4 は、完成した見た目を1コマずつ焼き付けたものです。文字も線も色も、すべてピクセルの並びに変換されています。元のテキストはファイルの中に残っていません。
だから日付の差し替えは、画像編集ではなく再制作になります。元データを持っている制作会社なら数分の作業ですが、その数分に到達するまでに依頼・確認・請求の往復が挟まります。加えて、この形式には運用上の副作用もあります。
- 重い。 同じ内容の図解でも、GIFはSVGの数十倍のファイルサイズになることが珍しくありません。トップページの表示速度に直接効きます。
- 文字が滲む。 高解像度のディスプレイでは、ラスタ画像の文字は輪郭がぼやけます。ロゴや価格表のように読ませたい文字ほど目立ちます。
- 検索エンジンにも読み上げにも渡らない。 図解の中の文言は、alt テキストに書き写さない限り存在しないものとして扱われます。
形式ごとに「自社で直せる範囲」は決まっている
動きの付いた図解の納品形式は、実務上4択です。どれを選ぶかで、あとから自社で触れる範囲が変わります。
| 形式 | あとから文言を直せるか | <img> で貼って動くか | 実行に必要なもの |
|---|---|---|---|
| GIF / MP4 | 不可（再制作） | 動く | なし |
| Lottie（JSON） | 一部可能だが専用ツールが要る | 動かない | JavaScript ライブラリ |
| SVG + CSS アニメーション | 可能（テキストのまま入っている） | 動く | なし |
| SVG + SMIL | 可能 | 動く | なし |
発注側にとっての本命は SVG です。 SVGはテキストがテキストのまま残るので、日付や社名の差し替えはテキストエディタで開いて書き換えるだけで済みます。CSSアニメーションをSVGファイルの中に書いておけば、<img src="figure.svg"> として貼っても動きます。JavaScriptを読み込む必要がないため、CMSの本文欄に貼るような使い方でも壊れません。
同じくSVG内で完結する SMIL という古くからの仕様もあり、<img> 内でも動くという利点は共通です。ただしSMILは長く先行きが不透明な時期があった経緯があり、新しく作るならCSSアニメーションを選ぶのが無難です。既存サイトのSVGがSMILで動いている場合に慌てて置き換える必要はありません。
Lottie は複雑なイラストアニメーションでは有力ですが、専用ツールと実行用ライブラリが前提になります。「自社で軽く直したい」という要件とは相性が悪いので、そこまでの表現が本当に必要かを先に確認してください。スクロールに連動する動きであれば、CSSのスクロール駆動アニメーションでJavaScriptなしに実装できる範囲も広がっています。
発注書に足す一行
技術の話に見えますが、発注側が押さえるのは1行です。
動きを含む図版は、テキストがテキストのまま編集できる形式（SVG）で、編集用ソースとあわせて納品する。
この一行があるだけで、「あとから直せない」の大半は起きなくなります。あわせて、次の2点も決めておくと後の手戻りが減ります。
- どこまでを自社で直す想定か。 文言だけなのか、色やレイアウトも触るのか。文言だけなら SVG の直接編集で十分ですが、レイアウトまで触るなら元のデザインファイル（Figma等）の共有範囲も決める必要があります。
- 元データの置き場所。 納品物一式がどこにあるのかが分からなくなると、形式が何であれ直せません。納品ドキュメントの揃え方は納品時に受け取るべき4種類の資料にまとめています。
制作会社側にとっても、この指定は特別な要求ではありません。図解やアイコンは元々ベクターで作られていることが多く、GIF化はむしろ最後の工程で行われた変換だからです。指定がなければ扱いやすい形で書き出されるだけで、意地悪をされているわけではありません。
受け取った日に確認する2つのこと
納品されたSVGが本当に「直せる」状態かは、その日のうちに確認できます。
1つ目。ブラウザにSVGファイルをドラッグして開き、図の中の文字をマウスで選択してみてください。 選択できればテキストとして入っています。できなければ、パスに変換されている（＝絵になっている）ので、直すには制作ツールが要ります。フォント埋め込みの都合でパス化する判断もあり得るので、その場合は「なぜパス化したか」と「文言変更時の手順」を確認してください。
2つ目。実際にページへ貼った状態で、OSの「視差効果を減らす」設定をオンにして表示してみてください。 動きが止まるか、少なくとも控えめになれば、prefers-reduced-motion への配慮が入っています。ここが無配慮だと、動きに酔いやすい利用者にとって読めないページになります。アクセシビリティの要件は納品後に足すと高くつくので、確認は受け入れ時が最後の機会です。
次にやること
まず、サイト内で使っている動く画像を一覧にしてください。 拡張子が .gif .mp4 のものが、今後1件ずつ発注が必要になる箇所です。多くの場合、そのうち実際に文言が変わるのは数点だけなので、全部を作り直す必要はありません。
そのうえで、次回の制作・改修の見積もり依頼に、先ほどの一行を入れてください。 追加費用が発生する指定ではないので、次に作るものから適用できます。
サイトの改修、動く図版を含む制作物の設計、更新しやすい納品形式の整理については、グリームハブの HP 制作・リニューアル相談で承っています。サイトの規模と更新体制によって進め方が変わるため、個別にご相談ください。お問い合わせからどうぞ。
