スマホサイト制作のポイント！スマホ持ってない奴が真剣に考えてみたった
画面の前の皆様、ごきげんよう。私だ（誰だお前）
今回はスマホ持ってない奴が真剣にスマホサイト制作のポイントを考えたぜ。
さあ、選ばれし勇者達よ我と共に学ぼうではないか！
そのいち 実機で確認しましょう
スマートフォンとPCでは目からの距離などが違うので、
PCでしっかり見れても文字が小さすぎるなんてこともあります。
持ってない人は持ってる人に借りるなりなんなりしましょう。
そのに Retina Displayに対応すべし！
Retina Displayとは
「iPhone4から用いられるようになった高精細なディスプレイ」である。
画面サイズはiPhone3などと同じ3.5inchでありながら、4倍以上の解像度を実現している。
コントラスト比も従来比4倍で、より鮮明で深みのある色を表現できる。
あと周囲の明るさによってディスプレイの明るさを自動調節するとか、
通話で耳にあてた時に自動的にディスプレイをオフにするといったこともできたりします。
が、今ここではあまり関係ありませんね。閑話休題。
こいつに対応していない画像は、対応してる端末で見た時にぼやけて見えてしまいます。
なんということでしょう。
で、対応する方法ですが
- CSSの＠mediaに指定する
@media screen and (-webkit-min-device-pixel-ratio:1.5){
.classname{
background:url(hoge.png);
//2倍の画像を指定
-webkit-background-size:50px 50px;
//半分の大きさに縮める（半分に縮めることで大きさは変わらない）
}
}↑こんな風に記述するですよ
- デザインを640×960pxで制作する
4以降の解像度が2倍なので320×480pxの2倍である640×960pxでデザインしましょう
倍のサイズなので、文字サイズ、ロゴサイズ、アイコンサイズ、画像サイズ、マージンも倍です
なので2で割り切れる数にしましょう
↑コンテンツ（おもに画像）の実際の1pxをデバイス上では何pxで描画するのかを表した比率
- Retina.jsを使う
↑ただし全ての画像が指定される上にサーバに探しにくる
とはいったものの、
「Androidの画面サイズはすべて！？スマートフォン画面サイズ108個まとめ 」で紹介した通り
Androidの画面サイズは非常にまちまちなので気をつける必要があります。なんてこったい。
そのさん ボタンの最小サイズは44×44px
iOSヒューマンインターフェースガイドラインで、
タップ可能な要素には「約44×44pxのターゲット領域を割り当てる」としてるそうな。
まあ確かに指で操作する以上、小さいと押しにくいし、高さがないと誤押ししますよね。
そのご フォントサイズは14px～16px
小さいと可読性が悪い上に、iPhoneで11px以下にするとおかしなバグが起こる。
さらに言うとAndroidは7px以下のフォントは表示されないのである。
また長文の文章になっても読みやすいフォントサイズは14～16pxとされているので、
フォントサイズは14～16px以上を心がけましょう。
そのろく 色んなサイトを参考にしましょう
他にも横向き想定しようとか、フォントはヒラギノ角ゴで作ろうぜとか色々あるけれど、
色んなサイトを見て色んなデザインを見るにこしたことはないです。
様々なスマホサイトを見てデザインを学ぶことも大事ですよ。
下記にスマホサイトのデザインを集めたサイトの一部を掲載しました。参考にどうぞ。
「iPhoneサイトデザイン集のiPhoneデザインアーカイブ」
