ランディングページは人生のスパイスです、というのは言い過ぎだとしても、ランディングページが秀逸なオンラインコンバージョンのスパイスになっていることは確かでしょう。ランディングページでは、抜群のヘッドラインを書き、卓越したオファーを提供するのに加え、素晴らしい画像を用意する必要があります。結局のところ「一枚の画像は千の言葉に匹敵する」のですから。

では、素晴らしい画像が必要なのに、手元に適当なグラフィックデザインがない場合はどうすればよいのでしょう? どうぞご安心ください。今回は、コンバージョン率を増加させる最高のランディングページ画像を用意する方法をご紹介します。

コンバージョン率を高めるランディングページ作成のノウハウをまとめた無料ガイドはこちらからダウンロードできます。

1)無料画像を見つける

当然のことながら、まず必要となるのが画像です。オンラインに数多く存在するストックフォトエージェンシーで購入することもできますし、HubSpotでもランディングページ用の無料写真を多数提供しています。

皆さんのランディングページにぴったりの画像を見つけたら、次にウェブに対して最適化していきます。

2)画像の加工

画像が用意できたら、まずは少し加工を施したいと思うかもしれません。

おなじみのAdobe製品に限らず、画像の加工を行うためのサイトは多数存在します。

行いたい加工によっては、HubSpotで提供している画像エディタで十分かもしれません。この画像エディタはHubSpotが提供しているツールの中でも、おそらく最も活用度が低いものの一つでしょう。筆者がこの機能を紹介したHubSpotのユーザーの方たちも、その存在すら知らなかった方がほとんどでした。

HubSpotの画像エディタでは、サイズ変更やクロップ(切り抜き)など、シンプルな画像加工機能を多数用意しています。

HubSpotの画像編集機能

上の画像は、HubSpotの無料ストックフォトをHubSpotの画像エディタで編集しているところです。

例えば、色温度と焦点を変更することでクールなエフェクトをかけ、素敵な背景画像を作ることができます。

HubSpotの画像編集機能

HubSpotの画像編集機能

3)画像とページパフォーマンス

画像をランディングページで使用するにあたり大きな影響を及ぼしうるのが、そのサイズです。画像のサイズが大きすぎれば、ブラウザがランディングページを読み込む速度が大幅にスローダウンしてしまいます。そして読み込みが遅くなればなるほど、見込み客がオファーを見る前に立ち去ってしまう、つまりコンバートしないで終わってしまう確率は高くなります。

Googleの無料ツール「PageSpeed Insights」を使えば、既存のランディングページ(およびそれらのページにあるすべての画像)をテストしてみることができます。

使い方は簡単で、ランディングページのURLを記入して、Analyze(分析)ボタンをクリックするだけです。

Googleのページスピードテスト

新しい画像を作成する際は、常にページパフォーマンスを念頭に置いて作成するようにしましょう。

4)画像の寸法を決定する

ページパフォーマンスにとって最も大きな問題となるのが、画像の寸法です。多くの人は、2,000×2,000ピクセルのような非常に大きな画像をアップロードし、HTMLを使って画像を小さく(例えば200×200ピクセルに)表示させています。ただこの場合、ブラウザは依然として2,000×2,000ピクセルの画像を読み込まなければならず、実際に必要な読み込み時間の10倍もの時間が無駄にかかることになります。

そのため、画像は実際に画面で表示される大きさと同じ寸法にし、HTMLでリサイズする必要がないようにしてください。

ヒント:大部分のウェブサイトはデスクトップ上で900~1,200ピクセルの幅しかありません。1,000ピクセル以上の寸法の画像が必要になることはほとんどないでしょう。

5)ランディングページ画像のサイズ変更

画像のサイズ変更ができるツールは、オンライン、オフライン共に多数存在します。HubSpotの画像エディタを使わない場合に、筆者たちがよく使っているのがPixlr.comのOnline Photo Editorです。

まず、画面上部にある「File(ファイル)」メニューから、画像ファイルまたは画像URLを開きます。次に上部メニューの「Image(画像)」を選択して「Image size(画像サイズ)」を選びます。

Pixlrのランディングページの画像編集画面

すると、下のようなウィンドウが開くので、希望する画像寸法を記入します。その際、画像が歪まないよう、「Constrain proportions(縦横比を維持する)」にチェックを入れるのを忘れないようにしてください。

Pixlrのランディングページの画像編集画面

画像が希望するサイズになったら、「File(ファイル)」メニューから「Save(保存)」をクリックして、自分のコンピューターに保存します。

6)SNS用に画像サイズを調整する

画像のサイズを変更する際、SNS用に最適化するのも忘れないようにしましょう。

各SNSは、画像のサイズに関して、それぞれの独自の基準を設けています。

  • Facebookの推奨画像サイズは600×315px以上
  • Twitterの推奨サイズは60×60pxを超えていること
  • LinkedInの推奨サイズは180×110px以下

ここでいうSNS用画像とは、誰かがあなたのランディングページを共有した際に使用される画像のことです。重要な画像であるのは言うまでもありません。

どのSNSに対して最適化したいかによって、いくつか異なる画像サイズを用意しておく必要があります。

7)画像の圧縮

さて、画像は無事に加工され、適切なサイズに変更されました。ランディングページの読み込み時間を短くするために、ここでさらに画像を圧縮しましょう。

筆者のお気に入りの圧縮ツールは、tinyping.comです。信頼できる圧縮効果で、名前に反して、.pngファイルだけでなく.jpgファイルも圧縮できます。

使い方も簡単で、ページ上にファイルをドラッグ&ドロップするだけで、手軽に圧縮することができます。

tinypingのトップページ画像

ファイルをドロップした後、圧縮されたファイルのリストが表示されるので、それらを自分のコンピューターにダウンロードします。これで、ウェブに対して最適化された画像が完成しました!

tinypingのトップページ画像

この画像をサイトにアップロードしましょう!

8)Altテキストを設定する

ランディングページに画像がアップロードできたら、altテキストを設定します。altテキストとは、画像が見られない閲覧者用に、画像について説明したテキストのことです。

ただそれだけではなく、altテキストはSEOの強化にも役立ちます。検索エンジンは、altテキスト内のキーワードを読み取ることで、画像の内容をよりよく解釈することができるためです。

大部分のコンテンツマネジメントシステムでは、画像を編集または選択した際にaltテキストを設定できるようになっているはずです。例えばHubSpotでは、画像編集モジュールでaltテキストを変更することが可能です。

HubSpotのAltテキストの設定画面

HubSpotのAltテキストの設定画面

altテキストを作成する際は、以下の点に注意してください。

  • テキストが画像に関連した内容になっていること。無関係のキーワード詰め込むのは避けましょう
  • altテキストには正式な字数制限はありませんが、簡潔に留めるのがベストです。Hobo Internet Marketing’s blogの記事によると、検索エンジンは(英単語で)16語を超える部分は読み取らないそうです。また現実的に考えて、多くの画像の説明は10語もあれば事足りるでしょう。

まとめ

以上で完了です!  上記のステップで、コンバージョン率の増加につながる、よくデザインされ最適化されたランディングページ画像が準備できたはずです。

また、コンバージョン率をあげるランディングページの作り方をこちらの無料ガイドで解説していますもで、ご興味があればご覧ください。

New Call-to-action

編集メモ:この記事は、 2015年9月に投稿した内容に加筆・訂正したものです。 Gregg Crystalによる元の記事はこちらからご覧いただけます。

元記事発行日: 2016年2月15日、最終更新日: 2018年10月09日