スマートフォン最適化ノウハウコラム

初めてのスマホサイトデザインの前に押さえておきたいテキスト表示7つの基本


今までPCサイトのデザインはしていたけれど、スマートフォンサイトのデザインははじめて・・・何から勉強すればいいか分からない!と、悩んでいませんか?まずはここから押さえましょう。

スマートフォンはPCとも携帯とも全く異なるデバイスですので、今までのPCサイト作成の知識だけでデザインをするのはとても難しいと言えます。そこで、まず最初に押さえたいのが、「テキスト表示の基本」です。
いくらデザインをかっこよく整えても、文字情報がしっかりと整理されて見やすく表示されなければ、スマートフォンに最適化させる意味がありませんね。
基本の基本、文字情報を正しく読みやすく表示させるデザインをするための7つのポイントをご紹介します。

(1)読みやすい本文のテキストサイズを知る!

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

(2)1行に入る文字数を知る!

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

10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 21pt 22pt 23pt 24pt 25pt
縦向 29 28 28 24 22 20 20 18 16 16 15 14 13 13 13 12
横向 43 40 40 36 34 30 30 28 25 24 22 21 20 20 20 19
10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 21pt 22pt 23pt 24pt 25pt
縦向 29 28 28 24 22 20 20 18 16 16 15 14 13 13 13 12
横向 48 43 40 36 34 32 30 28 26 25 24 22 21 20 20 19

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

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

(3)CSSでのテキスト装飾を知る!

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

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

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

■Fireworks

■Photoshop

■Illustrator

テキストへのドロップシャドウは、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);

となります。


(4)スマートフォンにインストールされているフォントを知る!

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

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

iPhoneのフォント一覧

「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

(5)表示フォントの変更について知る!

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

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

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

(6)デザインデータ作成時に使う、テキスト用フォントを知る!

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

(7)太字について知る!

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

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


  • カテゴリ/スマートフォンサイトデザイン
  • ↑このページの上部へ