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

簡単に言うと、端末の種類によって画面が変わっても”決まる”デザインです。今までのデザインだとスマホのように小さなディスプレイを想定しておらず、それが原因でデザインが崩れてしまいます。

例えると普通の人は真正面から写真を撮らないと失敗作になりますが、アスリートのフィニッシュはどの角度から撮っても画になってしまう。そんな違いがあります。

では従来のWEBデザインとはどう違うのでしょうか。従来のWEBデザインから見てみましょう。

今まではPC用とスマホ用に二種類、またはそれ以上作っていました。OSやブラウザを判別し、それぞれに向けて作っておいたページを送信するのです。WINDOWSでIEならこのページ、iphoneのiosならこのページという風です。

レスポンシブWEBデザインのメリット

・内容を一括で管理できるため運用負荷、コストが低いことが挙げられます。
・またレイアウトや情報構造をデバイスごとに最適化できます。

一般的なWEBサイトのデメリット

・この方法だとスマホ、PC用のサイトを、分けて作るために、構築、設計に手間やコストが掛かりすぎることです。
・流動的なサイト構築ではないので将来的には対応できないデバイスが出てきます。その場合サイトを一から見直さなければならないです。

では、”レスポンシブ”デザインとは何でしょう？

それはデバイスごとにではなく、ブラウザのサイズに合わせてCSSを変えるデザインのことです。
次の三つのデザイン要素を持ちます。

・メディアクエリー
「メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて
別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使って
スクリーンサイズに応じたCSSに切り替えます。」

・フルードグリッド
｛フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、
ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する
「フルードデザイン（Fluid Design）」を合わせたものです。レスポンシブWebデザインでは、
最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、
値を％に変換してフルードデザインに変更します。｝

・フルードイメージ
「フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、
CSSのみで実装できます。イギリスのコンサルティングファームClearleftの
リチャード・ルター（Richard Rutter）氏によって提唱されました。」

（注）3つとも引用　参考文献　　菊池 崇　「レスポンシブWebデザインとは」

http://ascii.jp/elem/000/000/697/697463/index-4.html　（平成25年9月17日アクセス）

レスポンシブ”デザインには
・URLをまとめることができ、SEOにも効果があります。
・元の”型”が一つで端末を選ばず対応が出来るため運用の一元化が可能将来の新型端末にも対応できる。

デメリットは

・テスト、試作に工程がかかる。つまり費用がかさむ。
・スマートフォンでブラウジングする時、画面に見えない部分で発生するデータの量が大きく表示時間に影響する。
・ソースコードが複雑なので、運用においては、高度な理解と技術が必用

などが挙げられます。

こうしてみると”レスポンシブ”デザインのデメリットは”表示時間”以外は、当社で預かることで解決可能です。
ですのでもし当社をご利用の際は検討して下さるのも良いかと思います。
スマホファーストのサイトづくり。世の中はもう動き出しているかもわかりません。