コンテンツ制作ブログ

デジタルマーケティング、コンテンツマーケティング、
データ分析などに関するお役立ち情報を発信

モバイルフレンドリーとは? テストツールを使った対応方法を解説

2021年11月9日

今回はモバイルフレンドリーについて解説します。突然ですが皆さんはご自身が作られたサイトがiPhoneやAndroidといったモバイル端末でどのように表示されているのかご存じでしょうか?モバイル端末の利用は近年増加しており、ユーザーがサイトを快適に見られるようにモバイルフレンドリーへの対応を行う必要があります。そこで、この記事ではモバイルフレンドリーについての説明や、ツールを使ったチェック方法などをご紹介します。

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

モバイルフレンドリーとはモバイル端末などで快適なサイト閲覧が可能であることを意味します。Googleが2015年から検索順位決定の基準として設けているもので、検索上位を目指すSEOの取り組みの中では必要なポイントとなってきます。

また、モバイルフレンドリーなサイトを目指すことでSEO対策のみならず、サイト閲覧時のユーザビリティ向上につながり、サイトに対するユーザーの満足度を高めることができます。

Finding more mobile-friendly search results | Google 検索セントラル ブログ

モバイルフレンドリーテストでページをチェック

モバイルフレンドリーの意味が分かってところで、実際にページがモバイルフレンドリーといえるのか確認してみましょう。

ここで使用するツールは「モバイルフレンドリーテスト」というGoogleが無料で提供しているチェックツールです。

使い方は簡単でチェックをしいたいページのURLを入力するだけで、1,2分もかからずにチェック結果が表示されます。

https://search.google.com/test/mobile-friendly?hl=JA

テストでチェックされる6つの項目と対応方法

モバイルフレンドリーテストがページをチェックしている6つの項目について解説をします。モバイルフレンドリーなサイトを作成する際に注意すべきポイントです。

互換性のないプラグインを使用していないか

Flashなどのモバイルブラウザでサポートされていないプラグインが使用されていないかが確認されます。改善のためにはページ設計にHTML5などの最新のwebテクノロジーを使用する必要があります。

ビューポートが設定されているか

ビューポートとはウェブページを表示するために設定する領域のことを表します。ビューポートプロパティをページ内に設定することで、画面サイズに合わせてページのサイズとスケーリングが変更されます。この設定でパソコンなどの大きな画面でもモバイル端末などの小さな画面でもページが適切に表示されるようになります。

ビューポートが「端末の幅」に収まるように設定されているか

ページ表示に関係するビューポートプロパティですが、その中で固定幅の定義が設定されているとそれが原因で異なる画面サイズへの表示が作動されず、ページが見切れてしまう可能性があります。ビューポートの設定を見直してみましょう。

コンテンツの幅が画面の幅を超えていないか

ページ上の語句や画像などのコンテンツ表示に関するチェック項目です。webページのスタイルを設定している CSS 設定で絶対値を使用している場合や、ページの画像が特定のブラウザ幅に対して最適に表示されるように設計されている場合に発生します。改善するためには表示画面サイズに対して相対的に表示されるように設定を行いましょう。

テキストが小さすぎて読めない可能性はないか

テキストサイズの設定が小さすぎると、モバイル表示の小さな画面では見づらい場合があります。なので、モバイル表示でも見やすいテキストサイズに設定することが必要となるでしょう。一般的に多くのサイトで使われている文字サイズは16pxとなっています。自身のサイトを設定する際の一つの指標として参考にされてください。

クリックできる要素が近すぎはしないか

この項目ではボタンやナビゲーション リンクなどのタップ要素同士が近すぎないかをチェックされます。クリックできる要素動詞が近すぎた場合、誤タップの原因となりユーザーのサイトに対する満足度を低下させてしまう可能性があります。

クリックできる要素同士はユーザーが誤って押してしまわないようにボタンやナビゲーション リンクのサイズ・スペースを考えて設置するようにしましょう。

モバイルフレンドリーを計測できるその他のツール

上記で紹介した意外にもモバイルフレンドリー計測可能なツールがあります。

GoogleSearchConsole

Googleが提供するGoogleSearchConsoleというツールでもチェックすることができます。モバイルユーザビリティレポートという項目でモバイルフレンドリーかどうかの確認ができます。

その他にも機能があるGoogleSearchConsoleですが、もう少し詳しく知りたい方は以下の記事もご確認ください。

関連記事:https://www.siteengine.co.jp/blog/analytics/search-console-initialization/

Google PageSpeed Insights

こちらもGoogleが提供しているツールでGoogle PageSpeed Insightsというものです。ウェブページの読み込み速度を計測するツールですが合わせてモバイルフレンドリーかをチェックすることが可能です。

ページ速度の計測はCWV(コアウェブバイタル)というページの使いやすさを計る指標に影響するものです。

その他にもユーザビリティについて詳しく知りたい方はこちらのサイトもご確認ください。

関連記事:https://www.siteengine.co.jp/blog/web-usability/

まとめ

以上のような方法でモバイルフレンドリーのチェックを行い、対応を行うことでモバイル端末でもユーザーが使いやすいようなサイト作りを目指しましょう。

倉田脩平

この記事を書いた人

倉田脩平

サイトエンジン株式会社でWebマーケターを担当。 熊本オフィスにてコンテンツ記事作成やアクセス解析などを行ってます。

[addtoany]

CONTACT

お問い合わせ