スマートフォン向けサイトの作り方
2011年1月22日
iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。
この記事の内容
スマートフォン向けサイト作成にあたっての基本概要
まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。
横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。
標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。
※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。
ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAndroid端末といった解像度でも綺麗に画像を表示させるように対応するとなると640px(横)で作成するほうが後々の画像切り出しの際に困らないので良いかと思います。
また解像度だけではなく、横向きにも対応しようとするのであれば、極力CSS3の角丸やグラデーション、ドロップシャドウなどを利用したリキッドレイアウトのデザインにするのがベターといえます。
横幅一杯を使うメイン画像などはwidthを100％に指定するか、PNGをうまく使って背景をリピート画像で用意しておくなどのテクニックが有効になります。
フォントサイズやボタンサイズなどを設計する際は一度AppleのiOS Human Interface Guidelinesに目を通して置くことをオススメします。
リンク元サイトは英語ですが、日本語に翻訳されたPDFファイル（【PDF】iOSヒューマンインターフェイスガイドラ イン）があります。
Apple公式のユーザビリティに関するガイドラインなので実験結果に基づいた信頼性の高い情報です。
たとえば、指先で行うクリック領域において
「ユーザ体験ガイドライン」の「ターゲットを指先サイズにするの項目」より
アプリケーション内のタップ可能な要素には、約44 x 44ポイントのターゲット領域を割り当てる
44ポイントは最低必要だよといった具体的な指標なども記載されています。
スマートフォン独自の仕様について
スマートフォンでの可視領域やズームなどの設定をするmeta要素がviewportです。
viewportの各プロパティ
- width(幅)
-
可視領域の幅。デフォルト値は980px。
200pxから10000pxまでの範囲を指定できる。 - height（高さ）
-
高さ。デフォルト値はwidthの値とデバイスのアスペクト比から算出される。
233pxから10000pxまでの範囲を指定できる。 - initial-scale（ズームの詳細設定）
-
ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scaleからmaximum-scaleによって定義された範囲の値が指定できる。
最初にページが表示されるviewportの値のみが指定可能。
user-scalableにnoを指定していなければズーム操作が可能になる。
ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限される。 - minimum-scale（最小縮小比率）
-
viewportの最小scale値。
デフォルト値は0.25。
0から10.0までの範囲を指定できる。 - maximum-scale（最小拡大比率）
-
viewportの最大scale値。
デフォルト値は1.6。
0から10.0までの範囲を指定できる。 - user-scalable（ズームの有無設定）
-
ユーザーがズーム操作できるかどうかをyesとnoで指定する。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限される。
viewport指定の一例
<meta name="viewport" content="[プロパティ]=[値], [プロパティ]=[値], [プロパティ]=[値]">
幅はデバイスに準拠、ズームはさせないという設定であれば下記のように記述する。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
ちなみにwidthとinitial-scaleを両方同時に指定していて、値が異なる場合は、大きい方が採用されます。
iPhone、Androidでのバグや仕様などの情報
スマートフォンサイトを作成する際にかならずつまづくであろうiPhoneやAndroid特有のバグや仕様などの情報をまとめてみました。
iPhone特有のバグや仕様のまとめページ
つまづきがちなiPhoneコーディングのTips（JS多め）
Android多めのバグや仕様のまとめページ
スマｰﾄフォン(iPhone, Android)のバグまとめ
Androidブラウザではviewportのwidthに数値が指定できない
Androidブラウザでviewportのwidth指定［to-r］
横幅のはみ出し対策
スマホサイトの作り方で、あんまり書かれてないことを書いてみた
Androidにおけるコンテンツフィットと「overflow:hidden」
解像度や画像表示比率について
携帯サイトでVGAとQVGAでディスプレイの解像度が違うので画像サイズを比率の数値で出力を制御するツールなどがありますが、iPhone3G-3GS1（480×320ドット）とiPhone4（960×640ドット）では4倍の解像度の違いがあります。
また、Android端末も機種によって解像度は異なります。iPhoneやAndroidのWebKit系のブラウザはdevicePixelRatioというプロパティが定義されています。
この要素の値によって画像の1pxが何pxで表示されるかを知る事ができます。
CSSでdevicePixelRatioの値によって書き分ける方法は当ブログのスマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定でご紹介しています。
また、Android端末のdevicePixelRatioの一覧もまとめられています。
Android端末のdevicePixelRatio［to-r］
iPhone向けSafariでのみ有効な各種設定
全画面表示（yes）
デフォルトは「no」になっています。
<meta name="apple-mobile-web-app-capable" content="yes" />
ステータスバーのカラー設定（default / black /black-translucent）
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
電話番号、メールアドレスのリンクの自動検出設定（telephone=no）
自動検出はデフォルトで「on」の状態。telephone=noで「off」に設定できます。
<meta name="format-detection" content="telephone=no" />
ホーム画面に表示されるアイコンの指定
<link rel="apple-touch-icon" href="icon.png" />
スマートフォンサイトのベーステンプレート設計
-
HTML＆CSS
HTML5/CSS3が使用可能です。
レイアウトは縦表示、横表示に対応出来るようにリキッドレイアウトで行うのがベターです。 -
Javascripｔ
実行速度は10秒まで。それ以降の処理は無効化されるとの事なので、JSの処理速度は重要になってきます。
HTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>タイトル</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1></h1> </header> <article> <section> <h2></h2> <p></p> </section> </article> <nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> <footer> <p></p> </footer> </body> </html>
リセットCSS
参考：iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう
body {
line-height:1;
margin:0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
ul {
list-style:none;
padding:0;
}
li {
padding:0;
}
input, select {
vertical-align:middle;
}
a {
display: block;
}
a {
-webkit-tap-highlight-color:transparent;
}
ベースCSS
/* clearfix（任意で） */
*:after { display:block; clear:both; }
/* はみ出し対策 */
body { width:100%; overflow:hidden; }
/* ↓以下通常CSSを記載していく */
スマートフォンサイト作成で役立つJavascriptの紹介
jQuery mobile
スマートフォンサイト作成のためのjQueryベースのフレームワークです。
http://jquerymobile.com/
ちなみにjQuery mobileについては当ブログでも紹介しています。
https://www.u-ziq.com/blog/2010/11/jquery_mobile.html
iPhoneかAndroidかを判定してbodyにクラスを付けるjavascript
http://html-coding.co.jp/knowhow/smtp/000178/
iPhoneかAndroidで傾きに合わせてスタイルを切り替えるjavascript
http://html-coding.co.jp/knowhow/smtp/000140/
スマートフォン端末のユーザーエージェント
※2011年1月22日時点での情報を掲載。
解像度やスペックについての詳細は「スマートフォン比較表」がタイムリーにまとまっています。
| キャリア | 端末 | OS | ユーザーエージェント |
|---|---|---|---|
| DoCoMo | HT-03A | Android 1.5 | Mozilla/5.0 (Linux; U; Android 1.5; ja-jp; HT-03A Build/CDB72) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 |
| DoCoMo | HT-03A | Android 1.6 |
Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; Docomo HT-03A Build/DRD08) AppleWebKit/528.5+(KHTML, like Gecko) Version/3.1.2 Mobile Safari/ 525.20.1 |
| DoCoMo | Xperia | Android 1.6 | Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SonyEricssonSO-01B Build/R1EA018) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 |
| DoCoMo | BlackBerry | – | BlackBerry9000/4.6.0.224 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/220 |
| DoCoMo | LYNX(SH-10B) | Android 1.6 | Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SH-10B Build/S7023) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 |
| DoCoMo | SH-03C | Android 2.1 | Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; SH-03C Build/SB110) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 |
| DoCoMo | Galaxy S | Android 2.2 | Mozilla/5.0 (Linux; U; Android 2.2; ja-jp; SC-02B Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 |
| DoCoMo | Galaxy Tab | Android 2.2 | Mozilla/5.0 (Linux; U; Android 2.2; en-us; SC-01C Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 |
| DoCoMo | Galaxy Tab | Android 2.2 | Mozilla/5.0 (Linux; U; Android 2.2; ja-jp; SC-01C Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 |
| DoCoMo | REGZA Phone | Android 2.1 | Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; T-01C Build/TER018) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 |
| SoftBank | HTC Desire | Android 2.1 | Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; HTCX06HT Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 |
| SoftBank |
iphone3G iphone3GS |
iphone OS3 | Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16 |
| SoftBank | iphone4 | iOS4 | Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7 |
| au | IS01 | Android 1.6 | Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; IS01 Build/S6191) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 |
| au | IS02 | Windows Mobile 6.5.3 |
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 8.12; MSIEMobile 6.5) KDDI-TS01 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; KDDI-TS01; Windows Phone 6.5.3.5) |
| au | IS03 | Android 2.1 | Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; IS03 Build/SB060) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 |
PCでブラウザチェックをするためのシミュレーター
Windows
iBBDemo(iPhone&iPad)
http://labs.blackbaud.com/NetCommunity/article?artid=662
Android SDK(Android)
http://developer.android.com/sdk/index.html
Mac
iPhoneSDK(iPhone)
http://developer.apple.com/iphone/index.action
iPhony(iPhone)
http://www.marketcircle.com/iphoney/
Android SDK(Android)
http://developer.android.com/sdk/index.html