Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

iPhone用サイトを作る(スマートフォン)

iPhone用といっても、いろいろ調べてみると、いわゆるスマートフォン用のHP作りと理屈は同じになりそうです。。

iPadアプリを作る前に、iPhone用アプリを作ろうと思いつつ、WEBアプリを作ったり、WEBサイトをiPhone用にRe-Designする仕事の相談があったりしていて結構忙しかったりしています。

ちょっと、仕事に余裕があったりしたので、iPhone用にテストサイトを作ったりしたことのまとめをしてみようと思う。

まずはHTML5

まずはHTML5でホームページをコーディングするところから始めます。

マークアップの宣言の仕方や、HTMLのテンプレートを探したらありました。

引用元HTML5 の雛形 - html5doctor - HTML5.JP
http://www.html5.jp/html5doctor/html-5-boilerplates.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
http://html5shiv.googlecode.com/svn/trunk/html5.js

<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

iPhoneの解像度

画面解像度が携帯電話と比べると広いわけですが、iPhone3Gおよび、3GSは次の解像度になります。

320 x 480。

ただし、ステータスバー20px、URLバー60px, ボトムバー44pxの幅を取ります。

よって、このことを考慮してデザインする必要がでてきます。

PCサイトをiPhoneで見たとき

iPhoneでPC用ウェブサイトを表示したとき、標準で表示する解像度は幅980pxになります(サイトに細工をしないばあい)。

あの小さい画面(320px)の幅に幅980pxの情報を縮小して表示するため、文字も画像も小さくなっています。

見るときは当然、2本の指で広げて見る必要があります。

iPhone用にデザインするページ幅はどうするべきか

iPhone用にデザインされたページを表示させるときHTMLには細工して、フォーカス幅を480pxぐらいにズームして表示させるのが良いようです。

iPhoneを縦に持った時の幅は320pxですが、横持ち表示したときに480pxの解像度になるため、解像度を高い方に合わせてデザインするとキレイに見えるためです。

大は小を兼ねるということですね。

※iPhone4を考慮した場合は横持ちで最大980pxの解像度表示になるので、980pxできれいに表示されるデザインが必要になりなります。

補足 iPhoneなどのスマートフォンサイトの表示幅をコントロールする

<meta name= "viewport" content = "width = 480">

このコードで横幅を480px分を見せる設定になります。

また、スマートフォン用にCSSを切り替えたりする場合はサイト開発の状況に合わせて、userAgentの判別方法を考慮しましょう。