レスポンシブウェブデザイン？セパレートURL？SEOにおけるスマートフォンサイトの重要性

今に始まったことではありませんが、スマートフォンの普及によって様々なことが手軽に行えるようになりました。私ももちろん利用していますが、プライベートでの使用に加え、打ち合わせなどで外出する際は、路線検索や地図アプリが必須です。

Webに接する端末がパソコンではなくスマホ経由の割合が多くなったことにより、何か調べものをしている時に見るのはスマホサイトが圧倒的に多いことは皆さま感じられるところかと思います。

まずそもそもスマホサイトを持ち合わせていないという企業様は制作するところからですが、すでにスマホサイトをお持ちの企業様でもそれだけでは安心できません。スマートフォン利用の比重が高くなることで、使い勝手などユーザーはより良い体験求めています。

常にユーザーにとって有益な情報を発信することに加えて、ユーザーが使いやすいサイト設計を考えることも他社と差別化を図る重要な要素です。単純にPCサイトをスマホ化するだけでは事足りない場面が今後より一層出てくるでしょう。

そこで、今回はユーザーにとって見やすいスマートフォンサイトはどういったものかご紹介したいと思います。

スマートフォンサイトの重要性

スマホユーザーが増えていることはもちろん身に感じるところかと思いますが、改めて実際どれくらいの人が利用しているのかご紹介させていただきます。

総務省が発表した「平成26年通信利用動向調査」によると、2015年末時点でのスマートフォン利用者は10,018万人と、1億人を超える利用者が日本にはいます。

また、従来のフィーチャーフォンからスマートフォンへシフトしてきているのもキレイに確認できますね。

SEOにおけるスマートフォンサイトの重要性

ユーザーの検索端末が変わったことにより、検索エンジンも変化をしています。

つい先日も、米Google のゲイリー・イリーズ氏が、米国・ラスベガスで開催されたPubcon のキーノートで、今後数か月内にモバイルを優先したインデックスへ切り替える方針を発表しました。

参考：Google Search Switching to Mobile First Index from Desktop Index
 
これまで、Googleでキーワード検索が行われた時のウェブサイトの掲載順位はPCサイトの評価を基準にしておりスマートフォンサイトの順位もPCサイトの評価を参照していました。

これまではPCサイトの利用率の方が高かったため上記のようなロジックになっておりましたが、前述の通りスマホサイトの利用率が高くなってきたため評価基準をスマートフォンサイトにシフトしてきています。

大前提はユーザーへの配慮が何よりも大事ですが、検索エンジンに対してのケアも合わせて考慮する必要があります。

スマートフォンサイトの種類

まずは、サイトのスマホ対応からという方はスマートフォンサイトの作り方の種類について確認してみましょう。

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

レスポンシブウェブデザインは、1つのURL・HTMLで、PC・スマホ・タブレットなど複数のデバイスサイズに合わせてページのレイアウト・デザインを柔軟に調整できるデザインを指します。

「/sp/」など、ディレクトリを切ってスマホサイトを別HTMLで管理しているサイトも多いですが、レスポンシブウェブデザインではデバイスサイズに合わせて、1つのHTMLをCSSで制御することで異なる画面サイズにフィットさせることが可能です。

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

• ユーザーのデバイスサイズに依存せず、柔軟にデザインやレイアウト調整して表示できる。
• URLがひとつだけなので、訪問ユーザーがシェアやリンクしやすい。
• ひとつのURLの確認で済むので、検索エンジンのクローラーにも優しくSEO効果も期待できる。
• ひとつのHTMLで管理するので、サイト修正が発生した場合PC・スマホそれぞれ修正するという工数とミスのリスクを減らすことができる。

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

• ひとつのHTMLで様々なデバイスサイズに調整させるため、コーディングの構築が複雑になってしまう。（別HTMLで構築するより構築コストが高くなる可能性がある）
• 表示上はPC・スマホ切り分けているものの、ソースコード上にはPC・スマホそれぞれの記述が残っているためスマホサイトで見た場合、PCサイトの画像なども読み込んでしまい表示が遅くなってしまう。

Googleは、レスポンシブウェブデザインを推奨しています。メリットでも紹介した通り、スマホサイトを一つのHTML・URLで管理しているので、Googlebotが効率良くクロールできることが理由です。

