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

モバイルフレンドリーとは、ウェブサイトをモバイル表示に変換することができているかどうかを分析、改善する事です。
モバイルフレンドリーとは?モバイルフレンドリーは必須。必ず対応しましょう。
モバイルフレンドリーとは? モバイルフレンドリーが誕生したきっかけ 昔はインターネットに接続するために必要なものといえばパソコンが一般的でした。…

近年、スマホを利用する人は、非常に増えており、パソコンのみで検索を行う人の割合が2%程度であるのに対してスマホからのみ検索を行う人は、50%を超えているという統計が出ています。その他、パソコンとスマホ、両方から検索を利用するという人が40%程度となっているため、インターネットを活用するほとんどの人が、スマホを利用してウェブサイトを楽しんでいるわけです。

そんな中、スマホからウェブサイトを閲覧した時に、パソコンで表示される画面のまま表示されてしまい、変な場所にテキストが書いてあったり、知りたい情報がどこに記載してあるのかわからなかったりといった事に遭遇してしまうという事もあります。パソコンで作成したウェブサイトが、スマホやタブレットでの表示に対応できておらず、パソコン表示のままになってしまっている状態です。このままの状態であると、ユーザーに不快な思いをさせてしまったり、他のウェブサイトへ移行してしまったりすることもあります。

モバイルでの表示を適切にできるよう、対策を行う事で、SEO対策につなげ、誰にでも読みやすいウェブサイト運営を行いましょう。対策を取っていないウェブサイトは、検索結果が表示される時に、スマホ対応ではないという記載が出てしまいますし、ウェブサイトの評価も低くなりますから、ウェブサイトのスコアをアップし、ウェブサイトの読み込み時間を速くしましょう。

今回は、Googleか提供されている無料のモバイルフレンドリーテストツールを利用して、モバイルフレンドリーのスコアを上げていきたいと思います。

モバイルフレンドリーテストツールの機能

モバイルフレンドリーテストツールでは、モバイルでファーストビューが表示されるまでの速度測定しながら、ウェブサイトに問題がある場合には、最適な表示にするための提案も行ってくれます。

ウェブサイトを、端末に合わせて自動でサイズを変更する事をレスポンシブと呼ぶのですが、どの位レスポンシブに対応できているのかを、ツールで測定し、対応できていない部分を把握して、改善をおこなうことができるのです。改善方法として提案されるのは、

  • テキストの大きさ
  • ビューポートの設定
  • モバイルでは対応していないプラグイン
  • タップできる部分が近い
  • コンテンツは表示画面に適正であるか

といった項目をチェックすることができます。これらの項目の中で、改善が必要な場合には、その場でどのような対策が必要になるのかを提示してもらう事ができますし、ユーザーに対して、そのウェブサイトがモバイルではどのように表示されるのか、お知らせしてもらう事ができます。

表示が適正である場合には、緑色で表示され、注意が必要となる場合には、オレンジ、改善が必要な場合には、赤で表示されますから、一目見ただけで分析結果をすぐに表示することができます。

モバイルフレンドリーテストツールの設定方法

モバイルフレンドリーテストツールの利用は非常に簡単です。Googleサーチコンソールから、モバイルフレンドリーテストツールを開くというタブをクリックすると、検索ができるツール画面へ移ります。また、検索で「モバイルフレンドリーツール」と調べると出てきます。

モバイルのURLを入力する画面につながりますから、調べたいウェブサイトのURLを入力し、URLをテストという項目をクリックします。

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

数分後、モバイルの分析結果を表示することができます。

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

こちらのツールを利用した分析は、ウェブサイト全体をチェックするのではなく、ページ毎のチェックとなります。

分析結果を利用してウェブサイトを改善する

ツールでの分析により、ウェブサイト内での改善が必要と分析された場合には、指摘された部分を訂正していきましょう。

【テキストのサイズを変更】
表示されるテキストの大きさが小さすぎてしまうと、エラーとして表示されますから、viewport設定により、適切なサイズに変更しましょう。

【ビューポートの設定】
ページが端末で表示できる領域を超えてしまっており、左右にスクロールしなければいけない場合には、ビューポートを設定し直す必要があります。

【モバイル対応していないプラグインが入っている】
パソコンでは表示される場合でも、スマホから閲覧できないコンテンツが入っている場合には、スマホでも表示されるように変更していきましょう。

【タップできる部分が近い】
タップにより、他のリンクへ飛ぶことができるように設定していても、そのタップ同士がかぶっている場合や、あまりにも近いと、エラーが発生します。スマホにも対応できるように、タグの大きさを変更したり、リンクサイズを変更したりすることで対応しましょう。

【画像やコンテンツの大きさを適正にする】
コンテンツや画像が、端末内に収まらずにはみ出てしまっている場合には、画像サイズの変更や、画面の幅に合わせて調整を行う必要があります。

どのページをチェックするべきか

先ほどモバイルフレンドリーテストツールでは、ウェブサイト全体ではなく、1ページのみしかチェックすることができないと記載しました。では一体どのページのチェックを行う必要があるのでしょうか?全てのページをチェックしなければいけないのでしょうか?

分析が必要なページを探すには、Googleサーチコンサルの中の、モバイルユーザビリティをチェックしてみましょう。このモバイルユーザビリティでは、モバイル対応であるかどうか、エラーが発生しているのはどのページなのかを教えてくれます。エラーが出ているURLがある場合には、モバイルフレンドリーテストツールでURLを入力してチェックを行い、修正していくことで、モバイルに対応したウェブサイトを、簡単に構築することが可能になるのです。

モバイルフレンドリーに対応したウェブサイトを構築するために

上記のモバイルフレンドリーテストツールを利用して、ウェブサイトをモバイル対応に変更していくことも良いのですが、レスポンシブ対応のウェブサイトにすれば、上記のような訂正を1つ1つ行う必要がなく、全て一括にて、自動でスマホ版に画面を切り替えて表示することができます。

レスポンシブ対応のウェブサイトにするには

まずは、ウェブサイトのHTMLソース、headタグに、meta viewportタグを挿入します。メタタグは

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

を挿入します。次に、デバイスそれぞれのCSSを入力していきます。

【パソコンの場合】

@media screen and (min-width: 767px) { /*ウィンドウ幅が767px以上の場合に適用*/
#menu-bg {
background-color: #00FFFF; /*青色*/
}
}

【タブレットの場合】

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
#menu-bg {
background-color: #FF0000; /*赤色*/
}
}

【スマホの場合】
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
#menu-bg {
background-color: #00FF00; /*緑色*/
}
}

となります。設定を行ったら、レスポンシブ対応で表示することができているのかどうかを、必ず確認しましょう。

以上、モバイルフレンドリーとして、モバイルサイトの評価を上げる方法や、モバイルフレンドリーテストツールの利用方法について説明してきました。ユーザーにとって見やすいウェブサイトを構築し、ウェブサイトを高く評価してもらうためにも、モバイルフレンドリーのスコアは非常に大切ですので、スコアアップのための対策を取り入れてみましょう。