2014年4月15日

[HTML] 適度な太字が読みやすい! 強調タグ(B、EM、STRONG)の違いとは?

html-bold-250

こんにちは! ヨス(@yossense)です。

ネットでいろんなサイトやブログを見ていると、文字に様々な装飾をしていることに気づきます。文字を太くしたり、色を変えたり、背景に色をつけたり。今回はブログ文章内の文字の装飾についてです。

ブログ文章内の文字装飾について

ブログ内の文章にはメリハリを付け、読みやすくするため、文字を太くしたり色をつけたりします。どんなものが見やすいのかちょっと比較してみましょう。

カラフルな装飾

さて、文字の装飾と言えば、よくアメブロで見かけるヤツに(主観かもしれませんが)、こんなのがあります。

色彩の暴力という名の文字装飾
「色彩の暴力」という名の文字装飾

カラフルすぎでめっちゃ見づらいです。いえ。もう感情のままに言わせて下さい。これは「色彩の暴力」です! こんなん見てたら気が狂いそうになります!!

いや、でもコレね……嫌がらせでやってるのではないのはわかっています。だって「トロ」という言葉を赤くしているのはトロの色を反映させているんだと思います。こんな手間なことをして、さらに読みにくくなっているのは絶対にもったいないですよね。

文字に色を使いすぎると見づらい

という訳で、とりあえず見やすくするために色を一色にしてみましょう。

全部黒色に
全部黒にしたった

別に黒じゃなくてもいいですが、一色にまとめるとだいぶ見やすくなったのではないですか? ただ、まだ見にくいです。何が原因かと言うと、太字になっている部分が多すぎなんですね。

文字を太字にする部分の割合が増えれば増えるほど、太字にしている意味がなくなります。だって強調というのは、強調されていない中にあって初めて強調になりますから。

太字を追えば内容が分かるのが理想

なので、太字にする部分をちゃんと考えて、厳選しました。

太字にする部分を厳選
さらに太字にする部分を厳選

これはスキミング(流し読み)をしやすいように考えて太字を入れてみました。

まぁ、これは内容がアレなんでアレですが(笑)、私は太字を追っていくと内容がなんとなく分かる……ってのが理想だと思っています。コレは私も全然極めてないです。

太字の頻度ですが、私は1つの段落内に最高でも2つまでに抑えるようにしています。もちろん文章量にもよりますが、段落内に太字部分が多くなると、ほとんど太字やん!な状況になってしまいますからねー。

ついでに書いておくと、文字の色を変えるときにはこちらの2点を忘れないで下さい。

  • 青い文字はリンクされている部分に見える(クリックしてガッカリさせる)ので使わない。
  • 黄色のような薄い色の文字は背景が白い場合は差がわかりにくくなるので使わない。

ブログ内文章の装飾の仕方

ではブログ内文章の装飾はどんなふうにやっているのでしょうか? HTMLについて説明します。

<b>タグを使う

ブログやサイト内で太字を表現するときは、<b>タグを使うと良いです。

<b>タグは「bold(太字)」の略です。なので対象部分を「太字にする」以外の意味はありません。そのため、Googleはこのタグで囲んだキーワードを重要だとは認識しません。見た目が同じでも、SEO的に強調したいところは<strong>タグにしましょう。ただ、<strong>が多いとスパムだと思われるかもしれないので、私の場合は、<strong>は1ページに多くても3つぐらいに抑えています。

実は、昔はこの<strong>が今よりも効果的で、乱用したり、<h1>タグの中にさらに<strong>を入れたり、無茶苦茶していましたw。それで検索順位に効果がありましたから(笑)。

HTML5での<b>と<em>と<strong>の違い

せっかくなんで、HTML5でよく違いが分からないと言われるタグもおさらいしておきましょう。

1<b>

「bold(太字)」の「b」です。これは上で書いたのと同じく、ただ単に装飾として「太字」にするために使っているだけです。もちろんCSSをいじって太字をやめて(細字にして)、赤い文字にすることもできます。

2<strong>

これは「strong emphasis(強い強調」」です。 Googleはこのタグで囲まれた部分を重要だと認識します。検索で引っかかってほしいキーワードに限定して使うと良いです。ただし多用は絶対にやめておきましょう。

3<em>

「emphasis(強調)」の略です。これは会話で例えると声を大きくしている感じです。SEO的には効果があるのかどうなのかは曖昧で、私はSEO的には効果ないとみなして使っています。<b>タグとは違う装飾を付けたいときに使っても良いですね。<b>タグは太字のみ、<em>タグは太字+赤にするみたいな。ただしこのタグも乱用しない方が無難です。

私のやっているこだわり

最後のオマケですが、私は太字(強調タグ)を使うときにこだわっている部分があります。

それは太字の前後に少しの空欄(半角スペース)を入れること!

太字の前後に微妙に空欄を
太字の前後に微妙に空欄を!

すっごい微妙な差ですが、個人的には半角スペースがあった方が読みやすいと思います。今更面倒やし、そんなの忘れるやんけ!って言う方、CSSで一発ですよ。

strong, em, b { padding : 0 0.2em ; }

CSSにこれを追加するだけで、全部の<strong><em><b>の前後に半角スペースが入ります。楽ですねー。

margin」でなく「padding」にしているのは、背景に色を付ける場合があるからです。意味わからない人はスルーでよし!

今回の内容をまとめてみました。

  • 文字装飾は黒い太字だけで十分。
  • <b>タグを使おう
  • 検索で引っかかって欲しいキーワードには<strong>タグを。

太字だけを追っていけば内容がなんとなく分かる文章になるようにしたいですねー。なんかカッコイイし。

ブログの文章関連のお勧め記事です。こちらも合わせてどうぞ!

WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。

たとえば完全にオンラインで学べるTechAcademy [テックアカデミー]なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。

このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。

つまり、例えば学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。

プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!