Googleに評価されるモバイルフレンドリーなサイトの作り方|WordPressで実現する完全ガイド

2年前、Googleは検索結果に「モバイルフレンドリー」であることを示すラベルを表示するようになりました。以来、軽量でモバイル対応のウェブサイトが検索結果で優位に立つ状況が続いています。さらに最近では、モバイル端末における強引な広告へのペナルティも導入され、そしてついに「モバイルファーストインデックス」という次の段階へと踏み出しました。モバイルファーストインデックスとは、スマートフォン向けページを基準として検索順位を決定する仕組みです。これにより、モバイルフレンドリーなウェブサイトはかつてないほど検索結果で有利になります。今こそ、モバイル対応サイトづくりの重要性が最高潮に達しているといえるでしょう。

本記事では、自分のサイトがモバイルフレンドリーかどうかを確認する方法と、WordPressサイトをモバイル対応にするための具体的な手順を解説します。

モバイルフレンドリーなサイトの条件とは?

2015年4月、Googleはモバイルフレンドリーなウェブサイトを検索結果で優遇する方針を打ち出し、Webデザイン業界に大きな転換をもたらしました。当時のGoogleにとって、モバイル非対応のサイトは「ユーザーの検索意図に基づいた、素早く正確でアクセスしやすい情報を提供する」という最重要目標の妨げとなっていたのです。

では、2015年にGoogleが排除しようとした問題とは具体的にどのようなものだったのでしょうか?

• 読みにくい文字サイズ:拡大縮小に対応していないサイトでは、ユーザーは段落を読み進めるために左右にスワイプし続けなければなりません。快適に下方向へスクロールできる状態とは程遠い体験です。
• プラグインへの依存:FlashやJavaはセキュリティの脆弱さなどさまざまな理由で衰退しましたが、これもその一因です。HTML5登場以前は、動的なコンテンツ表示にこれらのプラグインが必要でした。しかしHTML5の普及により、プラグインは不要になり、しかもモバイル端末ではサポートされなくなりました。そのため、Googleはこうしたサイトを検索結果で降格させたのです。
• リンク同士の間隔不足:リンク同士の間隔が狭すぎることも問題視されていました。スマートフォンの画面は小さいため、隣接するリンクをタップしようとすると、誤って別のリンクを選んでしまうことがあります。そのため、Googleはリンク間隔を十分に空けているサイトを好みます。
• 表示速度の遅さ:最後に挙げられるのは読み込み時間です。適切に最適化されたサイトは、3G回線のような低速なモバイル回線でも素早く表示されるべきです。

モバイルフレンドリーなサイトを目指すなら、まずこれらのポイントを避けることが大切です。レスポンシブデザインのテーマを使えば可読性の問題は回避できますし、過剰なプラグインの乱用や近接したリンク配置を避ければ、十分に合格ラインに届くはずです。

WordPressでモバイルフレンドリーなサイトを作る

モバイルフレンドリーなサイトを簡単に作る方法のひとつが、WordPressの活用です。WordPressは世界中のブログやニュースサイトで広く使われているプラットフォームで、豊富なカスタムテーマ(テーマ自体のカスタマイズやゼロからの自作も可能)のおかげで、Web制作者にとって今なお有力な選択肢であり続けています。多くのWordPressテーマがモバイルとデスクトップの両レイアウトに対応しており、後ほどおすすめのテーマもご紹介します。

まずは、現在使用中のテーマがモバイルフレンドリーと判定されるかどうかの確認方法と、モバイル閲覧に向けてサイトを改善する方法を見ていきましょう。

あなたのテーマはモバイルフレンドリー?確認方法

WordPressテーマがモバイルフレンドリーかどうかを調べるには、トップページのURLを「Google モバイルフレンドリーテスト」ツールに入力します。

問題なければ、このような結果が表示されます。もし表示されない場合は、WordPressサイトと使用中のテーマを詳しく見直すタイミングです。

