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

最近はほとんどの場合「レスポンシブデザイン」と呼ばれる仕様で、Webサイトの制作をすることが多いです。

お客さまの方から「レスポンシブ対応にして欲しい」とリクエストされることも珍しくありませんし、もしそういったご要望がなかったとしても、基本的にレスポンシブデザインにてご提案させていただくことがほとんどです。

こちらからご提案させていただく場合は、そもそもレスポンシブデザインについて理解をしていただくためのご説明をさせていただきます。

あたりまえではあるのですが、そもそもレスポンシブについてご理解いただけていない方も多くみえますので、今日はレスポンシブデザインについて書いてみたいと思います。

結論としてまずひとことで言うならば「そのWebサイトを見るいろんな大きさの端末を想定して、見る端末に最適化されるデザイン」のことです。

その背景から順番に説明していきますね。

背景：端末の多様化

昔はWebサイトやホームページを見る端末といえばパソコンでした。
2007年にiPhoneが発売、翌年2008年に日本でも発売され、2009年にAndoroidのスマートフォンが登場。
この頃から、インターネットに繋がった端末がどんどん普及していきます。
スマートフォンに限らず、タブレットやゲーム機、テレビ等、インターネットに接続できる端末は増え続けます。

Webサイトを閲覧する主要な端末としてはパソコンもしくはスマートフォン、ついでタブレット型の端末といったところ。
とはいえパソコンのモニター、スマートフォンやタブレットのサイズも様々です。

わかりやすい弊害として、パソコンの主要なモニターサイズで閲覧することだけを考えて制作してしまうと、スマートフォンで見た場合、相対的に小さく表示されてしまうため、とても見にくくなってしまいます。（文字サイズが小さい、メニューボタンなども小さくてタップしにくい等々）

スマートフォン専用サイトの登場

よって、スマートフォンで閲覧することを想定し、パソコンとスマートフォン、別々のサイトを制作するようになりました。

PCとは別に、スマートフォンでも見やすく使いやすい専用のWebサイトをつくるのです。

あらかじめお伝えしておきますと、今はこういったPCとスマホ、別々にサイトをつくる機会はだいぶ減っています。

この方法は、更新・管理が大変、コストが上がりやすい、というデメリットがあるからです。

まずパソコンとスマートフォンそれぞれ別のサイト、つまり2サイトつくることとほぼ同じなので、制作時間・コストともに上がりやすく、また、修正や更新をする場合でも、それぞれ作業は倍になります。

少し専門的になってしまいますが、図解すると下記のような構造。

例えば「会社概要ページ」を修正する場合、PC版のHTML、スマホ版のHTML、それぞれ修正が必要です。

細かいお話をすると、印刷物にQRコードを載せたい場合、PC用スマホ用両方載せるのかとか、PCサイトに誘導しつつ「スマホ版はこちら」といったバナーを設置したりといった配慮も必要でした。

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

そこで現在主流なのが、レスポンシブデザイン、レスポンシブ対応と呼ばれるつくりかた。

日本語に直訳すると「敏感に反応する」「反応がよい」「応答性の良い」という意味になります。

表示する端末の大きさによって、文字サイズやレイアウトを変え、Webサイトを見やすく最適化する、というものです。

背景として前述しました端末サイズの多様化やGoogleの推奨もあって、今やこの制作方法が主流となりました。

今ご覧いただいているこのブログ、うちのホームページももちろんレスポンシブデザインです。

ウィンドウサイズを変えてみていただくとレイアウトが変わるのがおわかりかと思います。

例えばPCでは2列で表示しているものを1列に。

メニューも折りたたみ、文字サイズも自動で変わるなど。

「表示する端末の大きさによって、文字サイズやレイアウトを変え、Webサイトを見やすく最適化する」とは、こういうことです。

この場合、スマートフォン専用で別のサイトをつくっているわけではないので、更新・管理も比較的しやすく、またGoogleが推奨しているつくりかたでもあるため、いわゆるSEO対策（検索エンジン最適化）的観点でも望ましいです。

これまた図解すると下記のようなイメージ。

会社概要ページを修正するとしても、先程と違い、会社概要ページのHTMLファイルを1ファイルのみ修正すればよくなります。

どんなデバイスであれ、URLは変わらないため、とにかくURLの宣伝・誘導がしやすくなったのもメリットですね。

いかがでしたでしょうか。

レスポンシブデザインとはどんなものなのか、多少なりとも理解を深めてもらえたのなら嬉しいです。