レスポンシブwebデザイン


レスポンシブwebデザイン

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

ページを見ていてブラウザの横幅を小さくしたときに表示が変わるサイトを見たことがあると思います。
これが「レスポンシブwebデザイン」です。
CSSやJavaScriptを使いブラウザサイズを取得し、サイト表示領域に適したコンテンツやレイアウトを表示すます。
1つのページ(HTML)で各デバイスの最適化を実現する制作手法ですので、PC、スマホ、タブレット向けに最適化が必要なケースに適しています。

●なぜ注目されているの?
レスポンシブwebデザインが注目されたのは、スマートフォンやタブレットが普及した事で、コストをかけず各デバイスへの対応を行おうとした事がきっかけになります。
今までは、ユーザーエージェント(UA)で表示するページを振り分けることで、多くのデバイスに対応する方法が主流でした。
JavaScriptやサーバーサイドでユーザーエージェント(UA)情報を取得し、デバイスの種類に応じて用意した専用のWebページ(HTML)へ移動させるのです。
※ ページは同じ(URLは同じ)ままで、内部で表示するHTMLを切り替える方法もあります。

しかし、デバイスの種類にあわせページを用意する場合は下記の懸念(手間)があります。


1. 開発コスト
各デバイス用(PC、スマホ、タブレットなど)にページを制作する必要がある為、開発コストがかかります。
UAでページを振り分ける場合は、振り分けを行うプログラムが必要になり、さらに実機でのデバッグや表示チェックが必要になります。

※PHPやJavaScriptのUAでの振り分けプログラムは無料で配布されていたります。

2. 更新費用
テキストを修正するだけでも、各デバイスのHTMLファイルの修正を行い実機チェックを行う必要があり、写真画像などは各デバイス用にリサイズを行う必要があります。
その為、更新に非常に手間がかかってしまいます。

3. URLの問題
UAでページの振り分けを行った場合、通常は(※1)デバイスごとにURLが変わります。
その為、外部リンクや検索サイトの被リンクが間違ってしまっている場合、
PCから閲覧した場合でも、スマートフォンサイトが表示されてしまい適切にアクセスできないこともあります。

※1 専用のプログラムを使う事で、各デバイスのURLを統一することは可能ですが、
  開発、デバッグに工数がかかり、さらに新端末などが発売される毎に設定を行う必要があります。


●デメリット

1. レスポンシブwebデザインは基本効率化を図ったものになりますので、同じ素材・デザインを使用します。その為、デバイスによって大きくデザインを変えることが難しくなります。


2. 素材が縮小されても崩れないような画像やレイアウトを組む必要がある為、デザインに制限が出てくる。また、どのデバイスでも崩れないようデザイン設計をする必要があり、またCSSの切り替えなどに多少の手間がかかります。

※JavaScriptなどでUAを取得し、表示内容を変える事も可能。


●ASPの場合

ASPサービスは通常は各デバイス用にページが自動生成される為、レスポンシブwebデザインは必要ない、作る事が出来ない場合が多い。
WPなどは、配布されているテーマにレスポンシブwebデザインが実装されているものがある為、簡単に設置が可能な場合がある。


●レスポンシブ参考サイト
http://responsive-jp.com/

●まとめ

今回紹介したレスポンシブwebデザインはモバイル対応することは、ガラケーの仕様により難しい為、PC、タブレット、スマートフォンに対応する形になります。

モバイル対応が必須の場合、レスポンシブページとモバイルページの2ページの作成が必要になります。

モバイル対応する場合はどの道、モバイルを別ページで作成する必要があります。

タブレットはPCサイトを問題なく閲覧できるケースが多く、ユーザー数も比較的少ないため、タブレットを無視する場合(モバイルも除く)は、

レスポンシブページでPC、スマホ対応するか、PCとスマホの2ページを作成してUAでページを振り分けるかの選択になります。

以上、クライアントの要望やターゲット、コストにより、レスポンシブwebデザインを採用するか検討する際に参考にして頂ければ幸いです。

zp8497586rq