ステップ1:WordPress本体とテーマを最新版に更新する

言うまでもないことですが、WordPress本体やテーマの更新を忘れてしまう管理者は少なくありません。WordPressの更新通知は、管理画面内にバナー形式で表示されるのが一般的です。多くの場合、このリンクをクリックするだけで更新プロセスを開始できます。バナーが見当たらない場合は、「ダッシュボード」→「更新」からアクセスしましょう。

テーマを更新するには、「ダッシュボード」→「外観」→「テーマ」と進み、「今すぐ更新」を選択します。ただし更新作業の前に、現在のテーマのバックアップを取っておくことをおすすめします。また、子テーマを設定していない場合、テーマに加えたカスタマイズは更新時に失われてしまうので注意してください。(子テーマとは、親テーマの機能をすべて引き継ぎつつ、安全にカスタマイズを行えるようにするサブテーマのことです。更新のたびに変更内容が消える心配がなくなります。)

更新が完了したら、もう一度テストツールを実行してみましょう。それでも改善しない場合は、次のステップへ進んでください。

ステップ2:問題を診断する

サイトがモバイルフレンドリーでない場合、Googleのツールは問題点を示すヒントをいくつか提示してくれます。よくある指摘は「文字サイズが小さい」と「モバイル用ビューポートの未設定」の2つです。文字が小さいとユーザーは手動でズームインする必要があり、ビューポートが未設定のページはデスクトップ画面のまま表示されてしまいます。WordPressサイトがモバイル対応できていない場合、たいていはこのどちらかが原因です。

その他、読み込み時間の長さや過剰なページ内プラグインが指摘されることもあります。JavaやFlashのようなプラグインに依存した構成は避け、必要な機能はHTML5で実装しましょう。また、画面を大きく占有するポップアップ広告や押し付けがましい広告も問題となります。広告は控えめなものにとどめ、WordPressテーマでポップアップを許可しないようにしましょう。

ステップ3:新しいテーマに切り替える

残念ながら、テーマを更新し、余分なプラグインを取り除いてもなおモバイルフレンドリーにならない場合、できることは限られています。Webデザインの専門知識があれば既存テーマをモバイル対応のカスタムテーマに改造することも可能ですが、そうでなければ新しいテーマを導入するのが現実的な選択肢となるでしょう。

おすすめのモバイルフレンドリーWordPressテーマ

ここで、モバイルフレンドリーに対応したWordPressテーマをいくつかご紹介します。いずれも色やレイアウトを自由にカスタマイズして、ブランドイメージに合わせられるものばかりです。主に無料テーマを中心に、一部有料テーマも含めてご紹介します。

• Lola:ブログサイト向けの優れた無料テーマ。長年Tumblrを使っている人なら懐かしく感じるデザインです。
• Newsmag:雑誌やニュースサイトなど、フォーマルな用途向けの無料テーマ。
• Accelerate:人気の無料WordPressテーマ。柔軟性が高く、特にアートや写真を前面に出したいサイトに向いています。テキスト主体のコンテンツにはやや不向きです。
• Divi:有料のWordPressテーマ。強力なビジュアルエディターを備えており、コードに触れることなく色やレイアウトを変更できます。使いやすさから人気が高く、多様なコンテンツタイプに柔軟に対応できるのも魅力です。
• Uncode:有料のWordPressテーマ。ビジュアルエディターを搭載し、洗練されたモダンなインターフェースが特徴。複数の画面サイズへの画像対応にも優れています。
• Avada:定番人気の有料WordPressテーマ。あらゆる種類のサイトで利用されており、頻繁かつ安定したアップデートが行われている点も安心です。

まとめ

本記事が、WordPressでモバイルフレンドリーなサイトを作るきっかけ、あるいは既存サイトのモバイル対応状況を確認する助けになれば幸いです。おすすめのテーマや、同じ悩みを抱える人へのアドバイスがあれば、ぜひコメント欄で教えてください!