モバイルフレンドリーとは？モバイル環境に対応したサイトの構築方法を解説

モバイル環境にはさまざまなタイプが存在します。それぞれに対応したサイトの構成方法を理解することが大切です。

また、コンテンツをモバイルフレンドリーにするといったこともモバイルユーザーにとって見やすく、重要なこととなります。広報イベントやプロモーションのキャンペーンでもモバイルサイトに誘導することは、もはや必須です。これらのことをしっかり学んでいきましょう。

モバイルフレンドリーのサイトには3つのタイプがある

pixta 42684237 L 1024x576 1 - モバイルフレンドリーとは？モバイル環境に対応したサイトの構築方法を解説

Webサイトをすべてのデバイスの表示画面に対応させるには3つの対応方法があります。

いずれの方法でも、すべてのクローラーがページとすべてのリソースにアクセスできるのであれば、特定の対応方法が優れているというわけではありません。それぞれの対応方法について正確に実装するように気を付けましょう。

■レスポンシブWebデザイン

このデザインは、コンテンツを表示するユーザーのデバイスに関係なく、同じURLで同じHTMLを配信します。ユーザーのデバイスの画面サイズによってCSSを利用し、各デバイスでのページのレンダリングを変える方法です。

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

コンテンツを閲覧するユーザーのデバイスに関係なく、同じURLでコンテンツを表示しますが、閲覧するユーザーのブラウザのユーザーエージェントに応じて、サーバーがデバイスで閲覧するのに最適なHTMLおよびCSSで作成されたコンテンツを表示するという方法です。

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

デスクトップ版とモバイル版のコンテンツを、それぞれ別々のURLで配信する方法です。この設定方法では、コンテンツを閲覧するユーザーのブラウザのユーザーエージェントから判別して、適切なコンテンツにリダイレクトします。

別々のURLの例としては、デスクトップ版のコンテンツが「www.example.com」で、モバイル版のコンテンツを「m.example.com」で配信するサブドメイン形式や、デスクトップ版のコンテンツが「www.example.com」で、モバイル版のコンテンツを「www.example.com/sp/」で配信するディレクトリ形式の2タイプがあります。

モバイルフレンドリーでないサイトは評価が下がる

世界規模でスマートフォンを持ち歩くユーザーが多くなり、いつでもどこでも情報を探せるようになりました。おそらくは多くのサイトでは、デスクトップよりもモバイル端末からのアクセスが多くなっているはずです。

そんなとき、デスクトップ版のコンテンツしか存在しないと、モバイルユーザーはデスクトップ版のコンテンツしか閲覧できません。デスクトップ版のコンテンツはモバイルでズームしたりする必要があるので、見づらく使いにくいため、コンテンツを閲覧する体験が下がり、サイトから離脱してしまう可能性が高くなってしまいます。

Googleはモバイルユーザーにとって体験の優れたコンテンツを「モバイルフレンドリー」として、いくつか条件を定義しています。モバイルフレンドリーの要件を満たしていないページは、モバイル版のGoogle検索結果ページにおいて評価を下げられてしまうため、モバイルフレンドリーの定義を理解し、コンテンツ内容に反映させましょう。

モバイルフレンドリーの条件を満たそう

以下に、モバイルフレンドリーの条件を挙げます。しっかりと対策をしましょう。

１．デバイスごとのビューポートを指定しておく

ビューポートとは、HTMLで画面の表示領域を制御するメタタグのことです。モバイルユーザーの端末にはさまざまな画面サイズが存在すると想定されますが、このメタタグを指定すると、モバイルデータの画面に応じたサイズで表示することができます。

２．フォントサイズは小さくしすぎない

モバイル版のコンテンツに表示するフォントサイズを小さくしすぎてしまうとモバイル端末で読みにくくなってしまいます。小さいテキストを読むためにピンチして拡大する必要があるフォントサイズを指定しないようにしましょう。ページのビューポートを指定した後に、フォントサイズを設定してビューポート内に適切に拡大縮小されるようにしましょう。

３．タップ要素は適度に間隔を空ける

コンテンツ内に表示するボタンやリンクなどのタップ要素同士が近すぎないようにしましょう。モバイルユーザーが指で要素をタップしようとした際に、誤って近くの要素をタップしてしまうようなデザインは避けるべきなのです。ボタンやリンクのサイズの間隔をモバイルユーザーに合わせて適切に設定するようにしましょう。

４．表示速度が遅くならないようにする

モバイル版のコンテンツにおいても表示速度が遅すぎないか注意しましょう。コンテンツが表示されるまでに時間がかかりすぎると、ユーザーの体験を損なう可能性が高くなってしまいます。表示速度についてはGoogle PageSpeed Insightsを使用して確認することができます。ページの表示速度が遅くなる原因を確認し改善しましょう。

５．サイトがモバイルフレンドリーの状態かを確認する

コンテンツがモバイルフレンドリーな状態かどうかは、モバイルフレンドリーテストのサイトでURL単位で確認することができます。テンプレートごとにモバイルフレンドリーの要件を満たしているか確認しましょう。なおこのモバイルフレンドリーテストのように能動的に確認する以外では、Search Consoleにモバイルフレンドリーの要件を満たしていないページを確認できるレポートが存在します。