2014年1月17日金曜日

◆Blogger:アドバイス◆
第2回:読みやすいフォント(書体)とフォントサイズ



フォントサイズはセンスと配慮のバランスが大事




Bloggerを使ってみて、私が一番残念に思った仕様は「英文字ならリストにたくさんあるのに、日本語書体は選べない!!」ということです。
Bloggerはもともと海外のサービスなので、日本語に対してはあまり気づかってくれていないようです。

しかしフォントサイズは自由に変えることができます。
Bloggerの場合[テンプレートデザイナー>上級者向け>ページのテキスト]で設定できますよね。

初めてブログを作る人は、何px(ピクセル)に設定したらいいんだろう、と悩むことと思います。
そしてきっと判断基準は「このくらいが好み」という自分視点になってしまうのではないでしょうか?

もちろん「適切」とはその人その人の感じ方です。
しかしWEBサイトには「ユーザビリティ」という考え方が必須です。
簡単に言うと、使いやすさ、見やすさ、ですね。

「適切 フォントサイズ」などで検索をかけると、たくさんの意見を参考にすることができます。

大手企業のサイトに関わっている方の書き込みにこんなものがありました。
●13px未満だとどの年代でも読みにくいという意見がある
●高齢者になると16px未満だと読みにくい

しかしデザイン面で言えば、文字が小さいほうが「クール」「おしゃれ」な感じがします。
Facebookが代表的な例です。

しかし文字が小さければ、目が疲れます。
つまり文字のサイズは「センスと配慮」のバランスであるわけです。
文字が小さくて読みにくいだけで、読むのをやめてしまうという読者がいることも覚えておきましょう。

現在私のブログは13pxにしてあります。



本文の中で文字のサイズを変える



↑上の文字はサイズを大きくしたのではなく
フォントのプルダウンメニュー「標準」を「小見出し」に変えたのです。

ただ本来は、文字のサイズを変えるだけではなく、スタイル(デザイン)を設定するのが目的です。
この記事を書いている時点では、ただの色違いの大きめ書体です。
スタイルを変える設定をした場合、その後は全てそのスタイルに置き換わります。
文字を変えるというよりもデザイン設定が変わるわけです。
小見出しのデザイン設定は、また次回のお話にします。


さて、本文のフォントサイズは、テンプレートデザイナーで設定したサイズが「標準」となりますが、


このアイコンで、小さくしたり大きくしたりできるということです。

ということは、標準設定でのフォントサイズが小さすぎると、ここで使用できる[小][最小]が潰れて読めなくなってしまいます。
なんだかもったいないですね。

14pxのフォントサイズ
●これは標準サイズです
●これは[小]のサイズです
●これは[最小]のサイズです


サイズがおかしいことに気がつきましたか?
文字を投稿ページで打っているときは、[小]と[最小]は明らかに違うのですが、みなさんが見ているプレビューでは[小]と[最小]のサイズが同じです。
指定した標準フォントサイズから、たぶん「マイナス」してサイズを決めていると思うので、これ以上小さなサイズにできないのでしょうね。



読みやすい書体に変更する



デフォルトでは日本語フォントは「MS Pゴシック」で見えているはずです。
ただBloggerでは、日本語書体を設定から全く選ぶことができないですよね。
選べるのは
[Arial] [Courier][Georgia]などなど英語書体だけです。
必然的に、
勝手にゴシックになる英語書体
勝手に明朝になる英語書体
どちらかを選んでいると思います。

「Blogger フォント変更」で検索すると、たくさんヒットします。
多くの方が、「メイリオ」という読みやすくて美しいフォントに変えています。
今みなさんが見ている私のこのブログもメイリオになっています。

もちろんフォントは機種依存ですので、見ているPCにメイリオがインストロールされていなければ、MS Pゴシックかもしれません。
またMacをお使いの方は、ヒラギノで見えていると思います。


では変更の手順です。

1) 以下のテキスト(CSSソース)をそのままコピーします。

body, textarea { font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif; }



2) [テンプレートデザイナー>上級者向け>CSSを追加] を選びます。


3)入力フィールドに、先ほどコピーしたCSSソースをペーストしてください。

 [ブログに適用]ボタンを押さなくても、入力フィールドに入れただけで、下に表示されている自分のブログのフォントが変わるのがわかります。
もし元に戻したいのであれば、このCSSソース全文を削除すればよいだけです。


4)最後は必ず[ブログに適用]ボタンを押すのを忘れずに。



いかがでしたか?
フォントの種類やサイズは、「読みやすい」ということが最も大切です。
メイリオは読みやすくて美しいフォントとして開発された書体なので、ぜひ使ってみてください。
ただ書体は大きくすればするほどカッコ悪くなってしまうので、センスと配慮のバランスで決めましょう。


追記

メイリオはWindowsVista以降のフォントです。
もしお使いのOSがWindowsXPならばメイリオ・フォントはインストールされていません。
↓こちらのサイトからダウンロードしてください。
Windows XP 向け ClearType 対応日本語フォント
今まで見ていたサイトの文字が見やすくなるのでおすすめです。


0 件のコメント:

コメントを投稿