携帯サイト制作のヒント：行間が詰まって読みにくいので改善したい

新着情報など一覧でテキストを見せるようなページで、行間が詰まっていると読みにくい印象を与えます。背景色の付いたボックスと接する箇所は特に余白が欲しくなります。



PCサイトではCSSのline-heightやmarginプロパティを使えばできますが、携帯サイトの場合、最も普及するiモードブラウザ1.0のFOMAではこれらのプロパティが効かず行間を調整できない事情があるので、画像を使った何らかの方法でしか余白を調整することしかできません。

そこでスペーサー画像を各テキストの次の行に配置して隙間を作るテクニックが使われますが、XHTMLソースを見てください。

（行間と、絵文字の両端に余白を作るためにスペーサーを配置した例）

<div style="background-color:#006600">
 <img src="spacer.gif" width="1" height="1" style="margin-top:2px" /><br />
 <img src="spacer.gif" width="1" height="1" style="margin-left:2px" /><span style="color:#FFFFFF">&#xE69C;<img src="spacer.gif" width="1" height="1" style="margin-left:2px" />新着情報</span>
</div>
<img src="spacer.gif" width="1" height="1" style="margin-left:2px" />&#xE6F8;<img src="spacer.gif" width="1" height="1" style="margin-left:2px" /><a href="news1.html">[9/30]在庫一層ｾｰﾙ開催</a><br />
<img src="spacer.gif" width="1" height="1" style="margin-left:2px" />&#xE6F8;<img src="spacer.gif" width="1" height="1" style="margin-left:2px" /><a href="news1.html">[9/30]72時間ﾎﾟｲﾝﾄ5倍!</a><br />
<img src="spacer.gif" width="1" height="1" style="margin-left:2px" />&#xE6F8;<img src="spacer.gif" width="1" height="1" style="margin-left:2px" /><a href="news1.html">[9/29]ﾚﾋﾞｭｰで2倍ﾎﾟｲﾝﾄ</a><br />
<img src="spacer.gif" width="1" height="1" style="margin-left:2px" />&#xE6F8;<img src="spacer.gif" width="1" height="1" style="margin-left:2px" /><a href="news1.html">[9/28]3点で送料無料</a><br />
<div style="background-color:#006600">
 <img src="spacer.gif" width="1" height="1" style="margin-left:2px" /><span style="color:#FFFFFF">&#xE69C;<img src="spacer.gif" width="1" height="1" style="margin-left:2px" />ｵｽｽﾒ情報</span>
</div>

画像を使うしかないのなら、こうした小技よりもっと普通のコードで、さらに画像の特長を活かしてやりたいことを実現しようというのが、ラウンドアバウトのアプローチです。

どのような方法なのか？前回紹介したアイコン画像を絵文字の代わりに使う方法、これを利用します。

●アイコン画像

40ピクセル四方で作るなど制作の目安は以前紹介したとおりです。このような画像を使い、XHTMLと外部CSSでページを作ってみました。

●XHTML

<div class="head">
 <img src="image/icon3.gif" class="headIcon" /><span class="head-text">新着情報</span>
</div>
<img src="image/bul3.gif" class="textIcon" /><a href="news1.html">[9/30]在庫一層ｾｰﾙ開催</a><br />
<img src="image/bul3.gif" class="textIcon" /><a href="news1.html">[9/30]72時間ﾎﾟｲﾝﾄ5倍!</a><br />
<img src="image/bul3.gif" class="textIcon" /><a href="news1.html">[9/29]ﾚﾋﾞｭｰで2倍ﾎﾟｲﾝﾄ</a><br />
<img src="image/bul3.gif" class="textIcon" /><a href="news1.html">[9/28]3点で送料無料</a><br />
<div class="head">
 <img src="image/icon3.gif" class="headIcon" /><span class="head-text">ｵｽｽﾒ情報</span>
</div>

●CSS

.head {background-color:#006600;}
.head-text {color: #FFFFFF;}
.headIcon { margin-top:5px; margin-right:5px; margin-left:3px; vertical-align:baseline; }
.textIcon { margin-top:5px; vertical-align:baseline; }

各imgタグにmargin-topプロパティを設定すると、margin分テキストも下にずれ（画像の下辺とテキストの画像が揃うことにより）、テキストの上部に隙間ができます。また、絵柄の大きめなアイコンはさらにmargin-leftとmargin-rightも設定すれば接するテキストとの間をあけることができるので、見易く見出しらしいレイアウトになります。

またXHTMLも本来やりたいことのためのタグだけで成り立っています。先ほどのスペーサーと比べてみてください。

実際の携帯での見た目は以下のようになります。一覧用の三角アイコン（ブレット）は絵柄を小さくし余白を残したので、詰まった印象から一転、余白感を演出できました。やはり画像を使うとできることの幅がより広がりますね。

●画面
（docomo N905i）


（au G9）


（SoftBank 920P）


前回説明したように、ラウンドアバウトの画像変換でアイコン画像の大きさがテキストにマッチします。こうしてアイコン画像の細やかな表現力と外部CSSを効果的に使い、きれいでユーザビリティの高いデザインを、携帯サイトでも気軽に作ることができます。