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

制作チームです！

『モバイルフレンドリー』って言葉をご存じですか？
それは、スマートフォンでホームページを見た時に、モバイル仕様で快適に見れているという事です。

モバイルフレンドリーとは？

モバイルフレンドリーとは、スマートフォンやタブレットなどのモバイルデバイスでウェブサイトを閲覧する際に、ユーザーが快適に利用できるように最適化されていることを指します。

これには、画面サイズに自動的に調整されるレスポンシブデザイン、タッチスクリーン操作の最適化、ページ読み込みの速さ、テキストの可読性、ナビゲーションの使いやすさなどが含まれます。モバイルフレンドリーなウェブサイトは、検索エンジンの評価も高くなり、SEO対策としても重要です。

やってはいけないモバイルフレンドリーの例

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

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

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

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

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

レスポンシブ化とは？

レスポンシブ化とは、ウェブページがデバイスの画面サイズに応じてレイアウトを自動的に調整するデザイン手法を指します。これにより、PC、タブレット、スマートフォンなど、どのデバイスからアクセスしても快適に閲覧できるようになります。

モバイルフレンドリーとレスポンシブ化

『モバイルフレンドリー＝レスポンシブ化』だと考えてもいいと思います。
何故、モバイルフレンドリーが重要かという点ですが、

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

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

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

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

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

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

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割以上の検索ユーザーはスマホユーザーだと考えて下さい。

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

まとめ

モバイルフレンドリーなホームページを作成することは、現代のウェブデザインにおいて非常に重要です。スマートフォンの普及に伴い、ホームページがレスポンシブデザインに対応していることが求められます。iOSとAndroidの違いを理解し、各デバイスで適切に表示されるようにCSSを調整することが必須です。ユーザーエクスペリエンスを向上させるために、タップ領域の大きさやページ読み込み速度にも注意しましょう。スマホユーザーをターゲットにした集客戦略が成功の鍵となります。

HMS公式LINE