投稿日：2022年11月15日 | 最終更新日：2023年6月13日

「モバイルフレンドリー」とは、ユーザーがサイトにアクセスする端末や画面幅などから判断し、主にスマートフォンからのアクセスの際に画面デザインのスタイルを調整し表示を最適化。W E Bサイトをユーザーが閲覧しやすくすることを指します。

スムーズかつ流動的にデザインを変化させる「リキッドデザイン」や「レスポンシブ」と呼ばれるデザインなどの場合は、P Cでの表示だけではなくスマートフォンから見た場合にもスタイル調整が自動で行われるため、モバイルフレンドリーに対応していると言えるでしょう。

モバイルフレンドリーに対応すべき３つの理由

近年ではそれほど多くありませんが、今もなおP Cからのアクセスにのみ主眼を置き、モバイルフレンドリーに対応しないサイトもまだ見られます。そんなサイトをお持ちの方に、よりわかりやすく「どうして、モバイルフレンドリーに対応しなくてはいけないのか？」という３つの理由を具体的に紹介させていただきます。

理由１　スマートフォンの保有率が高く、ユーザーの多くが検索に利用しているから

サイトによってもP Cとスマートフォンなど端末のアクセス比率というのは異なりますが、現代においてユーザーの多くがスマートフォンを保有していることは間違いありません。

総務省が調査を行った情報通信白書に掲載されている「インターネット利用端末の種類」を見ても、2015年にパソコンに迫っていたスマートフォンの利用割合は2016年にはほぼ同一の割合まで上昇。2017年にパソコンによるインターネット利用の割合が低下したのを機にスマートフォンでのインターネット利用がパソコンを逆転。その後も利用端末の割合としては伸ばし、１位をキープし続けているという状況です。

調べものをするとき、わざわざPCを立ち上げてするという人は以前と比べれば圧倒的に少なくなってきています。職場でP Cを触っていても自宅にパソコンは無く、タブレットやスマートフォンからアクセスしているというユーザーも、特に若年層においては増加。

出先でも気軽に調べたいことがあれば、簡単にスマホで調べることが可能。寝る前にベッドの中でスマートフォンで調べものや、買い物、S N Sなどを楽しむ。スマートフォンは完全に人々の生活に根差し、切っても切れない状況となりました。

恐らく、よほど革新的な端末が登場しない限り、当面はスマートフォンがインターネットに接続する際に利用する端末割合では１位であり続けることでしょう。P Cよりも手軽で、すっかり浸透しきっている端末からのアクセスについて、見た目を整えておかないことは、大きな機会損失にもつながります。

理由２　ユーザーに対して余計なストレスを与えない

モバイルフレンドリーに対応していないサイトにユーザーがアクセスした場合どのようなことが起こるでしょうか？

・メニューが小さすぎて何が載っているのかわからない
・表示が崩れてしまいガタガタで文章が読みづらい
・画面を横スクロールしないとサイトの全貌が見えない

あなたがスマートフォンでこんなサイトに出会ったとき、間違いなくブラウザの「戻る」をタップしてしまうでしょう。

どうしても見たいサイトであれば、画面を指でピンチし、拡大して文章を読んだりという努力をするかもしれませんが、そのようなサイトはユーザーに対して必要のないストレスを与えてしまいます。それだけではなく、ユーザーがサイトに対して抱く印象は間違いなく良いものとはなりません。

それが企業サイトであれ、サービスサイトであれ、商品のサイトであれ、マイナスのイメージを与えてしまうということは、決して良いことではないはずです。

理由３　Googleが推奨していて、検索順位に関係する可能性が高いから

これを言ってしまえば、元も子もありませんが、世界においても大きなシェアを誇り、日本でも検索最大手であるGoogleがサイトは「モバイルフレンドリー対応すべきである」と推奨しています。そして、それは掲載検索順位の決定要件の一つともされています。

つまり、モバイルフレンドリーに対応していないサイトはサイトの評価に対してマイナスになるということ。検索順位の決定に直接的な影響がある（上位表示を目指す上で、足を引っ張る要因となり得る）のであれば、なるべくその状況は解消しておくことが一番です。

Googleが優先しているのはユーザーに最良の検索結果を提供すること。その上で、モバイルフレンドリーに対応していければ前述したようなユーザーに無用なストレスを与えてしまうこととなりますし、Googleは決してそれを良しとしません。質の高いユーザーエクスペリエンスの提供という意味においても、モバイルフレンドリー対応は絶定に必要なものです。

一方、SEO対策がなされていて、GoogleやYahoo！などの検索エンジンから流入するユーザーが一定程度いるサイトであれば、上位表示を達成できている限りは利益を生み出す可能性があるということ。つまり、SEO対策が施され検索結果上位にあるサイトはそれだけで「財産」です。

モバイルフレンドリーの具体的な事例

・グローバルナビをハンバーガーメニューにする

