第23回SEO女子コラム「モバイルフレンドリーとは？」

モバイルフレンドリーとはなんですか？

担当者：おかもっさん

モバイルフレンドリーは、スマホなどのモバイル端末で表示した時にレイアウトなどが最適化されるサイトを言います。
よくレスポンシブデザイン（端末によってレイアウトが変わるけどURLは変わらないサイト）や、スマホ専用のサイトへ転送されているサイトがありますよね。
ああいったサイトはどちらもモバイル対応されています。とはいえ、ここでいう「モバイル」はスマホを指しますので、フューチャーフォン、いわゆる「ガラケー」向けサイトに関しては今回のモバイルフレンドリーには含まないことにします。(すみません！)

別にモバイル対応していなくてもサイトを見れたら大丈夫では？と思う方もいるかもしれません…が、正直大丈夫ではありません。
モバイル対応されていないサイトの不便さはおそらく実際にアクセスしないとわからないと思います。
というわけでパソコンサイトをスマホで閲覧してみました。
（今回は例として価格ドットコムさんにします。※本当はちゃんとモバイル対応されていますよ！）

リンクをタップしようとしても間違えて違う所を押しそうですし、文字も小さくて見づらいですよね？
このようにモバイル対応していないと様々な問題が発生します。
よく発生する問題とは下記の通りです

• スマホなどの端末ではフォントが見づらく、拡大する必要がある
• メニューボタンが小さく目的の箇所にタップしづらい
• 横スクロールも発生して読みづらい
• 画像サイズが大きすぎて見づらい
• Flashなど表示されないファイルがある

等など…
モバイルフレンドリーではないサイトだと、サイト閲覧に苦労しユーザーにとって大きなストレスがかかる可能性があります。
ユーザーがイライラするマイナスな状況を避ける為にサイトをモバイル対応させると、このようにユーザーの評価は変わります。

見に行きたいページへのリンクがタップしやすくユーザーはスムーズにサイトを閲覧する事ができます。
モバイル対応させることでユーザーのサイトに対する満足度も上がり、サイト閲覧の回数も増え、評価の向上にも繋がるのです。（いいこと尽くめですね）

スマホの普及が進み、スマホでネットを使用することが多くなりました。
同時に検索エンジン側もどの端末でもユーザーが快適にサイトを閲覧出来るよう対策されているサイトを評価するようになりました。
どうやら2015年4月半ばから検索エンジンはサイトがモバイル対応しているかどうかを検索結果のランキング要素として使用し始めていたようです。
そこで今あえて、モバイル対応がランキングの決定要素になったのは何故かを考えてみました。
モバイル対応しているサイトの方がスマホユーザーに評価される為なのはもちろんだと思うのですが、
この状況を違う目線で見てみるとWEBサイト全体に向けてモバイル対応への最適化を勧めるように促しているとも取れます。
私達が気づかない内に検索エンジンは時代に即した対応をどんどん進めていっているんですね。

気になる検索順位ですが、実際にサイトをモバイルフレンドリーにしたことでSEO的にも効果があったとのこと。
条件としてはパソコン向けのSEO対策が徹底された前提のサイトということですが、これもSEO対策という項目で見ると大きな変化ですよね。
さらにモバイルの検索順位はパソコンサイトのSEOが徹底されている＋モバイルフレンドリーできているかによって変わってくるといわれています。
モバイル端末で検索するユーザーも考慮してSEO対策をするならなおさらモバイルフレンドリーが必須になるんです。
SEO対策でも効果的かもしれないモバイルフレンドリーをぜひ検討してみてくださいね。

モバイルフレンドリーになるために

担当者：つじさん

Googleがスマホに対応しているサイトだと認識をするためには、いくつかの項目をクリアしていないといけません。どれもスマホからページを見た際に綺麗に、そして使いやすく見えているかというのが基本的な考えですが、人によって見え方や感じ方は違いますよね。
そこを統一するために、Googleは一定の項目を定めています。

では、うちのサイトはモバイルフレンドリーなの？という疑問は、Googleが提供しているモバイルフレンドリーテストや、Search Consoleを使うことで解決します。
もしGoogleが定めた条件をクリアをしていなければこれらのテストやレポートにエラーが返されるはずです。

項目は全部で7つです。

• Flashが使用されていないか
• ビューポートが設定されているか
• ビューポートが固定幅に設定されていないか
• コンテンツサイズがビューポートに対応しているか
• フォントのサイズは読みづらくないか
• リンク(タップ要素)は押しやすいか
• インタースティシャルを使用していないか

