iphone向けと記載してありますが、androidに対してもある程度有効です。
スマホサイトの作り方に関して、基本的なところからまとめてみました。
iphoneページの横幅は320pxを想定
もはや当たり前ですが、iphoneでは、横幅320pxを基準に作成していきます。
ただし、iPhone4以降から登場したRetinaディスプレイに対応するためには、この倍の640pxを想定しておく必要があります。
現状のスマホサイトは、必要なサイズの倍の画像サイズでの作成が常識になっているように思われます。
iphoneページでの文字サイズ 読みやすさについて
文字サイズは、やや大きめの、14px～16px程度。行間は140%～160%程度といわれています。
また、テキストはページの左右に余白を10px前後空けておくと読みやすくなります。
iphoneサイトに最適なボタンのサイズとは？
リンクに用いるボタンやテキストのサイズは、縦横44px以上で作成しておくことが望ましいです。
これは、Appleが標準UIを構築する際に決めているサイズです。
ただ、デザイン上44pxは大きすぎるという場合もあるかもしれません。
そういった場合は見た目はそのままに、タップ領域のみ広げる。周囲の余白を広げるなどの工夫を行います。
このサイズ以下のボタンは本当に押しにくいので、スマホサイトをデザインする上で最重要なことかもしれません。
viewportを指定する
iphoneではPCサイト閲覧のために、viewportのデフォルトが980pxに設定されているので、metaタグでviewportを指定しましょう。
ページの横幅は、320pxを想定すると記載しましたが、こちらはwidth=device-widthを指定して端末の横幅に合わせたほうが無難です。
以下のような感じ。
<meta name="viewport" content="width=device-width">
この場合、横幅が端末に合わせて広がることになるので、横幅いっぱいに広げたい画像は、widthを100%で指定しておきます。
次回はもう少し詳細な内容。もしくは、コーディングに関して記載していこうかと思います。
