スマホ最適化、よりよい手段、とれていますか?

記事公開日:2017.10.02

最終更新日:2017.10.18

300 PV

Googleは2015年4月21日からスマホ最適化(モバイルフレンドリー)していないページは、これまでよりも検索順位が下がったり、上がらない恐れがあると公表しています。

待った無しのスマホ最適化

「スマホで閲覧したとき、従来のPC表示はだいぶ古い」という事実はみなさんご存知でしょう。スマホ最適化の方法の中でGoogleをはじめとする検索エンジンが最も推奨しているのが、レスポンシブ・ウェブデザインです。

レスポンシブ・ウェブデザイン

「レスポンシブwebデザイン」とはどういう手法かというと、デバイスをwebサイト表示の判断基準にするのではなく、ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調整できる手法です。

現在一般的には、デバイス毎のレイアウトが違うHTMLファイルを複数用意することが多いと思いますが、「レスポンシブwebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、ブラウザの横幅サイズに応じてページのレイアウトデザインを調整できます。

レスポンシブ・ウェブデザインのメリット

1.PCサイトのコンテンツや素材が使い回せる

2.コンテンツを一元管理できるので、PCサイトとスマホサイト両方で運用するサイトに比べて、運用コストがおさえられる

3.PCサイトとスマホサイト両方でURLが統一されるので、ユーザーが混乱しにくい

レスポンシブ・ウェブデザインのデメリット

1.jsやcssが多くなるため、サイトの表示速度に影響がある

2.デザインやレイアウトの融通が効かない

3.PCのユーザー導線を引き継ぐので、スマホならではの導線設計が難しい

4.スマホからPCサイトを見たい場合に容易には見れない

スマホ専用コンテンツを作成

スマホ最適化のもう1つの方法が、デバイス毎にWebサイトを用意する方法です。

PC用サイトとスマホ用サイトを用意する場合、ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的な方法です。

PCサイトのURLを「www.aaa.com」とした場合、モバイルサイトでは「www.aaa.com/sp/」のようにディレクトリを切る、もしくは「www.sp.aaa.com」のようにサブドメインを設定するのが一般的な方法です。

スマホ専用コンテンツのメリット

1.スマートフォンサイト、PCサイト別々の設計が可能

2.デザインやレイアウトの融通が可能

3.サイトの表示速度をレスポンシブサイトよりも調整しやすい

スマホ専用コンテンツのデメリット

1.PCサイトとスマートフォンサイト両方の素材やコンテンツの用意が必要

2.運用コストが上がる可能性がある

3.URLが統一されない為、スマホからとPCからSNS上にシェアされた際に違うURLとなる。

以上を踏まえると…?

PCサイトとSPサイトを作る場合と、スマホ最適化させたひとつのページを作るのとでは、メリットデメリットはありますが、Googleが明確な検索アルゴリズムを示した今、1つのWebサイトで全てのデバイスに対応できるレスポンシブ・ウェブデザインは大変理にかなった手法と言えます。
これからスマホサイトを作っていくのであれば、メリットデメリットを加味した上で、選択していってください。

次に、マルチデバイスに対応していくために、最低限知っておきたい、Googleが提唱しているスマホ最適化25のルールをご紹介します。

Googleが提唱しているスマホ最適化25のルール


さて、ここからはGoogleがこれをしておけばスマホ最適化としてまず間違いない、と断言している25のルールをご紹介いたします。

1.CTAに一番目がいくようにする

サイトの中でも最も重要なCTAボタン(「会員登録」や「無料お試し」など)は、ファーストビューやサイトの中心など、必ずユーザーの目に留まる位置に設置します。

2.ナビゲーションは簡潔明瞭に

モバイルにおいては、ナビゲーションのリスト数は最小限に留めましょう。最近流行りのタップでナビがプルダウンしたりスライドしてくる、トグルナビでのボタンのみの表示もオススメです。

3.ユーザーに優しいトップページ回帰

モバイルユーザーはヘッダーのロゴをタップした時にリンクが設置されていないと、大きなストレスになるとの調査結果が出ています。

最低限、ヘッダーにはロゴ必須、フッターにもできれば入れて、どちらもトップページへリンクするようにしましょう。

4.プロモーションはほどほどに

プロモーションや広告がCTRボタンに隣接している場合、ユーザーの気が反れ、コンバージョンに繋がりにくくなります。

