メニュー
文字サイズの変更
標準
背景色の変更
標準
音声読上げ版

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


レスポンシブWebデザインとは

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

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

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

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

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

① PCで見たイメージ(1200px)

横幅1200pxのPCで見たデザイン

② タブレットで見たイメージ(900px)

横幅900pxのタブレットで見たデザイン

③ スマートフォンで見たイメージ(480px)

横幅480pxのスマートフォンで見たデザイン

パソコン、タブレット、スマートフォンのページは同じファイル(URL)で、閲覧する画面のサイズによって見え方が自動的に最適化されます。
そのため、パソコンでも画面が小さい場合や、ブラウザの横幅を狭めた場合は、スマートフォンで見たイメージと同等の見え方となることがあります。

『上記例の違い』

②のタブレットイメージ図では、①のPCイメージ図のメニューが6列1行から3列2行になっています。
また、③のスマートフォンイメージ図では、メニューが非表示となり、メニューボタンが右上に表示され、ピックアップ1も4列1行から、2列2行になっています。
このように表示幅に合わせて自動的に最適化されます。
なお、ピックアップを各端末で何列表示にさせるかは管理画面で設定が可能です。


@シリーズにおけるレスポンシブ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 がより効率的にコンテンツを発見することができます。


@シリーズにおけるレスポンシブwebデザインのデメリット

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

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

② デザインの統一性

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

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


弊社のレスポンシブwebデザインで作成した事例について

弊社のレスポンシブwebデザインで作成した事例を下記に紹介します。
下記サイトにアクセス後、画面の横幅を小さくするなどして動かすと、画面ごとに最適化したデザインをご覧いただけます。

【上メニューのみのデザイン例】

① 茨城県科学技術振興財団様

https://www.i-step.org

茨城県科学技術振興財団 レスポンシブウェブデザイン対応ホームページ
② スピニングトップ株式会社様

https://www.spinningtop.co.jp

スピニングトップ㈱メカベー レスポンシブウェブデザイン対応ホームページ

【上・左メニューのデザイン例】

④ 小田倉工務店様

http://www.odakura.e-naka.jp

茨城県那珂市 小田倉工務店 レスポンシブウェブデザイン 上・左メニュー