【テンプレ制作秘話②】リスティングに効果的、ランディングページ初登場

こんにちは！
BiND10テンプレートのデザインディレクターを担当している、デザイナーの尾本です。
前回のブログで、BiND10のテンプレートのコンセプトをご紹介しましたが、今回はその続き。

「コンバージョンを意識した構成」「LPテンプレート初登場」についてお話ししたいと思います。

コンバージョンを意識した構成

みなさんは何のために日々サイトを運営するのでしょうか？
それには必ず目的があるはずです。申込みを増やしたい、資料請求をしてほしい、問い合わせをしてほしい・・
コンバージョンとはそれらの成果のこと。いわば欠かせないものです。

そのコンバージョンを高めることに特化したサイト＝ランディングページ（LP）がBiNDのテンプレートとして初登場。
同じく、スマホのスクロール操作にも有効で、ページからの離脱が減るなど、コンバージョン率UPが期待できると言われる、シングルページの構成を大幅に増やそうと思っています。

コンバージョンを意識するには、情報の流れや目立たせるポイントを決めるのがもっとも重要。
私たちWebデザイナーは日々、装飾的なデザインだけでなく情報をデザインすることも同時に試行錯誤しています。

テンプレートでこだわったポイントは３つ
・インパクトのあるビジュアルで関心を引く
・購入や申し込みといったゴールにつながる流れをサイト内に作ること
・ゴールをデザイン的な工夫で目立せること
です。

飲食店のテンプレート「和風ダイニング」

たとえば飲食店の場合、インパクトのあるビジュアルでおいしい料理を見せて、メニュー欄の値段表示で安心感をプラスし、店内の雰囲気を伝えて気分を盛り上げて予約や問い合わせへ繋げるという流れにしました。
こうした情報の流れは当たり前のようですが、意外と大変なのは、それ以外の余計な情報は極力そぎ落とすことなんです。

このサイトの一番の目的は、あくまでも「レストランの紹介」で興味を持ってもらうこと。いわゆる食べログのようなレビューサイトでは伝えにくい、お店のコンセプトや、雰囲気など言葉で表せないものを伝えることを目的としています。
予約はサブ目的としているので、グローバルメニューの問い合わせの項目は特に目立たせず、地図のすぐ下に配置した予約とお問い合わせのためのフォームにさりげなく、それでいてしっかり認識できるように電話番号を配置しました。

また情報が複数ページに跨ぐことのないシングルページだから、離脱のないままスマホからも予約に繋がるよう意識しました。

LPテンプレート初登場

LPテンプレートとは、広告バナーやリンクをクリックしたときに表示される「ランディングページ（LP）」のテンプレートです。
コンバージョンを目的とするところは同じですが、達成に最適な要素と構成にこだわりました。

「ヨガ教室」のLPテンプレート

前回もお見せしたヨガ教室のランディングページは、「体験教室の予約」を目的として作りました。

ランディングとは「着地点」のこと。さきほどの例で言うと、レストランは「レストラン名」で検索した時に、一番に出てくるサイトに対して、ランディングページは「ヨガ　体験教室」などのキーワードで絞りこんで検索される時の着地点として使われます。また、体験教室に特化した情報をまとめることでコンバージョンを上げることを期待されています。

体験予約を目的としているので、目立つよう「無料体験予約はこちら」のボタンをゴーストボタンで配置。スクロールしてもヘッダーが追従して、いつでも予約ボタンを押せるような仕様にしました。

また、私はこの手の体験教室には、フォームで問い合わせるより電話で直接連絡したい派なので、電話番号も右上に大きく配置しました。
どちらも予約させる目的を達成できるので、電話もフォームも両方あっていいというのが考え。
そこをもっとも目立たせたせるために、あえて他のメニューと違うデザインのゴーストボタンにしたのがポイントです。

このように同じデザインの中にひとつだけ違うものを入れるのは、「目を引かせる」ためのテクニックです。

テンプレートを上手に使うために

最後に、今回の新作テンプレートでこだわったもう一つのポイントは、綺麗で大きな写真さえあれば、誰でもかっこいいサイトが作れるデザインにしたことです。
目は口ほどにものを言うといいますが、写真には文字の何千倍以上の情報が詰まっています。
できれば、一眼レフなどのカメラで、こだわりの写真を自分で撮ることにチャレンジしてみてくださいね。

※図版は開発中のため、変更となる可能性があります。