ランディングページを作る時に気をつけているポイント3選

ABOUTこの記事をかいた人

杉本 郁

1991年6月生 はり師/きゅう師/あん摩マッサージ指圧師の免許を所有。自費による鍼灸マッサージ院に就職後23歳で副院長、24歳で院長を経験。その後25歳で退社・独立。自身の治療技術に限界を感じ、より技術の高い先生のサポートをする様になる。“治して欲しい患者“と“治せる技術を持つセラピスト“を繋げるためWEBマーケッターとして活動中。

WEB制作を普段から僕はしていますが、そのときにただ“闇雲”に作っているわけではありません。

今まで300個以上のランディングページを作ってきて、もちろん反応が良いページ反応が悪いページをいくつも作ってきました。

その経験上、いくつか作るときに気をつけているポイントがありますので今日はそれをお話ししたいと思います。
まだ開業されていない人は、ちょっと何言っているか分からないと思いますが、頭の片隅に入れておいて頂けると今後開業したときにHPを作る際、参考になります。

また既に開業されている先生は自分のHPやランディングページがどうなっているか?を再度確認してみて下さい。

色について

僕がランディングページの配色を決めるときは、多くて4色。ほとんどが3色以内くらいにまとめて制作します。

ランディングページにアクセスしたときのファーストビュー(以下アイキャッチ)部分で基本的な配色を決めていきます。

上記の場合はブルーをメインカラーとして設定しています。
そして、そのアイキャッチ部分でメインカラーを決めたらそれに沿ってbodyを構成していきます。

このアイキャッチでbodyを作成していったページはこちらになります。

アクセスしてもらうと分かりますが基本的にはメインカラーを多用しながら多少文字の装飾のために他の色を使う。という様な構成にしています。

ちなみにブルーと相性が比較的良い色としてゴールドがありますので、その色を組み合わせて作っています。

ブルー以外にも、一番反応が出やすいと言われているのはレッドだと言われています。

目にとまりやすい色

最もデザインで強調するときに使われる配色は

  1. 赤+黄
  2. 赤+黒
  3. 黄色+黒

赤ちゃんなどが反応する三原色が良いとされています。
しかし、これらの色は“情報商材系のLPに多い配色”となっており、仮にFacebook広告を出す場合、結構低評価がつきやすいです。

それを防ぐために、微妙にカラーコードを変えることで、見た目を変える対策を取っています。

同じ色でもコード次第で微妙に違う

メインカラーが決まったらそれに沿って構成していきますが、実はその中でも微妙に色を変えて作る事があります。

赤と一概に言ってもこのようなthe赤(#ff0000)という色から微妙にカラーコードを変えたこういった赤(#fd0000)も存在します。

この二つはカラーコードが異なるので当然、同じ赤でも微妙に違う赤となります。

上に行くほど明るく、下に行くほど暗い赤になります

  • #FF9C9C
  • #FF6868
  • #FF3434
  • #FF0000
  • #CB0000
  • #970000
  • #670000

同様に青でも明るい青から暗い青まで出してみると

  • #9C9CFF
  • #6868FF
  • #3434FF
  • #0000FF
  • #0000E5
  • #0000B1
  • #00007D

同じベース色で決めたとしてもこれだけのバリエーションがあります。(まだまだもっとたくさんあります)

なので前項で伝えたように“情報商材”っぽく見せないような工夫としてこのカラーコードを少し変えてあまりチカチカしないような赤にするのも手法の一つです。

また、青をメインカラーで使うと反応が青落ちるとも言われていますが、僕のクライアントさんの中で試した時はそこまで変わりませんでした。

ただし僕が使ったのは、このを背景色に使い文字色はそれの反対色にものを使いました。

このように背景に対して文字がしっかり見やすいようにやりました。その結果反応が落ちなかった可能性は辞めませんので、青のテキスト自体をランディングページのアイキャッチとして使ったワケではありません。

見出しの構成

ランディングページは基本的に縦に長いページになります。
その長いページにできるだけ長く滞在してもらうことと、飽きさせないということを目標にしています。

これは滞在時かが長い=それだけ読んでいる。そのためにはユーザーを飽きさせないようにする必要があります。

そのために必要な要素が見出しになります。
僕がこの見出しを作るときに気をつけているのが

・HTML方式でやるのか
・画像出力方式でやるのか

と言う事です。
この二つは何が違うのか?それは見てもらった方が一目瞭然だと思います。

まずHTMLベース

HTMLでボールド設定 

これに対して画像で出力した場合

これだのインパクトの違いが出てきます。
どちらの方が目にとまりやすいか?というと当然画像出力した場合です。実際にヒートマップで見たとしても画像の方がより高い注目率でした。

HTMLでは基本的にボールド設定という方法一択なのですが、画像でフォントを変更していく方法だともっと多くのフォントウェイトを選ぶ事が可能です。

僕がよく使うフォントは“モリサワフォント”なのですが、このモリサワフォントでは多くのフォントウェイトを選ぶことが出来ます。

heavyまでいくと若干太すぎて見づらさが出てしまうので、多く使うのがmidium ~ ultra-boldまで位です。

文字が太い方がより強調されますので、本当に伝えたい内容は特に太い文字で構成する事がほとんどです。

レスポンスデバイス

ランディングページを見てくれたお客さんが何か良さそうだから申し込もうと考えたときに申込ボタンが見つからないと致命的になります。

この致命的なミスを避けるために僕が作るボタンはこんな感じになります。

埋め込んだ動画を見てもらうと若干異なりますが、僕が作る特徴としてボタンが動くという傾向にあります。

WEBページがチラシなどと決定的に違う点は“動き”であると僕は考えています。
チラシなどのオフラインでは基本的に何も動きを出す事が出来ませんが、ウェブでは動きを出す事が出来ます。

その強みは最大限使うべきだと僕は考えています。
なので僕はボタン類はほぼ全部でアニメーションを追加しています。実際にクリック率は変わっています。ヒートマップからの注目率も高いので今のところプラスの方向に作用しています。

まとめ

これらのことは実際に僕が実践している内容です。
未だに検証検証のトライ&エラーの繰り返しです。そしてWEB業界は移り変わりが激しい業界でもあります。

執筆時点ではこのような形になっていますが、一年後どうなっているかは分かりません。
実際にHPを作る、作るのを依頼する。そういうとき基本的にテストであると言う事を前提にしておいて下さい。

ただ、テストをするにしても、何かを制作するにしてもやはり“費用”が発生します。
その費用を最小限に抑えるために経営者のかたは今日お話しした内容は把握しておくべきだと思います。

参考にしてくれたら幸いです。本日も最後までお読みいただきありがとうございます。もし記事が気に入れば“いいね!”してください。管理人の励みになります。

 

メルマガ購読しませんか?
もちろん無料!記事にする前の速報をお届け!
お名前 必須
メールアドレス 必須


 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

杉本 郁

1991年6月生 はり師/きゅう師/あん摩マッサージ指圧師の免許を所有。自費による鍼灸マッサージ院に就職後23歳で副院長、24歳で院長を経験。その後25歳で退社・独立。自身の治療技術に限界を感じ、より技術の高い先生のサポートをする様になる。“治して欲しい患者“と“治せる技術を持つセラピスト“を繋げるためWEBマーケッターとして活動中。