綾子スマホからのホームページ閲覧者は増え続け、日本ではインターネット閲覧時間の50%程度がスマホからとなっています(statCounterの解析データより)。インターネット利用に使う端末としてはスマホの台数がPCを超えました。現在は、どんなホームページでもスマホ対応は必須になっています。レスポンシブウェブへの対応は、お済みな方がほとんどでしょう。レスポンシブに対応すれば即、モバイルで効果が上がるとは言い切れません。そこで、今回は、モバイルからの閲覧者から問い合わせや購入を増やすためのコンバージョンアップに効果的な改善テクニックを紹介してみましょう。モバイルユーザーに最適なナビゲーションとは?PCサイトをベースにしてレスポンシブに対応させている場合、モバイルユーザーがどんな遷移でページをたどり、「問い合わせ」や「購入する」などのコンバージョンボタンをクリックするのか、最適な流れを考慮し忘れている可能性があります。モバイルユーザーは基本的に諦めやすく、細かいことに気づきづらいという前提でサイトの構成やナビゲーションを見直してみましょう。ムダな遷移が要らないサイトにたとえば、PCでサイトをみる場合は、ユーザーがページを操作しやすくグローバルメニューやフッターメニューも目に入るので、「もっと詳しく」調べたり、興味をもった商品の「購入サイト」をリンクから探すなどの作業を自主的に行えます。ところが、スマホでサイトを見るときは、テキストリンクはクリックしませんし、メニューを開くのもおっくうです。記事が充実していても「次のページ」へ行くのが面倒です。モバイルでは読み込みし直しが不便な環境の場合もありますし、そもそも狭い画面でタップしたりが面倒だからです。そこでページをなるべく遷移しないで済む工夫が必要です。ページの中程や上下部などに大きなボタンやリンクを固定で配置するリンクしてほしいボタンはタップしやすい大きさのデザインにするメニューを開かなくてもオススメの遷移先を提示しておくトップページに戻ればほとんどのやりたいことへのリンクが見つかるこのような点に気をつけて、必要なものが大きく目の前に出てくるようにすると、スマホユーザーの次のアクションを促すことができます。PCは自分でできる人でもスマホではナマケモノになる、という前提でサイトをデザインしましょう。文字だけのメニューよりも、画像が入っているナビゲーションメニューの導入は一瞬で内容が捉えやすくなるのでおすすめできます。クリックしたくなるボタンを事例で紹介PASMOのモバイルサイトPASMOのモバイルサイトはグローバルメニューは左下につけています。それぞれのコーナーへのリンクが大きく、スクロールで見回して知りたいことをタップでき、使いやすいのが特徴です。クロネコヤマトのモバイルサイトヤマト運輸|個人のお客様向けサイトはよりアプリ的なサイトですが、やはりリンクボタンが大きめに確保されています。ほとんどの人が知りたい集荷問い合わせが一番上にあることなど、すぐにアクションできるのも特長です。肝心なキャッチコピーを変えてみる背中を押す一言を加えるこれはスマホに限りませんが、やはりサイトの中でもキャッチコピーが一番な要素を占めています。アメリカの事例では、あるサイトで寄付ページにコンバージョンのボタンに「あなたの募金をお待ちしています。」というキャッチを置いていたのに対して「あなたの募金をお待ちしています。1ペニーでも困っている人の助けになります」とキャッチを追加したら効果が急増したのだとか。このように、考え抜いたキャッチフレーズに一言「加える」ことで、ユーザーの背中を押すことがあります。プライバシーポリシーに乗っ取り宣伝や他の用途に使いません」などと加えるだけでも効果が出る可能性があります。ブリティッシュエアウェイズのモバイルサイト。安く旅行したいユーザーに訴求できていますし、しゃれています。ABテストで響くコピーを探す大手のサイトのほとんどが利用している手法に、A/Bテストというものがあります。同じ場所のキャッチコピーに複数の案を登録し、出し分けしながら最適なコンバージョンのあるコピーを自動的に選んでいく機能です。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の知識がなくてもテンプレートから自在に作成できる。無料でBiNDupでサイトを作ってみるBiNDの制作事例を見るいかがでしたか。モバイルサイトの効果を高めたい場合の改善ポイントを紹介しました。CAMPで最も読まれた記事は?コンセプト。