HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

スマートフォン用のサイトを構築する場合、コンテンツの容量を極力おさえるために、画像を多用せずに、HTML5とCSS3で作成するのが一般的です。
CSS3の表現力を活用すれば、これまで画像として切り出していたバナーやボタンなどの要素を代替することが可能です。

この時、一つ問題になるのは日本語デバイスフォントです。

コーディング作業ではデザインを元にサイトを構築するのですが、デザインのバナーやボタンには多種多様な日本語フォントが使用されていることが多いです。これをスマートフォンのデバイスフォントで忠実に再現しようとすると難しい場合があります。
なぜなら、スマートフォンで使用できる日本語フォントは限られているからです。

代表的なスマートフォンで、デフォルトで用意されている日本語フォントは以下のとおりです。

iPhone ヒラギノ角ゴ W3
ヒラギノ角ゴ W6
ヒラギノ明朝 ProN(iSO 5のみ)
Android Droid Font
※日本産のAndroidは各メーカーオリジナルの日本語フォントが入ってるケースもあるそうです


日本語は文字数も多く、そのデータ量は大きいので、スマートフォンに多種の日本語フォントを組み込むのは適していないんでしょうね。

とにかく、スマフォ用サイトを構築するにあたって、日本語フォントに選択肢はなく、プラットフォームを超えて統一することも不可能ということです。つまり、CSSで「font-family」を記述する意味はほとんどないということですね。

さて、冒頭に戻りますが、なるべくデバイスフォントとCSSの装飾を使い、ページのデータ容量を抑えたいものです。
だからといって、デバイスフォントを使用してみると、デザインと印象が違うと指摘されるのも問題です。
ここは可能な限り、デザインの時点でデバイスフォントに置き換わる箇所はヒラギノ角ゴ系のフォントを使ってもらうなど、意識してもらう必要があるでしょう。

ちなみに、Windows環境の方は「ヒラギノ角ゴ」を持っていないとう人もいらっしゃるでしょう。その場合、見た目には「メイリオ」がそれに近いらしいので、代替でそれを用いるのも一般的みたいです。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search