プロモーションのしすぎでユーザーの気をそらしていないか、今一度確認しましょう。

5.サイト内検索でユーザーを逃さない

目的が明確なユーザーはサイト内検索の利用頻度が高い傾向にあります。

最もコンバージョンに近いユーザーを逃さない為に、サイト内検索バーは必ず設け、分かりやすい位置に設置しましょう。

6.最高の検索体験の提供

モバイルユーザーは、デスクトップユーザーよりも断然、不必要なアクション、目的に到達出来ないままの複数ページ回遊等を嫌います。

①1ページ目に表示される結果と検索キーワードの関連性

②オートコンプリート

③誤字脱字の自動訂正

など、ユーザーにストレスを感じさせない、最高の検索体験を提供しましょう。

7.詳細検索機能の最適化

詳細検索機能でのイライラは、以下のケースで起こりえます。

①絞ったはずが検索結果がいっこうに減らない、
②絞った結果検索結果が0件になった
単に詳細検索機能を設置して終わりではなく、ソートの方法も都度見直していきましょう。

8.検索はフォーム入力前にスタートしている

カスタマー層が多岐にわたる場合や、商品数が圧倒的に多い場合には、トップページのナビゲーションなどで、性別、欲しい商品のカテゴリ(トップス、ボトムなどの大カテゴリ)、サイズなど、2~3の質問を事前にリサーチ、反映させましょう。その後のキーワード検索体験が、より心地いいものになります。

9.コンバージョンを急かさない

サイトに訪問したユーザーに、購入や予約等のコンバージョン関連タスクをいち早く求めるのは、多くの場合CVRを押し下げる原因となります。

初めて入ってきたユーザーには、吟味してコンバジョーンにたどり着けるサイト設計を心がけましょう。

10.会員登録無しで購入

購入したい!とフォームまで至ったユーザーに対しても、入力フォームにて会員登録必須となると購入意欲が減退するという調査結果が報告されています。

初回購入ユーザーのためにも、「会員登録無しで購入」というオプションは設けておくと親切です。

11.手元にある情報を最大限活用

ユーザーが登録を嫌がる理由の1つは、情報入力に手間がかかると、ユーザーが登録を嫌がる傾向にあります。

登録済みユーザーには、同じ情報を度々入力させることの無いようにオートフィル機能を。新規ユーザーには、登録の手間を大幅に削減する決済サービスを導入するなどして、情報入力を手間取らせないようにしましょう。

12.クリック・トゥ・コール

複雑な情報や機密性の高い情報を取り扱う際には、クリック1つで電話がかかるクリック・トゥ・コールボタンを設置し、ユーザーに不信感を与えないようにしましょう。

ネットセキュリティに対する意識が高い現代において、逆行するようで意外ですが、電話での登録の方が安心出来るというユーザーが非常に多いようです。

13.一手先を見越す

たとえ購入意欲がピークに達しても、時間の関係などによってその時はコンバージョンまで辿りつかないケースが多々あります。

そんなユーザーでも時間の余裕があるタイミングで後々購入に踏み切れるように、「買い物かごに入れる」「SNSでシェア」「メールで送る」などのオプションを用意し、できれば「お買い忘れはありませんか?」などのアクションをこちらから取れるとベストですね。

14.入力プロセスの最適化

スマホにおける文字入力は、デスクトップユーザーのそれよりも大きく「面倒だ!」という印象をユーザーに与えます。

「登録要項はこれ以上減らせない」という時でも、

①リターンを押すと次の項目に自動で移動

②番号入フォームには自動でナンバーキーボードを表示させる

など、プロセスに存在する無駄を徹底的に省きましょう。

15.入力メソッドの最適化

各入力項目に対して、最適なインプットメソッドが適用されているか、確認しましょう。

例えば年月日であれば年、月、日と別々に登録するのではなく、一括で設定出来ればユーザーに苦労を感じさせません。

16.カレンダーのビジュアル化

特に予約商品を扱うサイトの場合、必ずカレンダーは数字だけでなく、ビジュアルで見せるようにしましょう。

カレンダーアプリの起動でサイトを離脱し、せっかくのコンバージョンを逃すケースも考えられます。

17.入力エラー対策

1つの項目の入力エラーによってその他全ての入力データが消えてしまう、なんてことをさせないようにしましょう。

