そのフォントサイズ、適切ですか？

そのフォントサイズ、適切ですか？

※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。

Webサイトというものは、若い人から、視力の弱いお年寄りまで、様々な人が見に来ます。その際に、大きく問題になるのがフォントサイズです。普段何気なく設定している人も多いと思いますが、今一度考えてみましょう。

小さな文字が読みにくい人は意外と多い

特に若い方に多い気がしますが、フォントサイズが小さい方が、デザイン的にすっきりとしていてかっこいい（もしくは読みやすい）といった風潮があります。

しかし、それは万人がそうであるとは限りません。小さい文字が読みにくいと思う方もいるのです。また、見る人の視力はもちろんの事、OSの違い、モニタの解像度、モニタまでの距離によっても見易さは変わってきます。

例えば、このサイトのフォントサイズはいかがでしょうか？中間あたりの大きさにしているつもりですが、環境によって、または個人差によっては「ちょっと大きくてモサイ(笑)」と思われる方もいらっしゃれば、逆に感じる方もいるはずです。（ちなみに私にとってはもうちょっと大きくてもいいかな、とも思います。）

Webサイトを作る際に重要視する事は「閲覧者への気遣い」です。「自分に丁度よければそれでよい」ではなく、見ている人の立場になって、考えてみましょう。

実際に気をつけたい点

それでは、具体的に気をつけたい点を挙げてみます。参考になさってくださいね。

モニタのドットピッチ

あなたは自分が利用しているモニタの解像度とドットピッチを意識したことはありますか？そんなことを気にしながら使っている方は少数派かもしれませんね。しかし、文字の大きさに関わる重要な要素なのでしっかりと確認しておきたいところです。

インチ	解像度	ドットピッチ
15インチ	1024×768 (XGA)	0.297mm
17インチ	1280×1024 (SXGA)	0.264mm
18.1インチ	1280×1024 (SXGA)	0.2805mm
19インチ	1280×1024 (SXGA)	0.294mm
20.1インチ	1600×1200 (UXGA)	0.255mm
21.3インチ	1600×1200 (UXGA)	0.270mm

※XGAやUXGAは、解像度のことを指します。

なにやらパっと見よく分からない表に見えますが、簡単に理解しておきたいことは、この中で15インチ-XGAが最もドットピッチが大きい=フォントサイズが大きく見え、20.1インチ-UXGAが最もドットピッチが小さい=フォントサイズが小さく見えると言うことです。

私も例に挙げた両方の環境を持っていますが、この大きさの違いはかなりのものです。以前メインで使用していた20.1インチ-UXGAでは、普通にWebをブラウジングしていて、しょっちゅうブラウザのフォントサイズを大きくしていました。文字が小さいというだけではなく、画面がそこそこ大きいので、離れて見ているということもあるでしょう。ちなみに、font-size:10pxで長文が書かれていようものなら読みたくなくなってしまうくらいです。

15インチ-XGAや、19インチ-XGA等、普段ドットピッチが大きい環境で作業をしている方は、特に注意して文字サイズを決定する必要があるでしょう。それらのモニタでかなり小さめなフォントは、20.1インチ-UXGAでは極小フォントになってしまうのです。また、その逆もしかりです。

フォントサイズの指定方法

Webサイト上でフォントサイズを変更するにはいくつかの方法があります。まずHTMLでできるのが<font size="3" ></font>みたいな方法ですが、特別な理由が無い限り、これはお勧めできません。基本的にはCSSで指定しましょう。

CSSにも px,pt,em,% 等様々な単位がありますが、その中でも相対指定を利用することをお勧めします。px（ピクセル）で固定してしまうと、Internet Explorer6(IE6)で文字サイズが変更できないからです。IE6のシェアは現在（10/1/13/）でもまだ2割程もいますので無視できません。なお、相対指定にはem,%等がありますが、私はよく%を使っています。

フォントサイズの固定について

上でもふれていますが、フォントサイズを固定してしまうのはあまりお勧めできません。

フォントサイズを固定すると、思い通りのデザインにしやすいと思いますが、それが読みにくいユーザもいます。好感度の高いWebサイトを作るには、できるだけ使いやすく、見やすいサイトである必要があります。なるべくなら相対指定をして、閲覧者が自由にフォントサイズを変更できるようにしましょう。

また、当サイトのように、ページ内にフォントサイズを変更できるようにするJavaScriptを設置するのもいいかもしれませんね。

コアターゲットから考える

上記でご紹介しているのは、あくまでもフォントサイズが小さくて読みづらい場合がある、という事を理解した上でサイトを作りましょうということです。小さい文字が絶対にダメというわけではありません。

Webサイトは、何らかのコンセプトや目的があって制作されるものです。そのWebサイトのコンセプト・目的・コアターゲットを想定してフォントサイズを指定することが大切です。

例えば、若者向けのサイトや、デザイン重視のサイトで特大フォントだったりしたら浮いてしまいますよね。サイズはTPOに合わせて決定したいところです。