よくよく見ると、おかもっさんがあげていた「スマホサイトで起きがちな問題」と同じですよね。このような問題を解決させることが出来れば、自然とモバイルフレンドリーテストにも合格をするはずです。
では、それぞれがどのような内容であるか、1つずつ確認してみましょう！

ほとんどのモバイル端末ではFlashが表示されません。パソコンでは再生されるFlashがスマホでは再生されないことが殆どなのです。そうなってしまうと、Flash内に書き込まれているコンテンツをスマホユーザーは見えない事になります。
これでは何が書いてあるか読めませんよね？そんな問題を回避するために、なるべくFlashを使用しないでサイトを作成することを推奨します。
最近はCSSなどでもある程度のアニメーションを付加できますし、最新技術を駆使すればFlashを使わないアニメーションは簡単に作れます。

一概にスマホ、パソコンといってもサイトを見に来る人の端末は山程種類が豊富です。となると、もちろん画面のサイズも違います。スマホの画面は大きいとはいえパソコンのモニターには敵いませんし、なんならタブレットから見ている人なんてスマホよりもっと大きな画面を見ています。
それなのに、スマホで見ている人とタブレットで見ている人に同じ大きさのコンテンツを見せるのはどうでしょうか？やっぱりそれぞれの端末でぴったりサイズのコンテンツにしたいですよね。
そんな時に使うのが「meta viewportタグ」です。
meta viewportタグは端末の画面サイズに合わせてコンテンツの幅やサイズを調節してくれるという優れものタグになります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これがmeta viewportタグ。このタグを使用することで、デバイスの幅に合わせてコンテンツの幅を調節することが出来ます。

上で説明したビューポートタグですが、実は特定の幅を設定することが出来ます。しかし、この幅を設定してしまうとそれ以外の大きさの端末ではレイアウトやデザインが崩れてしまう、もしくは見えなくなってしまったりと色々問題が起こりやすくなります。
様々なデバイスの幅に対応するために、幅は固定しないようにしておきましょう。

せっかくビューポートを設置してデバイスごとの幅に合わせても、そもそもコンテンツに特定の幅を指定してしまっていたら意味がありません。
例えば画像。CSSなどで幅を固定していると、それより小さい画面で見た時にビューポートが反映されず、横スクロールが発生してしまいます。スマホを見ているときは縦にスクロースをするのに抵抗はありませんが、横にスクロールってあまり使いませんよね。コンテンツは横スクロールが発生しないように、指定や調整をする必要があります。

スマホのように小さい画面からサイトを見る時に一番気になるのは文字のサイズではないでしょうか？パソコンから見ているときは気にならない文字のサイズでも、スマホから見るととっっっても小さいのです。人間の目は確かに高機能ですが、さすがにドットレベルの文字は読み取れません。かといって毎回読むために拡大するのも面倒です。
そこで、スマホサイトは文字のサイズに気を付けましょう。拡大をしなくても読めるサイズにはしておきたいですね。
とあるサイトの調査によると、11px辺りからがGoogleの許容範囲のようです。

画像赤枠部分が11pxです。確かに読めなくはないですね。ただやっぱりちょっと体感的には小さいでしょうか…？

スマホはほとんどの人が指先で操作をします。スマホ用のペンもありますが、持っていない人は指で操作しますよね。サイトももちろん指でスクロールやタップをします。
サイトのリンクも指先で触れて飛んで行くので、そのリンク同士が近かったらマウスのカーソルと違って尖っていない指先はどちらを押したのかわからなくなってしまいます。
隣のリンクを押したかったのに！とイライラしてしまうかもしれません。それを防ぐために、リンク同士は指で押しやすい大きさで、隣同士も余裕を持って設置します。

インタースティシャルとは、画面を開くと全て覆うようにポップアップが出てくるアレです。

これです。(※当サイトは専用アプリなんてありませんので捏造画面です。あしからず？)
殆どがアプリの宣伝を行うための広告ですが、これって案外鬱陶しくないですか？
「私が欲しいのはアプリじゃなくてサイト！中身を読みたいの！」って思いますよね。いちいち閉じるボタンを探して閉じないとサイトの中身が見えませんし、これでは嫌になってしまってサイトから離れていってしまうかもしれません。
モバイルアプリはもっと別の方法で宣伝することが出来ます。画面を覆い隠すような方法ではなく、検索結果などに表示させる方法を検討しましょう。