スマホ用サイトおすすめのレスポンシブデザイン

スマホやタブレットの普及により、スマホ用サイトやタブレット用サイトの制作が必須になってきています。

Googleでもモバイルフレンドリーテストを実施しており、このテストをクリアしないと、ペナルティではありませんが、放置しておくとスマホでの検索結果の順位低下を起こしてしまう可能性があります。

場合によっては、パソコンでの検索結果が1ページ目なのに対し、スマホで検索すると5ページ目以降の表示となる場合もあリます。

よって、スマホ対応のホームページの作成が重要になってきます。

今回は、スマホ用サイトにおすすめのレスポンシブデザインついてご紹介します。

パソコン用サイトとスマホ用サイト

スマホ対応ホームページには、大きく分けて2つの制作方法があります。

パソコン用サイトとスマホ用サイトの2種類を制作

PC用サイトとスマホ用サイトの2種類を制作し、ユーザーが閲覧しているOSやブラウザを判別し、表示するサイトを振り分ける方法です。

これは、ユーザーエージェントというもので振り分けを行っています。

パソコンで閲覧した人　→　パソコン用サイト
スマホで閲覧した人　→　スマホ用サイト

この場合、2つのサイトを制作する必要があるころから時間と制作費が加算でしまいます。

レスポンシブデザインで制作

どのデバイスから見ても大きさが自由に変動するタイプです。

この場合だと1つのサイト制作で済みます。

OSやブラウザを判別しているのではなく、ユーザーが使用しているデバイスのウィンドウサイズに合わせ、自動的にページのデザインを最適化します。

Googleが推奨しているのもこのレスポンシブデザインです。

それでは、続いてレスポンシブデザインのメリットをご紹介します。

レスポンシブデザインのメリット

管理が楽

1つのサイトですべてを管理することができるのが特徴です。

PC用サイトとスマホ用サイトの2つを制作してしまった時に、画像の変更や文章の変更などがあった場合、2つとも変更をしなければなりません。

しかし、レスポンシブデザインの場合は、1つの変更で済みます。

このことにより、修正ミスも軽減されます。

運用コストの節約

1つ制作で良いので、制作費も運用コストも1つ分で済みます。

SEOに有効的

Googleが推奨しているのもこのレスポンシブデザインです。

パソコン用のサイトモバイル用のサイトを同一のURL とすることができるため、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。

ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

Googleｓでも同じページでデバイスごとに複数のパターンがあると、ページのインデックスがしにくいようです。

ユーザーがページシェアをしやすい

URLが2つ以上あると、ユーザーがどちらをシェアしたらいいのか分かりにくくなります。
また、ユーザーエージェントというもので振り分けを行う場合、URLは異なります。

パソコン用サイト
○○.com

スマホ用サイト
○○.com/sp

などです。

パソコンで閲覧したユーザーがページシェアをした場合とスマホで閲覧したユーザーがページシェアをした場合とでは、URLが変わってしまいます。

レスポンシブデザインでは、表示が自然と切り替えられURLは一緒で、上記のようなことが起こりません。

一貫性のあるデザイン

パソコンでもスマホでも、デザインが統一されているため、一貫性のあるブランドイメージを作り上げることができます。

レスポンシブデザインのデメリット

構築が複雑

cssによる、HTMLコーディングの構築が複雑になります。

合わせてススマホだけこの動作などと複雑なプログラムが入ってくると難易度が無限大です。

転送量の重さ

パソコン用サイトの大きな画像も一緒にダウンロードするので、スマートフォンに最適化されたベージにくらべ転送量が大きくなります。

その結果、表示されるのに時間がかかりる場合があります。

レスポンシブデザインがお勧め

レスポンシブデザインには、メリットもデメリットもありますが、個人的には、レスポンシブデザインがお勧めです。

Googleが推奨していることもあり、時代の流れはレスポンシブデザインの方向に向いています。

また、頻繁にニュースを発信したり、最新情報、商品情報の修正追加の多いサイトでは、レスポンシブデザインにしておくことで、圧倒的にパフォーマンスが高いと言われています。

今後のスマホ用サイト作成の参考になれば幸いです。

Mousaiは、資格をもった上級ウェブ解析士が、培ったスキルとノウハウで、あなたの会社のホームページの問題点を見つけ出し、あなたと一緒に改善・実行し、最強の営業マンに育て上げます。