つまり、知識が無く極小フォントを使ってしまうのはWebデザイナーとしてNGですが、きちんとした知識があって、必要に応じて極小フォントを使うのはありだと思います。

コメント

上条純子 さん　2012年12月21日16時39分

WEBスクールではフォントサイズはCSSで皆pxで設定していました。
この記事を読んでからぱ％で指定することの大切さを学びました。
これからは相対指定になれるようにしていこうと思います。
自分も極度の近視でメガネなしには生活できないので
目の悪い人の事を意識しやすい立場ですから尚更です。
これが学校で何度も言われていたユーザビリティなんですね。

馬場誠 さん　2012年12月22日10時26分

最初にこのページを書いたころはIE6もかなりシェアがありましたが、今ではずいぶん減ったので、昔よりはpx指定で問題になるケースも少なくなってきています。ですので、そのように教えているところもあるのかもしれませんね。

とは言っても、当サイトではIE6が現時点で4%ほどシェアがありますので、%指定で大きなデメリットも無いということを考えると、まだ%に優位があるのかなと私は思います。少数派のために大多数派が不便になるようなことであれば別ですが、そうでなければ、より多くの人が快適な方がいいですものね。

おっしゃるように、このような心づかいが、ユーザビリティの基本的な考えと言えると思います。

まゆみ さん　2015年05月02日11時23分

初心者です。前回は文字化けで質問させて頂きました。

『HTML/XHTML＆スタイルシートレッスンブック』で勉強しています。CHAPTER2の文字デザイン（文字の大きさ、フォント種類、色変え、斜体解除）等全く出来ません。因に文字強調はできます。

教科書通りにやっていると思うのですが．．．．．

テキストエディットの環境設定も本通りと思います。

Mac OS X 10.9.5使用しています。（海外で購入）パソコン自体の初期設定で何か違っているのでしょうか？

これだけの情報ではわかりずらいと思いますがどう説明していいものかも不明な状態です。
初歩的な質問で申し訳ないです。

馬場誠 さん　2015年05月02日12時22分

まゆみさん、こんにちは。

一文字だけでも異なると動かなくなるので、コードのタイプミスや、全角が入っているなど、記述に原因があるケースが多いです。

> テキストエディットの環境設定も本通りと思います。

こちらは、きちんと標準テキスト（テキスト形式）として保存できていれば問題ありません。リッチテキスト形式はNGです

> Mac OS X 10.9.5使用しています。（海外で購入）パソコン自体の初期設定で何か違っているのでしょうか？

HTML/CSSの指定はもともと半角英数字ですから、特にパソコン自体の影響とは考えづらいです。
おそらくどこかのコードが違っている可能性が高いです。

もし、下記のコードをHTMLのbodyタグの中に貼り付けて、赤くならなければ、保存形式が間違っている可能性が考えられます。

<h1 style="color:#ff0000;">h1 text</h1>

これが赤くなれば、CSSは確かに機能していますので、現在のCSSの指定のどこかに、原因があると推測されます。

まゆみ さん　2015年05月03日15時40分

返信ありがとうございます。

コード入れてみましたが赤くなりませんでした。保存形式が違うのかもしれません。
やり直してみます。

また質問させて頂く事になるかもしれませんがこれからもよろしくお願いします。

馬場誠 さん　2015年05月04日10時01分

１点補足です。上記コードを貼り付けても、他の部分に大きな文法エラーがあると、色が変わらないこともあります。

上記コードは一行置くだけだけでも色が変わるので、他のコードの影響を受けないように、それ以外のコードは全て削除してからチェックしてみてください（bodyやhtmlタグ等、一切無くても色が変わります）。


それでも色が変わらない場合は、他に原因があることが切り分けられると思います。
次あたりがチェックポイントでしょうか。

・テキストエディットにて、「標準テキスト」で保存されているか。（テキストエディットの「フォーマット」メニュー内に、「リッチテキストにする」があれば、現在は「標準テキスト」であると言えます）

・HTMLファイルとして保存されているか。（ファイル名が、. html または .htm で終わっているか）

・動作確認時は、Safari, Firefox, ChromeなどのWebブラウザでHTMLファイルを開いているか。

１つずつ確認してみてください。
こちらこそ、これからもよろしくお願いします。

まゆみ さん　2015年05月14日08時32分

