レスポンシブWebデザインの作り方、メリットとデメリットについて

2013/09/30

スマホ普及により増えています

ブラウザサイズでデザインが変わる

レスポンシブWebデザインとは、その名の通りレスポンスにより形成されるデザインの手法です。
ここでのレスポンスとはブラウザのサイズとなります。

つまり、画面サイズにより自動的にデザインが変化するため、PC、タブレット、スマートフォン端末など複数の画面に対応したデザインを単一ファイルで作成することができます。

一昔前では、PCとモバイル向けに画面を作成する場合、それぞれのHTMLやCSSファイルを作成しておりました。
しかしiPhone、Android、iPadなどの端末が普及している現在では、各端末に対応したデザインが単一ファイルで作れるという手軽さからこの手法が広まっています。

私が良く使う、Bootstrapもこの手法が適用されています。

SEOでも効果あり

googleが公式ブログで、レスポンシブWebデザインでサイトを作成することを推奨するという発表がありました。
クローラーからしてみても、複数のファイルを解析するより１つのファイルを解析する方が楽ですしね。

そのため、この手法でデザインすることでSEO効果が得られるかもしれません。

コーディング方法

基本的に各コンテンツのサイズは、固定値ではなく「％」で指定するだけです。

まずは以下のmetaタグを設定します。


<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />

次にCSSを各サイズごとに記述しますが、今回は以下のようにします。

PC：横幅1025px以上
タブレット：横幅1024px
スマートフォン：横幅640px

style.css を以下のように記述します。


/*=============================================
 PC 横幅が1025px以上のスタイルを記入
=============================================*/
@media screen and (min-width: 1025px){
	.container{
		width:100%;
	}
}
/*=============================================
 タブレット 横幅が1024px以下のスタイルを記入
=============================================*/
@media screen and (max-width: 1024px){
	.container{
		width:100%;
	}
}
/*=============================================
 スマートフォン 横幅が640px以下のスタイルを記入
=============================================*/
@media screen and (max-width:640px){
	.container{
		width:100%;
	}
}

画像を使用する場合は、以下のように％指定します。


img{
	max-width: 100%;
	height: auto;
	width: auto;
}

特性を活かしてデザインする

メリット

PC、タブレット、スマートフォンなど複数の端末に対応した画面を作成するのが簡単になることが一番メリットと思います。
特に運用において、PCサイトを管理するだけで良いのでコストの削減になります。
新しい端末が出た場合でも新たに対応する必要がありません。

先ほどもでましたがSEOでも効果があるようです。

デメリット

各端末毎に細かく構造を設計することが難しくなります。
スマホを意識したデザインになりやすいのではないでしょうか。

運用では楽なのですが、開発では通常以上に工数がかかることもあるようです。

PbTimes 情報誌