スマートフォン用サイトの作成

基本設計

html5

スマートフォン用サイトはHTML5でマークアップ、CSS3でデザインすることが推奨されています。

HTML5やCSS3についての詳細は以下のリンク先を参照してください。

HTML5 CSS3

画面解像度

iPhone3 までの画像解像度 320x416px (画面全体 320x480px )に合わせる

iPhone4 の画像解像度 (画面全体 640x960px )

以下のようにスマートフォン端末の画面解像度は様々で、縦横で幅と高さが逆転する。

スマートフォン用のサイトをデザインするときは「画像を配置する」でなく、「繰り返し表示できる模様を背景に埋め込む」と考えたほうが良い

端末	画面解像度 (px) (液晶画面全体の解像度)
iPhone 3G/3GS	320x480
iPhone4	960x640
iPad	1024x768
docomo HT-03A	320x480
docomo Xperia SO-01B	480x854
docomo GALAXY S SC-02B	800x480
HTC Desire SoftBank X06HT	480x800
e-mobile HTC Aria	320x480
au IS03	960x640
au REGZA Phone IS04	854x480
au IS05	854x480
softbank DELL Steak 001DL	800x480
softbank GALAPAGOS 003SH	800x480
softbank Libero 003Z	800x480
softbank 004HW	480x320

文字サイズ

14～16px

行間(line-height) 1.4～1.6 (140～160%)

ナビゲーションリンクのサイズ

スマートフォンの操作はタッチパネルのため、タップ(指での画面タッチ)しやすいよう十分な領域を確保する必要があります。

Appleのガイドラインによると縦幅44px以上が良いと言われています。

flash対応

iPhone4はflash再生に対応していない。(現時点)

リッチなUIをつくるときはHTML5とCSS3,JavsScriptで対応すること。

Viewportによる画面全体のサイズ指定

meta要素によるViewportの設定


<meta name="viewport" content="..." />

コード	意味	default
width	幅	980px
height	高さ	幅に合わせて自動
initial-scale	初期状態の拡大率	1.0
user-scalable	ユーザー操作による拡縮の許可	yes
minimum-scale	縮小率の限度	0.25
maximum-scale	拡大率の限度	1.6

Viewportの設定例


<meta name="viewport" content="width=980px,initial-scale=1.0,user-scalable=yes,minimum-scale=0.25,maximum-scale=2" />

device-width

Viewportのwidthにはdevice-widthの設定が推奨します。

device-widthはブラウザの横幅を表します。

固定幅を設定すると解像度が大きいブラウザで見たときに表示が偏ってしまいますが、device-widthを設定することで画面全体の幅をブラウザに合わせることができます。

Canvas 対応状況

スマートフォンはすべてcanvas対応済み

※Canvas 内に文字列を表示する CancvasTextは非対応

OS	対応
Apple iPhone	○
Apple iPad	○
Android 1.6	○
Android 2.2	○

CSS3 対応状況

スマートフォンはCSS3対応済み

CSS3は端末の画面解像度の違いによる画像劣化もなく、リサイズ処理も軽いのでどんどん活用しよう

OS	対応
Apple iPhone	○
Apple iPad	○
Android 1.6	○
Android 2.2	○

SVG 対応状況

SVGはテキストによるベクター画像。

iPhone系は対応しているが、Android2.2では対応していない。

OS	対応
Apple iPhone	○
Apple iPad	○
Android 1.6	☓
Android 2.2	☓

Flash 対応状況

Android系は対応しているが、iPhone系では対応していない。

OS	対応
Apple iPhone	☓
Apple iPad	☓
Android 1.6	☓
Android 2.2	○

CSS3 デザイン

今回はデモ用にスマートフォンの幅を想定した320px幅の枠を用意します

スマートフォンの主な要素のリセット


/*主な要素のリセット*/
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, header, hgroup, section, srticle, aside, footer, figure, figcaption, nav{
  margin:0;
  padding:0;
  font-size:100%;
}
body{
  line-height:1.0;
  -webit-text-size-adjust:none;
}

/*HTML5要素のブロック化*/
header, hgroup, section, srticle, aside, footer, figure, figcaption, nav{
  display:block;
}

img{
  border:0;
  virtical-align:bottom;
}
ul, ol{
  list-style:none;
}
table{
  border-spacing:0;
  empty-cells:show;
}

アイコン

画像サイズ 60x60px

余白 8px

60x4 + 8x2x4 + 8x2 = 320px

アイコンを横に4つ並べるとちょうど画像間が16pxになって綺麗に並ぶ

画像サイズ 80x80px

余白 10px

80x3 + 10x2x3 + 10x2 = 320px

アイコンを横に4つ並べるとちょうど画像間が20pxになって綺麗に並ぶ

角丸

半径 8px

角丸枠のさらに内側では半径 6pxを指定する

jQuery Mobile

クロスプラットフォーム＆クロスデバイス対応

スマートフォン用のjQueryプラグイン

http://jquerymobile.com/

スマートフォン用サイトのサンプル

http://hi0a.com/touch/

スマートフォン 用サイトの作成