ブログのフォントデザインの基本 コツ4選!!

本の要約

こんにちはTOMです

皆さんはブログや仕事で普段から文字を書くことが多いと思いますが

どのようなフォントを使って文章を書いていますか??

あまり気にして使って来なかった方やデフォルト設定のまま使っている方も多いと思います

私自身もデザインの本を読むまでは見た目やなんとなくでデザインしてしまっていましたが

デザイン的に優れているフォントは読者に読まれやすくなったり、印象が付きやすく覚えてもらいやすくなったりとメリットがたくさんあります

逆に見にくいフォントを使いすぎると稚拙な印象を持たれ、読まれづらくなるデメリットもあると思います

今回の記事ではブログなどで使うのフォントデザインの基本について紹介していきたいと思います

ぜひ見られるブログを作ったり、ビジネスでの読みやすい資料、売れやすい商品になるようにフォントデザインしていきましょう

それではよろしくお願いいたします

スポンサーリンク

フォントデザインの基本4選

フォントデザインの基本は以下の4つです!!

  1. 基本のフォントはゴシック体あるいは明朝体
  2. 英字(アルファベット)の基本はSans-serif
  3. ウェイト(太さ)を使いこなす
  4. フォントをファミリーで使う

それでは詳しく解説していきます!!

ゴシック体はユニバーサルデザイン

特にブログやビジネスで用いる場合は主として『ゴシック体』を使用するようにしてください

理由は”見やすさ”と”読みやすさ”を重視するためです。

ゴシック体の特徴は誰にとっても読みやすいユニバーサルデザインであり、縦線と横線がほとんど同じ太さで表され統一感、安定感という印象を持ちます

例えば 新聞の見出しや広告にも多用されているのが目立ちます

同じく『明朝体』も”見やすさ”と”読みやすさ”の観点から推奨されています

明朝体の特徴はゴシック体に比べ”はね””とめ”が意識されているフォントなので

どちらかと言えば美しさ、カッコ良さを際立たせ、より情緒的な印象を読者に与えます

一方でそれ以外のフォントについては基本的には使用しないことをお勧めします

ポップなフォントは親しみやすさ、使いやすさがありますが
読む側からしてみると”安っぽく”読みにくい印象がもたれてしまいます

読まれるブログで最初に気にしなければいけないことは見やすさ、読みやすさなので使う場面は限られてきます

ポップなフォントが使える場面としては「子供向け」の記事やタイトル、「安っぽさ」「親しみやすさ」をアピールしたい場面などで利用するとよいでしょう!!

英字の基本はSans-serif

先ほど日本語のフォントにはゴシック体を使うことが一般とされていますが、アルファベットのフォントにも同じように基本型が存在します

英字の基本フォントはSans-serif”(サンセリフ)です!

サンセリフの特徴は英語のゴシック体とも呼ばれており、文字の端部には日本で言う「はね」、「止め」がないです

逆に『セリフ体』は日本で言う明朝体のように「はね」、「止め」があるフォントといえます

ちなみに「san」はフランス語で「無い」という意味で
「セリフ」が無い「sans-serif」
「セリフ」がある「serif」  という覚え方です

日本の文はゴシック体、英文はサンセリフと使い分けるようにしましょう

サンセリフ体の4種類

サンセリフの中でも種類分けされており4つに分けられます

①グロテスク・サンセリフ

もっとも古くから利用されているフォント

代表的な書体は Franklin Gothic

②リアリスト・サンセリフ

グロテスク・サンセリフの次に登場したフォント、見やすさと使いやすさのあるフォントです

代表的な書体は Arial, Helvetica

③ヒューマニスト・サンセリフ

ローマン体の骨格を残すフォントで、人間味のあるの柔らかさが表現されているフォントといえます

代表的な書体は Gill Sans

④ジオメトリック・サンセリフ

線と円を組み合わせたように幾何学的な図形から作られるフォントで、企業のロゴに採用されることが多くあります

有名なのはLOUIS VUITTONやVolkswagenなどがあります

代表的な書体は Futura、Avenir

ウェイト(太さ)を使いこなす

フォントのウェイトは文字の太さを示すもので、細いのから順に

「Light」→「Regular」→「Medium」→「Bold」→「Black」

の順に太くなっていきます

細い線はより文字を美しくかっこよく見せたいときに使い

太い線はよりカジュアルにあるいは見出しで強調したいときに使います!

そして見やすいブログ記事を書くコツは

タイトル・見出し・本文でフォントを使い分けるのではなく

フォントのウェイトを使い分けて書くことで統一感のある見やすい記事になります

(フォントがバラバラの場合)

(フォントを統一しウェイトを変えた場合)

上記の画像例を見ていただければわかると思いますがフォントを統一した(右の図の)方が統一感があり、見やすいデザインになっているのではないでしょうか!?

フォントをファミリーで使う

フォントのファミリーというのはさまざまなバリュエーションがあるかどうかです

そのバリュエーションというのは

  • Weight   文字の太さ
  • Condensed 細長デザイン
  • Italic    斜め
  • Inline    文字の中に文字
  • Stencil  文字転写に使われる書体

のようにフォントにもさまざまなファミリー(オプション)があります

しかしすべてのフォントに対してこれらのファミリーがあるというわけではありません

限られた汎用フォントのみが持っています

なのでフォントを決める場合にはファミリーに富んだフォントを初めから選んでおくこと

もしフォントデザインを変えるとなった場合に

全く異なるフォントから選ぶのではなく、オリジナルのフォントからファミリーを変えることでデザインの持つイメージを変えることで

読者の持っているイメージと大きくかけ離れることなく統一感を保ちながら読者に新たな印象を与えることができます

例えば”MSゴシック”はもとから太字には対応していません

「太字」コマンドを使った場合でもそれほど太くはなりません

一方”ヒラギノ角ゴシック”は太さにおいても10種類ありバリュエーションに富み、さまざまな場面でも使い分けることができ便利です!!

このようにファミリーに富んだフォント選びは自分のデザインの幅を広くできるといえるでしょう

まとめ

今回の記事ではブログ・ビジネスシーンにおけるフォントデザインの基本についてお伝えしてきました

  • 基本はゴシック体を用いる
  • 英文の場合はSans-serif(サンセリフ)体を用いる
  • 文字の太さウェイトを使いこなす
  • フォントはファミリーの多さから選ぶのがベター

いかがでしたでしょうか?フォントデザインの基本についてやフォント選びのコツについて紹介してきました!!

自分のブログなどでもフォントデザインを意識して作成してみるといいのではないでしょうか?

そのうちいつの間にか誰にでも使わるユニバーサルデザインのブログに変貌しているかもしれませんね!!

以上TOMでした!!

コメント

タイトルとURLをコピーしました