みんな同じに見えているわけではないフォント

昨日、ちょっと「思ったフォントと違う~!」「かわいくな~い!」ということで、だいぶ悩まれているつぶやきを見つけ、なんだかほっとけない気がして、ちょこっとコメントさせていただいたりしたのですが、公にあまりガッツリ説明するのもどうかなと思ったので、ここに書いておこうかなと思います。

WordPressでブログをする方も、だいぶ一般的になってきたし、その方もWordPressだったので、今回はWordPressでの説明にしたいと思います。

あんまりCSSやHTMLなど、中のことを書くブログではないので、サラッとですが・・・。

フォントって何?

そもそも「フォント」とは?をまずおさらいしておきましょう。

フォント: font) は、本来「同じサイズで、書体デザインの同じ活字の一揃い」を指す言葉だが、現在ではコンピュータ画面に表示したり、面に印刷書籍など)したりするために利用できるようにした書体データを意味している。金属活字の時代から書体の世界に関わっている者からは、データとしてのフォントはデジタルフォント (digital font) として区別して呼ばれることもある。

書体という言葉は、現在ではフォント(の使用ライセンス数)を数える単位としても用いられるが、ここでは分けて考えることとする。(書体参照)

Wikipedia「フォント」より

とはいえ、私の身の回りで、「フォント」と「書体」を分けて話す人は、WEB・デザインの先生くらいなので、ここではいっしょくたにしてお話しますね。

要は、装飾を除いた「文字の見た目」ですね。(すみません、難しい言い方をザックリ言うのが好きなので)
「明朝体」や「ゴシック体」といえば、「あー、聞いたことある」という方もいらっしゃると思います。

その「明朝体」や「ゴシック体」にもたくさんの種類があって、それ以外に英字のフォントがこれまた無数にあるわけなんですね。

サイトの雰囲気や、ターゲットに合ったフォントを選ぶ

昨日の方は(Mさんにしましょう)「フォントがかわいくない。○○さんのサイトと同じフォントにしたい!」というお悩みでした。
「明朝」と「ゴシック」の違いではなく、「ゴシック体」の中での違いだったので、ぱっと見そこまで気づかない方もいるだろうな、というレベルのものでした。
さすがデザイン畑の方なので、そういうとこちゃんと見ていらっしゃる!

気になる人は気になりますよね!
ですが、こればっかりは本当にそれぞれの好みなので、見る人によって「おしゃれ」「カッコイイ」「ダサイ」と思うフォントは違います

一般的に読みやすいと言われている「メイリオ」というフォントを、「幼稚だ」という人もいれば、「お洒落だ」という人もいるくらい差があって、こちらが良かれと思ってご提案したフォントが、すんなり通らないことも多々あるんですよね。

Mさんが「かわいくない」と言っていたフォントは、実はこのサイトで使っている「Helvetica」というフォントでした(笑)

Mさんは、サイトや動画などにイラストを使ったり、ポップな色を採用していて、全体的にとっても「かわいい」テイストなんですね。
なので、この書体が「かわいくない」「ヒラギノ角ゴシックがいい」というのは、とってもわかります。
何とかしたいですよね!

そしてこの「Helvetica」というフォントは、若干「こじんまり」していて線も細いですし、読みにくいと感じる方もいるかもしれません。

「Helvetica」は、今のところFacebookで使用されているみたいなんですね。
世界で最も広く使われているフォントとも言われています。(日本語と英字で違いはあると思いますが)
私は、主にFacebookでシェアすることが多いので、違和感のないフォントということで、同じものを使っています。

それと、「かわいさ」を求める層が私のお客様にはいらっしゃらないので、これでOKかなと思っています。

※「Helvetica」は最近リニューアルされて、もっと見やすくなった「Helvetica Now」というのが出たそうです。(お高い💦)

フォントは簡単に変えられる?

記事投稿画面を使いやすくするために、「TinyMCE Advanced」というプラグインを入れている方も多いと思いますが、それがインストールされていれば、選択肢は少ないですが投稿記事の編集画面でフォントを選ぶことはできますよね。

フォントの変更

ですが、ここで文章全体の書体を設定するのは、あまり現実的ではありません。

見出しや一部の文字列だけ書体を変えるというのも、私はおすすめしていません。
一つのサイトの中に、いろんなフォントが混在するのは、どうかなと思うからです。

私が卒業したWEBの学校の先生も、こうおっしゃっています。

デザインの先生のフォントについてのつぶやき

なので、記事内でこまめにフォントを変更するのは、私的には「禁止!」(笑)
サイト全体でちゃんと統一感をもって設定しましょう、ということですね。

WordPressのテーマでフォントが選べるようになっているものもあるようですが、基本的にはCSSの知識がなければ、簡単には変えられないというのが一般的な気がします。

TCDのテーマは「メイリオベース」「游ゴシックベース」「游明朝ベース」の3種類から選べるようですね。

そのような設定がない場合は、CSSの編集が必要になります。

フォント設定したら全員に反映される…わけではない

ここまで書いておいてアレなんですが、CSSでこだわりのフォントを設定しても、必ずしもすべての端末で反映されるわけではないということをお伝えしておきます。

たとえばこんなふうに設定した場合、「ヒラギノ角ゴシック」というフォントは、MacPCには入っているけれどWindowsPCには入っていないので、WindowsPCでは、次の「游ゴシック」が優先的に表示されます。それもない場合は「メイリオ」が…というふうに、左から優先順位がついて、最悪何もない場合は基本的なゴシック体「sans-serif」を表示しますよ、という意味なんですね。

「ヒラギノ角ゴシック」に似ているフォントとして「Noto Sans」というWEBフォントを使っているサイトは、とても多いと思います。
PCのフォントフォルダにないフォントでも表示させたいという時に、WEBフォントを使うとか、あなたのPCにあるフォントを確実に表示させるために、CSSの書き方があるのですが、これはかなり専門的になるので、ここでの説明は省略します。

おすすめフォントの記述(ゴシックの場合)

要は、こだわるあまり、あまり一般的でないフォントを使っても、全員に見てもらえるわけではないということ。
一般的で簡単に設定できるものを使いましょう。

このサイトのフォントがいいという方は

「Helvetica」は有料フォントなので、その代用として「arial」を書いておくというのが一般的のようですね。

Mさんのようにかわいい文字がご希望なら

なんてのはいかがでしょうか?

「Noto Sans」の使い方は、こちらのサイトを参考にしてみてください。
「ヒラギノ角ゴ」にソックリ!無料で使えるOpen Type フォント「Noto Sans JP」

※けど、「Noto Sans」を入れると読み込みが重くなるような気がします。SEO的にどうなのかな・・・という感じ。

 

お問い合せ

サービス一覧

 

岸田みづなのレターポット

mizuna

『先生』と呼ばれる講師・コンサルタントのプロモーション環境を構築します。あなたのコンテンツを眠らせないで、最大限に活用するため、発信、コミュニティ、コンテン...

プロフィール

あなたにおすすめの記事