ランディングページで参考になったページと書籍

週末はTRICKの映画を見てきました。劇中のトリックもさることながら、エンディングの二人の掛け合いが一番面白かったです。ペイズリー!ブログ強化週間も4日目。

今日はランディングページを作るときに参考にしているサイトと書籍をいくつか紹介します。

デザインのポイント

ランディングページのレイアウトまとめ

デザイナーはもちろん、ワイヤーを引くディレクターの方にも是非読んでもらいたい、ランディングページと言われる基本の型がまとまっています。初めてランディングページを受注をしてしまったら、ここからスタート。基本の型を掴んで、そこから「もっとこうした方が売れるんじゃない?」と議論しながら磨きをかけていくと売れるものができやすいかと思います。

ランディングページを1年で十数個作って気をつけた5つのデザインのポイント

「ランディングページ」と言われる、いわゆるチラシみたいなサイトをここ1年で結構な数を作ってきました。今のところ失敗がなく、注文が来過ぎて受注処理が追いつかずクライアントさんに怒られたことがちょっと自慢です。

以前書いた「ランディングページのデザインの特徴をまとめてみた」は今でも基本になっていることです。二度言ってることもありますが、実際に作るようになっていっそう気をつけるポイントだと思ってもらえればと思います。

1. 大きな商品写真(3,000ピクセル以上)を入手する。

ユーザーに一発で一発で分かってもらうには、商品が何かがはっきりわかること。これを実現しやすくするには、大きな写真が必須です。

商品がある場合の写真は加工の余地が増えるので、3,000ピクセル以上のもらったほうがいいです。とくに質感表現が一番見せたいこととなれば、なおさらです。実際にありましたが、Web用だからと小さい写真をもらいました。しかし、写真を実際のモックアップに配置してみると、ファーストビューの中では申し訳なくついてるぐらいのインパクトしかなく、バランスが非常によろしくありません。ディレクターに大きな写真を再度もらえるようにお願いしました。

商品の写真がなかったり、目に見えないサービスの場合。初めてのランディングページはちょうど「ランディングページのデザインの特徴をまとめてみた」を書いた直後。このとき扱った商材は電話系のサービスだったのですが、大いに活躍したのは素材辞典。素材辞典から女の人と自社で撮影した電話を配置して商品そのものをイメージするような画像で見えないサービスをなんとかしてお客さんのイメージが湧くように作ってみました。(退職後ですが、リスティング広告も効を奏して、既存のサイトと同じぐらいの問い合わせ件数が倍増したそうです。)

CSS Nite LP7にいってきました。印象に残ったスライドなど(その1)

CSS Nite LP, Disk 7「IAスペシャル」

先週の9月12日土曜日はCSSNite LP7に行ってきました。会場はベルサール神田でここ1年以上は行ってなく、なんか懐かしいと思った場所ですw
まとめは他のブログでもガシガシしているので、僕は自分で「お!初めて!」と思ったようなことをスライドと振り返りながら主に書いてみます。

CSS Nite LP7の事前課題をやってみました

CSS Nite LP7もいよいよ明日になりますが、事前課題として講演していただく坂本貴史さんから2つの課題が出ています。課題は二つ。

飛島建設ホームページ
このサイトの
・最適なメインメニュー (グローバルナビゲーション) を考えてみよう
・サイトマップ (ハイレベル) を描いてみよう

というもの。バタバタしながらも、とりあえず形にだけはしてみました。

今回はこのサイトマップを作っていくまでの過程をざっくり書いてみたいと思います。

ランディングページのデザインの特徴をまとめてみた

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

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

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

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

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

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

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

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

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

| 1/1ページ |