スマホ用ランディングページ制作の秘訣9つを紹介
パソコンとスマホでは、ランディングページを制作する時に気をつけることが
違ってきます。それは、画面の大きさはもちろんの事、デバイスの操作性、
訪問者の年齢層、動機、意識の相違、検索している状況などに違いがあるからです。
今回は、スマホ用ランディングページ制作の秘訣9つを紹介します。
その秘訣とは、
1 レスポンシブではなく、スマホ用に個別で作る
2 ファーストビューは画面ぴったりにする
3 情報の境目がわかるように工夫する
4 できるだけ軽くする(タグの最適化・画像圧縮)
5 できるだけ文字量を減らす
6 オファー(無料・有料・軽めの違い)
7 ボタンは大きめに押しやすく
8 電話のタップボタン設置
9 入力フォームは、項目を必要最小限にする
では、順番に見ていきましょう。
①レスポンシブではなく、スマホ用に個別で作る
パソコンとスマートフォン、別々にランディングページがあった方が、
それぞれに合 わせて改善を繰り返していけるので、オススメですよ。
そして、スマートフォンの最適化に注意が必要なんです。
すでにランディングページをお持ちでしたら、
以下のモバイルフレンドリーでチェッ クしてみてください。
モバイルフレンドリーとは、Google が全世界で実装した アルゴリズム です。
ホームページやランディングページをスマートフォンで開いた時に、
快適に閲覧できるか を示すGoogleの判定基準。
きちんとスマホ対応(最適化)されているかをチェックする ための指標です。
モバイルフレンドリーに対応していないと検索順位が下がり、
集客力が 減ってしまいます。
Googleのモバイルフレンドリーのテストで簡単チェック
②ファーストビューは、画面ぴったりにする
検索結果からの流れでやってきた訪問者は、ランディングページを「さあ、読むぞ」と
い う気持ちでくるわけではありません。
読むべきページなのか判断しようと見に来ているケー スが多いんです。
訪問者が自分の求めている情報があるかを一瞬で見極めるポイントは、
・訪問者の流入経路との関連
・訪問者が、読まずとも一目見てわかる好みの雰囲気 (写真・フォント・色使いなど)
・詰め込みすぎず、訪問者が目的を見つけやすいような簡潔な表現
これを、ファーストビューの画面ぴったりでデザインしましょう
③情報の境目がわかるように工夫する
スマートフォンの表示面積は圧倒的に狭いので、情報の内容の境目がわかるように
メリハ リをつけましょう。訪問者が今、何の情報を見ているのか混乱しないようにするのです。
・見出しのフォント、色、大きさ
・背景の色を分ける
・レイアウト(なるべく1画面の中に収めるなど)
今、何に対して説明しているのかが明確にわかるようなデザインにしましょう。
④できるだけ軽くする (タグの最適化・画像圧縮)
ランディングページは、長いシングルページとなりますので、容量が重くなりがちです。
軽く、早く、かつ綺麗に見せる工夫が大切です。
「PageSpeed Insights」は、表示の速度がスコアとしてみれますので、
すでにペー ジをお持ちの場合は確認してみましょう。
Googleの表示速度測定ツール(無料) PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
⑤できるだけ文字量を減らす
伝えたいことはたくさんあると思いますが、画面が小さいので、できるだけ文字量を
減らし読みやすくしましょう。
横幅640ピクセルで、デザインを行うときは、フォントサイズは26~28ポイントに
設定することが多いようです。
なお、注釈などはもっと小さいサイズでもいいと思い ますので、臨機応変に
使い分けましょう。
⑥オファー
●無料オファー
ファーストビューか、その近くに目立つように設置し、最後にも設置しましょう。
無料なのでとにかく目立つように工夫して、登録してもらうことが目的になります。
●有料オファー
最後の方か、ボディー(商品説明)の下に設置しましょう。 初めに出すと売り込み感満載になるので注意が必要です。 ファーストビューから興味を引き、価値提供をし、共感を得て、 訪問者が欲しいと思うまで、金額を出してはいけません。
●オファーは軽めで
「海外SEO情報ブログ」によると、 スマホユーザーは、99.5%は購入しないというデータもあります。
買わずに閲覧するだけの理由:
・買う準備ができていない
・買う気がなく見ているだ
・買おうかどうか調べている段階
・高すぎる
・店舗で買うために調べている
・モバイルデバイスだから
『海外SEO情報ブログ』より引用
なので、、、
例えば、いきなり定期購入を売るよりは、
・お試しセットを手に入れる
・資料請求する
・メルマガ登録する
などスマホユーザーが行動しやすいレベルまでハードルを下げるのも得策です。
⑦ボタンは大きめに押しやすく
⑴ 大きく、立体的に押したくなるボタンにする
手の大きな人でも押せる大きさ
周囲の色と反対色を使うなどして目立たせる
立体的に浮き出ているように見せる
⑵ ボタン上に、動詞を入れる
例…・資料を請求する
・特典をもらう
・初回商品をお得に購入する など
⑶ 画面の上に固定もあり
訪問者が行動したい時、すぐにボタンを押せるよう、
画面の上に固定 で常に表示しておくのも場合によってはオススメです。
⑧電話のタップボタン設置
スマホは電話です。 特に電話での問い合わせが多い業種は、必須です。
・電話番号のボタンを、電話がかけられる「ボタン」として認識させる
・ボタン自体に「電話をかける」など、行動を促す言葉を入れる
⑨入力フォームは、項目を必要最小限にする
スマホで『入力する』というのは結構大変。 項目は必要最小限にしましょう。
さらに、入力内容に間違いがあるときは、その項目を入力した時にすぐ、エラー表示を
出してあげたほうがいいでしょう。入力するときは集中して います。
本人は間違い無いと思って入力し続け、最後の確定ボタンを押し、 ほっとします。
その時に、エラー表示が出て、再度入力し直すのは気持ち 的に少し冷めてしまうかもしれません。
また、各項目の入力方法についても、プルダウンメニューや、ラジオボタン などを利用して、
なるべく手で入力しなくても済むようにしましょう。
まとめ
スマホは、PC画面よりも提供できる情報が少ないので、掲載する情報を取捨選択す ることが大切です。
イラストや漫画も、わかりやすく表現しましょう。
ランディングページは、自分が言いたいことを言うのではありません。
この9つの秘 訣も、単なるテクニックではありません。
訪問者の気持ちに寄り添って、訪問者の好みに合わせ、訪問者が読みやすく、
迷いな く納得して行動できるものにするために何が大切かということにつきます。
コメント..