携帯サイト制作の実践ノウハウ：ラウンドアバウトでリッチで快適な携帯サイトをiPhoneにも

ラウンドアバウトでiPhoneに対応した携帯サイトを作る際、おさえておきたい制作のコツについて説明していきます。

●VGA基準で制作

iPhone対応に限らず、ラウンドアバウトで作る携帯サイトでは常にお勧めしていることですが、VGA端末をターゲットにページレイアウトを作ります。

iPhone のブラウザ幅（縦向き・portlaitモード）は320ピクセルです。従来では一般的なQVGA端末（横幅240ピクセル）では、iPhoneの画面で は全体的に小さい内容表示になります。480ピクセル基準で作った画像はラウンドアバウトが自動的に縮小してデザインレイアウトを保持するので、画面に 合った大きさで見せることができます。なお、ラウンドアバウトは、iPhone端末の画面サイズを320×480ピクセル（portlaitモード）とし て画像を縮小します。


●viewportの設定

iPhoneのMobile Safariには固有のmeta要素があります。それらのうち、仮想的なウィンドウのサイズ「viewport」の設定を行うと、ページ閲覧時のサイズを固定し意図したとおりに表示させることができます。

name属性="viewport"のmeta要素に、ウィンドウ幅（width）、表示倍率の初期値、表示倍率の最大値を設定します。以下はラウンドアバウトでサイトを作る場合に推奨するviewportの設定です。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

※「width=device-width」は、横向き（landscapeモード）でも必ず320ピクセルになる設定値です

●CSS

iPhoneと他キャリア端末とで同じサイトを見比べると、画像の大きさに対するフォントの大きさのバランスに違いが見られます。iPhoneのMobile Safariは自動でフォントサイズを調節します。そのため携帯と比べてフォントが小さく見え、画像に対してテキストが小さ過ぎる「画像でっかち」な印象に見えてしまいます。

下の写真で比較してみると、携帯ではテキストが適切な大きさに見えているのに対し、iPhoneではテキストが小さく近隣の画像サイズとのバランスが取れていないことが感じられると思います。
単に印象の問題だけでなく、指でディスプレイを触って操作するiPhoneでは、行間が狭い・文字が小さ過ぎるコンテンツは操作性が悪いという問題もあります。

iPhoneのキャリアはSoftBankですが、ラウンドアバウトの端末グループには「iphone」があり、ソフトバンク端末と区別できます。ラウンドアバウトの変換シートに下のような変換ルールを記述すれば、CSSファイルが切り替えられるので、iPhone向けにテキストサイズを調整したCSSを使うことができます（変換シートの説明についてはこちらを参照してください）。

（変換ルール記述イメージ）

変換元キーワード	ドコモ	au	ソフトバンク	iPhone
style.css	;（変換しない）	;（変換しない）	;（変換しない）	style_iphone.css

次回、iPhone向けにデザインを改善するCSSプロパティについて触れることにします。

●絵文字

ラウンドアバウトの絵文字変換機能は、iPhoneにも対応しています。キャリアごとに絵文字の種類や書き方が異なりますが、どの記述をしても絵文字画像に変換されます。従って、iPhone対応をするにあたり絵文字に関する特別な作業は必要ありません。