bold等の太字や色の文字装飾、どう使うと効果的?htmlの基礎知識

文字装飾

インターネット初期の手打ちタグの頃とは異なり、現在ではサイト作成用のアプリの他、WordPressやブログの機能でも気軽に文字装飾が行えるようになりました。「意味はよくわからないけど、見た目が派手になるからとにかく太字にしてる」「色々な色でブログを書いている」という人もいるのではないでしょうか?

でも公式サイトやアクセス数を増やすためには「装飾をきちんと使いこなす」ということが大切なんです。「ブログのアクセス数が伸びない」「サイトにくる常連さんができない」という理由、もしかしたら装飾を間違っているせいかもしれませんよ。

マイ
今回はboldやstrongといったHTMLの文字装飾・文字強調について、わかりやすく解説をしていきます。

アクセス数が下落する原因?文字装飾のNG例

まずは現在のWebサイトやブログを振り返ってみましょう。こんな文字装飾、やっていませんか?

文字色に何色もの色を使っている

サイト制作初心者、ブログをやり始めた人に多いのがコレ。また「カラフルな方がカワイイ(キレイで華やか)」と考える人も、文字の強調色に何色もの色を取り入れてしまいがちです。ところがこの方法、ユーザー側目線でみてみると「大間違い」なんです。以下の例を見てみましょう。

NG例
サボテンとは中央アメリカ・南アメリカを原産とする多年生植物のことを指します。日本では球形状の塊になっているものが有名ですが、実際には円柱型・ひも型等2000種類以上もの様々なタイプがあるのが特徴です。黄色ピンク、白、等、美しい色合いの花を咲かせます。

アイラ
どうでしょう、目がチカチカして、文章全体の意味がわかりにくくありませんか?ユーザーはページを訪れた最初の1秒~3秒で「ページの印象」を決めていますので…テキスト部分の文字色が多いと「なんだか読みにくそう」と思われ、すぐにページを離れちゃうかも!?また読んでみた場合にもテキストに対する理解度が落ちて、記事に対する満足度も下がってしまうかもしれませんね。

 

テキストの強調箇所が多すぎ・長すぎ

次に多いのが、強調箇所が多すぎという点。太字等が多い方が派手に見えますが…ユーザー側にはこれも嬉しくありません。

NG例
髪質が突然変わる理由には様々なものが挙げられます。食生活の乱れ、運動不足、睡眠不足…思い当たることがある人も多いことでしょう。また冷えや血行不良等も原因となりやすいですね。しかし現在最も大きな原因と言われているのが、誤ったシャンプー選びとシャンプー方法なんです。

アイラ
この文脈で「シャンプー選びが大切だ」という要点は掴みやすいですか?あれもこれもといった複数の原因が強調されてしまって、「シャンプーが重要なんだ!」という点がわかりにくいですよね。

 

斜体に太字、文字装飾の種類が多すぎ

「機能があるから」といって、文字装飾を色々と取り入れてしまうのも考えものです。

NG例
SEO対策とは、Search Engine Optimizationの略称で、日本語では「検索エンジン最適化」とも呼ばれます。自社・自店舗のサイトの露出を増やすために行う、Google等の検索エンジン対策をまとめた言葉です。SEOのやり方は日々変わっていくため、常に新しい情報を入手しておく必要があります。

アイラ
フォントの大きさや太さ・字形等が変わりすぎると、ユーザーのテキスト理解度は大きく下がりますね。またページ全体の統一感が薄れ、「ゴチャゴチャしている」「煩雑だ」という第一印象に!いくらWebデザインやブログデザインに気を配っても、テキストがゴチャついていては意味が無いように思います。

 

文字色が目立たなくなっている

「とにかく文字色を変えればいい」と安易な色配色をすると、ポイントマークするはずだった場所の印象が弱くなってしまいます。

NG例
HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略称です。Webページを作成・閲覧するための最も基礎といえる言語であり、現在わたしたちが見ているWebサイト・ブログ等のほぼ全てがHTML(HTMLタグ)が使用されています。Web制作・Webマーケティングを行う上で、基本であるHTMLの知識は必須とも言えるものです。

アイラ
最も言いたかった筈の最終部分の色文字を「黄色(yellow)」にしたことで、背景色の白色に黄色が埋もれてしまい、ポイント部分が弱くなってしまっています。白背景色に薄いピンク、薄い黄色といった色合いや、黒背景色に濃いグレー・濃い青等を取り入れると、このようにポイントマークがしづらくなってしまいますね。

 

どこがリンクなのかがわからない

メール閲覧アプリ等のデフォルト状態では、「青文字+下線」がURLへのリンク、「紫文字+下線」がアクセス済みのリンクとして扱われることが多いです。そのためテキスト内で青文字等の文字色を多用すると、その箇所がリンクと勘違いされてしまうこともあります。

