スマートフォンサイトの画面設計 Webサイトの構造設計ができたら、次は各ページのレイアウトを決める画面設計です。ワイヤーフレームと呼ばれる線画だけで構成された図を作成し、この後の「デザイン作成」がスムーズに進められるようにします。ここでのポイントをいくつか紹介します。 正確な画面サイズを把握する 前回説明したとおり、iPhoneの画面サイズは320×480ピクセルですが、常に画面のすべての領域を利用できるわけではありません。Safariを起動した直後の段階では125ピクセルがアドレスバーとツールバーに利用されており、実際にWebページの表示に使える領域は320×355ピクセルしかありません。さらにキーボードを表示すると295ピクセルがキーボードに使われるため、Webページの表示領域は185pxしか残りません。
![スマートフォン対応サイトを設計するときのノウハウ (3/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/63db1205391cd1c70a0b79f819e8361301499754/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2010%2F07%2F28%2F272197%2Fl%2Fdcab3cff36086c62.jpg)