自分のサイトでのスマートフォンユーザーの利便性を考える場合、モバイルフレンドリーというものが関係します。
今回は、そんなモバイルフレンドリーについて、紹介しますので、スマートフォンユーザーについて考えるきっかけにしてみるとよいでしょう。
モバイルフレンドリーという言葉は、2015年に行われたGoogleのアップデートから瞬く間に広がりました。
2015年に行われたアップデートには、モバイルフレンドリーアップデートという別名も付けられており、デスクトップだけではなく、スマートフォンの閲覧にも対応したWebサイトの露出を増やす意味合いで行われました。
携帯端末で、読みやすくて使いやすいページの掲載順位が引き上げられるというものです。
また、モバイルフレンドリーの計測は、サイト全体ではなく、ページ単位で行われますので、同じサイトであっても、モバイルフレンドリーなページ、そうでないページとに評価が分かれます。
さらに、日本のみの限定的な対応ではなく、全世界に存在するWebページの評価に対して行われたアップーデートです。
Googleがモバイルフレンドリーアップデートに踏み切った理由は、スマートフォンユーザーの増加が関係しています。
Googleは、以前よりユーザーファーストを貫いてきましたので、スマートフォンユーザーが多くなれば、当然それに対応しなければなりません。
そして、スマートフォンユーザーの利便性向上を目的として、サイト運営者にモバイルフレンドリーを浸透させるべくアップデートに踏み切ったのです。
また、モバイルフレンドリーは、多くのサイトに影響を及ぼすものですが、あくまでもスマートフォンからの検索に対して順位の入れ替わりが発生します。
スマートフォンで検索した場合のみスマートフォン閲覧に対応しているかどうかで順位の変動が発生するのです。
このようにモバイルフレンドリーはスマートフォンでのネット利用に大きく関係する事柄なので、今後も増加する可能性が高いスマートフォンユーザーを考えれば、重要性はさらに高くなるといえるでしょう。
モバイルフレンドリーは、直接、検索順位に影響を及ぼすので、モバイルフレンドリーなサイト制作のポイントをおさえる必要があるでしょう。
まず、フォントサイズがモバイル向けに最適化されていることが大切です。
パソコンのブラウザと、スマホの画面では、最適な文字サイズが違います。
実際にサイトをスマートフォンで確認して、フォントサイズが小さすぎないか確認してみましょう。
また、パソコンはマウスを使って操作するのに対して、スマホは指でタップして操作します。
タップ操作は、マウスカーソルでのクリックに比べ、細かい操作には向いていません。
そのため、タップ可能な要素同士が、近すぎるのは、モバイルフレンドリーではないとみなされてしまいます。
この対策としては、リンク要素周辺の配置を考え直す必要があるでしょう。
さらに、ページの横幅もモバイルフレンドリーに関係しています。
パソコンとスマホでは、スマホの方が圧倒的に1画面に表示できる横幅が小さいです。
そのため、パソコンでは表示に問題がないとしても、スマホでは1画面にページの横幅が収まらなくなってしまいます。
1画面に横幅が収まらないページは、画面が切れた状態になり、非常に見にくいページになってしまいます。
これは、モバイルフレンドリーでもありませんし、ユーザーにとってかなり使いにくいページでもあるのです。
スマホとパソコンの表示領域の違いに対応するための対策が、ビューポートの設置です。
ビューポートの役割は、端末による表示領域の違いに対応するための指定で、htmlのヘッダー内で指定することができます。
また、ビューポートを設定して、モバイルフレンドリー化するためには、ページのサイズがビューポートに対応している必要もあります。
このようにビューポートを指定して、異なる表示領域を持つ端末に対応することをレスポンシブWebデザインともいいます。
レスポンシブWebデザインは、既存サイトをモバイルフレンドリー化するための選択肢として、Googleが推奨しているデザインでもあります。
レスポンシブWebデザインは、ビューポートを設定しただけでは、完全なモバイルフレンドリーとはいえません。
ビューポートの設定は、いわばデスクトップ向けのページを、無理やりモバイル端末の表示領域に合わせたようなものです。
これだけではページ詳細に、まだまだモバイルフレンドリーではない部分があるはずです。
これを解消するために行うのがメディアクエリの指定です。
メディアクエリというのは、CSSに記述して指定するもので、画面サイズに応じて、CSSを使い分けることができる仕組みです。
これは、パソコンで閲覧した場合と、スマホで閲覧した場合のCSSを使い分けられるということでもあり、より洗練されたモバイルフレンドリーに対応したページを作成できます。
CSSの切り替えが可能ならば、端末によってフォントサイズを変更したり、ブロック周囲の余白を変更したりも可能です。
このビューポートとメディアクエリを組み合わせた方法が、モバイルフレンドリーに対応する選択肢のうち、最も難易度が低い方法といえるでしょう。
htmlとCSSの初歩的な知識さえあれば、対応することができます。
レスポンシブWebデザインでモバイルフレンドリーに対応する場合、自社コンテンツとの相性を考える必要があります。
なぜなら、レスポンシブWebデザインは複雑なページになればなるほど、工数が増え、複雑化する傾向があるからです。
このような特徴を踏まえた上で、事前にレスポンシブWebデザインと自社コンテンツの相性を確かめる必要があるでしょう。
なるべく費用をかけずに簡単にモバイルフレンドリーに対応するためには、レスポンシブWebデザインを採用するのがおすすめです。
しかし、それ以外にも対応するための方法はあり、それがセパレートタイプやダイナミックサービングといった方法です。
セパレートタイプは、PC用のページとスマートフォン用のページを分ける方法で、アノテーションというものを設定して、Googleのシステムがセパレートを認識できるようにします。
アノテーションというのは、メタ情報に注釈をするというような意味合いです。
また、ダイナミックサービングは、ユーザーエージェントという機能を利用して、デバイスもしくは画面サイズを検出し、それぞれの端末にあったページを表示させる方法です。
メディアクエリと似たイメージの方法だともいえるでしょう。
このようにレスポンシブWebデザインを利用しない場合でもモバイルフレンドリー化をすることができますが、GoogleはレスポンシブWebデザインを推奨しています。
モバイルフレンドリーに対応するためには、色々な方法があることがわかりました。
しかし、本当にモバイルフレンドリーになっているのか気になるのではないでしょうか。
そのサイトがモバイルフレンドリーであるかどうかを判断するのは、人ではなく、検索エンジンであるGoogleのシステムです。
そのため、しっかりとサイトがモバイルフレンドリーになっているかを確認できるツールを利用することをおすすめします。
モバイルフレンドリーテストは、Googleが無料で提供しているツールです。
ページ単位でモバイルフレンドリーかどうかを確認することができるツールで、モバイルフレンドリー化した後には、しっかりと対応しているかどうかを確認してみるとよいでしょう。
すぐに結果を知ることができるので、覚えておくと便利なツールです。
サーチコンソールは、SEO対策をするサイト運営者にとっては、非常に重要なツールです。
そして、サーチコンソールには、流入ワードを調べるだけではなく、ページ単位でモバイルユーザービリティを調べることができます。
モバイルユーザービリティでは、モバイルフレンドリーではないページがエラーとして表示されますので、サーチコンソールの指示に従って、修正するとよいでしょう。
サーチコンソールの場合、検索エンジンがすぐにページを確認するわけではないので、修正した後は上で紹介したモバイルフレンドリーテストで逐一チェックするとよいでしょう。
サイトのページ数が多くなってくると、モバイルフレンドリーチェックが追い付かなくなることもあります。
そんな時にサーチコンソールに登録しておけば、自動で問題のあるページをお知らせしてくれますので、その都度対策をすることができます。
モバイルフレンドリーの詳細を理解することができたのではないでしょうか。
それと同時に、モバイルフレンドリーが、今後のWebにおいて、非常に重要な要素であることがわかったかと思います。
Googleがユーザーファーストを続ける限り、ユーザーの主流派に寄り添った対応をするのは必然です。
そのため、多くのユーザーがWebの閲覧にスマートフォンを利用しているという現実は、軽視できないものになっています。
すでにPC閲覧からはモバイルフレンドリーは関係ないという事実も、あまり関係なくなっており、かなり多くのユーザーがスマートフォンから検索をしていますので、ほぼ全てのユーザーにモバイルフレンドリーが関係していると思ってしまっても問題ありません。
これまでスマートフォンユーザーを意識したページづくりを行ってこなかった場合は、まずGoogleが提供しているツールを利用して、自分のサイトをチェックしてみてはいかがでしょうか。