スマートフォン用サイト-はじめてのコーディングの前におさえておくこと

広告

はじめてスマートフォン向けサイトを制作したときに調べたことのまとめ。
(※スマートフォン専用サイトでiPhoneとAndroidに対応させる場合)

基本的にリキッドデザインにする

画面サイズの目安は、縦のとき:幅320px×高さ480px 横のとき:幅480×高さ320px
iPhoneの場合は上記サイズで問題ないけど、AndroidのXperiaでは長いページのときにスクロールバーが表示され(初期のモデルSO-01Bで確認したので最新のは違うかも)320pxよりせまくなるっぽい。
あと、横に向けたときにいい感じに伸びてほしいと言われる(可能性がある)ので、スマートフォン専用のサイトならばリキッドデザインにしておいた方が無難。

(2013/10/23追記)
Xperiaの初期モデルSO-01BのAndroid 1.6のとき(バージョンアップした場合は分かりません)の縦表示時の有効幅は314pxのようです。
なのでスクロールバーの幅が6px分削られるみたいです。
Android1.6は今はもうメーカーアプリとか以外でターゲットに入る事はまずないですが…たまたま機会があったので追記。

基本的にhtml5+CSS3でコーディング

スマートフォン専用サイトなら思う存分使える!!(幸せを感じる瞬間)
データ容量を軽くするためにもCSS3は特に駆使しまくる。

metaタグの設定

HTMLファイルを作成したら、忘れないうちに下記のふたつのmetaを設定しておく。

Viewport

Viewportはスマートフォン独自の仕様で仮想のウィンドウサイズ的なもの。
設定しておかないと意図に反して拡大縮小表示されてしまうので必ず設定しとく。

↓いまのところの標準的な設定

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

(「user-scalable=no」ユーザー側で拡大率の変更を許可しない…はユーザビリティ的にどうかなぁと思ったけど、いろいろあって今のところはこれでいいかと思いました)

詳細は、下記サイトに詳しく書かれているのでそちらを参照。

(2013/10/23追記)
最近はバグなどがかなり少なくなったので、「user-scalable=no」を指定する必要性は特になくなりました。
なのでクライアントの要望やサイトのデザインに合わせて、下記のピンチで拡大ができる設定でもOKかと。
※「position:fixed」を使用する場合、Android 2.3以下で「user-scalable=no」の指定が必要。
その他、Lightbox系のプラグインを使用したときにピンチで拡大すると若干バグった経験があるので使用するJSによっては要検証です。

↓ピンチで拡大ができる設定(2013/10/23追記)

<meta name="viewport" content="width=device-width, initial-scale=1">

電話番号の自動検出リンク(iPhoneのSafari対策)

電話番号っぽい数字が並んでいると自動的にtelリンク(クリックで電話をかける)が生成されてしまう機能をoffにする。
(郵便番号123-4567などにもtelリンクがついてしまうので)

ソース書き忘れてた!(2012/04/05追記)

<meta name="format-detection" content="telephone=no">

電話番号には手動で<a href=”tel:xxxxxxxxxx”>~を手動でつける。

画像は極力使わない

描画速度がPCほど速くないのでデータ容量をできるだけ軽くする。(表示待ちのストレスを軽減するため)
そのため、画像はできるだけ使用しないようにする。
グラデーション、角丸、ドロップシャドウはCSS3でつける。
画像を使うときは、

  • 色数の少ないもの(PCで普通GIF)はPNG-8
  • 写真など(PCで普通JPEG)はJPEG
  • 半透明(PCで普通PNG-24)はPNG-24
  • アニメーションつきはGIF(アニメーションGIF)

って感じでできるだけファイルサイズが小さくなる形式で書き出す。

※(2013/10/23追記)
サイズが50pxくらいとか小さい場合にPNG-8よりGIFで書き出した方がファイルサイズ小さくなる場合があることに割と最近気づきました…。
あと、アイコンなどサイズが小さい画像は極力1枚の画像にまとめてCSSスプライトを使用するようにします。

画像を使うときは注意

写真やアイコンなど、画像を普通に置くと…にじんで汚い!

理由はiPhone4の2倍の解像度で表示する機能の影響。Xperia SO-01Bでも同様の現象を確認。

キレイに表示するためには2倍の大きさで画像を作る必要がある。

例えば普通で100px×100pxの画像なら、2倍の大きさの200px×200pxで作っておき、
<img src="xxx.png" width="100" height="100" alt="xxx">
にする。
背景画像の場合は普通にCSSで背景を指定して、
-webkit-background-size: 100px 100px;
background-size: 100px 100px;
を追加する。※

※ベンダープレフィックスなしの記述が抜けていたので追加しました(2013/10/23追記)
ちなみに、Android 2.1以下に対応させる必要がない場合はプレフィックスありの記述はなくてOKです。

そんな事情もあるので、デザインはIllustratorでしといた方がいいっぽい。
(2013/10/23追記:って書きましたがWebのデザインでIllustratorってあまり使いませんよね…。単純に2倍サイズで幅320px想定のデザインの場合は640pxで作る感じです)

詳細は、下記サイトに詳しく書かれているのでそちらを参照。

iPhoneで横にしたときに文字が大きくならないようにする

びっくりする。でも大丈夫。

html{-webkit-text-size-adjust:none;}
html{-webkit-text-size-adjust:100%;}
をCSSで指定すれば大きくならなくなる。

詳細は、下記サイトに詳しく書かれているのでそちらを参照。

※Webkit系PCブラウザの2013年頃(?)の一部のバージョンで、「none」を指定するとズーム変更時に文字サイズが変更されないバグがあったようです。
html{-webkit-text-size-adjust:100%;} でも同じ結果が得られるようなので変更しました。
現在のバージョンでは存在しないバグなので今さらですが…念の為100%を推奨ということで(2014/08/29追記)

iPhone・iPadでlabelタグを有効にする(2012/03/29追記)

書き忘れていたので追記。
iPhone・iPadのSafariではlabelタグが効きません。(labelタグ内をクリックしても対応するフォームが有効にならない)
下記のJavaScriptを追加すると有効になります。(要jQuery)
フォームがあるサイトのときは注意。

$(function(){

//iPhoneでlabel要素のクリックを有効にする
var ua =navigator.userAgent;
if(ua.indexOf(‘iPhone’) > -1 || ua.indexOf(‘iPad’) > -1 || ua.indexOf(‘iPod’) > -1){
$(‘label’).click(function(){
});
}

})

下記サイトを参照しました。

ブラウザでプレビュー

各種シュミレーターもありますが、iPhone・Androidともブラウザはほぼwebkitベースでできているものが利用されているので、作業中はSafariとChromeで(ウィンドウを細くして)確認し、実機で見て調整という流れでもさして問題ありませんでした。

Safariはページのメニューから「開発」→「ユーザエージェント」でiPhoneを選択。

実機で見ると、特にデバイス文字の見え方が違う気がしました。

気付いたことがあればじょじょに書き足していきます。

その他参考になるサイト

参考になる本

前知識から実践までスマートフォンサイトの作り方が一通りわかります。
JavaScriptのサンプルもあって便利。
かなり読みやすかった。


広告
Ads by Sitemix