レスポンシブWEBデザインについて
自分の備忘録として、レスポンシブWEBデザインの作成方法をまとめておきます。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
- 目次で流し読みする ･*･:≡( ε:)
目次
- レスポンシブWEBデザインとは
- 国内外のレスポンシブWebデザインの事例
- レスポンシブWEBデザインを実現する3つの技術
- レスポンシブWEBデザインの大まかな制作手順
- レスポンシブWEBデザインの制作
- IE対応について
- 最後に
レスポンシブWEBデザインとは
レスポンシブWebデザイン（Responsive Web Design）とは、PC・タブレット・スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、一つのHTMLで実現する制作手法です。
PCスマホ・スマホサイトを用意することなく、様々な解像度のデバイスに対応したサイトを製作することが出来ます。
レスポンシブWEBデザインが普及したのは、スマホやタブレットが登場してからです。
スマートフォンの小さな画面でも見やすい・リンクが押しやすいレイアウトを実現させるために「スマートフォン用サイト」が登場しました。
サイトにアクセスしたときにユーザーエージェント（UA）を判断し、PCからアクセスした時はPCサイトへ、スマートフォンからアクセスした時はスマートフォン用サイトへ移動させます。
スマホ用のサイトへ飛ばすことで、デバイスごとに最適の表示にすることが出来ました。しかしスマホ用サイトでは以下のデメリットがあります。
スマホ用サイトのデメリット
開発コストが余計に掛かる
PC・タブレット・スマホの解像度や、ユーザーエージェント、OSなどを判別し、別々のHTML・CSS・Javascriptファイルを用意する必要があります。
国内で販売されているスマホの解像度は、
iPhone3GS（480×320）
WVGA（480×800）
QHD（960×540）
iPhone4・iPhone4s（960×640）
iPhone5・iPhone5s・iPhone5c（1136× 640）
HD（1280×720）
FHD（1920×1080）
などがあり、それぞれ画面サイズも違います。スマホを縦持ち・横持ちでも縦横の解像度が変化します。
OSも頻繁にアップデートされたらすべて判定し専用サイトへ振り分けます。
これらをすべてサポートするとなると、開発・検証に非常に多くのコストが掛かってしまいます。
更新するページが増える
PCサイトとスマホサイトを振り分けた場合、1ページの更新でよかったものが2倍に増え、更新するページが多ければ多いほど更新に時間がかかります。
ページURLが増えてしまう
URLが同じで読み込むファイルを変更する場合は問題ないですが、ドメインやファイル階層が変わる場合は注意が必要です。
スマホでアクセスしたときに/mobileや、/spなどの階層に飛ばす場合だとGoogle Analyticsなどのアクセス解析でURLごとに分かれてしまい、分かりにくくなってしまいます。
上記のようなデメリットを解決するために「レスポンシブWEBデザイン」が作られました。OSやUAで判断するのとは違い、レスポンシブWEBデザインはディスプレイのサイズを基準に読み込むCSSを変更してレイアウトを変化させます。
レスポンシブWEBデザインのメリットは管理のしやすさです。今までのように1つのHTMLファイルを更新するだけで様々なディスプレイのサイズに対応することが出来ます。
インターネットが出来るデバイスが増えた今、レスポンシブWEBデザインは効率のよい最適化が出来ます。
Googleもスマートフォン最適化にレスポンシブWEBデザインを推奨しています。
参考：Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法
レスポンシブWEBデザインのデメリット
ここまでレスポンシブWEBデザインのメリットを並べましたが、デメリットももちろんあります。
スマホ用サイトに比べてページが重くなる
スマホ用サイトの場合、スマホで表示するものだけを配置します。
それとは反対にレスポンシブWEBデザインの場合だと要素を読み込むため、表示に時間がかかってしまいます。
メディアクエリーで読み込むCSSを振り分けたり、表示しない要素を「display:none;」で非表示にしたりしても実際には全て読み込まれています。
スマホの通信速度がLTEではやくなったとはいえ、まだまだ通信速度が遅いユーザーもたくさんいます。読み込みが遅いというのはモバイルユーザーの離脱率が上がってしまうため、注意が必要です。
ユーザーがPCサイトにアクセスできなくなる
ユーザーがPCのレイアウトでページを見たいと思っても変更することが出来なくなります。
PCをメインで使っている人は使い慣れているPCサイトを利用したいユーザーもいるので、注意が必要です。
縦横でのレイアウト変化にユーザーが戸惑う
スマホやタブレットで画面を回転させるとレイアウトが変更されるため、ユーザー混乱してしまう可能性があります。レイアウトが変わってしまい、使いにくくなってしまったと思われてしまいます。
レスポンシブWEBデザインのメリットはあくまでも開発者側のメリットであり、ユーザー側からしたら読み込みが遅くなり、レイアウトが変化するものになっています。
メリット・デメリットをきちんと把握し、サイトに応じた方法でマルチデバイス対応を行いましょう。
国内外のレスポンシブWebデザインの事例
仕組みが分かったところで、実際にどのように動くのか見てみましょう。
国内外でたくさんのレスポンシブWEBデザインを採用しているサイトをまとめているサイトです。
レスポンシブWEBデザインを実現する3つの技術
レスポンシブWEBデザインを作成するには以下の3パターンがあります。
フルードグリッド（Fluid Grid）
フルードグリッドとは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する 「フルードデザイン（Fluid Design）」を合わせたものです。
今までのレイアウトは幅を固定したレイアウトでした。レスポンシブWebデザインでは、最初にグリッドデザインで部品や表示領域をpxで配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します 。
フルードイメージ（Fluid Image）
フルードイメージとは、ウィンドウや画面サイズに追随して画像のサイズを拡大・縮小する手法です。
メディアクエリー（Media Query）
メディアクエリーとは、画像の解像度・ウィンドウサイズ、スマホ・タブレットなどの画面向きなどの指定条件にあわせて読み込むCSSを変更する技術です。レスポンシブWEBデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。
レスポンシブWEBデザインの大まかな制作手順
今までのWebサイト制作は、Photoshop・Fireworks などの画像編集ソフトでデザインカンプを作成し、完成したデザインをスライスしてHTML・CSSをコーディングしていました。
レスポンシブWEBデザインでは、様々なウィンドウサイズが想定されるので、様々なサイズのデザインカンプを作成すると労力と時間が掛かります。
デザインカンプは作成せずに、ワイヤーフレーム・画像素材・テキストを用意してからHTML・CSSコーディングを行いながらデザインをしていきます。（Designing in Br owser：デザイニングインブラウザーという）
レスポンシブWEBデザインの制作
デザインカンプが作成できたら実際にサンプルサイトをコーディングしてみましょう。
レスポンシブWEBデザインでは以下の手順でコーディングしていきます。
- HTMLとCSSの用意
- viewportの指定
- 文字サイズを自動調整する機能を無効化
- フルードイメージで画像を伸縮させる
- メディアクエリでデバイスを振り分ける
- CSSでPCサイトのレイアウトをする
- 幅指定をpxから%へ変換する
- スマホ・タブレット向けのレイアウトをする
HTMLとCSSの用意
レスポンシブWEBデザインの基本となるHTMLを組んでいきます。
IE8位下に対応させるため、HTML5.jsを読み込ませています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レスポンシブWEBデザインサンプル</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/style.css" >
</head>
<div id="header_wrap">
<header>
<h1>レスポンシブWEBデザインサンプル</h1>
</header>
</div><!-- #header_wrap -->
<div id="nav_wrap">
<nav>
<ul class="clearfix">
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</nav>
</div><!-- #nav_wrap -->
<div id="contents" class="clearfix">
<div id="main">
<p class="img"><img src="http://dummyimage.com/672x378" alt="ダミー画像" /></p>
<p>ここにメインカラムの内容が入ります。ここは#contentsの幅の70%で表示されます。ウィンドウ幅が960px未満になると#contentsの幅になります。ここにメインカラムの内容が入ります。ここは#contentsの幅の70%で表示されます。ウィンドウ幅が960px未満になると#contentsの幅になります。ここにメインカラムの内容が入ります。ここは#contentsの幅の70%で表示されます。ウィンドウ幅が960px未満になると#contentsの幅になります。</p>
</div><!-- #main -->
<div id="sidebar">
<p class="img"><img src="http://dummyimage.com/250x250" alt="ダミー画像" /></p>
<p>ここにサイドバーの内容が入ります。ここは#contentsの幅の25%で表示されます。ウィンドウ幅が960px未満になると#contentsの幅になります。ここにサイドバーの内容が入ります。ここは#contentsの幅の25%で表示されます。ウィンドウ幅が960px未満になると#contentsの幅になります。ここにサイドバーの内容が入ります。ここは#contentsの幅の25%で表示されます。ウィンドウ幅が960px未満になると#contentsの幅になります。</p>
</div><!-- #sidebar -->
</div><!-- #contents -->
<div id="footer_wrap">
<footer>
<p>コピーライトコピーライトコピーライト</p>
</footer>
</div><!-- #footer_wrap -->
</body>
</html>
CSSはリセットとclearfixだけ入れておきます。
/* =====================
CSSリセット
======================= */
* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
br {
letter-spacing:0;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE Mac \*/
* html .clearfix {height: 1%;}
.clearfix{display:block;}
/* End Hack */
viewportの指定
スマートフォンのブラウザーの多くは「viewport」と呼ばれる仮想ウィンドウサイズが設定されており、iPhoneのSafariでは「980px」、Androidでは「800px」のディスプレイでアクセスしたことになります。
このままだとディスプレイの解像度でPCと振り分けが出来ないため、以下のmetaタグをHEAD内に追加します。
<!-- viewport -->
<meta name="viewport" content="width=device-width ">
content=”width=device-widthと指定することで、viewportを画面の幅に合わせることが出来ます。
文字サイズを自動調整する機能を無効化
iPhone や Android のブラウザーniは、縦向き (Portrate mode) と横向き (Landscape mode) で文字サイズを自動調整する機能があり、横向きにすると文字が拡大されてしまいます。その機能を無効化し、縦横変わらないレイアウトが出来るようにします。
/* 文字サイズを自動調整する機能を無効化 */
body {
-webkit-text-size-adjust: 100%;
}
値を「100%」ではなく「none」でも同じ効果になりますが、PC 版の Google Chrome や Safari で見たときに問題があります。詳しい内容は、以下のブログが参考になります。-webkit-text-size-adjust: noneを絶対に設定してはいけない理由
フルードイメージで画像を伸縮させる
スマートフォンで解像度の高い画像を確認すると、画面から画像がはみ出して横スクロールが発生してしまいます。
PCサイトとスマホサイトを分ける場合は、大きい画像と小さな画像を分けていましたが、レスポンシブWEBデザインの場合は、以下のCSSで対応します。
/* 画像の最大幅を100%に */
img {
max-width:100%;
height:auto;
width /***/:auto; /* IE8 */
}
max-widthは要素の最大幅を指定します。max-width:100%とすることで、画面より大きな画像を自動的に縮小して表示してくれます。;
メディアクエリでデバイスを振り分ける
メディアクエリを使い、PC向けとスマホ・タブレット向けのCSSを振り分けてみましょう。
振り分け方は2種類あります。
CSSファイルを作成する
PC用・スマホ用のCSSファイルを作成したら、HEADにlinkタグを入れて読み込みます。このとき、以下のように記入します。
<!-- スマホ向け -->
<link href="css/smartphone.css" rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" >
<!-- タブレット向け -->
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 480px) and (max-width: 959px)" >
<!-- PC向け -->
<link href="css/pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" >
このように指定すると、ディスプレイのサイズ（スマホはviewportの値）が0～479pxまでは「smartphone.css」を読み込み、480px～959pxまでは「tablet.css」を読み込み、960px以上だと「pc.css」を読み込むようになります。
cssを変化させるポイント（ブレークポイント）はサイト似合わせて適宜変更してください。
CSSをインラインで記入する
既存のCSSに追記する場合、以下の方法で記入します。
/* PC向け */
@media screen and (min-width: 960px) {
/* ここにPC向けCSSを記述する */
}
/* タブレット向け */
@media screen and (min-width: 480px) and (max-width: 959px) {
/* ここにタブレット向けCSSを記述する */
}
/* スマホ向け */
@media screen and (max-width: 479px) {
/* ここにスマホ向けCSSを記述する */
}
CSSでPCサイトのレイアウトをする
始めに、PC向けのレイアウトを作成します。
必要に応じてカラム分けを行います。最初は固定幅でレイアウトします。
/* =====================
レイアウト
======================= */
/* 幅指定 */
header, nav, #contents, footer {
width:960px;
margin:0 auto;
}
/* ナビゲーション */
nav li {
display:inline;
}
nav a {
display:block;
float:left;
padding:10px 0;
width:25%;
color:#ffffff;
text-align:center;
text-decoration:none;
background-color:#333333;
}
nav a:hover {
background-color:#666666;
}
/* メインコンテンツ*/
#main {
float:left;
width:672px;
background-color:#7FC7AF;
}
/* サイドバー */
#sidebar {
float:right;
width:240px;
background-color:#f0a830;
}
フルードグリッド（Fluid Grid）に変換
px指定でレイアウトが出来たら、フルードグリッド（Fluid Grid）に変換するため、要素の割合を計算します。
計算方法は、調べる要素÷親要素の幅×100で計算することが出来ます。
#mainの割合を計算する場合、672px（#mainの幅）÷960px（#contentsの幅）×100=70%となります。
/* メインコンテンツ */
#main {
float:left;
width:70%;
}
#sidebarの割合を計算すると、240px（#sidebarの幅）÷960px（#contentsの幅）×100=25%となります。
/* サイドバー */
#sidebar {
float:right;
width:25%;
}
親要素である#contentsは、幅指定（width）を最大幅（max-width）に変更します。IE7以下はmax-widthに対応していないので、IE独自の「Dynamic Property」で対応します。
/* コンテンツ */
#contents {
max-width:960px;
margin:0 auto;
width:expression(document. body.clientWidth > 962? "960px" : "auto");
}
参考：[CSS]IEで、min-widthやmax-widthを実現する方法
上記のCSSをまとめるとこのようになります。
/* =====================
レイアウト
======================= */
/* 幅指定 */
header, nav, #contents, footer {
max-width:960px;
margin:0 auto;
width:expression(document. body.clientWidth > 962? "960px" : "auto");
}
/* ナビゲーション */
nav li {
display:inline;
}
nav a {
display:block;
float:left;
padding:10px 0;
width:25%;
color:#ffffff;
text-align:center;
text-decoration:none;
background-color:#333333;
}
nav a:hover {
background-color:#666666;
}
/* メインコンテンツ*/
#main {
float:left;
width:672px;
background-color:#7FC7AF;
}
/* サイドバー */
#sidebar {
float:right;
width:240px;
background-color:#f0a830;
}
スマホ・タブレット向けのレイアウトをする
スマホやタブレットの見た目を調整していきます。
スマホやタブレットではPCに比べて画面が小さいので、メインカラム・サイドバーの2カラムだと横並びだと読みづらくなります。スマホ・タブレットの画面幅になったときはfloatと幅指定を解除します。
/* CSS再リセット */
#main, #sidebar {
float:none;
width:auto;
margin:0;
padding:0;
}
このままでは、画面の端ぴったりに文字が並んで読みづらいので、左右に余白を開けます。
/* 幅指定 */
header, nav, #contents, footer {
width:92%;
max-width:960px;
margin:0 auto;
}
ナビゲーションリンクやボタンなどは押しやすくするため、aリンクをブロック要素にし、幅を広くします。タブレット向けは一行につき2個、スマホ向けは一行につき1個のリンクにしました。
<ul id="nav" >
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div><!-- nav-->
/* =====================
レイアウト
======================= */
/* ナビゲーション */
#nav a {
display:block;
float:left;
width:25%;
}
/* =====================
タブレット向け
======================= */
@media screen and (min-width: 480px) and (max-width: 959px) {
/* ナビゲーション */
#nav a {
float:50%; /* 25%→50%に変更 */
}
/* タブレット向けここまで */ }
/* =====================
スマホ向け
======================= */
@media screen and (max-width: 479px) {
/* CSS再リセット */
nav a, #main, #sidebar {
float:none;
width:auto; /* 25%→100%に変更 */
}
/* スマホ向けここまで */ }
これでスマホ・タブレット向けのレイアウトは完成です！レスポンシブの切り替えの勉強のため、見た目はかなり適当ですが…ｗ
IE8以下の対応について
IE8以下はレスポンシブWEBデザインに非対応です。
Javascriptを使用すると可能ですが、色々と問題があります。。
参考：レスポンシブWebデザインをIEに対応させる方法
最後に
レスポンシブWEBデザインは最初の設計をしっかりと立てておけば、作業の短縮を図ることが出来ます。レスポンシブWEBデザインの長所と短所を理解した上でぜひ活用してみましょう！
