ウェブディレクション ユーザビリティ SEO アクセス解析 デザイン制作 システム webapi使い方サンプル 見本になるサイト

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

レスポンシブウェブデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、多くのデバイスに対応した、最適化したWebサイト、デザインを、単一のHTMLで作るwebデザイン、コーディングの手法の事です。

ブラウザーのスクリーンサイズを基準にして、CSSでレイアウト調整を行う事で、各デバイス毎に別のUIをもったページやサイトを用意する事なく、マルチスクリーンに対応したWebサイトを制作します。

レスポンシブWebデザインが近年、特に注目されるようになったのは、スマートフォンが広く普及してきたためです。

スマートフォンが現れた当初は、PC向けの従来型のWebサイトと別に、スマートフォンの画面でも見やすいようにデザインされた、専用のスマフォサイトが用意されるようになりましたが、スマートフォンそのものが種類が多く、色々なデバイスやスクリーンサイズに対応する必要がでてきたため非常に面倒くさいことになりました。
そのため、単一のページで、PC、スマートフォン含め全てのデバイスに対応できるレスポンシブデザインというデザインの考え方が出てきたという訳です。

レスポンシブWebデザインはイーサン・マルコッテ(Ethan Marcotte:米国のデザイナー)が2010年5月に技術系のブログ『A List Apart(ア・リスト・アパート)』に投稿した記事で初めて発表されました。

以前は、OSやデバイスをシステムが判別して、それぞれ別に作成していたサイトへ振り分けるようにしていたのに対して、レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ表示させ、表示された画面のサイズ(スクリーンサイズ)を基準に、CSSだけを切り替えてレイアウト調整をしています。


たとえばこちらのサイトは、どんなデバイスで閲覧しても、それぞれのデバイスごとに画面を用意するわけではなく、同じデザインのまま、デバイスに合わせて画面が変わります。

http://www.taiyooil.net/





Yahoo!ブックマークに登録     
このエントリーをはてなブックマークに追加

無料素材イラストダウンロード
今週のピッアップ記事
ウェブディレクターズスタッフブログ

メルマガ購読・解除
 
webディレクターズリンク集