レスポンシブWebデザイン

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

スマートフォンやタブレットなど最近のWebの主流が変わりつつあります。Webサイト制作の現場では、PC向けの従来型のWebサイトに加えて、スマートフォンやタブレットなどの小さな画面でも見やすいようにデザインされた、専用のWebサイトである「スマートフォンサイト・タブレット」が登場しました。

そこで、にわかに注目されているのが「レスポンシブWebデザイン」という考え方です。

では、レスポンシブWebデザインとはどのようなものなのでしょう。

マルチデバイスに対応させる方法

これまで、最も一般的な方法としては、各デバイス用の専用サイトを作るマルチソース方式があります。
良い点としては、デバイスごとに専用のサイトをつくるため、デバイスに対してぴったりなものを作ることができる半面、制作の手間がかかったり管理・更新が煩雑になります。また、URLもデバイスごとに異なってします。端末が増えるたびに、解像度、スクリーンサイズ、OS、UAを調査し、新しいHTMLとCSS、対応する画像データを作成していく手法は、将来にわたっても時間と労力の増加=コスト増を招く手法だと言わざるをえません。

別の方法はCMSやPHPを利用してアクセスしたデバイスごとに出力するHTML・CSSを変えるプログラム変換方式があります。
この方法は、更新の手間は省けますが、そもそも開発コストがかかったり、デバイスを判定して振り分ける機能が新しいデバイスに対応しているか常にチェックしなければなりません。

このような手法の問題を解決する方法としてレスポンシブWebデザインが注目されるようになりました。

resweb

レスポンシブWebデザイン

レスポンシブWebデザインは単一のHTMLを画面サイズに応じて適応するCSSに切り替えることで、PC、タブレット、スマートフォンなどあらゆるデバイスからのアクセスに対応します。
単一のHTMLなので更新が簡単であり、すべてのデバイスで同一のURLで表示されます。
デザインの切り替えにはCSS3のメディアクエリを使用するので、デバイスごとのUserAgentなど細かく気にする必要はありません。これにより、小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。

>>レスポンシブWebデザインの設計

広島 ホームページ制作 フィズコミュニケーションズ