モバイルサイトから効果を上げるためにチェックしたいこと

スマホからのホームページ閲覧者は増え続け、日本ではインターネット閲覧時間の50％程度がスマホからとなっています（statCounterの解析データより）。また、インターネット利用に使う端末としてはスマホの台数がPCを超えました。現在は、どんなホームページでもスマホ対応は必須になっています。レスポンシブウェブへの対応は、お済みな方がほとんどでしょう。

でも、レスポンシブに対応すれば即、モバイルで効果が上がるとは言い切れません。そこで、今回は、モバイルからの閲覧者から問い合わせや購入を増やすためのコンバージョンアップに効果的な改善テクニックを紹介してみましょう。

モバイルユーザーに最適なナビゲーションとは？

PCサイトをベースにしてレスポンシブに対応させている場合、モバイルユーザーがどんな遷移でページをたどり、「問い合わせ」や「購入する」などのコンバージョンボタンをクリックするのか、最適な流れを考慮し忘れている可能性があります。モバイルユーザーは基本的に諦めやすく、細かいことに気づきづらいという前提でサイトの構成やナビゲーションを見直してみましょう。

ムダな遷移が要らないサイトに

たとえば、PCでサイトをみる場合は、ユーザーがページを操作しやすくグローバルメニューやフッターメニューも目に入るので、「もっと詳しく」調べたり、興味をもった商品の「購入サイト」をリンクから探すなどの作業を自主的に行えます。

ところが、スマホでサイトを見るときは、テキストリンクはクリックしませんし、メニューを開くのもおっくうです。さらに記事が充実していても「次のページ」へ行くのが面倒です。モバイルでは読み込みし直しが不便な環境の場合もありますし、そもそも狭い画面でタップしたりが面倒だからです。

そこでページをなるべく遷移しないで済む工夫が必要です。たとえば、

• ページの中程や上下部などに大きなボタンやリンクを固定で配置する
• リンクしてほしいボタンはタップしやすい大きさのデザインにする
• メニューを開かなくてもオススメの遷移先を提示しておく
• トップページに戻ればほとんどのやりたいことへのリンクが見つかる

このような点に気をつけて、必要なものが大きく目の前に出てくるようにすると、スマホユーザーの次のアクションを促すことができます。PCは自分でできる人でもスマホではナマケモノになる、という前提でサイトをデザインしましょう。

たとえば文字だけのメニューよりも、画像が入っているナビゲーションメニューの導入は一瞬で内容が捉えやすくなるのでおすすめできます。

クリックしたくなるボタンを事例で紹介

PASMOのモバイルサイト

PASMOのモバイルサイトはグローバルメニューは左下につけています。それぞれのコーナーへのリンクが大きく、スクロールで見回して知りたいことをタップでき、使いやすいのが特徴です。

クロネコヤマトのモバイルサイト

ヤマト運輸｜個人のお客様向けサイトはよりアプリ的なサイトですが、やはりリンクボタンが大きめに確保されています。ほとんどの人が知りたい集荷問い合わせが一番上にあることなど、すぐにアクションできるのも特長です。

一番肝心なキャッチコピーを変えてみる

背中を押す一言を加える

これはスマホに限りませんが、やはりサイトの中でもキャッチコピーが一番な要素を占めています。アメリカの事例では、あるサイトで寄付ページにコンバージョンのボタンに

「あなたの募金をお待ちしています。」

というキャッチを置いていたのに対して

「あなたの募金をお待ちしています。1ペニーでも困っている人の助けになります」

とキャッチを追加したら効果が急増したのだとか。

このように、考え抜いたキャッチフレーズに一言「加える」ことで、ユーザーの背中を押すことがあります。たとえばメールアドレスを登録してもらう際も、

「メールアドレスを登録して続きを読む」

だけでなく、

「メールアドレスを登録して続きを読む — 私たちはスパムメールを送りません」

「メールアドレスを登録して続きを読む — プライバシーポリシーに乗っ取り宣伝や他の用途に使いません」

などと加えるだけでも効果が出る可能性があります。

ブリティッシュエアウェイズのモバイルサイト。シンプルなデザイン構成に加えて、日本とロンドンの往復6万円のオファーの下の購入ボタンは「Let’s go」に。安く旅行したいユーザーに訴求できていますし、しゃれています。

ABテストで響くコピーを探す

大手のサイトのほとんどが利用している手法に、A/Bテストというものがあります。同じ場所のキャッチコピーに複数の案を登録し、出し分けしながら最適なコンバージョンのあるコピーを自動的に選んでいく機能です。現在は、Google Adwordsなどにも同様の機能があるでしょう。

自分には最高に刺さるキャッチでも、20歳年の離れた人には刺さらないキャッチかもしれませんし、それぞれの興味関心によって響くキーワードはさまざまでしょう。それぞれに最適化されたキャッチを使いたいなら、ABテストのようなものを使うのがよいでしょう。もしも、キャッチコピーを変えているのにランディングページの内容は同じにしているというケースであれば、キャッチコピーにあわせてランディングページを複数作り使い分けるなど、手間はかかっても丁寧にサイトを分けて運用してみるといいでしょう。

