スマホ向けサイトを作成した時にいろいろ調べたのでメモ。（デザイン編）
■デザインする時は、横幅640pxで作成しましょう。
なぜならiphone5、4sのRetinaが640pxだから。
正確には320pxの画面で640pxの画像をギュッとして見てる。
だから綺麗的な。
■デザインをチェックする時は、50%表示。
上で少し触れたように、実際は幅320pxで画面表示されるので、
実際のサイズ感をチェックするときは50%縮小で確認する必要があります。
ということは、作成する時は、いつもの倍で作らなくてはいけません。
本文の級数を10ptにしたければ、FW上は20ptにするという感じです。
■デザインする時は、必ず2の倍数で。
これは実際の端末で表示される幅320pxを基準に考えると普通のことですが、
いつもの感じでFW上の640px基準で考えると、よく起こるミスです。
例えばメイン画像を300px x 100pxにしようと考える時の順番が、
○Ａの場合
実際の大きさが300×100 → だから、600×200でレイアウトしよう。
これはOKな例です。
○Ｂの場合
レイアウト上の全体のバランス的に、600×200でレイアウト → 実際は300×100か、よしそんなもんだな。
これはNGの例です。
というのも、Retinaなど高解像度の画面は大きい画像を半分に縮小して見るため、
画像の幅が555pxとかになっていると、表示する際、少数点が発生してしまい
せっかくの綺麗な画像がぼやけてしまいます。
Ｂの場合の考え方をしていると、奇数の画像が発生しかねないですよね。
Tags: web design, スマホ
