スマートフォン対応のためのレスポンシブWebデザイン実用TIPS

2011年10月11日 CSS, JavaScript, Smartphone, WebDesign

スマートフォン対応サイト制作の手法として注目されている、
レスポンシブWebデザイン（Responsive Web Design）の実用TIPSを紹介します。
PC用表示・スマートフォン用表示の切り替え方法、お役立ちアプリなども紹介します。

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

レスポンシブWebデザインでは、CSSを利用し、ウインドウサイズに応じてデザインを変更します。
そのため、PC用とスマートフォン用に複数のHTMLを作成する必要がないなど様々なメリットがあります。

レスポンシブWebデザインについては下記サイトが非常に詳しく、参考にさせていただいています。

レスポンシブWebデザイン実践

下記は、CMSの「Movable Type」と、オープンソースSNSの「OpenPNE」をCSSでスマートフォン対応したものです（拙作）。
CSSを利用したレスポンシブWebデザインなので、システムには一切手を加える必要がありません。
このような、CMSを利用したサイトでもフロントエンドの開発によって
スマートフォン対応が可能になる点がレスポンシブWebデザインの大きなメリットだと思います。

cssTouch for MT(Movable Type)

cssTouch for OpenPNE

デバイス判定

CSS Media Queries

一般的な方法は、CSS3のMedia Queriesで、ウインドウサイズによってスマートフォン用CSSを読み込む方法です。
iPhoneの最大サイズは横にしたときの480pxなので、それを指定します。@importなどでも指定可能です。
詳しくは上記サイトなどをご覧ください。

JavaScript

上記の方法たけでは、Androidのように様々なウインドウサイズが存在するデバイスには対応することができません。
そこで、ユーザーエージェント（userAgent）を確認することで、Androidなどにも対応することができます。

jQuery

上記の方法とjQueryを利用して、固有のclassを付ける方法もあります。
下記ではデバイスを判定して、bodyにiPhoneまたはAndroidというclassを追加します。
これで、簡単にCSSでデバイスごとに異なるデザインを指定できるようになります（CSSシグネチャ）。

Viewport

Viewportはmeta要素のひとつで、iPhone版Safariの可視領域、ユーザーによるピンチイン・ピンチアウトの可否
などを指定することができます。
詳しくは上記サイトなどをご覧ください。

デザインの最適化

スマートフォン用サイトは、PC用サイトとはウインドウサイズの違い、デバイス操作方法の違いなどがあるため、
スマートフォン用のユーザビリティを考えて最適化を行う必要があります。

様々なスマートフォンサイトのキャプチャ、リンクを集めたサイトもあり、参考になります。

スマートフォン用サイト制作でWebデザイナーにとってうれしいのは、
Webデザイナーを悩ませ続けるIEに対応しなくてよい！
という点があります（Windows Phone はIEですが・・・それでもIE6は無視できる）。
iPhoneのSafariも、Androidの標準ブラウザも、
どちらもWebKitベースで、CSS3に進んで対応しているため、
CSSによる角丸やシャドウ、グラデーション、アニメーションなど多彩な表現が可能です。

レイアウト

カラム数の変更などは、floatを利用している場合、簡単に対応可能です。
PC用CSS（例）。

#main {<br /> float: left;<br /> width: 600px;<br /> }<br /> #sub {<br /> float: left;<br /> width: 300px;<br /> }
スマートフォン用CSS（例）。
#main, #sub {<br /> float: none;<br /> width: 100%;<br /> }

テキスト

フォントサイズは、スマートフォンの小さいディスプレイを考慮して、
大きめに指定するほうが見やすくなります。12～14pxでは小さく感じる場合があります。
フォントサイズや行間を調整します（大雑把な例）。

body {<br /> font-size: 18px;<br /> line-height: 1.5em;<br /> }
また、URLなど半角英数字の長い文字列がある場合、
改行されず、レイアウトが崩れる問題があります。
下記のようなCSSで、テキストの折返し表示を指定します（IEが採用しているものですが、iPhone版Safari、Androidブラウザでも反映されました）。
td, th, p, h1, h2, h3, h4, h5, h6, label {<br /> word-break: break-all;<br /> word-wrap: break-word;<br /> }

DIV全体をリンク

jQueryを利用して、リンクを指定したアンカー部分だけでなく、
それを囲んでいるDIV全体をクリック（タップ）できるようにすることができます。
スマートフォン用サイトでは、タップしやすくすることでユーザビリティの向上につながります。
vis 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス

Web Clip

iPhone版Safariでサイトを「ホーム画面に追加」したときのアイコン画像を設定することができます。
57×57(または129×129)ピクセルのPNG画像を用意して、
ファイル名を「apple-touch-icon.png」としてサイトのルートパスにアップすればOKです。
角を丸くしたりする必要はありません。
また、下記のように指定することもできます。

画像・動画の最適化

下記のようなCSSで、画像や埋め込んだ動画などをウインドウサイズにあわせて可変表示にします。
HTMLでサイズが指定されいる場合に備えて、!important（優先）を指定しています。

img, object, embed {<br /> max-width: 100% !important;<br /> height: auto !important;<br /> }
スマートフォン閲覧では、古いIEを気にする必要はありませんが、
下記IE用CSSで、古いIEでも縮小画像を綺麗に表示することができます。
img {<br /> -ms-interpolation-mode: bicubic;<br /> }

背景画像の最適化

下記のようなCSSで、指定した背景をウインドウサイズにあわせて可変表示にします。
パターンなどで敷き詰めて表示（repeat）する場合は不要です。

.box {<br /> background: url(“bg.gif”) no-repeat scroll 0 0 transparent;<br /> background-size: 100% auto;<br /> }

Flashの最適化

可変表示設定