コード入れても赤くならないと書きましたが、他のコード消し忘れがあり色が変わらなかっただけでした。
赤く表示されました。となるとやはり　CSSの指定に原因があるとすればどこを調べたら良いのでしょうか？テキストエディットの環境設定のスタイルは『埋め込みCSS』です。（変わらないのでインラインCSS、CSS無しですら試しました．．．）
相変わらず文字の大きさもフォントの種類も色も斜体解除も何も変りません。(文字の強調はできます）

コード全体も何度も見直し、一から書き直ししたりもしましたが、自分で気がつかないどこかが違ってるだけなのでしょうか．．．．？

こんな初歩的な事で本当に申し訳ないです。

馬場誠 さん　2015年05月14日19時26分

まゆみさん、こんにちは。

> コード入れても赤くならないと書きましたが、他のコード消し忘れがあり色が変わらなかっただけでした。

既存のHTMLに、ご案内したコードを追加するだけでは赤くならず、他のコードも全部消したら赤くなった……ということでよろしいでしょうか。

HTMLは多少の文法ミスも許容しますので、よほど大きな文法エラーが無いかぎり、追加するだけで赤くなります。

つまり、既存のコードに追加だと赤くならなくて、他のコードを排除して赤くなるということは、既存のコードに大きな文法エラーがあるということが考えられます。

元々のまゆみさんが書いたコードに、
<h1 style="color:#ff0000;">h1 text</h1>
をbody内に「追加」する形で貼り付け赤くなるようになるまで、まずはファイル内の文法エラーをつぶしていく必要があると思います。
（その文法エラーの箇所は精査していくほか無く、私も、残念ながらコードを見ないと分からないです）


> となるとやはり　CSSの指定に原因があるとすればどこを調べたら良いのでしょうか？

文法エラーにより不具合が発生するのは、必ずしもCSSの指定だけとは限らないので、HTML文書全体がチェックの対象です。


> テキストエディットの環境設定のスタイルは『埋め込みCSS』です。（変わらないのでインラインCSS、CSS無しですら試しました．．．）

私はテキストエディットでHTMLを書いたことが無いので、上記設定が何に影響するかが、残念ながら分かりません（なんらかの補完機能があるのでしょうか）。

ただ一つ言うとすれば、それらの設定は、テキストエディット独自のもので、一般的なHTMLエディタには無い設定です。

テキストエディットは純粋なテキストエディタではなく、ワープロソフトの機能も入っていますし、かえってややこしいので、Webデザイナーの世界を体験してみようのページで紹介している、miというソフトの方がお勧めです。

こちらなら、エディタの設定を気にする必要は無くなります（厳密には、文字コードと改行コードは気にする必要はありますが、自分のPC内で確認するだけであれば初期設定で大丈夫です）。


というわけで、
・miで最初からやり直してみる。
・文法チェッカーで正しい(X)HTML/CSSを書こうでご紹介しているツールで、文法エラーをチェックしてみる。

などをしてみてはいかがでしょう。
必要であれば、本ページは趣旨がことなりますので、お悩み相談室からコードをお送りいただければ私が見て、アドバイスも可能です。
※上記ページ先では技術的な相談が不可と記載していますが、それも可能な掲示板に変更途中ですので大丈夫です。（ただしご質問は公開前提です）

まゆみ さん　2015年05月15日05時14分

早速『mi』を使用してみたところ、とてもスムーズに進んでいます。今迄の数ヶ月がなんだったのか？と拍子抜けする程です。
本当にありがとうございました。

馬場誠 さん　2015年05月15日12時58分

解決したようでなによりです。
miはシンプルながら高機能なエディタですから、当分使えると思います（慣れたら、改めて他のHTMLエディタを探してみてもいいと思います）。
学習、楽しんでくださいね☆

Web制作Tips

デザイン

├フリーの写真素材を有効活用しよう

├デザイナーならこだわりたいカーニング（文字詰め）

├文字のジャンプ率で適切なサイトイメージを演出する

├TPOを考えてハズさないフォントを選ぶ

└失敗しない配色の基本

ユーザビリティ

├そのフォントサイズ、適切ですか？

├リンクテキストをわかりやすくする

├フォームのリセットボタンを考える

├リンク切れ時に適切な404ページを表示をする

└フォームの確定ボタンは右?左?

コーディング

├文法チェッカーで正しい(X)HTML/CSSを書こう

├インデントで読みやすいソースコードを

├文字化けを防ぐ&解消する方法

└背景画像ありのボックスの文字をはみ出させない方法

その他

├ディレクトリ構造は適切に

└絶対パス?相対パス?ファイルの指定方法いろいろ

CONTENTS

独学!未経験からWebデザイナーになる!!

Web制作Tips

デザイン

├フリーの写真素材を有効活用しよう

├デザイナーならこだわりたいカーニング（文字詰め）

├文字のジャンプ率で適切なサイトイメージを演出する

├TPOを考えてハズさないフォントを選ぶ

└失敗しない配色の基本

ユーザビリティ

├そのフォントサイズ、適切ですか？

├リンクテキストをわかりやすくする

├フォームのリセットボタンを考える

├リンク切れ時に適切な404ページを表示をする

└フォームの確定ボタンは右?左?

コーディング

├文法チェッカーで正しい(X)HTML/CSSを書こう

├インデントで読みやすいソースコードを

├文字化けを防ぐ&解消する方法

└背景画像ありのボックスの文字をはみ出させない方法

その他

├ディレクトリ構造は適切に

└絶対パス?相対パス?ファイルの指定方法いろいろ