携帯サイト制作のヒント：アイコンを使ったわかりやすいナビゲーション

PCサイトではアイコンと言えば画像ですが、携帯サイトではアイコンに絵文字を使うことが一般的です。なぜなら、文字と同じくらいの画像を常に配置しておくことが難しいからです（画面サイズの数だけの画像と、それを切替える仕組みが必要）。

ラウンドアバウトを使うと画像は画面のサイズと連動して縮小するので、PCサイトのような多彩なアイコンを自由に使うことができるようになります。その時のアイコン画像の作り方・使い方について説明します。

●アイコン画像を用意する

画像作成のめやす

  • 40ピクセル四方くらいの小さい画像
  • 色彩や絵柄のはっきりした絵柄
  • ファイルのデータサイズは考慮しなくてよい
  • 形式はGIF/JPEG/PNG

大きさや絵柄に厳しい決まりはないですが、テキストに接する場合は文字サイズとのバランスが大事になるので、標準サイズのテキストにちょうどよく合うアイコンの高さ（=40ピクセル）を目安に作成するとよいです。また、ブラウザ表示幅の小さい機種はアイコン画像が小さく縮小変換されるので、ぼやけた色彩や写真など細かすぎる絵柄はアイコンには不向きです。

一方、制作者の負担になる携帯サイトの画像を作る際のファイル形式やデータサイズに関する制約は、ラウンドアバウトが表示可能な形式やデータサイズに自動変換して表示するので一切考慮しなくてよいです。

●imgタグを配置する

絵文字の代わりにimgタグを配置します。携帯特有の特別な配慮や記述は不要な、普通の書き方です。画像とテキストのバランスや行間の調整は外部CSSでします（サンプルはvertical-align:baselineで画像とテキストの下辺を揃え、margin-topで行間を空けるよう調整）。

(XHTML)

包丁・ﾅｲﾌ

やかん

その他・ｽｨｰﾂ

(CSS)

.menuIcon {
vertical-align:baseline;
margin-top: 5px;
}

(画面 docomo N905i 横幅240px)

(画面 au G9 横幅233px)

(画面 SoftBank 920P 横幅471px)

機種によってブラウザ表示幅が違いますが、アイコン画像が画面の中で同じくらいの大きさで見えているのがわかります。ラウンドアバウトはページの中に埋め込まれた全ての画像を機種のブラウザ表示幅に応じて変換するのでレイアウトを崩しません。絵文字の代わりにアイコン画像をテキストの装飾に使うことができ、サイトの表現を一層高めることができます。

Page Top