携帯端末のフォント問題

昔の端末は1行が8文字～１２文字と決まっていて大きさも変更できませんでした。しかし、現在の端末はサイズが選択でき、かつ組込フォントは機種毎に異なり画面幅も違うので、1行に何文字とは決められません。htmlではフォントサイズは指定できますが、表示を正確にコントロールすることはできません。そもそも、HTML自体がフォントを絶対的な大きさで表現する技術ではないので、コントロールできたところで本来あまり意味は無いのですが、携帯サイトでは事情が異なっています。

よくあるのがTOPメインメニューで、ユニクロの携帯サイトを例に取れば、

MEN｜WOMEN｜KIDS｜BABY｜HOME

となっています。このメニューの問題を挙げてみましょう。

1. テキストなので、端末によってどこで折り返されるのか不定です
2. フォントが不定なので、見易いのか見辛いのか不定です
3. メインメニューにも拘らず、他のテキストコンテンツと混ざり、導線が確保できません

一見当たり前になってしまっている話ですが、改めて見ればあまり使い易いとも言えなそうです。

もう１つよくあるのが、項目見出しです。

・ﾒｰｶｰ:RICOH
・型番 :GR-009
・画素 :1000
・重量 :230g
・ｽﾞｰﾑ :4-8倍
・発売:2009.4

半角カナなどを駆使して、多くの場合1行で収まるように、項目見出しを短くして揃えます。一見何のことはない部分ですが、短くしないと改行されて項目見出しとコンテンツが混じって分かり難くなるので、単語を短めにすることが大事になります。

テキストは、隣同士が隣接するのが苦手です。どうしても区切り記号やマージンがないと人間の目は混乱をしてしまいます。そして左右は｜や：で区切れても上下の隣接を区切ることができないので、どうしても1行に収めたいと考えるのですが、端末は状態は不定なので最適解は存在しません。

テキストベースを前提に、背景色や罫線などの記号文字と絵文字をいろいろと組合わせて、メリハリをつけていこうというのがこれまでの携帯サイトのノウハウです。しかし残念ながら、テキスト中心ではデザイン性の高いページを作るには、かなり無理があります。

ラウンドアバウトでは、フォントに関わる問題の多くは、画像を使うことで解決します。そして、その方法は決して特別なものではなく、PCでは広く一般的な方法です。