WEBページ上での表示に最適な画像形式で、素材をつくる

こんにちは。GMOアドマーケティングのR.Mです。

はじめに

弊社が運営するコーポレートサイト・自社サービスサイトは、ユーザビリティ・SEO評価向上のためGoogleが提供するPageSpeed Insightsで定期的にサイトの評価をチェックしています。
分析レポートの「改善できる項目」のうち「次世代フォーマットでの画像の配信」の項目について、デザイナーとして改善に取り組める部分かと思いましたので、その実施プロセスを紹介します。

「次世代フォーマットでの画像の配信」をすることで何を実現するか

WebPやAVIFなどの画像形式は、一般的にPNGやJPEGより圧縮率が高く、ダウンロード時間やデータ消費量を抑えられます。この画像形式での配信により、パフォーマンスの改善を実現します。

WEBページ表示速度のユーザビリティへの影響

2017年の少し古いデータにはなりますが、Googleの調査では、”ページの読み込み時間が 1 秒から 10 秒に増加すると、モバイルサイト訪問者が直帰する確率が123%増加する”ことが明らかになっています。
詳細は下記記事をご覧ください。
https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/ WEBページの表示速度は、ユーザビリティに大きな影響があるといえます。

実施

自社プロダクトサイト「ReeMo」の画像形式の見直しに取り組みました。

静止画をWebPに変換する

JPGやPNGで書き出していた静止画像を、SYNCERの「WEBP変換ツール」というオンラインのツールを使用しWebPに変換しました。アップロードするだけで簡単に変換でき、どれくらい画像容量を小さくできたかのビフォーアフターも示してくれます。
WEBP変換ツールのキャプチャ画像
WebPよりもPNGのほうが画像容量が小さい画像もいくつかあり、その箇所はPNGのまま使用しました。

アニメーション動画をAPNG形式にする

このサイトで使用しているアニメーション素材は、Illustratorで作り込み、AfterEffectsに取り込んで動きをつけています。
APNG形式にする場合は、AfterEffectsで連番画像を書き出したあと「アニメ画像に変換する君」にアップロードして変換します。
APNGの方が、GIFで書き出すよりも綺麗に見えます。ベタ塗り部分の色のノイズがみえません。
同じ画像サイズで形式違いの書き出し画像を比較したところ、GIFは41.7MB、APNGは14.3MBで、APNGにすることで約66%画像容量を削減できました。改善前はAPNG形式の画像を使用していました。

しかし、APNGとMP4の画像容量を比較すると、MP4は3MBであり、さらに軽量でした。画質の綺麗さにも差が見られなかったため、今回はMP4の画像を採用しサイトへ掲載することにしました。

アニメーション動画をSVG形式にする

SVGアニメーションには、拡大縮小しても画質が劣化せず滑らかで鮮明な動きを表現できるという特徴があります。
デバイスの幅が変化して画像サイズが変わってもロゴを鮮明に見せたかったので、この部分はSVGアニメーションを採用しました。

サイトで使用しているローディングのアニメーション素材は、Illustratorで作成した素材をAfterEffectsに取り込み、レイヤーをシェイプに変換し動きをつけています。
アニメーションが完成したら、AfterEffectsにインストールした「BodyMovin」というプラグインでLottieアニメーションを書き出し、JSONファイルをフロントエンドエンジニアに渡して実装してもらいます。

See the Pen RM_bounce by rm (@r_emats) on CodePen.


LottieはWordpressプラグインもあり、こちらのプラグインを有効化することでフロントエンドの知識がなくても簡単にSVGアニメーションをサイトに挿入することもできます。

アニメーション素材作成の留意点

SVGアニメーションはモーションブラー等のエフェクトの再現ができない

動画作成時モーションブラーをよく使うのですが、SVGアニメーションでのモーションブラーのWEB表示は不可能です。そのほかにも複数の機能が表現できません。機能のサポートについての詳細は下記をご確認ください。
Lottie Supported Features
鮮明さはSVGアニメーションが優りますが、アニメーション表現の自由さはMP4やAPNGが優ります。
目的や優先したいことを確認し、フロントエンドエンジニア・クライアントと連携して最適な形を検討することが大切だと感じました。

実施した結果

すべて実施した結果、画像容量を約78%軽量化することができました。(18.5MB→4MB)

ページのパフォーマンスはごくわずかに改善しました。一方で、低下している項目もあります…MP4アニメーション部分の影響がまだ大きいようなので、動画の秒数を短くして画像容量を削減するなど検討の余地がありそうです。また、画像容量の軽量化以外の部分の影響が大きく、今回の施策実施では大幅なスコア変化が見られなかったのではないかと考えられます。まだまだ改善途中なので、引き続き取り組んでいきます。

携帯電話

※PageSpeed Insights のキャプチャを使用し当社が作成した画像

デスクトップ

※PageSpeed Insights のキャプチャを使用し当社が作成した画像