また、別HTMLで管理している場合、リダイレクトの設定が誤っていてPCページとスマホページでまったく別のコンテンツを見せてしまっているなど、運用上のミスも起こりづらいことも推奨している理由です。

注意点として、Googleが推奨してはいるのは上記のような運用上の理由からであって、レスポンシブウェブデザインにしたから検索順位が上がるというものではないということだけご認識ください。

動的な配信（ダイナミックサービング）

動的な配信（ダイナミックサービング）は、一つのURL・別々のHTMLで管理し、アクセスするデバイスに合わせて配信するHTMLを出し分ける方法です。

Webサーバ上でデバイスの種類を検知して別々のHTMLを配信するよう振り分けています。

動的な配信（ダイナミックサービング）のメリット

• 1つのURLの管理なので、Google推奨の方法。
• PC・スマホサイト別々に構築できるので、デザインのカスタマイズ性が高い。（また、細かい修正もしやすい）
• デバイスごとに最適な読み込み時間に調整できる。

動的な配信（ダイナミックサービング）のデメリット

• サイト修正をする際は、PC・スマホサイトそれぞれの手直しが必要

別々のURL（セパレートURL）

別々のURLは、URL・HTMLを別々に管理し、デバイスごとに異なるURL・別HTMLを出し分けて配信する方法です。

同じトップページでもスマホでアクセスすると、URLが「/sp/」のようなディレクトリがついたURLで表示されます。PCで見ていたページをスマホで確認する場合は、対応するスマホページへリダイレクトさせるなどの設定が必要です。

別々のURL（セパレートURL）のメリット

• PC・スマホサイト別々に構築できるので、デザインのカスタマイズ性が高い。（また、細かい修正もしやすい）

別々のURL（セパレートURL）のデメリット

• PC・スマホでURLが異なるため、デバイスをまたいだページシェアやリンクがしづらい。
• デバイス毎に対応するコンテンツを配信するために、リダイレクトなどに注意が必要。
• 上記のリダイレクト設定のために余計な読み込み時間が生じる。
• サイト修正をする際は、PC・スマホサイトそれぞれの手直しが必要。

動的な配信（ダイナミックサービング）と別々のURLで管理する方法はデザインの柔軟性や細かい修正のしやすさで言うとレスポンシブウェブデザインより管理しやすい面があります。

ただ、HTMLが複数存在することで修正の工数が倍になってしまうことや、デバイスに合わせたコンテンツの出し分け設定（リダイレクトなど）に気を使う必要があり、ミスのリスクや管理の煩雑さが懸念されます。

使いやすいスマホサイト設計で気をつけたいこと

それでは具体的に見やすい・使いやすいスマートフォンサイトのお話に入っていきます。

コンテンツの優先順位付けをする

PCサイトと比較し、スマホサイトでは画面サイズが限られてしまうことから、PCサイトと同様の情報をそのまま載せることが難しい場合やごちゃついたイメージをユーザーに与えてしまう可能性があります。

また、スマートフォンではアプリの利用率が高く、直感的な操作性に慣れているので、必要な情報だけスッキリまとめることが重要です。PCで載せている文字情報を省略することや、アコーディオン式にしてコンテンツを隠すなどPCとは違う見せ方の検討も必要です。

ファーストビューで終わっているように見せない

ファーストビューいっぱいに画像が広がっているようなレイアウトだと、その下にコンテンツがあることにユーザーが気づかないケースがあります。

せっかく訪問したユーザーを取りこぼすきっかけになるので、下に続くコンテンツの一部を表示させるなど、コンテンツが続いていることに気づいてもらう仕掛けが必要です。

ボタンの配置は右手親指を意識する

海外サイトのUX mattersのデータでは、片手で操作している人の67%が右手親指で操作をしているそうです。もちろん左で操作をしている方もいるかと思いますが、データ上は右親指で操作することを想定したサイト作りの方がベターです。

購入ボタンなど重要なCTAが左上にある場合、右手で操作する場合は非常に押しづらいので右親指でタップしやすい位置に変更しましょう。特に女性の利用者が多いサイトであれば、手の小さい方が多いかと思いますので右手でタップしやすい位置にボタンを配置することはとても重要です。

