ちゃっかり東京でエンジニア

砂丘から飛び出した文系エンジニアのブログ

文字がブログの印象に影響を与えているのかもしれない

f:id:programmingforbeginners:20190914223542p:plain

 

はい、まずはじめに、このカオスなアイキャッチを作ってしまってごめんなさい。

 

選ぶフォント・大きさ・色によって、こんなに印象が変わるんだっていうのを示そうとして遊んで試行錯誤した結果、このような状態になりました、あは。

 

こんなアイキャッチでも見にきてくれた方、ありがとうございます!

 

 

さてさて、前回はブログを書くときに注意してもらいたい【 改行・スペース 】についての記事を書きました。

 

programmingforbeginners.hatenablog.com

 

今回は、ブログに適した文字について、

字体

大きさ

この3つの観点で解説していきます。

 

この記事を読んで、あなたのブログに適した文字を知りましょう。

 

 【 目次 】

文字によってブログの雰囲気が変わる

ブログに適した文字とは

 □ どんな字体を選べばいい?

 □ ブログの文字に適した色

 □ 読みやすい文字の大きさ

まとめ

 

文字によってブログの雰囲気が変わる

これは普段からブログを読むことが多い方ならわかるかと思います。ブログに使われている文字によって、ブログ全体の雰囲気が全然違ってきます。

 

堅い雰囲気、柔らかい雰囲気、かわいい雰囲気.....。あなたはどんな雰囲気のブログを作っていきたいですか。

 

どんなブログテーマなのか誰に読んでほしいのか読者にどんな印象を与えたいのかを考えて文字を決めていきましょう。

 

 

ブログに適した文字

ブログで使う文字は、とにかく読みやすさを1番に考えましょう。その上で、雰囲気に合った色、字体、大きさを調整していきます。

 

難しく考える必要はありません。それぞれ、ほんの少しの変化を加えるだけで十分です。

 

どんな字体を選べばいい?

 

フォントってとってもたくさんの種類があるんですが、一般的に多く出回っているフォントって限られています。

 

まずは、角ばったフォント(見出しとかによく使われている)

f:id:programmingforbeginners:20190916225524p:plain

次に、丸っこくてやわらかいイメージのフォント(一番よく見る)

f:id:programmingforbeginners:20190916225650p:plain

最後は、筆で書いたようなフォント(企業理念とかで使われてそう)

f:id:programmingforbeginners:20190916230311p:plain

そして、ブログでよく使われているのは、2番目のフォントです。具体的なフォント名を言えば、”游ゴシック”、似た感じのフォントに”メイリオ”があります。

  

3つ目のフォントは、そうですね...。たとえば、和菓子屋さんとか旅館のWebページに使われていますよね。

 

文字自体が『和』とか『伝統』をイメージさせるので、仮にブログで使うとなると、かなりテーマは絞られてきます。

 

自然観光とか、日本の文化に関するテーマであれば、イメージが重なって良いかもしれません。ただ、ゴシック体やメイリオ系のフォントと併用は避けることをおすすめします。

 

フォントをもっとこだわりたい、人とは違う個性が出るブログを作りたいという方へ、選ぶ時のポイントを追加でお伝えしておきますね。

 

フォントを選ぶ時のポイントとして『きれいさ』というのもチェック。フォントの中には、アンバランスだったり、太さがバラバラなものもあるので気をつけてください。

 

あえてそうして崩してあるフォントもありますが、その多くが長文であるブログには向きません。目が疲れちゃいます...。

 

 

f:id:programmingforbeginners:20190918082242j:plain

ブログの文字に適した色

 フォントカラーについては、ブログ全体のテーマによって調整をしてほしいんですが、基本的には、濃いグレー、明るめな黒、濃紺など、暗いカラーをチョイスします。

 

#2a3536

#241f07

#434743

#151040

#070326

#333333

 

白背景でこの文字の色だと上の文字と比べると少し見にくくなります。

#b5aeb3

#bec2c1

 

 薄い文字の色は、印象を軽く、明るくするというメリットもありますが、やりすぎには注意です。

 

読みやすい文字の大きさ

オススメするのは16pxです。これはGoogleの推奨サイズでもあります。SEO対策にもなるので、よほどの拘りがないならこのサイズにあわせておきましょう。

 

わたしの考え方も少し言わせてください。これは少し感覚的な問題になるかもしれませんが、

 

文字が小さい=文章が小さくまとまる=流し読みになる

 

文字が大きめ=1文字ひともじが目に入ってくる=流し読みになる可能性が低くなる

 

つまり、1文字でも多く読者の目に印象付けられるかどうかでそれが結果的に『読みやすさ』で判断されるのではないかという持論です。

 

f:id:programmingforbeginners:20190918082504j:plain

まとめ

 今回は、ブログのメインである文字についての記事でした。

 

軽くおさらいしてきましょう。

1.字体について(おすすめは”遊ゴシック”です)

2.について(基本暗めの色、軽い印象にするときはグレー系)

3.大きさについて(Google推奨は16pxです)

 

以上でした。

くわしいやり方については後々のブログで書いていくことにします。

 

それぞれ変更するのは少しだけですが、その少しの変更で、ブログ全体の雰囲気を変えることができます!

 

あなたのブログには、どんな字体、どんなフォントカラー、文字の大きさが適しているでしょうか。これを機会にぜひ考えてみてください。

 

 

最後に解説した、文字の大きさの変更の仕方ですが、はてなブログの場合は、

1.デザイン/カスタマイズ/スタイルシートの順でクリック

2.スタイルシートの中に.entry-content {font-size:16px;}をコピペ

3.デザインアップデートボタンをして保存!

 

Word Pressの場合は、外観/テーマの編集からCSSを変更する方法もありますが、デザインが崩れてしまう危険性を考えると、

 

プラグイン(機能をより充実させるもの)を入れる方が安全かとおもいます。そのプラグインは『TinyMCE advanced』というやつみたいです。

 

インストールして有効化すれば、エディタで自由にフォントの編集ができるようになります!

 

ぜひやってみましょうー!

 

 

 

最後まで読んでいただき、ありがとうございました! 

ツイッターもやっているので、よければのぞいてみてください!