今回は、よりiPhoneでの閲覧や操作に向いたデザインの作り方について説明していきます。
携帯サイト制作の実践ノウハウ：iPhone用の画像で操作性を一層向上させる
今回は、よりiPhoneでの閲覧や操作に向いたデザインの作り方について説明していきます。
携帯サイト制作の実践ノウハウ：CSSでiPhoneで操作しやすい携帯サイトを作るコツ
今回はiPhone向けにデザインや操作性を改善するCSSプロパティについて、少し詳しく説明していきます。
携帯サイト制作の実践ノウハウ：ラウンドアバウトでリッチで快適な携帯サイトをiPhoneにも
ラウンドアバウトでiPhoneに対応した携帯サイトを作る際、おさえておきたい制作のコツについて説明していきます。
●VGA基準で制作
iPhone対応に限らず、ラウンドアバウトで作る携帯サイトでは常にお勧めしていることですが、VGA端末をターゲットにページレイアウトを作ります。
iPhone のブラウザ幅（縦向き・portlaitモード）は320ピクセルです。従来では一般的なQVGA端末（横幅240ピクセル）では、iPhoneの画面で は全体的に小さい内容表示になります。480ピクセル基準で作った画像はラウンドアバウトが自動的に縮小してデザインレイアウトを保持するので、画面に 合った大きさで見せることができます。なお、ラウンドアバウトは、iPhone端末の画面サイズを320×480ピクセル（portlaitモード）とし て画像を縮小します。
●VGA基準で制作
iPhone対応に限らず、ラウンドアバウトで作る携帯サイトでは常にお勧めしていることですが、VGA端末をターゲットにページレイアウトを作ります。
iPhone のブラウザ幅（縦向き・portlaitモード）は320ピクセルです。従来では一般的なQVGA端末（横幅240ピクセル）では、iPhoneの画面で は全体的に小さい内容表示になります。480ピクセル基準で作った画像はラウンドアバウトが自動的に縮小してデザインレイアウトを保持するので、画面に 合った大きさで見せることができます。なお、ラウンドアバウトは、iPhone端末の画面サイズを320×480ピクセル（portlaitモード）とし て画像を縮小します。
携帯サイト制作の実践ノウハウ：iPhoneで携帯サイトが見たい！に応える
iPhoneには高性能なフルブラウザ（Mobile Safari）があるので、iPhoneからのアクセスはPCと同じとするサイトが多いようです。iPhoneには容量オーバーエラー（メガバイトレベルは別として）やマークアップ言語の差異といった携帯固有の問題が生じませんが、本当にPCとiPhoneが全く同じデザイン・コンテンツでよいと考えてもよいのでしょうか？
例えば下はiPhoneからアクセスしたPCサイトです。ページ上部のFlashコンテンツが表示できておらず、内容全体が一見しては読めないほど小さく表示されています。
iPhoneでは縦の場合約３分の１に縮小表示されるため、読みづらく指でのリンクやボタンの操作がしにくいということも、iPhoneで見るPCサイトによくある問題の一つと言えます。こうしたこともあってか、iPhoneに機種変更したことで（PCブラウザ拒否設定などにより）携帯サイトが見られなくなった利用者が、PCサイトでなく携帯サイトを引き続き利用したいと思うことが少なからずあるようです。
例えば下はiPhoneからアクセスしたPCサイトです。ページ上部のFlashコンテンツが表示できておらず、内容全体が一見しては読めないほど小さく表示されています。
iPhoneでは縦の場合約３分の１に縮小表示されるため、読みづらく指でのリンクやボタンの操作がしにくいということも、iPhoneで見るPCサイトによくある問題の一つと言えます。こうしたこともあってか、iPhoneに機種変更したことで（PCブラウザ拒否設定などにより）携帯サイトが見られなくなった利用者が、PCサイトでなく携帯サイトを引き続き利用したいと思うことが少なからずあるようです。
携帯サイト制作の実践ノウハウ：CSSで背景画像を付ける
ラウンドアバウトの画像変換は、img要素の画像に限りません。変換対象となる画像は次のとおりで、今回はラウンドアバウトを使った背景画像デザインを取り上げます。
背景画像のCSSプロパティですが、本当はdivやtable関連要素にも変換対応しています。ただ、ドコモがbody要素にしか背景画像のCSSプロパティに対応しないので、３キャリアで背景画像を使う場合は実質body要素だけということになります。
背景画像を使ったデザインは淡い色調のパターン模様がよく使われます。例えば、下の画面のように小さい画像を縦横にリピートさせて柄のようなデザインをします（このサンプルは絵柄をわざとハッキリさせていますが）。これを様々な機種で見たとき、気になるのが柄の大きさに違いが出てしまうことです。VGA端末向けに作るとQVGA端末では大柄、一方QVGA端末に合わせるとVGA端末では細かく見えます。サイズ違いを用意して出し分けを行うか、機種による見栄えの違いを受け入れるしかありません。
（VGA端末サイズに合わせて背景画像を作った場合）
（QVGA端末サイズに合わせて背景画像を作った場合）
- インライン画像（img要素のsrc属性）
- 背景画像
- background属性
- background、background-imageプロパティ
- フォームのイメージボタン（input要素のsrc属性）
- リストのマーカー画像（list-style-imageプロパティ）
- 画像へのリンク（a要素のhref属性）
背景画像のCSSプロパティですが、本当はdivやtable関連要素にも変換対応しています。ただ、ドコモがbody要素にしか背景画像のCSSプロパティに対応しないので、３キャリアで背景画像を使う場合は実質body要素だけということになります。
背景画像を使ったデザインは淡い色調のパターン模様がよく使われます。例えば、下の画面のように小さい画像を縦横にリピートさせて柄のようなデザインをします（このサンプルは絵柄をわざとハッキリさせていますが）。これを様々な機種で見たとき、気になるのが柄の大きさに違いが出てしまうことです。VGA端末向けに作るとQVGA端末では大柄、一方QVGA端末に合わせるとVGA端末では細かく見えます。サイズ違いを用意して出し分けを行うか、機種による見栄えの違いを受け入れるしかありません。
（VGA端末サイズに合わせて背景画像を作った場合）
（QVGA端末サイズに合わせて背景画像を作った場合）
