携帯サイト制作の実践ノウハウ：iPhone用の画像で操作性を一層向上させる

前回は、CSSプロパティをiPhone用に設定することで、使いやすいページにアレンジする方法を説明しました。

今回は、よりiPhoneでの閲覧や操作に向いたデザインの作り方について説明していきます。

1. 押しやすい画像のボタンに変える

小さい画像や高さのない画像を使ったボタンは、携帯には適していてもiPhoneでは指タッチがしにくいので改善が必要です。iPhoneでの操作を考慮する際、ボタン画像は適度な大きさと高さがあることが望ましいです。

例えば下の例のように、二種類の画像を用意します。iPhoneからのアクセスかどうかによって画像ファイル名を切り替えるような変換ルールを変換シートに記述すれば、それだけでも操作性を上げることができます（変換シートについては過去のエントリを参照してください）。

（用意する画像の例 - 通常用とiPhone用）

 

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

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

（表示結果）

2. iPhone向けにXHTMLの記述を変える

画像を切り替えるだけでは不十分でさらにXHTMLでの書き分けが必要なときには、PI機能（表示コントロール）が使えます（PI機能については過去のエントリを参照してください）。

例えば下のソースは、改行タグ（br）で縦に並べている画像をiPhone向けに横に並べた例です。ラウンドアバウトがシステム定義する端末グループ「iphone」でないとき、brタグを出力するようなPIを記述しています。画像ファイル自体の切り替えは、1.でやったように変換シートで行います。

（XHTML）

<a href="p02.html"><img src="img/lnk02_default.gif" /></a>
<?ra device-group="!ra:iphone"?><br />
<a href="p03.html"><img src="img/lnk03_default.gif" /></a>
<?ra device-group="!ra:iphone"?><br />
<a href="p04.html"><img src="img/lnk04_default.gif" /></a>
<?ra device-group="!ra:iphone"?><br />

（表示結果）

また、このページには画面の上部・下部にジャンプできる小さな画像ボタンがあるのですが、そもそもiPhoneでは指スクロールができるので表示自体が要らないということもあるかと思います。PIを使えばこういうシーンでも簡単にコンテンツを出し分けることができます。

（XHTML）

<?ra device-group="!ra:iphone"?><a href="#top"><img src="img/t01-1_down.gif" /></a><a href="#bottom"><img src="img/t01-1_up.gif" /></a>

（表示結果）