北海道釧路市発のSOHO(個人事業)ホームページ制作 xyzoooDesign [from KUSHIRO CITY]

レスポンシブ対応
Responsive Web Design

パソコンも タブレットも スマートフォンも ユーザーの環境に合わせて適切表示

レスポンシブwebデザインとは?

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。
WebサイトやWebページをパソコンやスマートフォン、タブレット端末など複数の機器や画面サイズに対応させる際、内容が同じでデザインや動作をそれぞれに最適化した複数のHTMLファイルやCSSファイルを用意し、HTTPリダイレクトなどでアクセスを振り分ける手法がよく用いられる。
レスポンシブデザインではこのような対応はせず、表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。

IT用語辞典 e-Words  から引用

サーバーサイドプログラム

プログラムがユーザーの環境を判別してアクセス先を割り振るためユーザー環境ごとにページ(HTML)が必要

  • パソコン用HTMLを表示
  • タブレット用HTMLを表示
  • スマホ用HTMLを表示

レスポンシブwebデザイン

ユーザーの利用している画面サイズを判断してCSSが切り替わるだけなのでページ(HTML)は一つだけ!

  • HTMLは一つ!
  • CSSが切り替わり、HTMLに適切な装飾が施されます

単一のHTMLだから更新が楽

簡単なニュースの更新でも、パソコン用、タブレット用と環境に合わせてHTMLが複数あれば、用意された環境の分だけ更新作業が必要になりますが、単一のHTML一つだけのレスポンシブデザインなら更新量はぐんと減ります。

レスポンシブ対応のおすすめパッケージ

レスポンシブ ベーシックBASIC

¥80,000~

  • オリジナルデザイン
  • 下層2ページ
  • お問合せフォーム・アクセス解析※1
  • トップページ

  • 下層2ページ

  • お問合せフォーム

  • アクセス解析ツールの埋込

レスポンシブ プラスPLUS

¥213,000~

  • オリジナルデザイン
  • 下層5ページ
  • お問合せフォーム・アクセス解析※1
  • トップページ

  • 下層5ページ

  • お問合せフォーム

  • アクセス解析ツールの埋込

レスポンシブ ビジネスBUSINESS

¥350,000~

  • オリジナルデザイン
  • 下層10ページ(テンプレート型)
  • CMS付き※2
  • お問合せフォーム・アクセス解析※1
  • トップページ


  • 下層10ページ

  • CMS機能

  • お問合せフォーム

  • アクセス解析ツールの埋込
  • ※1:Google のアナリティクスソリューションになります。
  • ※2:CMSはWordpressとMovableTypeをお選びいただけますが、利用するCMSや機能によって別途料金が発生する場合があります。
  • ※サーバー、ドメインの契約費などは含まれていません。

レスポンシブサイトの制作実績

ホームページ制作 MENU