文字の大きさに気をつける

文字サイズはスマートフォンのユーザビリティの中でも非常に重要な要素です。実際に自分が利用しているシーンを想像しても、文字が小さいサイトって読む気をなくさせますよね。

Googleでは本文中のテキスト16pxを適正値として推奨しています。サイトによって条件も異なるかと思いますので、最低12px以上は確保するよう配慮いただくのがベターです。

ボタンはわかりやすくする

PCサイトとスマホサイトの大きな違いとして、画面をタップしながら検索行動を重ねる点があります。パソコンで閲覧していれば、ボタンにマウスオーバーした際に色が変わったりとわかりやすいのですが、スマホサイトの場合、同じ効果がないのでユーザーにとってはわかりづらかったりします。

リンクになっているボタンはわかりやすいようアイコンをつけてあげたり、マウスオーバー効果はつけられませんが、タップした後に色を変えるなどの効果はつけることができるので工夫してみましょう。

また、ボタンじゃない要素をボタンと似た色にしてしまってわかりづらくさせてしまっているケースもあるので配色のバランスも大事ですね。

タップしやすくする

これもスマホサイトでは重要な要素です。ボタンが小さくて、隣のボタンを押してしまった経験は誰しもがあると思います。

ちょっとズレますが、出てきた広告を消したかったのに、×ボタンが小さくて広告表示させてしまったなんて経験ありませんか？

意図していないアクションが起きてしまうのはストレスを感じるポイントなので、タップのしやすさは注意しましょう。iOS、Androidのガイドラインでは『タップ可能領域の最小サイズは44px × 44px 』となっているため、44pxを目安としてボタンを作成しましょう。

フォームは必要最低限で

個人的にはスマートフォンで一番ストレスを感じやすいポイントかもしれません。改善ポイントを上げようと思えばいくつかありますが、抜粋で紹介します。PCフォームでの共通の内容もあるので、合わせて見直していただくのも良いかもしれません。

入力項目が多い

そもそもスマートフォンで文字を入力するということがかなり手間です。なので、たくさん入力する必要があるフォームは見ただけでげんなりします。可能な限り入力項目はシンプルにして、住所入力の場合は郵便番号検索など、少しでも入力負荷を減らす仕掛けが必要です。

入力項目に合わせてキーパッドを変える

郵便番号や電話番号など、数字を入力するところでは数字入力のキーパッドになっているとストレスなく入力が行えますね。

入力補助を設定する

文字入力の手間を減らすために、メールアドレスで入力サジェストを利用することや、ふりがなや住所などで自動入力機能を利用するようにしましょう。

入力エラーをその場で表示する

PCフォームでもそうですが、一通り入力した後、確認ページで入力エラーを知らせる仕様はまた入力を一巡しないといけないため手間です。できれば、リアルタイムでエラーの指摘をしてあげる方が望ましいです。

そもそもなぜスマホサイトが必要かというと、パソコンとPCでユーザーの検索環境や行動が異なるためそれぞれにマッチした使用環境を提供するためです。通常のサイトはパソコンでの閲覧を想定しているため、そのままスマートフォンで閲覧すると文字が小さくなってしまうので、ズームやスクロールを多用しなければなりません。

スマートフォンの利用シーンは電車での移動中など、ちょっとした空き時間での利用が想定されるため、スムーズに手軽に閲覧出来ることが非常に重要です。片手でページをWebページを開きながらスクロールしたり、拡大・縮小を繰り返すのがストレスになることは容易に想像できるかと思います。そのため、スマートフォンに最適化されたサイトを作ることで、ストレスなく快適な検索体験をユーザーに提供することができるのです。

ご紹介した改善ポイントは一例ですが、皆さまも散々スマホはご利用されているので使いやすさ・使いにくさで感じるところは多々あるかと思います。ただ、意外と自分がユーザーに何かを提供する側に立つと、盲目になってしまいがちなので、そもそもなぜスマホサイトを用意するか、どういった点が使いやすいか使いにくいかが意識できるだけでも色々と改善点が出てくるかもしれません。

最後に

いかがでしょうか。
基礎的な項目が多かったですが、今一度自分のスマホサイトを触っていただいて課題発見のきっかけになれば幸いです。