2022年2月22日
スマートフォン対応のためのレスポンシブWebデザイン実用TIPS
スマートフォン対応サイト制作の手法として注目されている、
レスポンシブWebデザイン（Responsive Web Design）の実用TIPSを紹介します。
PC用表示・スマートフォン用表示の切り替え方法、お役立ちアプリなども紹介します。
関連記事
レスポンシブWebデザインとは
レスポンシブWebデザインでは、CSSを利用し、ウインドウサイズに応じてデザインを変更します。
そのため、PC用とスマートフォン用に複数のHTMLを作成する必要がないなど様々なメリットがあります。
レスポンシブWebデザインについては下記サイトが非常に詳しく、参考にさせていただいています。
レスポンシブWebデザイン実践
下記は、CMSの「Movable Type」において、CSSでスマートフォン対応したものです。
CSSを利用したレスポンシブWebデザインなので、システムには一切手を加える必要がありません。
このような、CMSを利用したサイトでもフロントエンドの開発によって
スマートフォン対応が可能になる点がレスポンシブWebデザインの大きなメリットだと思います。
cssTouch for MT(Movable Type)
デバイス判定
CSS Media Queries
一般的な方法は、CSS3のMedia Queriesで、ウインドウサイズによってスマートフォン用CSSを読み込む方法です。
iPhoneの最大サイズは横にしたときの480pxなので、それを指定します。@importなどでも指定可能です。
詳しくは上記サイトなどをご覧ください。
<link rel=”stylesheet” media=”screen and (min-width:480px)” href=”mobile.css” />
JavaScript
上記の方法たけでは、Androidのように様々なウインドウサイズが存在するデバイスには対応することができません。
そこで、ユーザーエージェント（userAgent）を確認することで、Androidなどにも対応することができます。
<script type=”text/javascript”>
if (navigator.userAgent.indexOf(‘iPhone’) > 0 || navigator.userAgent.indexOf(‘iPad’) > 0 || navigator.userAgent.indexOf(‘iPod’) > 0 || navigator.userAgent.indexOf(‘Android’) > 0) {
document.write(‘<link rel=”stylesheet” type=”text/css” href=”mobile.css” />’);
}
</script>
jQuery
上記の方法とjQueryを利用して、固有のclassを付ける方法もあります。
下記ではデバイスを判定して、bodyにiPhoneまたはAndroidというclassを追加します。
これで、簡単にCSSでデバイスごとに異なるデザインを指定できるようになります（CSSシグネチャ）。
<script type=”text/javascript” src=”js/jquery.js”></script><br />
<script type=”text/javascript”>
$(document).ready(function(){
if (navigator.userAgent.indexOf(‘iPhone’) > 0) {
$(‘body’).addClass(‘iPhone’);
} else if (navigator.userAgent.indexOf(‘Android’) > 0) {
$(‘body’).addClass(‘Android’);
}
});
</script>
Viewport
Viewportはmeta要素のひとつで、iPhone版Safariの可視領域、ユーザーによるピンチイン・ピンチアウトの可否
などを指定することができます。
詳しくは上記サイトなどをご覧ください。
<meta name=”viewport” content=”width=device-width,user-scalable=yes” />
なお、Androidはデバイスによっては対応している場合があります。
うまく効かない場合は「target-densitydpi」プロパティが有効なようです。
via Androidの「target-densitydpi」でviewportの調整
デザインの最適化
スマートフォン用サイトは、PC用サイトとはウインドウサイズの違い、デバイス操作方法の違いなどがあるため、
スマートフォン用のユーザビリティを考えて最適化を行う必要があります。
様々なスマートフォンサイトのキャプチャ、リンクを集めたサイトもあり、参考になります。
スマートフォン用サイト制作でWebデザイナーにとってうれしいのは、
Webデザイナーを悩ませ続けるIEに対応しなくてよい！
という点があります（Windows Phone はIEですが・・・それでもIE6は無視できる）。
iPhoneのSafariも、Androidの標準ブラウザも、
どちらもWebKitベースで、CSS3に進んで対応しているため、
CSSによる角丸やシャドウ、グラデーション、アニメーションなど多彩な表現が可能です。
レイアウト
カラム数の変更などは、flex を利用している場合、簡単に対応可能です。
テキスト
フォントサイズは、スマートフォンの小さいディスプレイを考慮して、
大きめに指定するほうが見やすくなります。12～14pxでは小さく感じる場合があります。
フォントサイズや行間を調整します（大雑把な例）。
また、URLなど半角英数字の長い文字列がある場合、
改行されず、レイアウトが崩れる問題があります。
下記のようなCSSで、テキストの折返し表示を指定します（IEが採用しているものですが、iPhone版Safari、Androidブラウザでも反映されました）。
word-break: break-all;
word-wrap: break-word;
DIV全体をリンク
jQueryを利用して、リンクを指定したアンカー部分だけでなく、
それを囲んでいるDIV全体をクリック（タップ）できるようにすることができます。
スマートフォン用サイトでは、タップしやすくすることでユーザビリティの向上につながります。
vis 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
Web Clip
iPhone版Safariでサイトを「ホーム画面に追加」したときのアイコン画像を設定することができます。
57×57(または129×129)ピクセルのPNG画像を用意して、
ファイル名を「apple-touch-icon.png」としてサイトのルートパスにアップすればOKです。
角を丸くしたりする必要はありません。
また、下記のように指定することもできます。
<link rel=”apple-touch-icon” href=”icon.png” />
画像・動画の最適化
下記のようなCSSで、画像や埋め込んだ動画などをウインドウサイズにあわせて可変表示にします。
HTMLでサイズが指定されいる場合に備えて、!important（優先）を指定しています。
img, object, embed {
max-width: 100% !important;
height: auto !important;
}
スマートフォン閲覧では、古いIEを気にする必要はありませんが、
下記IE用CSSで、古いIEでも縮小画像を綺麗に表示することができます。
img {
-ms-interpolation-mode: bicubic;
}
背景画像の最適化
下記のようなCSSで、指定した背景をウインドウサイズにあわせて可変表示にします。
パターンなどで敷き詰めて表示（repeat）する場合は不要です。
.box {
background: url(bg.png) no-repeat scroll 0 0 transparent;
background-size: 100% auto;
}
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用表示・スマートフォン用表示の切り替え
ユーザーによるPC用表示・スマートフォン用表示の切り替えを可能にするには、
HTMLをそれぞれに用意している場合はそれぞれにリンクを貼るだけでよいですが、
レスポンシブWebデザインの場合は少し工夫が必要になります。
下記ではjQueryとjquery-cookieを利用して実装する方法を紹介します。
jQuery
jquery-cookie
ユーザーが選んだ表示方法をCookieに記録することで、サイト内の表示方法を統一することができます。
ライブラリ
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 マーケット
WordPress
CMSのWordPressにおいては、レスポンシブ対応WordPressテーマを利用すると便利です。
レスポンシブWordPressテーマ LIQUID PRESS
関連記事
SNSでフォローする
関連記事
