スマートフォン最適化ノウハウコラム | スマートフォン最適化・対応サイト作成

フォントサイズが大きすぎたり小さすぎたりしては伝えたい情報が伝わりにくくなってしまいます。ブログやニュース記事など、長文の文章になっても読みやすいテキストサイズは、14pt～16pt、行間は140%～160％が基本です。
PCより画面サイズが狭くなったからといって、文字サイズを比例させて小さくしてしまっては読むことができません。PCで見やすいテキストサイズと大きく差はありませんので、覚えやすいですね。
もちろん、デザインのテイストや文章量によって「少しテキストが小さい方がバランスがいいな・・・」「文字量が少ないからテキストを大きく表示させたいな・・・」という場合は多々あります。その場面によって微調整は必要ですが、基本的に「読みやすい」とされているテキストサイズは知っておきましょう！

スマートフォンは縦表示と横表示があるのはご存知ですね。横表示の場合若干テキスト表示幅が大きくはなるものの、PCと比較すると半分以上狭いのです。
（1）で学んだように、PCとテキストサイズに差はありませんので、PCサイトと同じ文章をそのまま流し込むと、長い文章はかなりスクロールすることになってしまいます。
適切に文節を区切り、読みやすいように改行が必要です。
さて、ここで本題ですが、「一行に入る文字数」を知らずにデザインしてしまうと、見出しのように本当は一行で見せたかった部分が意図せず改行されている・・・という事態がおこってしまいます。
事前に「一行に入る文字数」を知っておくと、見やすいように文字量を調節することができますね。
各フォントサイズ別・「一行に入る文字数」は下記の通りです。

• iPhoneの場合

• Androidの場合

※全角の場合
※デフォルトのスタイルをCSSでリセットした場合。
※Androidは機種によって差がでる可能性があります。

機種や見出しのデザインによって若干の差は出てしまいますが、基準として覚えておくと予期せぬ崩れの防止になります。

スマートフォンサイトをデザインするときに気をつけるべき事の一つに、「データ軽量化」があります。画像を沢山使用してデザインしてしまうと、3G回線での使用では読み込みにとても時間がかかってしまい、ユーザーをイライラさせてしまいます。PCサイトでも、フルフラッシュのすごく重くて待たされるページにイライラした経験はありませんか？
「データ軽量化」を実現するためには、とにかく画像をなるべく使わずにデザインするのが、まず最初に出来る手っ取り早い方法です。
スマートフォンのブラウザがサポートしているCSS3なら、テキストに自由度の高いドロップシャドウをかけることができます。

↑これはデザインデータ上で作成された「ドロップシャドウのついた画像文字」です。このようなドロップシャドウを、画像を使わずCSS3で表現することができます。
まず、デザインデータを開き、「不透明度」「ぼかし」「距離」の数値を確認します。

デザインソフト別数値の確認方法

テキストへのドロップシャドウは、CSS3の「text-shadow」セレクタをつかいます。

▼記述方法

text-shadow：x軸(px/em) y軸(px/em) ぼかし(px) カラー(rgba)；

【x軸】

シャドウの横位置を指定します。正の値で右に、負の値で左に移動できます。

• Fireworksの場合 →　左上の数値
• Photoshopの場合 →「距離」の数値
• Illustratorの場合 →「X軸オフセット」の数値

【y軸】

シャドウの縦位置を指定します。正の値で下に、負の値で上に移動できます。

• Fireworksの場合 → x軸と同じ数値　※右下の数値のスライダーが右側にあれば正の値を、スライダーが左なら負の値を指定します。
• Photoshopの場合 → x軸と同じ数値　※右下の数値のスライダーが右側にあれば正の値を、スライダーが左なら負の値になります。
• Illustratorの場合 → 「Y軸オフセット」の数値

【ぼかし】

シャドウのぼかし加減を指定できます。0にすると文字と同じ形の影ができますが、Androidでは影自体表示されなくなってしまいます。

• Fireworksの場合 →　右側、中央の数値
• Photoshopの場合 → 「サイズ」の数値
• Illustratorの場合　→ 「ぼかし」の数値

【カラー】

シャドウの色を指定します。「#00～」でも指示できますが、rgbaでの指定をおすすめします。rgbaは、色の透明度（alpha値）を指定することが可能です。 (R赤,G緑,B青,Aアルファ値);で構成されています。

• Fireworksの場合 →　rgb・影色のRGBカラー値、Alpha・右上の数値を0.0～1.0の間に換算した数値
• Photoshopの場合 → rgb・影色のRGBカラー値、Alpha・「不透明度」の数値を0.0～1.0の間に換算した数値
• Illustratorの場合　→ rgb・影色のRGBカラー値、Alpha・「不透明度」の数値を0.0～1.0の間に換算した数値

※今回はいずれも『rgba(0, 0, 0, 0.5)』です。

上記をもとにCSSを記述すると、

text-shadow：2px 2px 2px rgba(0, 0, 0, 0.5)；

となります。

インストールされているフォントは、下記の通りです。

• iPhoneの場合

日本語フォントは「ヒラギノ角ゴ Pro W3（W6）」、欧文フォントは「Helvetica」が主に使われています。
欧文フォントは「Helvetica」以外にもたくさんインストールされています。

iPhoneのフォント一覧

• Androidの場合

「Droid Sans」というAndroid用に作られたフォントがインストールされています。

機種によっては、別のフォントも複数インストールされており、表示フォントを選ぶことができます。

▼フォントが選べる機種

• au：IS05、IS03などのシャープから発売されている機種
• docomo：AQUOS PHONE SH-12C、LYNX 3D SH-03Cなどのシャープから発売されている機種や、GALAXY SII、GALAXY Sなどのサムスンから発売されているされている機種
• SoftBank：GALAPAGOS

▼選べるフォント

• モリサワ 新ゴ
• LC明朝
• SHクリスタルタッチ
• Droid Sans

• iPhoneの場合

フォントの変更機能はありません。
また、インストールされている日本語フォントは「ヒラギノ角ゴ Pro W3（W6）」のみであり、その他のフォントを指定して表示させることができません。

全ての日本語テキストがiPhoneでは「ヒラギノ角ゴ Pro W3（W6）」で表示されます。

• Androidの場合

機種によっては複数フォントがインストールされており、ユーザーが好みのフォントに変更することが可能です。

さて、（4）（5）を読んで、「じゃあデザインデータではどのフォントを使えばいいの？」と疑問に思った方がいらっしゃると思います。
どの機種のどのフォントにも共通しているのが、「等幅フォント」であるということです。機種によって大幅に文字幅がずれる事はありませんので、ご安心ください。
デザインデータ作成時には、実際に本体にインストールされている「ヒラギノ角ゴ Pro W3（W6）」があればそれを使いましょう。なければメイリオをはじめとした等幅フォントで作ります。
ただし、Androidにインストールされている「Droid Sans」はPCにインストールすることができません。
なお、スマートフォンの場合、本体で使われているフォントとブラウザのフォントは同じです。

Android用に作られたフォント、Droid sanは一部の機種で太字表現ができません。
極力太字表現は使わないようにしましょう。

いかがでしたでしょうか？
PCサイトでももちろんテキストの視認性や読みやすさを整えるのはデザイナーの大きな仕事ですが、スマートフォンサイトでは制限やルールがより厳しいため、テキスト表現についてしっかりと知識を持った上でデザインする事が大切です。
イメージどおりのデザインを実現するために、今回ご紹介した7つの基本をもとにしながらデザインしてみてくださいね。