スマホでも、タブレットでも。
レスポンシブデザイン…それは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もモバイル検索を一番にする考えを打ち出しました。
これが、モバイルファーストインデックスです。
このページのまとめ
- モバイル対応は、今や非常に重要な措置であり、必要不可欠である。
- パソコン用ホームページはスマートフォンでは見づらく、操作もしづらい。
- スマートフォン対応したホームページは操作しやすく、SEOの恩恵も受けやすい。