レスポンシブWebデザイン対応ホームページ作成

「レスポンシブwebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズを判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。

今までの＠シリーズでは、PC版やスマートフォン版など、デバイス毎にページ（URL）を設定し最適化することで対応してきました。
「レスポンシブwebデザイン」では、1つのHTMLファイルを異なる画面サイズに応じてページのレイアウト・デザインを調整し、閲覧させる事が出来ます。

また、現在Googleがモバイルフレンドリーにする方法としても推奨しています。

※今までのスマートフォン版もモバイルフレンドリーであり、問題ありません。

【レスポンシブwebデザインのイメージ】

① URLの統一化

今までは下記の通り異なるURLでしたが、レスポンシブwebデザインの場合、URLは全てPC用サイトと同じになります。

　PC兼タブレット用サイト：https://www.tsukuba.co.jp/index.html
　スマートフォン用サイト：https://www.tsukuba.co.jp/phone/

② スマートフォンで閲覧時のデザイン性が向上

基本的にPC用にデザインした内容をスマートフォンに最適化して閲覧させるため、画像を含むデザイン性の高いページを作成する事ができます。

③ レスポンシブwebデザインはGoogle推奨の手法

冒頭にも書いたとおり、レスポンシブwebデザインはGoogleが公式に推奨しているデザイン手法です。

◇PC 用のページとモバイル用のページを単一（同一） URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。

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

① １ファイルが重くなる傾向にある

ファイルを集約することによるデメリットとして、例えばPCやタブレットで表示していても、スマホで必要ない部分などをCSSで非表示にしたりしますが、当然、非表示としている部分もソース上には含まれます。１つのファイルの中に横幅に最適化されたパターンを全て埋め込むため、サイズ的にはその分、多少重くなります。

② デザインの統一性

レスポンシブwebデザインでは各デバイスで統一されたデザインになってしまいます。したがってそれぞれのデバイスらしさを最大限引き出した先進的なデザインはしにくくなってしまいます。

現在、世界中でレスポンシブwebデザインが主流となっております。今後、弊社でもレスポンシブwebデザインを主軸にサイト作成・リニューアルを実施していく予定です。