この記事の目次
- 今、SEOで大注目!モバイルフレンドリーとは?
- モバイルフレンドリー対応は大丈夫?自分のサイトをチェックしてみよう
- 全て解決!モバイルフレンドリー対策を完全解説
- モバイルフレンドリーで重要なポイント・7選
- モバイルフレンドリーをはじめとするネット対策に困ったら、アドタイムへご相談ください。
今、SEOで大注目!モバイルフレンドリーとは?
最近「モバイルフレンドリー」という言葉を耳にします。モバイル=携帯だと分かっても詳しい意味までは分からない…と考える人は多いのではないでしょうか。
現在はWEBサイトをパソコンだけでなく、モバイル(スマホ)で見る人が急増しています。そのため今後はパソコンだけでなく、スマホからも見やすいホームページ制作が重要になってくるのです。ここでは、今注目のモバイルフレンドリーについて見ていきましょう。
モバイルフレンドリーにする必要性とは?
モバイルフレンドリーとは、Googleが2015年に発表した「WEBサイトがパソコンだけでなくスマホからも見やすく作られているか」という点を、順位決定の要素に盛り込むアルゴリズムの変更によって生み出された概念です。
今やWEBページを見るのはパソコンだけではありません。スマホなどのモバイルで見ることを意識して、SEO対策を進める必要があります。
モバイルフレンドリー化されていないサイトは、Googleからの評価が下がってしまうため注意しましょう。今後WEBサイトの流入アップを目指すならば、モバイルフレンドリーは外せない存在なのです。
モバイルファーストインデックス(MFI)とは?
モバイルファーストインデックス(MFI)とは、モバイル版の検索エンジンがモバイルサイトを優先してスクロールし、インデックスする行動です。サイトを立ち上げると、クローラーがデータ収集のために巡回にやってきます。
クローラーが多くの情報を収集でき、かつ「ユーザーにとって価値のあるサイト」と判断されれば、検索上位に上がる仕組みですよね。モバイルファーストインデックス(MFI)はパソコンサイトを中心にスクロールやインデックスしたいものを、モバイルを優先にする仕組みをいいます。
「モバイルフレンドリー」と混同しがちですが、中身は全く異なるので注意しましょう。モバイルフレンドリーはいわゆる「サイトの使いやすさ」を重視しており、順位に影響します。
しかしモバイルファーストインデックス(MFI)はスマホサイトをインデックスに使う仕組みをいい、順位に影響しません。
番外編! モバイルフレンドリーが重要な理由とは?
何故ここまでモバイルフレンドリーが重要視されるようになったのかというと、それは2015年に実装されたモバイルフレンドリーアップデートがきっかけです。
モバイルフレンドリーアップデートとは、近年のスマホ需給のアップに鑑み行われたGoogleのアップデートをいいます。最近ではパソコンよりもスマホで検索をする人が多いですよね。
モバイルフレンドリーアップデートではスマホユーザーの利便性を図るため、モバイルフレンドリー化されていないページは順位を下げる仕組みに変更されました。
モバイルフレンドリーアップデート以降は、モバイルで上手く表示されないサイトは順位が降下するようになっています。検索順位を上げるためにも、今やモバイルフレンドリーは必須なのです。
アドタイムスタッフ
モバイルフレンドリー対応は大丈夫?自分のサイトをチェックしてみよう
- モバイルフレンドリーは分かるけど、自分のサイトは対応しているのかな
- どうやってチェックするの?
と不安ですよね。
実はモバイルフレンドリー対応の可否を、無料で簡単にチェックできる方法があるんです。まずは3つの方法を試してみてください!
確認方法①|モバイルユーザビリティで確認
Googleがサイト運営者に向けて提供している「Google Search Console」のモバイルユーザビリティという機能を使ってみましょう。
使い方はWEBサイトにGoogle Search Consoleを導入するだけ。インデックスされているページ毎にエラーもしくはモバイルフレンドリーかを判断してくれます。
手順は以下の通りです。
- ① Google Search Consoleを開き、「インデックス」→「モバイルユーザビリティ」を開く
- ② 画面をスクロールし、エラー箇所を確認する
- ③ ②のエラー箇所を修正後、サイトマップで修正をGoogleに伝える
確認方法②|モバイルフレンドリーテストで確認
Google Developersのモバイルフレンドリーテストを使って確認もできます。数秒から数十秒でチェックできるため便利ですよ。手順は以下の通りです。
- ① Google検索で「モバイルフレンドリーテスト」と検索
- ② 検索したいページURLを入力する
- ③ 表示内容を確認する
「このページはモバイルフレンドリーです」と表示されれば、対応していると分かります。万が一エラーが出た場合、修正すべき点が表示さるので修正していきましょう。
確認方法③|PageSpeed Insightsで確認
モバイルフレンドリーに対応させるには、ページの表示速度も重要です。そのためページデザインや見せ方もチェックしておきましょう。
PageSpeed Insightsは、スマホでの表示スピードが確認できるツールです。使い方は以下の通りです。
- ① Google検索で「PageSpeed Insights」を検索
- ② 確認したいサイトのURLを入力する
- ③ 表示内容を確認する
PageSpeed Insightsではページ速度が0~100で表示されます。表示は三段階(0~49、50~89、90~100)で細かく分けられるので一目瞭然です。もしページが0~49であった場合は改善の余地があるでしょう。
全て解決!モバイルフレンドリー対策を完全解説
「サイトをモバイルフレンドリーにしたいけど、どうすればいいの?」と悩みますよね。もし具体的な方法が分からない!と思ったら、以下3つから始めてみましょう。
モバイルフレンドリー対応方法①|ダイナミックサービング
ダイナミックサービングは動的な配信ともいい、一つのURLと別々のHTMLで管理し、配信するHTMLを分ける方法です。WEBサーバー上でデバイスの種類を察知し、別々のHTMLを配信するよう振り分けを行います。
ダイナミックサービングには以下のメリットがあります。
- Googleが推奨する1つのURLで管理ができる
- パソコンやスマホ、それぞれ別に構築できるため細かな修正がやりやすい
- デバイスごとの読み込時間を調整できる
ただしサイトを修正する際には、パソコンとスマホそれぞれを別に直す必要がありますので注意しましょう。
モバイルフレンドリー対応方法②|セパレートタイプ
セパレートタイプは、パソコンやスマホなど端末ごとにぴったりのWEBサイトを個別に準備する方法です。メリットは他の方法と比べても制約が少なく、自由に作成できる点にあります。
ただし同一のURLが誕生し、どちらもクロージングされてしまう可能性が…。別々のURLだとクローラーに認識させるためにも、アノテーション設定がポイントとなってきます。
モバイルフレンドリー対応方法③|レスポンシブウェブデザイン
レスポンシブウェブデザインはサイト利用者が使う端末に合わせ、画面の幅を変更する方法です。サイトには様々な人が訪れます。
人によって画面が小さかったり、無駄に伸びてしまっては見づらく、離脱に繋がる危険がありますよね。レスポンシブウェブデザインを使えば端末に合わせて自動的に画面が設定・表示されます。そのためパソコンやスマホなど端末に合わせてサイトを構築する必要はありません。
ダイナミックサービングやセパレートタイプよりも手軽で、初心者にもぴったりといえるでしょう。また一つのURLをクロージングするだけでモバイルフレンドリーに対応しているため、Googleが一番推奨している方法でもあります。
モバイルフレンドリーで重要なポイント・7選
モバイルフレンドリーにサイトを対応させるには、いくつか注意したい点があります。ポイントを抑えた対策をしなければ、モバイルフレンドリーと認識されないことも…。ここではモバイルフレンドリーで重要なポイントを押さえておきましょう。
モバイルフレンドリーで重要なポイント①|文字が小さすぎないこと
コンテンツを読むうえで文字の大きさは非常に重要です。文字が大きすぎる・小さすぎるといった問題はユーザーを疲れさせ、ページの離脱に繋がります。
スマホでは文字をタップすれば簡単に文字の拡大・縮小ができますが、ユーザー操作に任せていてはモバイルフレンドリーとして弱いでしょう。
モバイルフレンドリーはモバイルからの閲覧が快適に行えるのが最低条件です。文字の拡大・縮小を行わなくともページを読むことが可能で、見やすい設定が求められます。
モバイルフレンドリーで重要なポイント②|モバイル端末用のviewportが設定されていない
モバイル端末用のサイトにはviewport(ビューポート)を設定し、見やすさを心がけましょう。viewport(ビューポート)が設定されていない、スマホ画面にパソコンと同じ状態で画面が表示されてしまいます。
そのため「画面が伸びてしまう」「画面が小さくなって文字が読みにくい」などのトラブルが発生するのですね。これではユーザーフレンドリーとはいえません。
閲覧や操作がしにくくなっているページは、モバイルフレンドリーとはいえないでしょう。
モバイルフレンドリーで重要なポイント③|ページスピードを改善する
読み込みの遅いページはユーザーに大きなストレスを与えてしまいます。せっかくクリックしたサイトへ来たのに、表示が遅ければユーザー離脱し、二度と訪れない可能性があるためです。
モバイルフレンドリーではページの読み込み速度にも気を配りましょう。簡単にできる方法は以下の通りです。
ページスピード改善方法①|画像を軽量化する
ページ内で使われている画像を小さくしたり、圧縮して軽くしたりする方法です。また画像の解像度を下げる方法もおすすめ。pngやgifで拡張子が変えられそうなら、jpeg、jpgにすると圧縮もできて画像がよくなります。
アドタイムスタッフ
ページスピード改善方法②|画像を使わない
サイト内に極力、画像を使わない方法です。ボタンやバナーなどをHTML、CSSで表現できれば、余分な画像を削除できます。もちろん画像を消した分だけサイトが軽くなるため、ページ速度の改善が期待できるでしょう。
アドタイムスタッフ
ページスピード改善方法③|使っていないファイルや画像を削除する
サイト内で使っていないファイルや画像があれば、削除してしまいましょう。サイト更新などを残っているファイルを削除するだけで、サイトは軽くなります。
アドタイムスタッフ
ページスピード改善方法④|CSSやJavascriptファイルの圧縮
改行が多く複雑になりがちなCSSやJavascriptは削除しましょう。サーバーから消すことで、サイト全体が軽くなり、読み込み速度がアップします。
アドタイムスタッフ
ページスピード改善方法⑤|ブラウザキャッシュを使ってみる
アクセスしたサイトの情報をブラウザ内で一時的に保存された情報を「キャッシュ」と言います。キャッシュに保管された情報は、次回同じサイトにアクセスする際に表示時間が早くなる特徴が。ユーザーが何度も見たくなるコンテンツを作れば、サイトの表示スピードもアップするでしょう。
アドタイムスタッフ
モバイルフレンドリーで重要なポイント④|ユーザービリティの改善
ユーザービリティとはWEBサイトやソフトウェアサイトの操作性や利便性を指します。モバイルフレンドリーなサイトを作るには、ユーザー目線に立った改善は必須です。ユーザービリティの改善方法には以下があります。
ユーザービリティ改善方法①|文字の大きさは16px以上、行間は1.2em以上を意識する
ユーザーがスマホ画面で読みやすい文字の大きさは16px以上、行間は1.2emとされています。モバイルフレンドリーを取り入れるなら、文字の大きさや行間にも注意してみましょう。
アドタイムスタッフ
ユーザービリティ改善方法②|クリックできるもの同士の間隔は十分に開けておく
スマホ画面ではクリックではなく、タップで操作します。もしボタンがくっついた状態で表示された場合、ユーザーはふたつ同時に押してしまったり、うまく押せない可能性も。
誤ったクリックが続くとユーザーにとってもストレスの原因になります。タップするボタンやURLは十分に離し、ユーザーが違和感なく押せるようにしましょう。
またボタン同時の幅だけでなく、サイズにも注意しましょう。ユーザーが押しやすいよう、適度なサイズに設定します。
アドタイムスタッフ
ユーザービリティ改善方法③|コンテンツの幅をスマホ画面に合わせる
スマホ画面の幅を大きく超えたコンテンツ(画像や文章)を使ってしまうと、ページの状態が悪くなります。
コンテンツはスマホで表示されることを考え、必ず横幅を画面サイズに合わせて作りましょう。ページのHTMLソース内の
タグ内にviewport(ビューポート)タグを設置すれば、自動で画面に合わせた表示がされますよ。試してみてください!アドタイムスタッフ
ユーザービリティ改善方法④|ナビゲーションメニューを工夫してみる
ナビゲーションメニューがスマホでも違和感なく見られるよう工夫してみましょう。ナビゲーションメニューのスムーズな表示は、ユーザービリティの向上にも繋がります。プルダウンを使って不要な表示を消すなど、見やすい画面を心がけましょう。
アドタイムスタッフ
モバイルフレンドリーで重要なポイント⑤|Flashを使用しない
Flashは画像に動きや音をつけたりする機能です。パソコンで違和感なく使われているFlashですが、モバイルフレンドリーには不適切です。
何故ならFlashはスマホに対応していないため。Flashを見るためには、アプリのダウンロードが必要です。
わざわざダウンロードまでした見る人もいないでしょう。あまりユーザーフレンドリーとはいえませんね。Flashは今後需要が減るともいわれています。思い切って省くのもよいでしょう。
モバイルフレンドリーで重要なポイント⑥|インタースティシャル広告を利用しない
インタースティシャル広告は画面に被るようにして表示される広告を指します。スプラッシュページとも呼ばれていますね。
「コンテンツを読む」「このページをスキップ」などと表示されており、「閉じるボタン」を押さない限り、勝手に消えることもありません。
インタースティシャル広告は時にユーザーの閲覧を邪魔する可能性があります。そのため使用しているとモバイルフレンドリーとはみなされません。即座に外すことをおすすめします。
モバイルフレンドリーで重要なポイント⑦|縦スクロールだけで画面が見えるようにする
スマホは基本的に縦スクロールで操作します。そのため横スクロールはあまり効率的とはいえません。モバイルフレンドリーを目指すなら、縦スクロールのみで全てのコンテンツを閲覧できるようにしましょう。
例えば画面の横幅が超えている場合や、文字が長いコンテンツは、横スクロールが起こりやすい状況です。サイトはモバイルで見た時に状況も考慮し、スマホ画面に収まるよう構築しましょう。
モバイルフレンドリーをはじめとするネット対策に困ったら、アドタイムへご相談ください。
- モバイルフレンドリーって具体的に何をすればいいの?
- SEO対策っていまいち分かりづらいんだよな…
などサイト運営に関する悩みはありませんか。サイトを上位表示させるには、様々な施策が必要です。最近ではSEOだけでなく、MEO対策やモバイルフレンドリーなど考えることがたくさん!全てを自分で対応するとなると、骨が折れてしまいますよね。
もしWEB対策やWEB集客の方法に悩んだら、実績豊富なアドタイムへご相談ください。当社にはディレクターをはじめ、コーダーやマーケターなどサイト運営に必要なエキスパートが揃っています。
お客様のWEBに関する悩みを丁寧にお聞きし、ぴったりの方針をご提案させて頂きます。専門チームでお客様のフルサポートを行いますので、ご安心ください。
お客様一人一人との関係をコツコツと築いてきた結果、ご依頼頂くお客様の92%はリピーターという信頼を勝ち取りました。お客様から「○○さんにアドタイムを紹介された」とお問い合わせ頂くことが、私たちの励みになります。
当社ではお見積りやご相談は一切無料。もちろんお見積り後のキャンセル料もかかりません。お客様にぴったりの方向性やプランをご提案し、「頼んで良かった」と思って頂ける仕事を約束します。WEB旧客に悩んだら、お気軽にお問い合わせください。