今すぐ改善！ LPの画像を軽くする方法
ランディングページのコンバージョンに大きく影響するもの、それは「表示速度」です。これはすでに立証されており、表示速度が1秒から7秒に増えるだけで直帰率が2倍近くになるというデータも。
ランディングページを訪れた人はほんの一瞬で読むべきかを判断します。読み込み速度が遅いと、そのスタートラインにも立つことができません。売り手にとっては深刻な問題です。
ランディングページには画像が不可欠。しかし画像のせいで重い！というのはよくある話です。
そこで今回は画像を軽くする方法を紹介します。簡単にできる方法からちょっと高度な方法まで幅広く紹介するので、是非参考にしてください。
画像のファイル形式を正しく選ぶ
ランディングページに画像を使う場合、ファイル形式を正しく選択することが大前提です。ランディングページ作成に携わっている方ならご存知の方も多いかと思いますが、たまに重たい形式の画像を大量に使っているランディングページを拝見します。画像のファイル形式は主に3種類です。
- GIF・・・アニメーション画像などに使用される
- JPEG・・・写真に主に使用される
- PING・・・画質を追求したい/画質を落としたくない画像に使用される
画質を追求したい場合ならPINGと考えたいところですが、PINGは容量が非常に重たいため表示速度を追求したい場合は選ばない方が良いでしょう。同じ画像でもファイル形式がPINGとJPEGでは容量がすくなくとも半分近く変わってきます。
JPEGとPINGの画質の差でコンバージョンに影響するという話はほぼないので、容量を考えた場合はJPEGが一般的です。
GIFはおもに画像でアニメーションをする場合に使用されます。今の時代アニメーションを画像でやりたいというケースはほとんどなく、スタイルシートなどで行うのが普通なのであえて選択する必要もないでしょう。
画像を軽くする最も手っ取り早い方法「圧縮」
画像を多用しているランディングページなどでは真っ先に画像の圧縮が思いつくでしょう。
Photoshopなどの画像処理用アプリが必要、、、なんてことはなく、今は無料で使える画像圧縮ツールが沢山あります。便利な時代になりました。画質と表示速度の兼ね合いを考える必要はありますが、非常に効果的な方法です。すぐに使えるツールをいくつか紹介します。
optimizilla
画像の圧縮をしてくれるWebツールです。PNGとJPEGの圧縮に対応しています。ブラウザ上からお手軽に圧縮が可能です。
EWWW Image Optimizer
こちらはWordPressのプラグインで、アップロードした画像を自動で圧縮してくれます。
WordPress上でランディングページを作る人にとっては非常に便利なツールでしょう。画像圧縮のためにわざわざ別のサービスを使うという手間が省けるのもよいですね。
Caesium Image Compressor
PCにインストールするタイプの画像圧縮ソフトです。
変換後の画像はJPG,PNG,BMPの3種類を選択できます。圧縮する元ファイルは様々な形式に対応しています。
JPEGmini
JPEG画像に特化した圧縮ツールです。
無料なら200MBまでの圧縮が可能です。それ以降は有料になりますが、有料な為に元の画質を損なわないまま高い圧縮率を提供してくれます。ためしに使って気に入ったら購入するのも良いでしょう
TinyPING
PING形式に特化した圧縮ツールです。というのも過去の話で、今はJPEGにも対応しています。どうしてもPINGを使わなければいけない！という場合にこちらを使うと良いでしょう。
また、現在ではWordPressのプラグインとしても提供されているので、WordPressユーザーはこちらも選択肢になります。
imageOptim
こちらは珍しいmac専用のアプリです。
PING,JPEGに対応しているので、macユーザーはこちらも選択肢に入るでしょう。ドラック&ドロップで簡単に圧縮できるので使い方も簡単です。画質だけでなく、画像のメタ情報(画質とは関係ない画像に関する情報)を削除してくれるのでさらなる軽量化が期待できます。
上級者向け？必要になった時に初めて画像を表示させる「画像の遅延読み込み」
画像の圧縮のほかに、ランディングページ全体の容量を削減する方法として「画像の遅延読み込み」が挙げられます。
基本的にランディングページの画像はページにアクセスした瞬間にすべて読み込まれます。あまり見られないランディングページの下にある画像もすべて読み込まれてしまうのです。
遅延読み込みとは、画像が必要になったときにはじめて読み込ませるようにする方法です。
アクセスした際にファーストビューの画像のみを表示させ、ページをスクロールしていく中で表示させる必要が出てきた際に該当する画像を読み込みます。こうすることで不必要に画像を読み込まなくなるので全体として読み込み速度が向上します。
この遅延読み込みは、ランディングページの中にスクリプトと呼ばれるコードを埋め込む作業が必要になります。ですのでHTMLやCSS、Jacascript、jQueryなどについて理解している方でないと使うのは難しいでしょう。逆にこれらの知識があれば使うことができます。
遅延読み込みに必要なコードは検索するといくつかの種類が出てくるので、ピンときたものを選ぶと良いでしょう。
ファーストビューの表示速度にこだわろう
ランディングページにおいて、ファーストビューは命です。見た瞬間に読み手の注意を引くキャッチコピー、商品イメージや商品・サービスを使うことで得られるベネフィットを画像を交えて全力で伝える場所です。
ですが、ここでの表示がもたついてしまえば、どんなに力を入れてもすべてが水の泡。。。何も表示されない真っ白な画面のまま直帰してしまうという事態を避けるためにここの軽量化も必ず考えましょう。
ファーストビューは全て画像ではなく、テキストも使用
ファーストビューでは視覚的に商品イメージなどを伝えられるように、写真の使用が推奨されます。
よりリッチなランディングページに見せるためにキャッチコピーも画像で用意する方も多いのではないでしょうか。ファーストビューを軽くしようと考えた場合、写真を圧縮するなどの手法が真っ先に頭に浮かびます。それ以外の方法としては、キャッチコピーを画像ではなくテキストとして配置するのも一つの方法です。
もちろん商品内容にもよりますが、キャッチコピーの部分をテキストにしてフォントや色合いを駆使することで魅力的に見せることも十分可能でしょう。キャッチコピーはランディングページの中でも変更する頻度が最も多く、かつコンバージョンに強く影響する箇所でもあります。
テキストにすることで、容量削減だけでなく改善する際の労力軽減効果も見込めます。
CTAボタンも画像ではなく、CSS(Cascading Style Sheets)で代用
キャッチコピーにも言えることですが、ボタンもわざわざ画像を用意するのではなくスタイルシートを使用して見栄えをよくすることも一つの手です。
ただキャッチコピーとは違って調整の為にスタイルシートをいじる必要があります。ちょっとした変更でもスタイルシートが不得手な人は少々苦労するかもしれません。
どんな画像を使うのが効果的か？を考えることが一番大切
ここまで画像を軽くする方法や、ランディングページ全体を軽くする方法、ツールなどを紹介しました。
ここでの方法を実際に使うことでランディングページの軽量化が期待できます。しかし、「これで画像をたくさん使ってきれいなランディングページを作るぞ！」と考えるかもしません。
ランディングページにおいて、画像や写真は「伝えるための手段」にすぎません。画像を多用したからコンバージョンがあがるというわけでもなく、
「商品やサービスの価値を効果的に伝えられる画像・写真は何か？」
を考えることがとても重要です。これは、実はデザインやWeb制作のスキルとは少々異なるものでwebマーケティングや人間の行動心理などが根本にある領域になってきます。
「どんな画像が一番効果的か？」と聞かれたら、なかなか難しいと感じませんか？
画像は画像という枠にはまるものではなく、読み手の心理を踏まえたうえで組み立てていく必要があるのです。とても重要なポイントです。
ランディングページ制作を請け負うの制作会社などはこういった画像に関する知見やノウハウを持っているところもたくさんあります。ランディングページの構成要素である画像について、どうすればいいか悩んだ時は専門家に相談するのも一つの手段になるでしょう。
まとめ
今回はランディングページの画像を軽くする方法を紹介しました。
画像を使わずに作成するポイントをお伝えし、画像圧縮ツールも紹介しました。
ぜひ参考にしてランディングページの改善に役立ててください。
コメント..