CSS Nite Vol.30で株式会社マクニカの鈴木さんのお話で出てきたランディングページについて。これは今まで作ったことがないので、参考になりました。

鈴木さんがお話されていたポイントは主に3つ

  • 1024*768の解像度でブラウザを最大化したときに画面に訴求したいことが1発でわかること
  • 同じ画面の中にお問い合わせなどのフォームへのボタンリンクが大きくあること
  • 電話番号やお問い合わせフォームへのボタンはヘッダーに一つずつ。コンテンツにも一つずつ

1024*768(XGA)の解像度で画面に訴求したいことが1発でわかること

Yahooの煽りもあって、最近1280*1024(SXGA)のディスプレイを基準に考えていましたが、確実に受注に結びつけるには確かに必要だなと感じてしまいました。一応このこのサイズとなると、エクスプローラーバーを開いても十分に収まりますからね。そのため、最近サイトの横幅が広くなっているサイトもけっこうありますが、それとは逆行して、XGAのディスプレイでも無理なく閲覧できる幅でデザインしているそうです。

お問い合わせなどのフォームへのボタンリンクが大きくあること

だいたいコーポレートサイトであれば、会社の看板のようなイメージ画像のことが多いのですが、何かを販売したり、資料請求を促すようなページではよく見かけますね。個人的にはボタンがボタンだとわかるようなものに加えて、マウスオーバーしたときにちょっと動くぐらいの工夫はするようになりました。多少でも動いたほうが認識してもらいやすいかな〜・・・。

電話番号やお問い合わせフォームへのボタンはヘッダーに一つずつ。コンテンツにも一つずつ

僕が見る限りではヘッダーに電話番号を入れているサイトは、そんなに多くない気もします。自社では当たり前のように入れていますが、確かに反応はよさげ。自社サイトは電話経由でもお問い合わせがくることが多いです。(←商材が商材だからかもしれません。念のため。) あとはページのフッターではなく、コンテンツが読み終えたあたりにも同じようにお問い合わせフォームへのボタンリンクだったり、電話番号置いてもいいんじゃないかと思ってみていました。

バナーのデザインを見てみよう

個人的には巨大なバナー(?)のデザインのほうが気になったので、そっちのデザインをカンタンにまとめてみました。「化粧」のキーワードでアドセンスを出稿しているところから、だいたいの特徴をまとめてみます。ちなみに「化粧」は出稿金額が高めなので、デザインの参考には非常に参考になりました。

 

ざっくりと9サイトぐらいピックアップしました。画像がメインになるので、写真の配置を大胆にできたり、文字の大小を付けやすくなったりと訴求することに関してはしっかり作り込まれている気がします。なにより、目線のコントロールがうまいなーと思って見ていました。はっきりボタンをボタンと目立たせているあたりも、共通していますね。

個人的に見た目が好きなのは右上の山田養蜂場のサイトですね。最近こういうテイストのものを見ていないからじゃないかと思いますけれど、暖かい気分にさせてくれます。ボタンの面積をもう少し大きくしてもいい気がしますが、それでもコンバージョン率は高そうな気がします。

普段サイトの見た目を考えるときはロゴありきと考えてしまいがちですが、ランディングすることを意識したページはロゴは飾り程度でいきなり商品を見てもらいたいためなのか、思いっきり強調しているわけではないようです。そのあたりが通常のページとはちょっと違うのかなと思います。明確にプッシュしたいものが決まっているからですからね。

全体的に言えることは、

  • キャッチコピーと説明文の文字の大きさの差が激しい(ジャンプ率が高い)
  • 商品写真やイメージ写真は大胆に配置
  • お問い合わせや購入するボタンが必ず目立つ色(暖色系の色)が多い(そして目立つ)
  • ボタンはバナーの右下にあるものが多く、
  • 丸いオブジェクトがアクセントとして存在している
  • 会社のロゴは目立たないか、省いている

まさに今週からこういうサイトを作っていくところでしたので、色々参考になりました。目立てばいいというサイトではなく、どれもその商品の良さが伝わるようなページでした。こんなに上手に作れるかな〜。がんばってみたいです。

(2009年9月24日追記)ランディングページのデザインを集めたサイトがありましたので、紹介します。

ランディングページ集めました

ランディングページのレイアウトのまとめもしっかりされていたので、こちらも併せて参考にするとコンバージョン率の高いランディングページが作れるんじゃないかなと思います。