４つのモバイルフレンドリー対応策、一番ベストな方法はどれ？

  • 投稿日
  • 更新日
  • 著者 アバター画像 kigoulab
  • カテゴリー Web制作

少し前のことですが、Googleから「お宅のウェブサイトがモバイルフレンドリーの対応していないので、対応させてください」というようなメールが来なかったでしょうか？　これからはモバイルを重視して、モバイルに対応していないサイトの検索ランキングを下げるともとれるような内容でしたので、SEO的にも「これは困った」と思った方もいらっしゃったと思います。

Googleが推奨する３つのモバイル対応方法

Googleが推奨するモバイル対応方法は次の３つです。それぞれにメリット、デメリットがあります。

  1. レスポンシブウェブデザイン
  2. 動的な配信
  3. 別々のURL

Googleはそれぞれの方法をとったからといって、検索ランキングを差別することはないといっていますが、１番のレスポンシブ・デザインを強く推奨しています。それはなぜでしょう。それぞれについて解説していきましょう。

１.レスポンシブウェブデザイン（RWD)

ひとつのHTMLに対して、CSS側にウインドウサイズを記述することによって、画面サイズに適切な画面を配信する方法です。URLがパソコン、スマホで同一で、HTMLも同じものを配信できることが特徴です。GoogleはURLが同一ということでクローリングの負担が少なくなるので、レスポンシブウェブデザインを推奨していると考えられます。

運用側も、パソコン、スマホと個別に管理する手間がなく、リダイレクト等もないのでページの読み込み速度（これもSEOに大きな影響があります）を短縮することができるので、理想的な方法といえます。

デメリットとしては、パソコン、スマホで同一HTMLを使うため、画面毎のレイアウトの変化を厳密に設計する必要があり、導入に少々手間がかかります。新規にサイトをリニューアルするときであれば、RWDを前提にデザインすればよいですが、既存サイトに導入するのはかなり難しいでしょう。

2. 動的な配信

アクセスしてきたデバイスのエージェント情報を読み取り、それぞれに対応したHTML/CSSを配信する方法です。URLがパソコン・スマホで変わることはないですが、HTML/CSSは個別に作成する必要があります。パソコン、スマホそれぞれ個別のコンテンツを見せたい場合などにも向いています。PowerCMSのDynamicMTMLを使った方法が有名ですね。

デメリットとして、どうしてもシステム依存の方法なので、その実装にコストがかかります。CMSなどの導入は必須だと思います。

3. 別々のURL

スマホサイトと、パソコンサイトを、別のサイトとして運用する方法です。パソコンサイトのコンテンツに左右されることなく、スマホのサイトを構築することができます。スマホユーザーだけにプレミアムなコンテンツを提供したい場合とかにも良いですね。

デメリットとして、パソコン、スマホとURLが複数できるということ、２つのコンテンツを管理していかないといけない点があります。

4. 別々のディレクトリー＋.htaccessでURL書き換え

あれ、Googleは3つの方法を推奨していたんじゃなかったでしたっけ。そうなんですが、実はもうひとつ方法があります。当サイトがとっている方法です。パソコンはそのまま、スマホは/spディクトリーを新たに作成、コンテンツを出力します。CMSでコンテンツは管理しているのでスマホのためにコンテンツを別に管理する必要がありません。

その上で.htaccessファイルに以下の記述を追加し、スマホでアクセスしてきたユーザーを/sp以下のコンテンツを閲覧するように振り分けるわけです。そのためURLはパソコン、スマホで同一のものになります。

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPad|iPhone|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase / 

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPad|iPhone|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

CMSを使っていれば、スマホ用に/spディレクトリーに出力するテンプレートを新たに追加するだけですみますので、すでに運用中のサイトを大きくかえることなく、小規模な改修だけで対応できるのがポイントです。

デメリットもあります。記事本文中の画像のアップロード先がパソコン用のディレクトリーになるため、スマホ側から参照出来ず（すべて/spがついたURLと認識するため）/sp以下の画像ディレクトリーにFTPでアップロードしなくてはいけなくなっています。運用でカバーとはいえ、結構どんくさい仕様です。急場しのぎのモバイルフレンドリー対応だったので仕方ないです。新規にリニューアルするときには使えませんね。

以上、３つでなく４つの方法を解説してみましたが、いかがでしたでしょうか？　既存サイトを暫定的に対応させるなら、４番の方法が、リニューアルを機にモバイルフレンドリーに対応させようというのであれば、レスポンシブウェブデザインが選択肢の最初になるのかなと思います。

Googleは、モバイル検索を、パソコン向けの検索と分離すると最近発表しました。サイトによってはモバイルからのアクセス数が40％を越しているというところもあるとか、このサイトも日によってはモバイルからの閲覧のほうが多い日もあります。モバイル対応は待ったなしです。各方法のメリット、デメリットを把握して対応しましょう。

（担当：小山智久）