文字の色

 

ブログに記事を書いていて、大事なところにをつけたり太字にしたりしますよね。

この時に少し注意すべき点があります。

ブログ全体のデザインから見て、テキストの色を決めたりするかもしれませんが、
それはNGかもしれません。

詳しく見ていきましょう!

 

文字はどの色を使うのがいいのか?

重要な箇所に色つけるとき、例えばブログの全体的なイメージがピンクだとして、文字の色もピンクにすれば全体的に統一感が出ますよね!

わたしのブログの場合は全体的にブラウンのイメージなので、文字色もこんな風に↓してみたら統一感が出ます。

文字の色

ちょっと見にくいですね(^^;)

赤枠で囲った部分の文字を茶色にしてあります。

タイトルやサイドバーなどが茶色っぽいデザインなので茶系でまとめたくなるのも分かります。

この場合は茶色なのでまだマシなんですが、ピンクとか黄色の場合・・・

すっごく見にくいですよね~(^^;)
もはや黄色なんて読めません。

 

ここまで見にくい色を使うことはないと思いますが、コレ、ユーザビリティの面で問題アリです。

背景が白の場合、色差が少ない色を文字に使うことで、読者さんは俄然読みにくくなります。

 

最初の茶色の文字は白い背景には読みやすいですが、他の黒い文字と馴染んでしまって、そこが重要箇所であることが読みとりにくいです。

 

なので、基本的には重要箇所は赤で表示するのが一般的で、見やすいと思います。

この『一般的である』ということがポイントで、白背景に黒文字であれば、その中に書かれている赤文字は重要な箇所だ

・・・という事が何となくみんな見たことがある光景で、そのように認識しています。

 

という事で、記事中の重要箇所・キーワードはで表示すると良いですね。

 

太字(強調)の使い方~<b>タグと<strong>タグの違い~

赤文字と同じように、重要な箇所に太文字を使うことがあります。

キーワードやアピールしたい部分ですね。

検索エンジンのクローラーに『ここが重要ですよ~』とお知らせするという意味もあります。

 

ビジュアルエディタで入力している場合、【B】ボタンを使用しますよね(^-^)

文字の強調

 

強調する場合のタグは<b>と<strong>がありますが、
WordPressではこの【B】ボタンを使うと<strong>タグが入力されます。

 

この2つの違いは

  • <b>・・・視覚的な強調、見た目で文字を太くするだけ
  • <strong>・・・論理的な強調、意味を強調する(検索エンジンのクローラーに重要だと伝える)

と区別して考えると主張されていることもあって調べてみたのですが、Googleとしては『どちらも同じと考える』ということでした。

 

<b>タグも<strong>タグもGoogleは同じ扱い

参照 Google Webmasters YouTube

英語なのですべてを正確に理解できていないのですが、『SEOの観点ではどちらも同じ扱い』という事は分かりました(^^;)

※正確な訳がお分かりになる方、教えてください・・・

 

結局のところ、<b>タグを使おうが、<strong>タグを使おうが、SEO的にはどちらも【同じ】ということなので・・・

強調の太字にしたい時は、ラクですし【B】ボタンを使えばOKってことですね♪

 

ただ、使用する頻度には気をつけましょう。

アレも重要コレも重要!とたくさん太字にしてしまうと、【意図的にキーワードを大量に盛り込んでいる】とSEO的に悪影響を与えてしまうので・・・

また、多用するとそれぞれの重要さが薄れてしまいますので気をつけましょう。

 

リンクはどの色を使うのがいいのか?

過去記事へのリンクや、外部の参考サイトへのリンクを貼る場合の【色】についても考えてみましょう。

使用しているテーマによって、自動的にリンクの色が決まっている場合もありますよね。

 

わたしが使用しているこのテーマだと、リンクを貼るとこのように↓下線がついたブラウンになります。

リンクの色

テーマのイメージカラーがブラウンなので、全体的に統一感が出て見た目は良いのです。

 

ただ、リンクの色は?と聞かれた時、パッと思いつくのは何色でしょうか?

改めて考えると分からないかもしれませんが、昔から【リンク】と言えば『青色に下線』なんです。

検索結果のページを見ても青色ですよね。

 

無意識でも意識的でも、やっぱり『リンクは青色に下線』というのが多くの人の共通認識なので、
自動的に青色以外に設定されてしまうテーマを使用している場合は、きちんと『青色に下線』になるように変更しましょう。

 

まとめ

今回は『色のお話し』をしてきましたが、まとめると使う色はポイント箇所の赤リンクの青の二色だけしか使えないことになります。

二色で十分ですし、二色(と太字)だけで、読みやすくて分かりやすい文章を書けなければいけないわけです。

極論を言えば、黒一色でも読者さんが読みやすい内容や文章構成ができるようになりたいですよね(^-^)

 

わたしはこの他に黄色のマーカーを使うことがあります。

操作解説の記事では、【○○をクリック】のように、クリックが必要な箇所にマーカーを引いて分かりやすく統一しています。

なので3色ですね(^-^)

 

でもやっぱり『黒一色でも読みやすくて分かりやすい文章』が書けるようにならないといけないなぁ・・・

日々精進です!!