インターネット初期の手打ちタグの頃とは異なり、現在ではサイト作成用のアプリの他、WordPressやブログの機能でも気軽に文字装飾が行えるようになりました。「意味はよくわからないけど、見た目が派手になるからとにかく太字にしてる」「色々な色でブログを書いている」という人もいるのではないでしょうか？
でも公式サイトやアクセス数を増やすためには「装飾をきちんと使いこなす」ということが大切なんです。「ブログのアクセス数が伸びない」「サイトにくる常連さんができない」という理由、もしかしたら装飾を間違っているせいかもしれませんよ。
お好きな見出しからどうぞ
アクセス数が下落する原因？文字装飾のNG例
まずは現在のWebサイトやブログを振り返ってみましょう。こんな文字装飾、やっていませんか？
文字色に何色もの色を使っている
サイト制作初心者、ブログをやり始めた人に多いのがコレ。また「カラフルな方がカワイイ（キレイで華やか）」と考える人も、文字の強調色に何色もの色を取り入れてしまいがちです。ところがこの方法、ユーザー側目線でみてみると「大間違い」なんです。以下の例を見てみましょう。
サボテンとは中央アメリカ・南アメリカを原産とする多年生植物のことを指します。日本では球形状の塊になっているものが有名ですが、実際には円柱型・ひも型等、2000種類以上もの様々なタイプがあるのが特徴です。黄色、ピンク、白、赤等、美しい色合いの花を咲かせます。
テキストの強調箇所が多すぎ・長すぎ
次に多いのが、強調箇所が多すぎという点。太字等が多い方が派手に見えますが…ユーザー側にはこれも嬉しくありません。
髪質が突然変わる理由には様々なものが挙げられます。食生活の乱れ、運動不足、睡眠不足…思い当たることがある人も多いことでしょう。また冷えや血行不良等も原因となりやすいですね。しかし現在最も大きな原因と言われているのが、誤ったシャンプー選びとシャンプー方法なんです。
斜体に太字、文字装飾の種類が多すぎ
「機能があるから」といって、文字装飾を色々と取り入れてしまうのも考えものです。
SEO対策とは、Search Engine Optimizationの略称で、日本語では「検索エンジン最適化」とも呼ばれます。自社・自店舗のサイトの露出を増やすために行う、Google等の検索エンジン対策をまとめた言葉です。SEOのやり方は日々変わっていくため、常に新しい情報を入手しておく必要があります。
文字色が目立たなくなっている
「とにかく文字色を変えればいい」と安易な色配色をすると、ポイントマークするはずだった場所の印象が弱くなってしまいます。
HTMLとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略称です。Webページを作成・閲覧するための最も基礎といえる言語であり、現在わたしたちが見ているWebサイト・ブログ等のほぼ全てがHTML（HTMLタグ）が使用されています。Web制作・Webマーケティングを行う上で、基本であるHTMLの知識は必須とも言えるものです。
どこがリンクなのかがわからない
メール閲覧アプリ等のデフォルト状態では、「青文字＋下線」がURLへのリンク、「紫文字＋下線」がアクセス済みのリンクとして扱われることが多いです。そのためテキスト内で青文字等の文字色を多用すると、その箇所がリンクと勘違いされてしまうこともあります。
4月に入って春の新メニューが8皿登場しました。「そら豆のパスタ」「グリーンベジタブルのスープ」「軍鶏と菜の花入りのオムレツ」等、春を感じられるメニュー満載です。詳しくは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では文字装飾は同一に扱われる】
読みやすいテキストを作る文字装飾の4つのコツ
では実際に、効果的なテキストの装飾・強調を行っていく上でのポイントを抑えていきましょう。
1.使用する色は1色～2色まで
前述の通り、文字色が多すぎるとテキストは非常に読みづらいものになります。メインの文字色1色に対し、強調色は1色までが基本。どうしても足りない場合にはもう1色加えて、「文字色1色+強調色2色」という使い方にします。また色の使用ルールは必ず事前に決めておきましょう。
【文字色ルール使用例】
1）メインの文字色 黒
2）アクセントにしたい部分 黒+太字
3）最も強調したい部分 赤+太字
「卵は1日2個まででは？」と思ってガマンをしている人も多いのではないでしょうか。これは厚生労働省による食事摂取基準によるもので、かつては日本人はコレステロールの摂取制限をすべしと考えられてきました。しかし2015年に厚生労働省はコレステロールの摂取制限を撤廃。
コレステロールが低いとガンの死亡率が500%にも上がるといった報告もなされ、適度なコレステロールの摂取は重要と考えられるようになりました。卵を食べる数を無理に制限する必要は無いのです。
2.基本は「太字」での強調にする
「文字装飾の基本」でも解説したとおり、日本語では英語と異なりイタリック（斜体）による強調の言語文化がありません。そのため原則的にはテキストは「太字」で強調していきます。
最も重要なポイント、キーワードを含む部分には<strong>、そこまで重要ではないがアクセントとして目立たせたい場合には<b>を使用しましょう。
なお以下のような場合には「斜体」「アンダーライン」も使用してOKですが、使用箇所を絞り、1ページ内にアレコレと装飾が入らないようにしてください。
【イタリック使用】
海外の人のインタビュー引用部分
海外の専門書等からの訳文の箇所
古典文学・古語等からの引用箇所
【アンダーライン使用】
レクチャー等でのまとめ部分
リンク部分
注釈 等
3.強調すべきポイントを絞る
太字で強調された部分が多すぎると、「一体何が言いたいページなのか」がわかりづらくなります。「読みやすさをアップする」という意味で、「太字部分だけを読んでいけば、テキストのあらすじがわかる」というのが理想的です。
ブログで成功するには？という質問をよく受けます。コツには色々あるのですが、まず大切なのは「ブログは長期的な運営を必要とするもの」と理解するという点です。長く運営をしていくにはネタ切れをしないよう、ネタをストックしておく方が圧倒的にラク。また、ストック切れを起こさないためにも、自分が本当に興味を持っているテーマを扱う方が良いと思います。三日坊主にならないために、ブログを書く時間を決めるといった習慣作りも大切ですね。
4.背景色との対比を考えたカラー配色
背景色が白色の場合には、前述の通り「黄色」等の薄い色は背景に埋もれてしまいがちです。しかし反対に背景色が黒・濃紺等の濃い色の場合、ポイントカラーが「黄色」等だととてもよく目立ちます。もっとも強調したいポイントについては、背景色の反対色（補色）を選んだり、トーンが異なる色合いを選んでみましょう。
ただし前述のとおり、文字色をあまりにもコロコロ変えるとテキストは非常に読みづらくなります。「ページ全体の見た目が寂しい」と感じる場合には、テキスト部ではなく「画像の使用」「フレームデザイン」等で華やかさを加えるようにした方が良いでしょう。
おわりに
タグの意味を理解し、ユーザー目線で装飾を行うことによって、サイトやブログのテキスト部の見た目は大きく変わってきます。これからの公式サイト・ブログ執筆の際にこの点を意識するだけでなく、今まで作ってきたサイト・ブログの装飾もできれば改善しておきたいですね。
こんにちは。【検索上位表示ホームページ制作】中小企業様の集客に特化したコンテンツ作成＆Webマーケティングのアドバイザーをしております。貴社の魅力を引き出し大企業と渡り合えるコンテンツ作りには自信がございます。Web事業歴15年目。「地域一番を目指したい」と言うweb担当者様お気軽にご相談ください。