なお、ABテストを自サイトに導入するにはシステム運用が必要になってしまいます。小規模なサイトで実践するなら、複数のキャッチコピーを用意し、時間や日付などで定期的に入れ替えて効果を測定してみる、ページ内に複数のボタンリンクを作り、それぞれキャッチコピーを変えてみるといったことができるでしょう。

Webページで効果的なボリュームに編集しよう

文字を少なく

スマホサイトでは1画面に入る情報量が限られますから、何より文字は少なくすることをオススメします。ポイントは、せいぜい最初の50文字程度で済むのが理想です。

また、段落分けもできるだけ頻繁に行い、適宜、見出しを入れましょう。そうすることで長めの文章でも拾い読みしながら要点を把握することができます。

写真を少なく

スマホサイトでも、ビジュアルは大切です。写真はあったほうがいいですが、数が多いとサイト読み込みが遅くなり、ユーザーが読むのを諦めてしまう「離脱」につながります。もしもPCサイトの名残のままレスポンシブに対応している場合に、1ページに5個も6個も写真があるかもしれません。できれば写真は3つ以下に絞ってページの読み込みが速くなるように改善しましょう。

もちろん、ムダに大きな写真を載せるのも読み込みを遅くする原因なので、デジカメやスマホで撮ったままの写真は、最適な画像形式・サイズに調整し直しましょう。

高圧縮でWeb画像をキレイに軽くするための厳選ツール

スライドショー的なものは複数写真を入れるのはOKです。またサイトの読み込みを遅くせずに読み込めるInstagramのプラグインを使った写真なども活用するのはオススメです。

Instagramの写真をホームページで使いたいとき役立つワザ

余白を多くとる

かつて、ケータイ向けのモバイルサイトは小さな文字が並んでいて情報が満載の感がありました。

しかし、狭い場所に沢山のものを詰め込むと「何が重要かわからなくなる」というデメリットがあります。たとえばPCサイトでは強調したいリンクボタンやバナーは大きくしています。それと同様にモバイルサイトでも強調したいものを大きくしたいのですが、スペースは限られています。

そこで引き算の思考が必要になります。目立たせたいものがある場合は、なくてもいいものを削除します。余白（ホワイトスペース）ができれば余白以外の場所にある情報が自然と目立ってきます。

同様に色を沢山使うより引き算思考で2−3色までに絞りましょう。そうすることで初めて目立たせたい色も目に入るようになってきます。

ホームページ制作サービス「BiNDup」を使い、コーポレートサイトを運用されている芙蓉建設株式会社リフォーム事業部のスマホサイト。落ち着いたカラーリングと余白が十分にあるデザインで、スクロールしながら無理なく読み進められるボリューム感です。タテスクロールでどんどん上下に移動するスマホサイトは問い合わせ位置を見失いがちですが、コンバージョンにつなげる「電話」と「フォーム問い合わせ」をスクリーン下部に固定配置していることで次のアクションを無理なく促すことができます。このような固定ボタンはBiNDupのウィジェット機能を使うと実装することが可能です。

シングルページの利便性がアップする、ページ内ナビゲーションを追加しよう

写真・レイアウト・フォントすべてスマホに最適化する

モバイルサイトでは、AMPの導入などでサイトのスピードを上げることが大切と言われることがあります。また、外出先から検索することも多く、モバイルに最適化したSEOも大切でしょう。

Googleが勧めるAMPとは？ページ表示速度アップのためにできること

それと同時に、やはりサイトのデザインは大切です。Googleの調査（2012）では、サイトから受ける印象は最初の2秒以下で決まるということがわかっており、デザインがその際に重要な要素になります。見るからに読みづらそう、センスが悪い、などはサイトが遅いのと同様に大問題なのです。

ターゲットやテーマにあった写真を選び、洗練されたレイアウトにして、配色やフォント選びも統一感を出す…。モバイルサイトもPCサイトと同様、製作にはデザイン力とノウハウは必要です！

そこまでいろいろは大変だな…となった方、ご心配なく。ホームページ制作サービス「BiNDup」は、プロのWebデザイナーが業務ジャンルごとに最適化したPC/モバイル両対応のレスポンシブサイトテンプレートを提供。業務内容に合ったテンプレートで始めれば、デザイン部分は完璧です。デザインも日本で活躍するデザイナーによる日本のユーザーにあった構造やトーンマナーが利用されていて使いやすくなっています。

▼テンプレートから制作した実例

HTMLやCSSの知識がなくてもテンプレートから自在に作成できる。スマホとPCそれぞれにデザイン調整が可能

無料でBiNDupでサイトを作ってみる
BiNDの制作事例を見る

いかがでしたか。モバイルサイトの効果を高めたい場合の改善ポイントを紹介しました。かなり多くのポイントがありますが、使い手の気持ちになって設計することと、PCサイトの遺産を引きずらずリニューアルすることもポイントかと思います！　どうぞ参考にしてください。