モバイルフレンドリー

モバイルフレンドリー

モバイルフレンドリーとは

モバイルフレンドリーとは、
ウェブサイトがモバイル端末(iPhone・Androidなど)閲覧者にとって
「見やすい・読みやすい・操作しやすい」
と評価される状態のことを言います。

つまり、モバイルユーザーにとって「ストレスがなく」「満足できる閲覧状態」にあることがモバイルフレンドリーなサイト、ということです。

このページでは

  • モバイルフレンドリーとSEO・検索順位
  • モバイルフレンドリーが必要とされる背景
  • モバイルフレンドリーのための対策
  • あなたのサイトがモバイルフレンドリーかチェックする方法

について解説して行きます。

【もくじ】


モバイルフレンドリーとSEO・検索順位

SEOとは、検索エンジン最適化(Search Engine Optimization)の頭文字をつかった略称で、検索順位を上げるための対策ということができます。

では、モバイルフレンドリーとSEOはどのように関係しているのでしょうか?


モバイルフレンドリーアップデート(2015年)

Googoleは2015年4月21日に、
検索順位を決める要素の一つとして「モバイルフレンドリー」加えることを発表しました。

これをモバイルフレンドリーアップデートといい、
以下の点が、検索順位に影響を与えるようになりました。

  • タップやズームなしで、スマホからの閲覧ができる
  • タップ領域の間隔が適切
  • スマホで表示できないコンテンツがない
  • 横へのスクロールが必要ない

モバイルフレンドリーアップデートでは、検索順位を決める要素にモバイルフレンドリーであることが加えられたのですが、評価の中心は「パソコン用」ページにありました。

モバイルファーストインデックス(2018年~)

Googoleは2015年5月に、検索順位決定の評価対象を「パソコン用ページ」から「モバイル用ページ」中心に移行して行くことを発表しました。

これを「モバイルファーストインデックス」といい、
2018年に開始され、順次完全移行されて行く計画が実施されています。

  • 検索順位決定の評価をモバイルサイト中心にする
  • PCサイトはセカンダリとして扱われる
  • PCサイトしかない場合は、PCサイトを評価する

検索順位決定の評価が「モバイル」中心となったことは、非常に大きな変更であり、
「モバイルフレンドリー」対策をはじめとしたモバイル中心のSEO対策が必要となる時代が始まっています。


モバイルフレンドリーが求められる背景

Googleは2015年5月に、米国・日本などの10か国で、モバイルからの検索数がパソコンでの検索数を上回っていると発表しました。

インターネット利用の中心はモバイルに移行しており、
その傾向は年々強まっています

下の図は、2019年9月末に調査された総務省の「年齢別インターネット利用機器状況」です。(通信利用動向調査)

年齢別インターネット利用機器状況・総務省 通信利用動向調査2020


70歳以上を除くすべての年代で、スマートフォン利用がパソコン利用を上回っています。

次に、通信機器の保有状況の推移を見てみましょう。

情報通信機器保有状況(世帯別)総務省 通信利用動向調査2020

スマートフォンが年々保有率を高めているのは、携帯電話・PHSからの変更を要因としているのですが、
スマホの普及に合わせてウェブサイト閲覧もスマホ端末利用が急速に伸びています。
一方で、パソコンの保有率は年々減少傾向にあることがわかります。

インターネットはパソコン利用を前提として始まったわけですが、
現在ではスマートフォンがその中心となっているのです。

この変化の中で、ウェブサイトもパソコン表示だけ考えればよかった時代からスマホ対応が必要な時代に移行し、さらに現在はモバイルユーザーが快適に閲覧利用できる「モバイルフレンドリー」が不可欠の時代に移行しています。



モバイルフレンドリー対策

インターネット利用がモバイル(スマホ)中心となり、
SEO・検索順位の対策のためにも、閲覧者の利便性を高めるためにもウェブサイトの「モバイルフレンドリー」対策が不可欠となっています。

モバイルフレンドリー対策を行うことで以下のメリットが得られます。

  • SEOにプラスの効果があり、より多くの閲覧者を得られる
  • 閲覧者の信頼を得られる
  • 平均閲覧時間が伸び、コンバージョン率が上がる

モバイルフレンドリーは3つに分けて考えて対策することが大切です。

  • モバイル対応ページを作成する
  • モバイルフレンドリーのための改善
  • モバイル表示スピード対策


モバイル対応

モバイル対応ページを作成する

パソコンのモニターは大きく横長であるのに対し、
スマホ画面は小さく縦長です。

ですので、パソコン用に作られたホームページがそのままスマホで表示されると
「画面からはみ出したり」「文字が小さくて読めない」などの現象となります。
(下右図のような感じ↓)

モバイル対応



モバイル対応ページを作成することは「モバイルフレンドリー」の大前提であり
以下の3つの方法があります。

-1つのURL1つのHTML
別々の URLでモバイルサイト作成××
動的な配信×
レスポンシブデザイン

