柔軟なスマホ対応!レスポンシブウェブデザインとは

現在、スマホ対応をしていないサイトはGoogleからの高い評価を得にくく、スマホ対応されていないサイトはGoogleの検索順位にも影響を与えると言われています。

スマホ対応と言ってもいくつかの対応方法がありますが、だいたいのサイトが以下の2つの方法のどちらかを選択している場合が多いです。

  • PC用サイトの他にスマホ用のサイトを作成し、スマホでアクセスされた場合はサーバ側で自動的にスマホサイトへ遷移させる方法
  • レスポンシブウェブデザインを採用し、スマホとPCの表示を出し分ける方法

では、レスポンシブウェブデザインとは何か。ということですが、1つ目の場合、PC用のhtmlとスマホ用のhtmlを2つ作らなければなりません。
内容が全く異なるものであれば良いですが、基本的にはPCで訴求する情報とスマホで訴求する情報は、要素としては大きく変わらないため、同じような内容にも関わらずhtmlを2つ作らなければならないというのは管理や更新に手間がかかってしまいます。さらに、1つ目の場合は、PC or スマホという切り分け方になるため、タブレットで表示させる場合や、イレギュラーなサイズのスマホで表示させる場合に、ユーザーにとって最適とは言えないような環境で表示されてしまう場合もあります。

それに対して、レスポンシブウェブデザインでは、1つのhtmlに対して、CSS側で「横幅が●●pxの時には、このレイアウトを適用する」というような内容を組み込んで、サイトが表示される横幅によって、デザイン(レイアウトや情報)を出し分けを行います。そのため、情報の更新などが必要な場合、1つのhtmlを更新するだけで、PCもスマホも両方とも更新を反映することができます。さらには、横幅によってデザインを切り替えることができるため、タブレットやイレギュラーなサイズのスマホにも適切に対応しやすくなります。

レスポンシブウェブデザインのデメリットとしては、横幅によってページのデザインが調整できる前提でのレイアウト構成やデザインを行う必要があり、初期費用が若干高めに設定されるようなケースがあったり、PCとスマホで全く異なる情報を掲載する場合は、異なる情報を1つのhtml内にすべて盛り込むことになってしまうため、1ページあたりの容量が大きくなってしまうようなこともあります。

レスポンシブウェブデザインは、主流になりつつあるスマホ対応方法になってきていますが、採用される場合には、制作されるサイトの内容やデバイス毎での情報訴求方法などをしっかりと戦略立て、実施されることをお勧めいたします。

もし、レスポンシブウェブデザイン対応またはスマホ対応でお悩みの際は、気軽に是非ご相談ください。