Flashは、パブリッシュ設定で、サイズ「パーセント」、幅「100」、高さ「100」に設定することで、可変表示にします。
objectタグの属性が width=”100%” height=”100%” となります。
ただし、ウインドウサイズが変わると、ステージの基準点が変わるため、
別途ActionScriptの設定が必要な場合があります。詳しくは下記サイトなどをご覧ください。
All About – Flashでリキッドデザイン

代替コンテンツ

iPhoneは、Flashに対応していないため、代替コンテンツが必須となります。
下記、Flash埋め込み用JavaScriptライブラリ「swfobject」では、簡単に代替コンテンツの指定ができます。
また、Flash Playerのバージョン判定、背景色の透過なども行うことができます。
swfobject

swfobjectでは、下記のように記述することで、objectを自動生成します。
指定したIDの要素にFlashを表示します。その要素の中身は、Flash非対応の場合の代替コンテンツとなります。

表示・非表示エリアの作成

PCでは非表示、スマートフォンでは表示、またはその逆などの要素を作る場合、
非表示用のclassを作成しておくと便利です。
下記の例では、「PCでは非表示 = hidden_pc」、
「スマートフォンでは非表示 = hidden_sp」としています。

PC用CSS（例）。

.hidden_pc {<br /> display: none;<br /> }<br /> .hidden_sp {<br /> display: block;<br /> }
スマートフォン用CSS（例）。
.hidden_pc {<br /> display: block;<br /> }<br /> .hidden_sp {<br /> display: none;<br /> }

PC用表示・スマートフォン用表示の切り替え

ユーザーによるPC用表示・スマートフォン用表示の切り替えを可能にするには、
HTMLをそれぞれに用意している場合はそれぞれにリンクを貼るだけでよいですが、
レスポンシブWebデザインの場合は少し工夫が必要になります。
下記ではjQueryとjquery-cookieを利用して実装する方法を紹介します。
jQuery
jquery-cookie

ユーザーが選んだ表示方法をCookieに記録することで、サイト内の表示方法を統一することができます。
下記は、CSS Media Queries利用＆スマートフォン用はCSSを「追加」＆スマートフォン用表示をデフォルトとする場合のサンプルです。
ちょっと横着している部分もあるので・・適宜修正してください。

ヘッダーに記述。

<link rel="stylesheet" media="all" href="pc.css" type="text/css" id="styles_pc" /> <link rel="stylesheet" media="screen and (min-width:480px)" href="mobile.css" id="styles_sp" /> <br /> <meta name="viewport" content="width=device-width,user-scalable=yes" /><br /> <br /> <script type="text/javascript" src="js/jquery.js"></script><br /> <script type="text/javascript" src="js/jquery.cookie.js"></script><br /> <script type="text/javascript"> $(document).ready(function(){ if($.cookie("mode")=="pc"){ // PC用表示とCookieに記録されていたら $("#styles_sp").attr("media","speech"); // スマホ用CSSを無効にする（横着） $("meta[name=viewport]").attr("content","width=980,user-scalable=yes"); // ViewportをPC用に最適化 $(".button_sp").removeClass("hidden_pc"); // スマホ閲覧なのでPC非表示classは削除 } $("#button_pc").click(function(){ // PC用表示リンクがクリックされたら $("#styles_sp").attr("media","speech"); $("meta[name=viewport]").attr("content","width=980,user-scalable=yes"); $(".button_sp").removeClass("hidden_pc"); $.cookie("mode","pc",{path:'/'}); // PC用表示とCookieに記録 }); $("#button_sp").click(function(){ // スマホ用表示リンクがクリックされたら $("#styles_sp").attr("media","all"); // スマホ用CSSを有効にする $("meta[name=viewport]").attr("content","width=device-width,user-scalable=yes"); $.cookie("mode","sp",{path:'/'}); // スマホ用表示とCookieに記録 }); }); </script>
下記、表示切り替えリンクのHTMLです。先の表示・非表示classも利用して、リンクの有無も切り替えています。
</p> <div class="button_sp hidden_pc"> 表示モード：<strong class="hidden_pc">スマートフォン</strong><a href="#" id="button_sp" class="hidden_sp">スマートフォン</a> | <strong class="hidden_sp">PC</strong><a href="#" id="button_pc" class="hidden_pc">PC</a> </div> <p>

ライブラリ

HTMLの最適化も必要なため、レスポンシブWebデザインとは少し異なるかもしれませんが、
スマートフォンサイト開発用ライブラリを利用することで、さらにリッチなサイトを制作することもできます。

jQuery Mobile

jQueryのモバイル版です。様々なデバイスに対応可能です。
jQueryのプラグインとして動作します。他のプラグインと同様、簡単に導入することができます。
jQuery Mobile

jQTouch

iPhone（iOS）向けのWebアプリケーション開発用ライブラリです。
アプリのようなインターフェース、アニメーションなどが可能になります。
jQTouch

アプリ紹介

ScriptBrowser

ScriptBrowserは、iPhoneでサイトのHTML、CSS、JavaScriptなどを閲覧できるブラウザアプリです（無料）。
ソースコード閲覧、ソースコードテストモードなどがあります。

App Store – ScriptBrowser – ソースコード閲覧&テスト

Angel Browser

Angel Browser（旧Galapagos Browser）は、Android向け国産ブラウザアプリです（無料）。
「ページ情報」から「ページのソースを表示」でサイトのソースコード閲覧が可能です（ときどきフリーズします・・）。
また、ユーザーエージェントの設定が可能で、i-modeなどの携帯サイトの閲覧などもできます。
Angel Browser – Android マーケット

スマホ対応ならRWD+（レスポンシブWebデザインプラス）

この記事を書いた人

liquid

LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。

https://lqd.jp/

SNSでフォローする