[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

横幅いっぱいの動画を配置しているサイトも!生活家電企業のトップページは、画像が10%〜88%を占めている!

生活家電というと、テレビや冷蔵庫、洗濯機や掃除機など、普段から身近にある電気製品です。それだけに、CMやWebサイトなどでいかに「製品の良さ」を伝えるか、「他とどう違うのか」というのがとても重要なマーケティング・販促になります。

動画を配置している場合は、10%程度しか画像がない。動画がなければすべてのトップページは、50%以上を画像が占める

2018-04-23-kaden.jpg

ランダムに選んだ10社のWebサイトのトップページで、ダウンロード容量を全体と画像のみでグラフ化したもの。

日本法人がある主要な生活家電メーカーの中から11社を選び、データにまとめてみました。画像が少ないからいいとか、多いから悪いというわけではなく、どのくらい画像が容量を占めているのか、というのを知ってもらいたいのです。

会社全体(MB)画像(MB)画像が占める割合
A 0.99MB 0.58MB 約59%
B 7.5MB 6.6MB 約88%
C 3.2MB 2MB 約63%
D 5.1MB 4.3MB 約84%
E 12.9MB 1.3MB 約10%
F 2.4MB 1.5MB 約63%
G 4.9MB 4.3MB 約88%
H 4.2MB 3MB 約71%
I 3.4MB 1.7MB 約50%
J 5.4MB 4.7MB 約87%

調査した10社のうち、80%以上が4社、50%〜79%が5社あることがわかります。10%という企業が1社ありますが、こちらは画像による訴求ではなく動画での訴求を行なっていました

もっと画像の占める割合が多そうなイメージがったのですが、表示速度の懸念からなのか意外と少ないと感じました。全体のダウンロード容量も、動画の1社を除けば非常に重いという印象はありません。

動画による訴求は、インパクトは高い。実装がカギになる

今回、動画を横幅いっぱいで訴求している企業が1社ありました。以前からフルスクリーン動画を背景に敷いたり、フルスクリーンでの動画をメインビジュアルに表示するレイアウトはありました。しかし、実装がシンプルなケースが多く、いわゆる「動画が読み込まれるまで待たないとみれない」というのがほとんどでした。

2018-04-23-kaden-01.jpg国内大手のストリーミングサービスJstreamは、企業利用も押し出している

上の表にあるE社は、メインビジュアルに当たる部分に動画を読み込ませています。外部の動画サービスから読み込ませており、かつ動画が複数に分割されているようで、動画1ファイルのダウンロードは大きくても2MB程度でした。複数個の動画ファイルに分割していることで、表示のスムーズさを実現しているようです。

巨大な動画ファイルをひとつだけ読み込ませるのは、閲覧者側の待ち時間も長くなります。外部の動画サービスにはいろいろな配信方法が用意されているので、そのあたりもチェックしてみましょう。

画像による訴求は、オーソドックスな方法として利用されている

今回、動画による訴求は1社有りましたが、それ以外はオーソドックスなレイアウトでした。メインビジュアルのスライダーは、もう出始めてから5年以上たってあますが、その利便性の高さから根強い人気です。最も重要なファーストビューにあり、複数の訴求コンテンツを見せることができるのはいいですよね。動画は流れてしまいますが、スライダーは閲覧者が操作することも可能です。

2018-04-23-kaden-02.jpgjQueryが不要で、スワイプ操作にも対応している「Swiper」が人気

スライダーバナーはPhotoshopなどの画像処理アプリを利用して作ることが一般的です。Photoshopでの書き出し時の画質設定は、各Webデザイナーさんの個別設定になっていますので、どのくらいの画質になっているのか確認しましょう。

画質の最適化はWebデザイナーの仕事なのか?

画質最適化は、人の仕事ではなく、プログラムの仕事ではないかと考えています。というのは、人間の目でみて、画質99と98の違いはわからないでしょう。しかし、コンピュータでは処理されています。あくまでコンピュータが判断して処理しているのです。

diff-lfc-best.jpgImagemagickでの画像処理の差分を出した結果。コンピュータなら差分がわかるが、人間の目では難しいことも多い。白が差分なしで、赤が差分ありを表してます。

SSIM値を利用すれば、画質の評価はコンピュータが「人間の目でみた時のように」判断することが可能です。LightFileは、このSSIM値とファイルサイズが最適な関係になるように各ファイルを処理します。

無料のシミュレータで、今すぐチェックしよう

アイデアマンズが提供するLightFile Simulatorを利用すれば、ページでどのぐらい画像が割合を占めているのかがすぐにわかります。また、各画像が最適化するとどのくらい軽量化され、その画質がどのくらい良いのかもみることができます。ぜひ試してみてください。

最後に

家電の寿命はいきなりくるので、うちもそろそろ買い替え時期が近そうと思っています。利用頻度が多いせいか掃除機と電子レンジ(オーブン付)、洗濯機は買い替えが多いような気が。。。小さくて、必要十分な機能で、耐久性がある家電がベストなので、誰かよいメーカーを知っていましたら、TwitterかFacebookページでコメントください(^-^)

前へ前へ

画像が24%〜92%を占めるという事実。日本の鉄道会社Webサイトのトップページをチェックしてみた。

次へ次へ

動画での訴求が流行り?3%〜93%と幅広い住宅設備・リフォーム関係の企業トップページは、ゴテゴテしてないから容量も軽い。