サイト上部に表示されている共通のメニュー「グローバルナビ」。P Cであれば横幅いっぱいにスペースを確保し、複数のメニューを一目でわかる状態として表示することができます。しかし、スマートフォンの画面はばでは到底無理。そこで利用するとわかりやすいのが「ハンバーガーメニュー」と呼ばれるものです。

モバイルフレンドリーに対応している対応の多くは画面左右どちらかの最上部に三本線のアイコン「≡」を表示し、タップするとメニューが表示される仕様を採用しています。

この三本線がバンズでパティを挟んでいるハンバーガーに見えるというのがハンバーガーメニューの由来となっています。

・表示画像の端末による切り替え

縦横比を見たとき、極端に横が長く縦方向には短い画像の場合、スマートフォンで表示すると非常に見づらくなる可能性が高くなります。そういった場合には、読み込む画像そのものを複数用意しておき、端末によって表示する画像を切り替えるという対応が可能です。

また、画像を適切なサイズでトリミングし、切り抜いた状態で表示することもできるため、スマートフォンで見た場合に見づらくないサイズ感を調整しながら適宜切り抜いた状態で表示するというのも画像においては必要な対応と言えるでしょう。

モバイルフレンドリーサイトを公開する前に押さえておきたい重要なポイント

実機で対応状況を確認する

PCに向けたサイトを作る場合もそうですが、表示の確認は特に念入りに行う必要があります。それはなぜか？

スマートフォンはAppleのiPhoneシリーズとAndroid端末、大きく分けると２種類です。しかし、画面サイズは機種によってまちまち。そして画面の解像度などについても特にAndroidの場合はメーカーによって異なっている場合があります。

また、SafariやChromeなどブラウザによって、同じコードを書いているのに表示が若干異なるなどユーザーが使うW E Bブラウザでも見た目が変わってしまうことも。

PCのブラウザにも拡張機能でスマートフォンやタブレットでサイトを見た際の見た目をシミュレーションする機能もあります。しかし、その再現度は決して100％同じ挙動ではありません。PCシミュレーションでは全く問題が無かった見た目が、スマートフォンの実機で見た場合は大きく異なるといったこともしばしば見受けられる現象です。

全ての機種をカバーすることは難しいでしょうが、モバイルフレンドリーのサイトについては必ず複数の実機複数のブラウザを用いて、大きな崩れや確認するようにしましょう。

モバイルフレンドリー対応状況を公式のツールで確認する

実機での確認のほかGoogleが提供しているツールを利用してGoogleのbotにもモバイルフレンドリーに対応していると認定してもらえるのかを確認しておくとより安心度合いも増します。

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

「モバイルフレンドリーテスト」は、対応状況を確認することに特化したツールとしてGoogleが提供しています。テストしたいページのUR Lを入力するだけでモバイルフレンドリーかどうかの判定をしてくれますので、操作も簡単。

また、UR Lが無い場合にはコードをコピーペーストで入力すれば判定も可能ですので、サイト公開前に利用することをお勧めします。

Googleサーチコンソール

サーチコンソールの中にはモバイルユーザビリティの項目が存在します。モバイルユーザビリティに支障をきたすようなエラーがある際には、この項目を見れば確認が可能です。すでにサーチコンソールを利用されているサイトの場合は、この項目も一度確認しておきましょう。

Googleから指摘される事が多いモバイルフレンドリーに関するエラー項目

特にGoogleから指摘されやすい項目は、以下の通りです。こちらで紹介しているもの以外が指摘されるパターンもありますので、指摘を受けているポイントがあれば早めに修正対応をするべきでしょう。

「テキストが小さすぎて読めません」

P Cのデザインがそのままなので、スマートフォンでのテキスト表示サイが小さすぎルため文字の可読性が著しく低下している。

「クリック可能な要素同士が近すぎます」

タップやクリックするためのボタン・リンクの領域同士の距離が近いために、誤タップが起こりやすい状態となっている。

「ビューポートが設定されていません」

metaタグの一種である”viewport”設定はレスポンシブデザインをする上で重要な設定です。この設定がなされていないページについては、モバイルフレンドリー対応できていないと判定されてしまう可能性がありますので、きちんと設定するようにしましょう。

モバイルフレンドリーまとめ

日本におけるユーザーのインターネット利用端末の割合を見ても、Googleが推奨している状況から考えてもモバイルフレンドリーに対応することはもはや必須であり、むしろより優先して対応すべき状況であるということがよくお分かりいただけたかと思います。

対応方法などについても細かく紹介してきましたが、単に「スマートフォンで見た際の見た目を整える」という目線から対応するのではなく、どのような表示をすればユーザーにとって見やすい、使いやすいサイトなのか？という視点に立って考えることが最も大切なことです。ユーザーインターフェース（U I）やユーザーエクスペリエンス（U X）を考慮しながら、ユーザーファーストのサイトを作ることを心がけましょう。