NG例
4月に入って春の新メニューが8皿登場しました。「そら豆のパスタ」「グリーンベジタブルのスープ」「軍鶏と菜の花入りのオムレツ」等、春を感じられるメニュー満載です。詳しくはMenuページでもご案内しておりますので、ぜひご覧ください。
アイラ
上記例ではMenuページへ誘導をしたかったはずですが、各料理の名称の方が「リンク?」と思われる可能性が大ですね!誘導が適切に行われず、サイト内をユーザーが辿りにくくなってしまっています。

 

文字装飾を効果的に使うには「目的」を知ること

HTMLでもCSSでも同じですが、サイトやブログの文字装飾とは単に「飾ればいい」というものではありません。そもそもなぜ、文字装飾が必要なのか?その目的を理解しておくことが大切です。

【文字を装飾する3つの目的】
1)文章にメリハリ・リズムをつける
長文テキストになるほど、文章は単調に感じられがち。またパッと見た時に「同じ大きさ・太さの文字がひたすら並んでいる」というページは難しげに、堅苦しく見えてしまいます。適宜に装飾を行うことで全体にメリハリやリズムが生まれ、「読みやすそう」という印象を与えます。

2)文章を理解しやすくする
強調すべき部分に文字色や太字等を使うことで、読者側は「この文章の要点はどこなのか?」を理解しやすくなります。文章への理解度が上がり、記事への満足感が高まります。

3)読者を記事の最後まで引っ張る
ユーザーの多くは、表示された記事全体を目にしてから記事を読み始めます。記事後半にも強調部があるという「見た目」によって、ユーザー側は「最後に重要なことが書いてある」と感じ、テキストを最後まで読もうとしてくれます。

 

bold、strong…文字装飾の基本を知っておこう

効果的な文字装飾・文字強調を行うために、まずは文字装飾タグ・文字強調タグの意味を知っておきましょう。

<strong> ストロングタグ

strong emphasis(強い強調)を意味するタグで、そのページの中でも強く重要である点に使います。一般的なブラウザでは、太字で表されます。かつてstrongタグの多用がSEO対策に用いられたため、一時期はstrongの多用がGoogleのペナルティを受けたこともありました。しかし現在ではstrongを多用しても、特にペナルティを受けることはありません。とは言え検索クローラーに「この部分が重要だ」と理解をしてもらうためにも、strongタグは「重要度の高い部分」「打ち出したいキーワード」等に使うべきタグであると言えます。

なおstrongタグは<h1><h2>のような見出しタグの中には使用しません。hタグは既に「見出し」という意味を持ったタグであり、その中に「最重要」のstrongを入れると「スパム」と判定されることもあります。「単なる太字装飾ではない」という点をよく理解しておきましょう。

<b>bold ボールドタグ

bタグはbold(太字)を意味するタグです。strongと同様にブラウザ上ではテキストが太字表示になります。しかしstrongとは異なり、強調といった意味合いはありません。あくまでも「装飾(飾り)」という意味で使います。

<u> text-decoration: underline アンダーライン

uタグ(underline)はHTMLでのテキスト部に下線を引くためのタグです。しかしuタグは非推奨要素で、HTML5では廃止される予定となっています。アンダーラインを引く場合には、スタイルシート(CSS)の <span style=”text-decoration: underline”>~</span> を使用しましょう。

CSSでは波線・二重線・蛍光マーカー風といった装飾を行うことも可能です。これらはいずれも装飾的な意味合いであり、強調といった意味はありません。

<i>italic イタリックタグ

<i>はitalic(イタリック)、斜体を意味するタグで、英語等の文章では分類学上の名称や技術等の専門用語、多言語による慣用句や訳文といった「その他のテキストと性質が違う言葉」に対して用いられます。ただし日本語の場合、専門用語等に対し別字体を使用するという習慣が無い(そもそもカタカナ表記が外語を表す)ということから、イタリック使用はあまり一般的とはなっていません。そのためメイリオ等のフォント表示の場合、iタグでの表示が正常に行われないことがあります。

<em>emphasis エンファシスタグ

<em>はemphasis(強調)を表すタグですが、HTML5以降ではアクセントを付けるといった意味合いで使われることになっています。見た目は<i>タグと同様、斜体となるブラウザがほとんどです。iタグ同様、日本語での斜体使用があまり一般的でないため、使用頻度は低め。またstrongのような重要性を伝える意味はありません。

【SEOでは文字装飾は同一に扱われる】

マイ
上記のようなb、em、strong等のタグについては、Googleは「どれも同等・同一に扱う」ということを公表しています。つまりGoogleのロボット対策のために装飾・強調を使い分けるといったテクニックはほぼ必要ないということです。文字装飾・文字強調はSEO向けというより実際の読者である「ユーザー満足度」を高めるものと考えた方が良いでしょう。

 

読みやすいテキストを作る文字装飾の4つのコツ

では実際に、効果的なテキストの装飾・強調を行っていく上でのポイントを抑えていきましょう。

