脳科学を応用した読みやすいブログのフォントカラー設定3つのルール

  • このエントリーをはてなブックマークに追加

ブログ記事を書いてそのまま装飾もせずに投稿をしてしまうのも別に全然いいと思いますが、それだとどうしても読みにくかったりしますよね。

そして、ブログは書籍などと違って装飾が可能なわけですからどうせならば色付けをして読みやすくしてあげたほうがいいです。

会話などでも棒読みで話すのと、抑揚があるのとでは記憶の残り方が違うように、文章も太字にしたり色をつけたりフォントの大きさを調整したりして抑揚をつけると記憶にも残りやすくなります。

せっかく、書いた良質な記事を棒読み感覚で読んでもらうのも勿体なくないですか?

読みやすくすることでこれまでよりもシェアされSEOで上位表示されたり、
ブログそのものがユーザーに好まれファンが出来たり、

するかもしれません。

ただ、これだけは言えるのは何の装飾もないと読みにくくユーザーが離れやすいのも事実です。

しかし、実際に色付けを行うと全部が重要に見えて色ばかりでチカチカして逆に読みづらいような気がしたり、これでいいのか!?わからなくなったりしてしまう人もいます。

そこで、ここでは僕自身が利用している脳科学を応用した読みやすいブログのフォントカラーの設定の仕方のルールを解説していこうと思います。


[adsense]

1.脳に強く刻まれるフォーカスの力

よく、何かを伝えたいと思って話す側の人が自分の話は全部完璧に伝わっている・聞いてくれている前提で話しがちなように、ブログなどの記事だって全てが読まれているわけではありませんし、実際に記憶に残るのはほんの一部です。

書籍でも、1冊の中で3つくらい記憶の残ればいい…と言われているくらいですから。

「え?たったの3つだけ!?」

と思われるかもしれませんが、3つで十二分なのです。

1つでもいい!

なぜなら、僕ら人間の記憶というのは、1つでも強烈な記憶が残れば数珠繋ぎで周辺の記憶を引き出すという性質があるからです。

例えばですよ。

前日の晩御飯はすぐに思い出せますが3日前の晩御飯は思い出しにくいですよね。
でも、その日に何か感動することがあったのならば思い出しやすいはずです。
はたまた、3日前におこった出来事・一緒にいた人・会話の内容を思い出せば思い出しやすくなる。

なーんてことはないでしょうか?

きっとあるはずです。

それと一緒で、1つ記憶に残ってしまえば周辺の記憶は思い出せるわけです。

この脳の機能をフォントの装飾に活かせばいいのです。つまり、強調したい部分・単語のみをフォントカラーで装飾をし、あまり装飾をしすぎないほうが読者の記憶には残りやすくなるわけです。

実際、僕自身は

・一文を強調をするか?
・単語やセリフを強調するか?

しか基本的にはフォントカラーをイジらないようにしています。

つまり・・・フォントカラーの付け方は主に以下のような2パターンということになります。

よく、イライラ感に限らずキレやすかったり・・・・精神的な側面は自分自身のセルフコンセプトが影響をしているという事が心理学やNLPなどでは考えられていてカウンセリングやセラピーなどを受ける方がいたりします

よく、イライラ感に限らずキレやすかったり・・・・精神的な側面は自分自身のセルフコンセプトが影響をしているという事が心理学やNLPなどでは考えられていてカウンセリングやセラピーなどを受ける方がいたりします


「あとねぇ!セリフとかもフォントカラーを変えたほうがわかりやすいよね!」

前者が、一文を装飾したパターンで、その中でもより強調したい部分を下線にしています。後者が強調したい部分だけを赤で装飾したパターンです。

主に、この2つのパターンが基本ですが、前者のほうは多様はしないほうがいいのは言うまでもありません。

「確かに!そうだなぁ!」

というように、セリフなどもフォントカラーを変えたほうがいいですし、読み手と語り手、男と女で分けて読みやすく装飾をするとよりわかりやすくなるはずです。

 

2.フォントカラーの選択の仕方

と、先ほどの会話例は、男と女を分けましたがなセリフもあるかもしれませんが、見てすぐに気づいたと思います。これは、セリフ以外にも男は青系統の色で女は赤系統の色を使うというのが僕らの日常生活の中からインストールされているからです。

トイレとかそうですよね。

男は青で女は赤、、、そして赤系統の色はあまり着ないわけです。

