対応事例
「モバイルフレンドリー」になろう
「モバイルフレンドリー」とは？
この場合の「モバイル」とは、AndroidやiPhoneなどのスマートフォンを指し、フィーチャーフォン（いわゆる”ガラケー”）は含まれません。
つまり、「モバイルフレンドリー」とは一言で言えば「スマートフォンでの閲覧に最適化している」サイトということになります。
もちろん、スマートフォンでもPCサイトを「見ること」は出来ますが、
「フレンドリー」と言うからには「モバイルでも見やすい」サイトでなくてはなりません。
- コンテンツの幅が画面の幅を超えていませんか？
- スマートフォンで見た時に文字が小さ過ぎたりしませんか？
- リンク同士が近すぎてタップし辛くなっていませんか？
モバイルフレンドリーかどうかはGoogleが提供している「モバイル フレンドリー テスト」で簡単に調べることが出来ます。
「見ることができる」だけではなく「見やすい」サイトへ。
それがモバイルフレンドリーです。
どうして今、「モバイルフレンドリー」？
Googleは、2015年4月21日より「ウェブサイトがモバイルフレンドリーかどうかをランキング要素として使用し始める」と発表しました。
そのため、「モバイルでの検索結果」では「モバイルフレンドリーではない」サイトが表示されづらくなる可能性が出てきました。
参考：Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに
この変更は「モバイルでの検索結果」への適応との見方が一般的ですが、「モバイルフレンドリー」に対応することは、検索順位のためだけではありません。
MDSが運営しているサイトの中には、スマートフォンからの訪問者数が全アクセスの70％を超えるサイトもあります。
にもかかわらず「モバイルフレンドリー」に対応しないでいるということは、お客様の70％に見辛い思いをさせているということにほかなりません。
また、今回のGoogleの発表で、競合他社はスマートフォンへの対応を始めていませんか？もしもライバル達が着々とモバイルフレンドリー化を進め、貴方のサイトだけが取り残されていたとしたら……例えGoogleの検索結果表示に変化が無かったとしても、スマホで閲覧しているお客様は他社のサイトを選ぶでしょう。
どうしたら「モバイルフレンドリー」なサイトになるか
PC用サイト・スマートフォン用サイトに振り分ける
以前よりあるオーソドックスな対応方法で、スマートフォン専用のページを作成することから「見やすさ」や、スマートフォンには違う内容を表示させたい場合においてはとても有効です。
- 既にPC用サイトがある場合、内容を変更すること無くスマートフォンサイトだけを追加することが出来る
- PC用サイト＋スマートフォンサイトを制作する必要がある
- PC用ページとスマートフォン用ページが別個のため、それぞれに更新する必要がある
- Googlebotがスマートフォンサイト用URLを正しく収集できないとモバイルフレンドリーと判定されないことがある
なお、EC-CUBE等では、予めデバイスごとの振り分け機能と、ページ作成画面があるため、特別な対応をしなくても自動でスマートフォンサイトが持てるという利点もあります。
レスポンシブデザインで対応する
最近の主流と言えばこちら。基本的には１つのHTMLに対してCSSを切り替えることで画面の大きさに合わせたレイアウトで表示させる方法です。
- １ソース（PC/スマートフォン共通のソース）で済ませるため制作ページ数を抑えられる
- １ソースのため一度にPC・スマートフォン両方の更新が出来る
- 既存サイトのリニューアルの場合は大幅な変更が必要になることがある
- PC表示と画像等を共有することがあるため画像サイズに注意が必要
- EC-CUBE等の自動切替が備わったものを利用している場合は特殊な対応が必要
レスポンシブデザインの最大の利点は１枚のHTMLだからPCサイトもスマホサイトも一度の作業で同時に更新できること。 その一方で、テーブルタグでレイアウトを組んだ古いサイトなど、レスポンシブ対応を行なうには全面的なリニューアルが必要になる場合もあります。
MDSでの制作事例を２例ご紹介させて頂きましたが、ご覧の通り、どちらの方法をとってもお客様から見れば変わりません。大切なことは、閲覧者にとって見やすいサイトかどうか。必要な情報をスムーズに得られるかどうかです。
「モバイルフレンドリー」であることは、そのために必要になのだと考えています。
「モバイルフレンドリー」のご相談はお気軽にどうぞ。