各項目に明確なラベル(「PW」ではなく、「8文字以上のパスワード」など)を張ることはもちろん、エラーを確認するとその場で通知するオート・バリデーション、そして、万が一更新しても入力データをしっかりと保存してあげるなど、入力エラーによるフラストレーションを極限まで下げるよう取り組みましょう。

18.エコと予測可能性

管理側の意図として、できるだけ多くの情報を集めたいですし、質問項目は多く盛り込みたいところですが、入力項目は最小限に抑えましょう。

オートフィルを使って項目への入力の手間を省ける場合(例えば郵便番号)には、必ず利用し、どうしても数が減らせない場合には、入力をいくつかのステップに分け、各ステップ及びその進捗状況を表示し、ユーザーに現時点での立ち位置を把握させることが重要です。

終わりの見えない工程よりも、ゴールを明確にする方が、ユーザーを逃しません。

19.サイト全体をスマホに最適化

一部のみスマホ対応、それ以外はPC表示のまま、という中途半端「混合型」のウェブサイトは、かえってモバイルユーザーのUXを悪化させるという結果が出ており、サイト全体をスマホに最適化させることが重要です。

20.ノー・モア・ピンチ

モバイルユーザーは、画面をつまんで(ピンチ)ズームアウト・インすることに嫌気が差しています。まず、「見づらい・・文字や図が小さい」と不快感を与えるだけでなく、それを回避するためには、ピンチ作業という余計なアクションが発生してしまうからです。

イライラを助長するだけでなく、ズームの過程でCTRボタンを見逃している可能性も多く調査の中で指摘され、「ノー・モア・ピンチ」、ズームアウトやズームインの必要の無いウェブサイトの制作を最優先させましょう。

21.画像の拡大

単純に商品詳細ページに単一や小さめの画像を掲載しただけでは、ユーザーの購買意欲を最大化することは出来ません。

特にアパレル製品に関しては、高画質な画像を拡大して閲覧出来るように表示するだけで、ユーザーがより多くの情報を得られ、結果としてコンバージョンの向上につながりやすくなります。

22.オリエンテーションの最適化

記事などのコンテンツで情報量が多く、通常の縦位置ではなく横画面での閲覧が最適な場合には、ユーザーにポップアップでお知らせしてあげましょう。

一度に表示される情報量が増加し、ユーザーにとってみれば大きなストレス解消ポイントにもなり得ます。

23.1画面にキープ

複数ウィンドウにまたがる操作は、ユーザーが本体サイトから離脱する危険性を高めてしまいます

同サイト内コンテンツを別ウィンドウで開くボタンの設置を避けることはもちろん、ユーザーが他のウィンドウを開いて更に安い情報を探しに行くことのないように、単一ウィンドウ内にクーポンや比較情報を設置しましょう。

24.「フルサイト」の表示はNG

モバイルサイトでよく、「フルサイトはこちら」といった文言を見たことはありませんか?

ユーザーが「モバイルサイト」と「フルサイト(PC版)」の2つのチョイスを与えられた際、ユーザーは「モバイルサイトは情報がぎゅうぎゅうに詰められて見づらい」、「フルサイトの方が(実際にそうではないが)たくさん情報が入っている」と言った印象を覚えるようです。

「フルサイト」ではなく、「PC版」や「デスクトップ版」といった表現で誤解を減らしましょう。

25.位置情報取得は慎重に

ユーザーの利用状況を理解する前に位置情報を取得し、その情報に基づいたコンテンツを推奨するのは単なるおせっかいです。

あくまで位置情報はユーザー自身が入力することを前提に、「地域限定情報をチェック」といったようなCTRボタンを用意しておくのが効果的と言えるでしょう。

まとめ

SEOを狙うスマホ対応、どれだけ重要かがおわかりいただけたかと思います。

これからスマホ最適化させていかないといけないWeb担当者のみなさま、選択可能であればGoogleのアルゴリズムにより強いレスポンシブ対応を選び、UX(User Experience:ユーザエクスペリエンス)を高めていけるよう、最大限努力しましょう。

このエントリーをはてなブックマークに追加

筆者

Y.Nakatani

二児の母で、Bigmacに入って2年、Web業界は丸7年。デザイン以外は繊細さのかけらもない杜撰さ。 好きな色は浅葱色とか、新橋色とか、シアン系の色味。好きなタグはsectionとolタグ。ほっとくと擬似要素多用。好きなフォントはヒラギノのW0。今一番してみたいことは、語尾にハートマークをつけてみる。

筆者が最近執筆した記事