モバイルフレンドリーとは？その必要性や対応方法を解説します

多くの国でスマートフォンの数がパソコンの数を上回るようになった近年では、Webサイトもスマートフォンを意識して構築する必要があります。

Googleでは、2015年4月よりモバイルフレンドリーの推奨を開始し（詳細はコチラから）、未対応である場合にはモバイルフレンドリーなWebサイトに変更するよう呼びかけています。

• 自社Webページがモバイルフレンドリーかどうか気になっている
• 自社Webページをモバイルフレンドリーに対応させたい
• 今からWebページを作成するためモバイルフレンドリーについて知りたい

この記事では、そのようなお悩みをお持ちの方向けに、モバイルフレンドリーの基礎からわかりやすく解説します。

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

モバイルフレンドリーとは、Webサイト上のWebページが、スマートフォンなどのモバイル端末で表示したときに見やすい状態のことを言います。

今や、モバイル端末でも見やすいことが良質なサイトである証の一つだと言えるでしょう。

モバイルフレンドリーの必要性とは？

では、なぜモバイルフレンドリーが必要なのでしょうか。その理由は大きく3つあると考えられます。

• 時代のニーズに合わせるため
• SEO対策のため
• ページ離脱を防ぐため

時代のニーズに合わせるため

スマートフォンの数がパソコンの数を上回るということはつまり、Webサイトを閲覧する端末の主流が、パソコンからスマートフォンへ移り替わっているということになります。

そのため、Webサイトも時代のニーズに合わせ、スマートフォン用に見た目を整える必要があるということです。

SEO対策のため

前述の通り、検索エンジン大手のGoogleがモバイルフレンドリーであることという条件を重要視しており、ランキング要素としても使用していることから、モバイルフレンドリーでないサイトの検索順位は下がることになります。

従って、現在のSEO対策においてもモバイルフレンドリーであることが必須条件になっているのです。

ページ離脱を防ぐため

一昔前と違い、今やあらゆる企業がホームページを持ち、あらゆるサービスがWebサイトから利用できる現在において、ユーザーは、数あるサイトの中でより見やすく使いやすいサイトへ流れてしまいます。

せっかくサイトを訪れてくれたユーザーのページ離脱を防ぐためにも、スマートフォンでの利便性を向上させ、見やすく使いやすいサイトを作ることが求められているのです。

モバイルフレンドリーかどうかを確認する方法

では、自社のWebサイトがモバイルフレンドリーか、どのように確認すれば良いでしょうか。

確認方法はいくつかありますが、Googleが提供している「モバイルフレンドリーテスト」を使うのが最も簡単に確認できる方法です。

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

使い方はシンプルで、モバイルフレンドリーかどうかをテストしたいWebページのURLを貼ってクリックするだけで、結果が表示される仕組みです。

ちなみに、このテストはWebサイト全体ではなく、Webページ毎に行う必要があるという点に注意しましょう。

なお、モバイルフレンドリーでないと判断された場合には、その理由も表示されますので、自社のWebサイトがモバイルフレンドリーかどうか気になる場合には一度試してみてはいかがでしょうか。

モバイルフレンドリーへの対応方法

それでは次に、既存のWebサイトやこれから作るWebサイトを、モバイルフレンドリーにするための対応方法について2つ解説します。

レスポンシブデザインにする

一番望ましい方法は、Webサイトをレスポンシブデザインにすることです。

このレスポンシブデザインとモバイルフレンドリーを混同する人もいるのですが、両者の違いは下記の通りです。

専門的なことを少しだけ追記すると、このレスポンシブデザインにおいては、通常は1つのURL・HTML・CSSを用い、CSSの中でコードを書き分けてデザインしますが、詳細はここでは割愛します。

テストで表示された問題点を修正する

既にあるWebサイトを、様々な理由によりレスポンシブデザインに変更することができないというケースもあるでしょう。

その場合には、モバイルフレンドリーテストで指摘されたエラー項目を修正することによってモバイルフレンドリーに対応する方法もあります。

モバイルフレンドリーでないと判断される場合には、いくつか原因がありますので、ここでは代表的なものを4つ紹介しておきます。

フォントサイズや行間が適切か

スマートフォンなどのモバイル端末でWebサイトを表示した際、パソコンよりも小さな画面で見ることになります。文字が小さ過ぎたり、行間が狭すぎたりするとユーザーにとって読みづらいWebページだということになります。

文字のフォントを大きくしたり行間を空けたりして、スマートフォンで見た際にストレスなく読めるように工夫しましょう。

ボタンやリンク同士が近すぎないか

小さな画面でWebサイトを表示するということは、Webページに貼られたリンクや問い合わせなどのボタンをタップする際にも、使い勝手の良さが重要になります。

複数のリンクやボタンが近距離に配置されていると、意図しないリンク先が開かれたりと誤操作が起こりやすくなり、ユーザーの利便性が損なわれることになります。

このような場合には、リンクやボタン同士の位置を離し、誤操作の起きないデザインに変更しましょう。

レイアウトが崩れていないか

例えば横に広い表など、画面幅の広いパソコン画面であれば見やすいレイアウトも、幅の狭いスマートフォンで見ると、途中で途切れていたり、不自然に改行されて読みづらくなっていたりすることがあります。

そういう場合には、パソコンで見てもスマートフォンで見てもおかしくないレイアウトに変更するなど、工夫しましょう。

図や写真が見切れていないか

Webページにjpeg形式などの図や写真等を貼っている場合、スマートフォンで見た時にサイズが大き過ぎて画面幅を超えて飛び出していることがあります。

その場合には、図や写真の表示サイズを変更したり、サイズを数値指定で表示させている場合にはパーセンテージ指定に変更するなどの調整が必要になります。

[まとめ]スマホでも見やすいモバイルフレンドリーなサイトを作ろう

今の時代のWebサイトは、モバイルフレンドリーであることが必須条件です。

自社のWebサイトが古くなっている場合に、後から修正を重ねていると、結果的に複雑なコードのWebサイトになってしまうことがあります。

そうなると表示スピードが遅くなったり、思わぬ箇所に齟齬が出たりすることもあり得ます。

そういった事態を防ぐためにも、思い切ってWebサイトをリニューアルすることを検討しても良いかも知れません。

Webサイトの外注先選びでお困りの方は、弊社までお気軽にご相談ください。

当社がこれまで支援してきた開発事例の共有、企画・コンサルティング、要件定義や実際の開発支援まで包括的にサポートさせていただくことが可能です。

システム開発を失敗しないために、弊社が相見積もりの取得までをサポートさせていただくことも可能です。むやみな営業電話などは決して行いませんので、まずは無料のご相談をお待ちしております。