静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

スマートフォン対応/レスポンシブ対応

    株式会社シーエムエー ホーム >戦略的Webサイト制作 >スマートフォン対応/レスポンシブ対応

モバイルフレンドリー

「モバイルフレンドリー」という言葉をご存知でしょうか。
2015年2月、Googleが「ウェブサイトがモバイル フレンドリーかどうかを検索ランキングとして評価する」と発表しました。この発表は、Google の公式ブログである「Google ウェブマスター向け公式ブログ」上で公開されています。「モバイルフレンドリー」とは、ホームページ・Webサイトをスマートフォンなどのモバイル端末での表示に最適化=スマホ対応することを意味します。

Googleは下記の項目でモバイルフレンドリーの条件を定義しています。

  • 携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
  • ズームしなくても判読できるテキストを使用していること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
  • 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されているこ

自社のサイトがモバイルフレンドリーかどうかは以下サイトから確認が可能です。

モバイル フレンドリー テスト画面

またGoogleより「ページの読み込み速度をモバイル検索のランキング要素に使用します」と発表がありました。これは2018年7月より適用されるようです。

今後ページの読み込み速度によって、検索結果に表示される順番に影響が出てくる可能がございます。
シーエムエーでは、読込速度に考慮したスマートフォンサイトの構築を行っております。

自社モバイルサイトの読み込み速度は以下サイトから確認が可能です。

スマートフォン対応の方法

それでは、スマートフォン対応するためにはどのようにすれば良いのでしょうか。主には以下の2つの方法があります。

  • 1スマホ対応:パソコン、スマートフォンそれぞれで別ページを作成する
  • 2レスポンシブ対応:ディスプレイサイズに応じて表示を最適化する

スマホ対応

パソコン、スマートフォンで異なるHTMLファイルを持つことになるので、下記のようにデバイスごとにURLが異なることになります。

  • PCサイトhttp://◯◯◯.com/
  • スマホサイトhttp://◯◯◯.com/sp/

メリット

HTMLファイルがパソコンとスマートフォンで別なので、パソコン用レイアウトとは全く違うスマートフォン用に特化した構築が可能で、軽くて見やすいホームページ・Webサイトを制作することが出来ます。

デメリット

HTMLが完全に独立した別物ですので、更新するときは両方とも更新しなければなりません。また画像などの素材もパソコン用とスマートフォン用の2つ用意する必要があります。
URLが異なるためサイトへの流入が分散するのでSEOに弱くなることがあります。

レスポンシブ対応

CSS(スタイルシート)を利用して、表示されたデバイスの種類やサイズに応じて表示内容が最適なレイアウトに変化するよう設定された単一のファイルを制作し、すべてのデバイスに同じように送信する手法です。

メリット

パソコンサイトとスマートフォンサイトでHTMLが同じため、サイトのメンテナンス工数を削減することができます。
Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができSEOに有利です。
(Googleに推奨されている構築方法です。参考サイト

デメリット

ページの表示に時間がかかる場合があります。
構築が複雑になるため、工数がかかり、その結果費用が増える可能性があります。
パソコン向けサイトとスマートフォン向けサイトのデザインを大幅に変えることが難しい。

スマートフォン用のサイト制作にも色々な方法があり、それぞれメリット・デメリットがあります。
まずは自社のユーザーがどのようなデバイスを使用し、どのページをどの程度閲覧しているか、パソコンユーザーとスマートフォンユーザーで違いはあるかなど確認した上で、どのようにスマートフォンサイトを制作するか検討することも必要です。サイトの規模や内容によっても対応方法は異なりますので、まずはお気軽にお問い合わせください。

Top