こんな方に読んで欲しい！
- モバイルフレンドリーについて知りたい！
- モバイルフレンドリー対応の方法を知りたい！
- 自分の管理するWebサイトが、モバイルフレンドリーかどうか確認したい！
日本において、検索エンジンは Google がトップシェアです。
実は、Yahoo!の検索エンジンもGoogleのアルゴリズムを採用していて、そのシェアは合わせて約92％もあります。
つまり、
Googleの推奨を無視してWebサイトを構築すると
↓
検索の上位に表示されにくくなり
↓
少なくとも92％のユーザーを失う可能性があるということ
です。
日本で検索結果からの流入を求めるのであれば、Googleの推奨に合わせてWebサイトを構築しましょう。
今回は、2015年4月にGoogleが導入した「モバイルフレンドリー」について、徹底解説します！
1. モバイルフレンドリーとは何か
「モバイルフレンドリー」とは、Webサイトをスマホやタブレットに対応させ、快適に閲覧することができる状態のことを指します。
Googleは、ウェブマスター向け公式ブログの中で、次のように書いています。
どんな端末を使用していても、的確で関連性の高い検索結果が表示されるべきだ、と Google は考えています。（中略）
そこで、Google では昨年（2015年 ※ライター追記）より、サイトがモバイル フレンドリーかどうかをモバイル検索でのランキング要素の一つとして使用し始めました。この 5 月からは、当該ランキング要素の効果を高めるアルゴリズムのアップデートを段階的におこなっていきます。このアップデートにより、モバイルでも見やすいページが検索結果でさらに多く表示されるようになります。
パソコン用しか準備されていないWebサイトを見た時、字や画像が小さくて、拡大して見た経験はありませんか？
これは「モバイルフレンドリー化されてないWebサイト」ということになります。
検索順位は下がる（モバイルフレンドリー化されているWebサイトが上がるので、相対的に下がる）と考えられます。
1-1. モバイルフレンドリーは2015年にスタート
モバイルフレンドリーは、2015年4月21日のアルゴリズムアップロードで実装されました。
「モバイルフレンドリーアップデート」とも呼ばれます。
実装以降、「Webサイトがスマホに適しているかどうか」が検索順位に反映されるようになりました。
変更点をいくつか挙げると、
- パソコンで検索した場合も、スマホで検索した場合も、検索結果は同じ
⇒ パソコンで検索しても、「Webサイトがスマホに適しているかどうか」が検索順位に反映される - スマホやタブレットでの閲覧に適していないページは、検索結果の順位が下がる
- Webサイトごとではなく、Webページごと
- 全世界、全言語で実施
となっています。
1-2. モバイルフレンドリーはなぜ実装されたのか
総務省の「通信利用動向調査（令和元年）」によると、個人のインターネット機器利用の割合は、
- 1位 スマートフォン 63.3％
- 2位 PC 50.4％
でした。
スマホがPCを上回ったんです。
ユーザーファーストを謳うGoogleが、これをスルーするはずがありません。
言わずもがな、スマホやタブレットが急速に普及したことに、Googleが対応したものです。
検索上位を狙うためには、インターネット利用がPCよりもスマートフォンの方が多い現状を踏まえたWeb作成を行っていく必要があります。
2. モバイルフレンドリーに対応する方法
スマホはパソコンよりもディスプレイが小さく、基本的な操作が「指」で行われることを考慮する必要があります。
モバイルフレンドリー、つまりスマホでの表示にも最適化しつつ、パソコンでの表示にも対応する方法は、実は３つあります。
それぞれの実装パターンにより、モバイルフレンドリーへの対策方法がことなるため予めそれぞれのモバイルフレンドリーの関係性・必要な要件を理解しておきましょう。
2-1. レスポンシブWebデザイン
あなたがこれから、自分のブログやWebサイトをWordPressで立ち上げようとしているのであれば、レスポンシブWebデザインを採用しているWordPressテーマを選んでください。
他の方法は選ぶ必要はありません。それだけポピュラーで、選ばれている対応方法です。
◆レスポンシブWebデザインの特徴
- HTMLは共通で、PCとスマホなど個別に対応する必要がないこと
- CSSファイルを変更するだけでOK
→見ているデバイス（機器）の画面の幅によりデザインを変更します - 多くのWebサイトが採用している方法なので、WordPressテーマでも実装済みのものが多い
- 多くのWebサイトが採用している方法なので、インターネット上に情報が多い
- 複雑なWebサイトは、「ダイナミックサービングタイプ」「セパレートタイプ」で対応する必要がある
2-2. ダイナミックサービング
レスポンシブWebデザインで対応できない複雑なWebサイトをモバイルフレンドリー化するために使う手法の１つ。
これからブログやWebサイトを構築する人は、選ばなくてよい手法です。
◆ダイナミックサービングの特徴
- HTMLとCSSの両方が対象だが、ファイルは１つずつ ＝ URLは共通
- 画面の幅により表示を仕分ける内容の記述をする
- 例えば、表示される画像の変更、コンテンツ（記事）自体の変更など
- 表示条件が複雑になるため、ファイルの中身（コード）も複雑になりがち
2-3. セパレート
ダイナミックサービングは１つのファイルで表示し分けようとするため、表示条件が複雑になり、ファイルの中身（コード）も複雑になりがちです。
これを解消するのが「セパレート」です。
ただ、これからブログやWebサイトを構築する人は、やはり選ばなくてよい手法です。
◆セパレートの特徴
- HTMLとCSSの両方を、パソコン用とスマホ（タブレット）用で分ける
- コンテンツとデザインを別々に管理できるため、ファイルの中身（コード）は比較的シンプル
- ただし、HTMLが２つ存在する ＝ URLは別となる
- 修正を加える場合、パソコン用とスマホ用の両方を直す必要がある
- 実装する場合、「.htaccess」ファイルに追記する必要がある
2-4. 結局、どれにすれば良いのか
モバイルフレンドリー化するための手法を３つ紹介しました。
Googleが推奨しているのは③のレスポンシブWebデザインです。
ページやファイルが1つだけでいいので作成・更新のミスや手間の削減に繋がります。
URLが1つであることもSEO対策のメリットがあります。
ただし、レスポンシブWebデザインには注意点があります。
- スマートフォン優位になるのでPC閲覧時を想定した細やかな調整は難しい。
- コンテンツが重いと読み込みが遅い。
Webデザイナーを目指すのであれば気を付けたいところですが、これからブログやWebサイトを運営するのであれば、あまり気にしなくて大丈夫です。
3. モバイルフレンドリーのテストツールで確認
作成したWebサイトがモバイルフレンドリーに対応しているか、簡単に無料で確認ができます！
3-1. テストツールの使い方
Googleの「モバイルフレンドリーテスト」にアクセスし、URLやタグを入力すると60秒程度で結果が出ます。
[blogcard url=”https://search.google.com/test/mobile-friendly?hl=JA”]
モバイルフレンドリーではない場合、その理由も表示されるので対応しましょう。
チェックはWebサイト全体ではなく、ページごとです。
3-2. テストツールの判断要素
Googleのテストツールの判断要素は４つあります。
- フォントサイズが小さすぎないか
- モバイル用ビューポートが設定されているか
- タップ要素同士が近すぎないか
- コンテンツサイズが画面の幅を超えていないか
これらを満たしていれば、モバイルフレンドリー非対応を理由に検索順位が下がることはありません。
3-3. 「モバイルフレンドリーではありません」となった場合
テスト結果が「モバイルフレンドリーではありません」と表示された場合、下部に理由が表示されるので、それに沿った対応をします。
修正のアドバイスが受けられるフローチャートも表示されているので必要に応じて活用しましょう。
ここがポイント！
「モバイルフレンドリーではありません」と表示されても、修正してモバイルフレンドリー化をすればOKです。
4. まとめ
モバイルフレンドリーについて解説しました。
ここまで読んでいただきましたが、実はあなたが対応する必要はありません。
ビューポイントの設定とか、レスポンシブWebデザインを導入するとか、そんなことできませんよね。
これを読んでいるあなたがやるべきは、
✕ １からWebサイトをデザインすること
○ ブログやWebサイトを運営すること
のはずです。
WordPressのテーマにはモバイルフレンドリー化されたテーマがたくさんあります。
難しい技術的なことはテーマに任せて、「ブログやWebサイトの中身」に注力しましょう！
モバイルフレンドリー化、SEOに強いWordPressのテーマは、こちらの記事で解説しています。
[blogcard url=”https://iblab.net/wordpress-theme-top10/”]