レスポンシブデザイン、それはPC、タブレット、スマートフォンなど、異なる画面サイズの端末での閲覧に対応できるようにレイアウト・デザインを調整することを言います。

それでは、なぜこのような対策が必要なのでしょう。

SEO的にも効果が!

Googleは、2015年4月に「モバイルフレンドリー」、翌2016年11月には「モバイルファーストインデックス」が検索順位に影響を与えることを発表しております。

簡単に説明すると、モバイルフレンドリーとは、モバイル端末での表示に最適化されているかどうか。モバイルファーストインデックスは、検索順位にかかわるホームページの基準を従来のPC用からモバイル用に変更する。といったところでしょうか。

クオリティWebデザインが制作するホームページは両方の基準をクリアします。モバイル対応されていない方は、この機会にぜひご検討ください。

また、同社は2015年5月に「Google検索で、モバイル端末からの検索がPCを上回った」とも発表。

ホームページのモバイル対応はいまや必要不可欠と言えます。

PCでこのホームページをご覧になっている方はブラウザの幅の変更を、スマートフォンの方は、縦横表示を変えてみてください。あらゆる画面サイズに対応していることがお分かりいただけるはずです。

レスポンシブデザイン

レスポンシブ対応済みと未対応との違い

まずはモバイル端末用に最適化されているホームページとされていないホームページを比べてみます。以下の画像はそれぞれのホームページをスマートフォンで表示したときの違いです。

画面のサイズ

レスポンシブ未対応ホームページ(画面のサイズ)

レスポンシブ未対応

レスポンシブ対応済みホームページ(画面のサイズ)

レスポンシブ対応済み

いうまでもなくPCとスマートフォンでは文字の大きさが違います。

実際には画面の大きさだけではなく、解像度と呼ばれる画面の細かさも関係してきますので一概には言えませんが、パッと見、ここまで違います。

リンクボタン

レスポンシブ未対応ホームページ(リンクボタン)

レスポンシブ未対応

レスポンシブ対応済みホームページ(リンクボタン)

レスポンシブ対応済み

スマートフォンで、PCのクリックにあたるのが「タップ」という動作です。タップは指で行うことになりますので小さく表示されたPC用ホームページだと当然押しにくくなります。

Flashが表示できない!

モバイル端末では基本的にFlashが表示できません。モバイル対応するにはPCではFlash、モバイル端末ではJavascriptを使うなどして表示方法を変えるか、レスポンシブスライドショーを使いどちらの端末でも同様に表示させるようにするなど対策が必要です。

SEOの観点からみても不利!

レスポンシブ未対応ホームページ(モバイルフレンドリー)

レスポンシブ未対応

レスポンシブ対応済みホームページ(モバイルフレンドリー)

レスポンシブ対応済み

前段申し上げましたが、Googleが発表をしたモバイルフレンドリー、モバイルファーストインデックス。
スマートフォン用に最適化されたサイトがモバイル端末からの検索結果で優遇されやすくなるようにするものです。

対応しているホームページが優遇されるということは、対応していないホームページは評価を落とすということになります。

Googleが提供するサービス「モバイルフレンドリーテスト」でチェックすると、スマートフォン対応か、未対応か調べることができます。

Googleが打ち出した2つの施策

モバイルフレンドリー

モバイルフレンドリーとは、ホームページをモバイル端末での表示に最適化すること言い、拡大しなくても読みやすい文字の大きさで横スクロールの必要もなく、リンクボタンがタップしやすいなどいくつかの条件を満たしている必要があります。

モバイルファーストインデックス

従来、Googleのホームページ巡回(クロール)はPC用ホームページを基準にしていました。
そのため検索順位のランク付けは、モバイル端末から検索された場合でもPC用のホームページのインデックスを基準にランク付けがされていました。

しかし、近年ではモバイル端末からの検索が急増しており、Googleもモバイル検索を一番にする考えを打ち出しました。
これが、モバイルファーストインデックスです。