実際、僕はピンク色のシャツとかを着るとちょっと引かれたりするんですが、これは多くの人が脳の中で「男=ピンク」というは非常識だからなんです。

もし、トイレのマークが男がピンクで女が青の環境で育っていたら・・

きっと僕のピンクのシャツは引かれる事はなかったでしょう!

というのはどうでもいいんですが、フォントカラーの配色を選択するにあたって、このような日常生活の概念を活用をするといいでしょう。

例えば、信号ならば・・・

・青・・・・・・・・・・・・・・・肯定
・黄色(オレンジ)・・・・注意
・赤・・・・・・・・・・・・・・・否定

というようにしてみてもいいです。

以前は、ホームページやブログなどでは「青」はリンク色として使われている場合が多かったのですが、最近では比較的ウェブページの基本色をリンク色と合わせるパターンがあるのでこの信号パターンは確かにアリです。

しかし、やはり未だにGoogleやYahooの検索結果のリンクが青なのを見ると装飾として青を選択するのはあまりオススメしません。

アンダーラインなんか引いちゃったら完全リンクです(早速やってみた)

あと原色はちょっと目の疲労になるのもあるので、装飾としては個人的には向いていないかなと思っているのでオススメは、青ではなくスカイブルー的な色にしてズラしたほうがいいかなと思います。

例えば、このブログのように

・青・・・・・・・・・・・・・・・肯定
・赤・・・・・・・・・・・・・・・否定

というようにしてもいいでしょう。ちなみに、このブログでは昔からのブログの典型的な配色をルールにしています。

・特に強調する単語・・・・・・・・・・・・赤
・箇条書き・・・・・・・・・・・・・・・・オレンジ
・結論・・・・・・・・・・・・・・・・・・マーキー
・会話・セリフ(登場人物1人の場合)・・・青系

というように。

基本的にシンプルにしておくのがベストです。

スタッフや外注さんに指示をすることを考えたらよりわかりやすいルールにしておきましょう。

僕自信のフォントカラーの考え方としては・・・

Q1:自分のブログの基調色(リンク色)は何か?で禁止の色を決定し
Q2:どのルールを採用するか?(信号?WEBの基本色?男女?)で使う色を決定し
Q3:どの場面で使うのか?で最終決定をする。

この3ステップでルールは完成するはずです。

あとは、先程の脳科学を応用した記憶に残るフォーカスの法則を採用してもらえればいいです。

ちなみに、ブログシステムによっては選択した特定のフォントカラーを記憶できない場合があるので効率を考えた上で決めてもいいかなと思います。

Word Pressを活用されている方は、TinyMCE Color Pickerのプラグインをインストールして設定してもらえば、よく使う色をカラーパレットの記憶をすることができるので是非活用してください。

TyniMCE のカラーピッカーを拡張するWordPressプラグイン

3.好きなカラーコードをクリックだけで作り出す方法

読みやすく記憶に残りやすいブログの配色は、主に上の2つの項目を抑えておけば特に問題はないでしょう。あとはどのような色を選択したほうがいいのか?ですが、ブログのシステム上なかなか選びたい色を作れないという悩みとかって結構あるのではないでしょうか?

大体のブログのエディター(投稿画面)のカラーパレットは上の2種類のものがほとんどですよね。

好きな色に設定したいけど・・・作れない。

みたいな。そういう時に使えるのがGoogleクロームのプラグインで配布されているColorPick Eyedropperです。

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en

これはですね。

写真やウェブサイトをクリックするだけで、その選択した色のカラーコードを表示してくれるプラグインです。例えば、ネットサーフィンをしていた時にを「おっ!この色いいな!」と思ったサイトの色があったらそれをクリックすることによってカラーコードが表示されるという魔法のツールです。

もし、どういう色を使えばいいのかわからないという場合は、是非いろんなウェブサイトを見て好きな色を探してみてください。

 

最後に

さて、今回は他ではあまり解説されていないフォントカラーに特化した記事を書いてみましたがいかがでしたか?僕らが考えるのはとにかく読者が読みやすいのか?もありますが、書き手が読者に何を訴えかけたいのか?もあります。

そこらへんを考えた上でフォントカラーを選択していってください。

文章をただの文字の羅列として考えるのではなく、実際の対話としてあなたがどうやって伝えるのか?を考えてもらえばおのずとあなたに適したフォントが見つかるはずですよ。

  • このエントリーをはてなブックマークに追加
Comment form

*