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

2013/09/30

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

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

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

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

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

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

SEOでも効果あり

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

そのため、この手法でデザインすることで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でも効果があるようです。

デメリット

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

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

  • このエントリーをはてなブックマークに追加
Related

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る