初めてのスマホサイト作成で学生が知ったこと

今回は私が授業で勉強した、iPhoneのスマートフォンサイトのデザインを作成する際に知っておきたいポイントを紹介します。

iPhoneの画面解像度

iPhone3GSまで	320×480px
iPhone4以降	640×960px(Retina Display対応)

iPhone4以降では解像度が2倍ですが、ブラウザ100％表示時には従来と同じ320×480pxで表示されます。

"Retina Display"って？

• iPhone4から用いられるようになった高精細なディスプレイのこと。
• Retina Displayに対応するためにカンバスサイズは640×960pxでデザインする。

ブラウザ"MobileSafari"の特徴

• プラグイン非対応（Flash再生非対応）
• 文字コード変更不可
• 日本語フォントはヒラギノ角ゴシックのみ→iOS5からヒラギノ明朝ProNも指定可
• JavaScriptの処理時間：10秒まで

ボタンのサイズ

• 最小サイズ：44×44pxが望ましい。

リンク等をタップしやすくするために

• ボタンの大きさ・余白の取り方を考える。
• 文字の大きさは最低でも14px～16pxにする。
• 角丸やグラデーションは画像ではなくCSS3などで済ませること。 
  
  

どうでしたか？以上は基礎的な知識のほんの一部です。

とくにRetina Display対応など、今時のWebデザイナーにとっては必要な技術ですね。

スマートフォンアプリやサイトのデザインをするためには、より見やすく、操作しやすいUIの最新技術の勉強をしていくことが重要になってきています。