1.使用する色は1色~2色まで

前述の通り、文字色が多すぎるとテキストは非常に読みづらいものになります。メインの文字色1色に対し、強調色は1色までが基本。どうしても足りない場合にはもう1色加えて、「文字色1色+強調色2色」という使い方にします。また色の使用ルールは必ず事前に決めておきましょう。

【文字色ルール使用例】
1)メインの文字色 黒
2)アクセントにしたい部分 黒+太字
3)最も強調したい部分 赤+太字

OK例
「卵は1日2個まででは?」と思ってガマンをしている人も多いのではないでしょうか。これは厚生労働省による食事摂取基準によるもので、かつては日本人はコレステロールの摂取制限をすべしと考えられてきました。しかし2015年に厚生労働省はコレステロールの摂取制限を撤廃

コレステロールが低いとガンの死亡率が500%にも上がるといった報告もなされ、適度なコレステロールの摂取は重要と考えられるようになりました。卵を食べる数を無理に制限する必要は無いのです。

2.基本は「太字」での強調にする

「文字装飾の基本」でも解説したとおり、日本語では英語と異なりイタリック(斜体)による強調の言語文化がありません。そのため原則的にはテキストは「太字」で強調していきます。

最も重要なポイント、キーワードを含む部分には<strong>、そこまで重要ではないがアクセントとして目立たせたい場合には<b>を使用しましょう。

なお以下のような場合には「斜体」「アンダーライン」も使用してOKですが、使用箇所を絞り、1ページ内にアレコレと装飾が入らないようにしてください。

【イタリック使用】
海外の人のインタビュー引用部分
海外の専門書等からの訳文の箇所
古典文学・古語等からの引用箇所

【アンダーライン使用】
レクチャー等でのまとめ部分
リンク部分
注釈 等

3.強調すべきポイントを絞る

太字で強調された部分が多すぎると、「一体何が言いたいページなのか」がわかりづらくなります。「読みやすさをアップする」という意味で、「太字部分だけを読んでいけば、テキストのあらすじがわかる」というのが理想的です。

OK例
ブログで成功するには?という質問をよく受けます。コツには色々あるのですが、まず大切なのは「ブログは長期的な運営を必要とするもの」と理解するという点です。長く運営をしていくにはネタ切れをしないよう、ネタをストックしておく方が圧倒的にラク。また、ストック切れを起こさないためにも、自分が本当に興味を持っているテーマを扱う方が良いと思います。三日坊主にならないために、ブログを書く時間を決めるといった習慣作りも大切ですね。

4.背景色との対比を考えたカラー配色

背景色が白色の場合には、前述の通り「黄色」等の薄い色は背景に埋もれてしまいがちです。しかし反対に背景色が黒・濃紺等の濃い色の場合、ポイントカラーが「黄色」等だととてもよく目立ちます。もっとも強調したいポイントについては、背景色の反対色(補色)を選んだり、トーンが異なる色合いを選んでみましょう。

ただし前述のとおり、文字色をあまりにもコロコロ変えるとテキストは非常に読みづらくなります。「ページ全体の見た目が寂しい」と感じる場合には、テキスト部ではなく「画像の使用」「フレームデザイン」等で華やかさを加えるようにした方が良いでしょう。

 

おわりに

タグの意味を理解し、ユーザー目線で装飾を行うことによって、サイトやブログのテキスト部の見た目は大きく変わってきます。これからの公式サイト・ブログ執筆の際にこの点を意識するだけでなく、今まで作ってきたサイト・ブログの装飾もできれば改善しておきたいですね。

マイ
「見やすい・読みやすいサイト/ブログ」を作ることで、読者の数にも良い変化が見られることでしょう。

関連記事

  1. ブログ記事本文

    ブログのアクセス数は「記事本文」で変わる!本文の書き方・構成テクニック…

  2. ブログ集客方法・パソコン操作

    ブログ集客で成功する方法とは?「読まれるブログ」を書く3つのポイント

  3. セールスライティング

    集客・売上アップに必須のセールスライティング!特徴と書き方の4つのコツ…

  4. ブログの見出し

    集客ブログでは「見出し」も重要!アクセスアップする見出しの付け方「例」…

  5. DMCA

    DMCAとは?悪用されるってホント?サイト管理者必読の「デジタルミレニ…

制作実績一覧

  1. bacchus
  2. ふじぜんリニューアル後
  3. legend-planning
  4. ポスティングこころざし様
  5. インテリアコーディネーター小島真子

最近の記事

  1. レンタルサーバー ロリポップ
  2. レンタルサーバー選び
  3. 旅館
  4. 遺品整理
  5. LINE公式アカウント
  6. Google Maps
  7. youtube seo
  8. アーテック・エジソンアカデミー
  9. パズル×ロボット×プログラミング 3つとも学習できる小学校低学年向け教室
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主