1. 別々の URLでモバイルサイト作成

パソコンサイトをすでに運営している場合に、スマホ用に別のURLでサイトを作成して対応する方法です。
PS用サイトとモバイル用サイトは1対1で対応させてアノテーションタグ設定をします。

ただしこの方法は、URLが2つあるためリンクが混乱する恐れがありSNS時代に不向きな方法です。
できるだけ避けた方がいい方法といえます。

2. 動的配信

動的配信とは、1つのURLで対応し、閲覧者のデバイスを判定することで、パソコン用HTMLまたはモバイル用HTMLを配信する方法です。

誤ったデバイスの判定が起こらないように慎重に実装・管理する必要があります。

3. レスポンシブデザイン

レスポンシブデザインとは、1つのURL・1つのHTMLで対応し、閲覧者のデバイスの横幅に合わせてデザイン変換する方法です。

上記2つの方法に比べて、
誤ったデバイスの判定が起こらない
リンクの混乱が起こらない、などのメリットがあり
Googleが推奨するモバイル対応方法となります。

Googleがレスポンシブデザインを推奨する理由として挙げているのは

  • ユーザーによるコンテンツの共有やリンクが簡単
  • 検索エンジンが正確に情報を把握できる
  • 複数のファイルを管理する手間が省ける
  • 読み込み時間を短縮できる
  • 検索エンジンのクロール効率が上がる

などであり、Googleはその効果として
「ユーザーが一度のサイト訪問で閲覧するページ数が 11% 増加し、モバイルのコンバージョンが 51% 向上した」という事例を挙げています。

【まとめ】
モバイル対応ページを作成する場合、最もお勧めなのが「レスポンシブデザイン」です。



モバイルフレンドリー改善を行う

モバイルフレンドリーのための改善を一つ一つチェックしながら確認して改善して行きましょう。


★ 読みやすいフォントサイズ(文字の大きさ)

大切なことはモバイルユーザーが「コンテンツを読みやすい」ことです。
フォントサイズは16px(ピクセル)~18pxをお勧めします。

★ タップ要素間の適切な間隔

テキストリンクやボタンをタップしようとしたら、別のリンク先が開いてしまった…これはタップ要素間が狭すぎるために誤操作を引き起こし、モバイルユーザーをイライラさせます。

誤操作が起きないようにリンクテキストの大きさ・ボタンの大きさを調整するとともに
各要素間の間隔を広げましょう

★ モバイルで再生できないコンテンツを表示しない

モバイルで再生できないFlashなどのプレイヤーを表示しないこと。
また、ライセンスにより制約があるメディア表示も避けましょう。

★ インターステシャルを表示しない

モバイルでサイトを見ようと思たら、急に登録ボタンなどが大きく表示されてコンテンツを隠してしまう…これがインターステシャルです。

閲覧者のユーザビリティーを損なうものとしてGoogleは表示しないようにと明示しています。

インタースティシャル広告の表示はしないようにしましょう。

インタースティシャルの例

★ 間違ったリンク・エラー表示をチェックする

「パソコン表示ではページが見れるのに、スマホではエラーになってしまう」「スマホ用サイト内のリンクにパソコンサイトへのリンクを貼ってしまう」など、よくある誤設定がないかチェックして、見つけたら修正しましょう。

【モバイルフレンドリー改善まとめ】

  • フォントサイズは16~18pxにする
  • テキストリンクやボタンの間隔を適切にする
  • Flashを使わない
  • インタースティシャルを使わない
  • リンク・エラー表示をチェックして改善する



モバイル表示スピードを改善する

モバイルでの表示速度が遅く、なかなか開かないサイトはモバイルフレンドリーとみなされません。

また、極端に遅い場合は、SEOにマイナスの要因となります。

Googleが提供するPageSpeed Insights を使って、サイトの表示スピードをチェックし、表示される改善内容を見て改善して行きましょう。

 ↓
https://pagespeed.web.dev/

Google PageSpeed Insights

Google PageSpeed Insightsの結果表示例

【まとめ】

モバイル表示速度はモバイルフレンドリーの重要要素で、SEOにも関係しますので
必ずGoogle PageSpeed Insightsを使ってサイトをチェックし、改善点をできるだけ改善して行きましょう。



モバイルフレンドリーテスト

あなたのサイトがモバイルフレンドリーかどうかGoogleが提供する「モバイルフレンドリーテスト」でチェックしましょう。
 ↓
https://search.google.com/test/mobile-friendly?hl=ja

モバイルフレンドリーテスト

使い方はとても簡単で、貴方のサイトのURLを入力するだけす。

貴方のサイトがモバイルフレンドリーである場合は
このページはモバイルフレンドリーです」と表示されます。

このページはモバイルフレンドリーではありません」と表示された場合は、
「テキストが小さすぎて読めません」
「クリック可能な要素間が近すぎます」
などの改善ポイントが表示されますので、表示された内容を一つ一つ改善して行きましょう。


sen-2.png