[SEO]モバイルフレンドリーとは?あなたのサイトをモバイルフレンドリーに!

あらすじ

みなさんインターネットはパソコンとスマホのどちらで見ることが多いですか？

おそらく、近年ではスマホと答える人が多数でしょう。

というのも一昔前まではパソコンで見るのが一般的でしたが、スマホやタブレットが普及した現代では、ネット環境さえあればどんなデバイス(パソコン・タブレット・スマホ)でも見ることが可能になりました。

これにより、年々スマホからのインターネット利用者が増えており、SEO対策はパソコンなどのデスクトップだけでは済まなくなっているのが現状です。

今回はそんなパソコン用のSEO対策ではなくスマホユーザーの利便性に向けた対策「モバイルフレンドリー」に関してまとめましたので、ぜひモバイルフレンドリーなSEO対策をしていきましょう。

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

モバイルフレンドリーとは、ユーザーにとってパソコンなどのデスクトップだけでなく、スマホやモバイルフォンでの使いやすさを示すものです。

正式にはモバイルフレンドリーアップデートと呼ばれ、スマートフォンでの検索順位のみに反映され、モバイルフレンドリーではないページは順位が下がってしまう仕組みになっています。

スマホユーザーの増加

近年スマホの利便性により、パソコンだけでなくスマホからのインターネット利用が増加しています。

下記の図を見てもらえばわかりますが、今後もスマホからのインターネット利用は増加する一方でしょう。

引用元：https://www.quicksprout.com/mobile-friendly-website-guide/

このことを踏まえると、モバイルフレンドリーはSEO対策において無視できない要素となっています。

レスポンシブデザイン

モバイルフレンドリー対応ページにする前に、まずは最低条件としてページやサイト自体をレスポンシブデザインに対応させる必要があります。

下記画像はGoogleのホームページから引用したものです。

引用元：https://developers.google.com/search/mobile-sites/

この画像にある通り、左のページはデスクトップ(パソコン)用で右のページがスマートフォン用になります。

この画像を見るだけでも、左のページが読みづらく右のページは読みやすくなっています。

モバイルフレンドリーなページにするには

レスポンシブデザインはモバイルフレンドリー以前に最低条件として設定しておかなければならないものでしたが、では実際に、どのような対策をすればモバイルフレンドリーなページとして認められるのでしょうか。

具体的な対応策の例を挙げてみました。

それぞれ詳しくみていきましょう。

メニューの簡潔化

まずはメニューの簡潔化です。

本来、パソコンでのメニューはナビゲーションバーで表示されることが多いです。

サイト構成について知りたい方はこちらをご覧くださいfa-arrow-circle-down

[HTML5]最新のセマンティックウェブの書き方や使い方を徹底解説

2019.9.3

今回はHTML5より新たに導入された非常に便利なセマンティックウェブの使い方・書き方を解説していきたいと思います。 HTML5についてはこちら。fa-arrow-circle-down 合わせて読みたい この記事を読んでいただければ、セマンティックウェブの意味について理解し、どんな種類があるの...

しかし、このナビゲーションバーをそのままスマホで閲覧すると、非常に見づらくなってしまいます。

スマホでは、ページの上部にメニューボタンを作成し、そのボタンをクリックすることで、サイト全体のメニューを表示させたり非表示にさせる方法が簡潔でわかりやすい対策となります。

ポップアップ画像の使用を避ける

ポップアップ画像とは、その画像をクリックすることで拡大表示させることができるものです。

これは、スマホユーザーからはあまり好まれるものではありません。

理由として、一度ポップアップさせた画像は閉じづらいというデメリットがあるからです。

ユーザーの利便性を考えるとなるべく避けたほうがいいでしょう。

サイトスピードを上げる

こちらは通常のSEO対策でも重要ですが、スマホでも当然有効な対策と言えます。

主に画像サイズを下げたり、使用してないコード (特にCSSやJavaScript)の最適化をすることで、サイトスピードの改善が見込めます。

サイトスピードに関して詳しく知りたい方はこちらの記事をご覧くださいfa-arrow-circle-down

サイトスピードの改善方法やGoogleのページ速度計測サイト教えます！

2019.9.2

あらすじ 検索ランキングのアルゴリズムに正式な判断要素として定義されているサイトスピード。 SEOにとっても非常に重要な要素となっています。 今回はそんなサイトスピード・ページスピードの改善方法やどのように自サイトのスピードをチェックするのかなど、 SEOの向上が期待できる方法をご紹介していきたい...

ボタンの配置を考える

ボタンなど、指で画面をタップすることができる要素の配置は重要です。

例えば、2つのボタンの配置が近すぎたり、画面の端にボタンを配置したりと、いずれもユーザーにとって押しづらい配置となり、決してモバイルフレンドリーな構成とは言えないでしょう。

これらを考慮しながらサイト設計をすることで、モバイルフレンドリーなページにすることができるはずです。

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

モバイルフレンドリーかどうかのチェックを簡単にできるサイトがあるのでご紹介したいと思います。

まとめ

いかがだったでしょうか。

今後はスマホからのインターネット利用がどんどん増加することが見込まれます。

ぜひ今のうちに対策をとっておきモバイルフレンドリーなページしましょう。