INTRO

はじめに

02コンバージョン 訪問者がお客さまに変わるその仕組み

訴求する

広告やコンテンツマーケティングにより、ユーザー(潜在顧客)があなたが見て欲しいWebページにたどり着きました。その潜在顧客が最初に辿り着いたページをランディングページといいます。
さてここからです。その潜在顧客に、あなたのお客さまへ変わって(コンバートして)いただくためには、商品やサービスを訴求し尽くさなければなりません。そこで必要になるのが、そのWebページのコンテンツ設計とデザインです。

コンテンツ設計

商品やサービスの訴求はもちろん重要ですが、その前に第三者的目線が必要になります。どんな訴求方法だったらお問合せしたいと思うのかということを、自分が潜在顧客になったつもりで客観的に考え、その内容をベースにしてコンテンツを組み立てていきます。
まず箇条書きで構いませんので、そのページのコンテンツの柱を考えます。次にその柱ごとに肉付けをしていきます。
ある程度の原稿ができたら次はデザインの制作に入ります。

デザイン制作

詳細なデザイン制作に入る前に、作成した原稿を基にレイアウト案を作成します。これをワイヤーフレームといいます。
実際にレイアウトをしていくと、ここに写真があった方が良いな、ここの要素はページの下の方に移動した方がいいなと、だんだん形になってきます。
ページ最上部に大きな商品写真やイメージ写真を配置したり、そこに商品やサービスを端的に訴求するメインコピーを載せたり、そうやって具体的にレイアウトを作成していくことで、だんだんと見えてくるものがあります。それはその商品やサービスを効果的に訴求するにはどんなテイストのデザインが良いのか、写真は自分で撮れる範囲内の写真で良いのか、購入素材写真で良いのか、それともカメラマンへ依頼した方がよいのかなどです。

次にようやくデザインの制作に入ります。自分でデザインの制作ができない場合は、デザイナーもしくはWeb制作業者に依頼します。ただし、デザイン制作を依頼するとしても業者のいいなりになるのではなく、ご自身でも制作内容を理解し、ご予算の都合によっては業者との落とし所を調整する必要があります。

もちろんコンテンツ作成の部分から業者へ依頼しても構いませんが、ご自身である程度は制作内容を把握しておくことが大事なポイントです。

導線設計

潜在顧客がランディングしたページから、お問合せページまで迷わないように、また、潜在顧客に他のページも見て欲しい場合に、他ページへの導線設計が必要になります。潜在顧客がランディングしたページがトップページとは限らないからです。

ユーザビリティについて

基本的にトップページは数ある下層ページへの導線を設置します。それはボタンだけではなく、キャッチーな写真、下層ページ名、ユーザーにクリックを促すためのリード分と共に設置するのがベターです。
トップページのファイル名は決まっており、index.html(もしくはindex.php)になります。要はインデックス、目次ページです。

ホームページのメインメニューは、グローバルナビゲーションといいます。また、下層ページの下に数ページある場合は、その下層ページ配下のメニューを設置します。これをローカルナビゲーションといいます。
その、グローバルナビゲーションとローカルナビゲーション位置はどこにでも設置できるのですが、ほとんどの場合、その設置場所はほぼ同じです。

どの自動販売機もコイン投入口はほぼ同じ場所にあります。コイン投入口はどこにでも設置できると思いますが、ほとんどの自動販売機のコイン投入口が同じ位置にあるのはなぜでしょうか?
それはユーザービリティ(使い勝手)のためです。あえて変える必要がないからです。

また、潜在顧客がランディングするページがトップページとはかぎりません。そのページだけで訴求し尽くすことが難しい場合もあります。その場合は、グローバルナビゲーション、ローカルナビゲーションが然るべき場所に設置されていることは当然ですが、他ページの興味がありそうなコンテンツを垣間見せることによって、ホームページ全体の回遊率を上げることができます。
そして、その潜在顧客がお問合せをしたくなったとします。「どこからお問合せしたらいい?」と迷わせてしまうことは絶対にNGです。迷ってしまった時点で、よほどの興味がない限りユーザーはドロップしてしまいます。

ドロップについて

Web業界に置いてドロップとは、ユーザーがそのホームページから離れることをいいます。
ユーザーを迷わせないUI(ユーザーインターフェイス)設計は、コンテンツ設計と共に重要です。ホームページ全体でせっかくいいコンテンツを作成しても、そのコンテンツを回遊してもらえなかったら残念な結果になってしまいます。さらに、ユーザビリティの問題でお問合せまでたどり着けなかったら目も当てられません。

写真の重要性

ここでまたデザインの話に戻ります。皆さんはレスポンシブデザインという言葉を聞いたことがあるでしょうか?
レスポンシブデザインとは、PCやタブレット、スマートフォンなど、さまざまなデバイスで綺麗に表示されるよう対応した、マルチデバイス対応のWebデザインです。

装飾から、写真へ

以前は、ホームページを作成するWebデザイナー、プログラマーは、PCサイトのみケアすれば良い時代でした。その後、スマートフォン、タブレットが普及したことにより、マルチデバイス対応のホームページ制作が求められるようになりました。

以前のWebデザイナーは、PCの表示だけを考えてデザインしていました。ホームページに装飾を施すことにより、全体のデザイン性を上げたり、訴求力のあるバナーを作成して、回遊率を上げたりしていました。

現在のレスポンシブデザインにおいては、装飾は実現が難しくなっています。装飾=画像とイラストです。PC表示では問題ない画像も、タブレット、スマートフォンと画面が小さくなるのに伴い表示される画像も小さくなりますので、あまり意味をなさないものになってしまいます。
タブレット、スマートフォン用の装飾画像を作ればよいのでは?と思われた方がいらっしゃるかもしれません。タブレット、スマートフォンは、端末によって画面サイズが異なります。全てを網羅するのは現実的ではありません。
また、その装飾も、一箇所だけならなんとかなるかもしれませんが、複数箇所ある場合や、ページごとに装飾のデザインが異なっていたら、プログラマーもその分、画面サイズによって装飾画像の出し分けをしなければなりませんので、制作における工数だけどんどん増えていき、ご予算を圧迫してしまうことになりますのでやめましょう。

最近のホームページにシンプルなものが多いのはこういった理由によるものです。シンプルになってしまった分、どうやって訴求するか。そこで重要になってきたのが写真です。以前は写真の上に文字をいっぱい載せたバナー画像もありました。そのバナー画像もPC表示では文字が読めますが、スマートフォン表示時の縮んだバナー画像では文字が読めるでしょうか?

そういった理由から現在、写真そのものの重要性が増しています、デザイン的に作り込んだ画像ではなく写真です。今、商品写真やサービスイメージ写真などは決して手を抜けないものになっています。
商品写真やサービスイメージ写真がそのホームページのデザイン性を決めていると言っても過言ではありません。