WEBページ制作

モバイルフレンドリーSEO対策 iOSとAndroid最適化の違い

制作チームです!

『モバイルフレンドリー』って言葉をご存じですか?

それは、スマートフォンでホームページを見た時に、モバイル仕様で快適に見れているという事です。

以下、モバイルフレンドリーでやってはいけない代表的な事です。

・フラッシュの使用
・非モバイル最適化のデザイン
・ページ読み込みの遅さ
・ポップアップ広告や過剰な広告
・非対応のフォントの使用
・小さすぎるタップ領域

見た感じで何となく分かると思いますが、モバイル版に適していないホームページはモバイルフレンドリーではないという事になります。

上記も含めて、かなり多くあるモバイルフレンドリーではないホームページが

【レスポンシブ化されていないホームページ】です!

『モバイルフレンドリー=レスポンシブ化』だと考えてもいいと思います。

何故、モバイルフレンドリーが重要かという点ですが、

モバイルフレンドリーではないホームページはSEO上位表示できない!

Googleが言っている事なので間違いないのです。

ホームページの多くがHTMLと言われているもので作られています。
HTMLだけでは、骨組みだけの不格好なデザインのサイトになってしまいます。

そこにCSSというデザインを作るうえで必要なスタイルシート言語を使います。
CSSを使う事で、PC版ホームページデザインとスマホ版ホームページデザインを作り分けられる事ができます。

よく使われる方法としては、横幅がある一定の幅になるとホームページデザインがスマホ版になる方法です。

スマホ版の横幅はPC版よりも狭い為、スマホ版になる位の横幅になると、CSSでデザインを切り替えているという事です。

しかし、このCSSにスマートフォン最適化の落とし穴があります!

凄く簡単に言ってしまうと、iPhoneでは機能しないCSSがあったり、横幅が広いAndroidだと不格好に見えてしまうようなCSSを書いている場合があります。

iOSとAndroid、各々で自分のホームページを確認した事が無い方は必見です!

まず、iOSとAndroid全ての機種で、横幅や縦幅が違います。
テキストの折り返し位置や枠の幅など、様々なものが全く違います。

そもそも機種の横幅・縦幅は違うのですから、それは仕方が無いのです。

実は機種だけでなく、iOSとAndroidでは微妙に見え方も違います。
これはiOSおよびAndroidのデフォルトブラウザが違う事も原因の一つです。

【iOS】→Safari
【Android】→Android 5.0以降 Chrome

一般の方であれば、ブラウザは殆どが上記デフォルトブラウザです。

この「Safari」と「Chrome」が問題を起こしています。

同じHTMLとCSSでもボタンの形が違ったり、非表示であったり、アニメーションしていなかったり、問題が発生しているケースがあります。

ボタンを押しても動作しないホームページなども稀にあります。(※HTMLとCSSの問題ではない場合もあります)

モバイルフレンドリーを重要視しているWebデザイナーであればしっかり対応していると思いますが、問題がある可能性もあります。

自分のホームページをiOSとAndroid両方でチェックする事をお勧めします。

日本国内でメイン利用しているスマートフォンOSは、iOSとAndroidが同じ位の割合だと言われています。
年齢層では、iOSは10代・20代が多く、Androidは60代が多いというデータもあるようです。

PC版ばかり見られがちなホームページですが、8割以上の検索ユーザーはスマホユーザーだと考えて下さい。

特に集客導線につながるボタンやページ周りは重点的にチェックした方が良いでしょう。