Web制作関連入門インターネット広告アメブロSEO対策ブログお問い合わせmenuホームBLOGライティングbold等の太字や色の文字装飾、どう使うと効果的?htm...ライティング2018.04.22bold等の太字や色の文字装飾、どう使うと効果的?htmlの基礎知識TweetShareHatenaPocketRSSfeedlyインターネット初期の手打ちタグの頃とは異なり、現在ではサイト作成用のアプリの他、WordPressやブログの機能でも気軽に文字装飾が行えるようになりました。「意味はよくわからないけど、見た目が派手になるからとにかく太字にしてる」「色々な色でブログを書いている」という人もいるのではないでしょうか?でも公式サイトやアクセス数を増やすためには「装飾をきちんと使いこなす」ということが大切なんです。「ブログのアクセス数が伸びない」「サイトにくる常連さんができない」という理由、もしかしたら装飾を間違っているせいかもしれませんよ。ついて、わかりやすく解説をしていきます。エンファシスタグ読みやすいテキストを作る文字装飾の4つのコツ1.使用する色は1色~2色まで2.基本は「太字」での強調にする3.強調すべきポイントを絞る4.背景色との対比を考えたカラー配色おわりにアクセス数が下落する原因?文字装飾のNG例まずは現在のWebサイトやブログを振り返ってみましょう。こんな文字装飾、やっていませんか?文字色に何色もの色を使っているサイト制作初心者、ブログをやり始めた人に多いのがコレ。「カラフルな方がカワイイ(キレイで華やか)」と考える人も、文字の強調色に何色もの色を取り入れてしまいがちです。ところがこの方法、ユーザー側目線でみてみると「大間違い」なんです。以下の例を見てみましょう。NG例サボテンとは中央アメリカ・南アメリカを原産とする多年生植物のことを指します。日本では球形状の塊になっているものが有名ですが、実際には円柱型・ひも型等、2000種類以上もの様々なタイプがあるのが特徴です。黄色、ピンク、白、赤等、美しい色合いの花を咲かせます。アイラどうでしょう、目がチカチカして、文章全体の意味がわかりにくくありませんか?ユーザーはページを訪れた最初の1秒~3秒で「ページの印象」を決めていますので...テキスト部分の文字色が多いと「なんだか読みにくそう」と思われ、すぐにページを離れちゃうかも!?また読んでみた場合にもテキストに対する理解度が落ちて、記事に対する満足度も下がってしまうかもしれませんね。テキストの強調箇所が多すぎ・長すぎ次に多いのが、強調箇所が多すぎという点。太字等が多い方が派手に見えますが...ユーザー側にはこれも嬉しくありません。髪質が突然変わる理由には様々なものが挙げられます。...思い当たることがある人も多いことでしょう。冷えや血行不良等も原因となりやすいですね。現在最も大きな原因と言われているのが、誤ったシャンプー選びとシャンプー方法なんです。アイラこの文脈で「シャンプー選びが大切だ」という要点は掴みやすいですか?あれもこれもといった複数の原因が強調されてしまって、「シャンプーが重要なんだ!」という点がわかりにくいですよね。斜体に太字、文字装飾の種類が多すぎ「機能があるから」といって、文字装飾を色々と取り入れてしまうのも考えものです。Optimizationの略称で、日本語では「検索エンジン最適化」とも呼ばれます。自社・自店舗のサイトの露出を増やすために行う、Google等の検索エンジン対策をまとめた言葉です。SEOのやり方は日々変わっていくため、常に新しい情報を入手しておく必要があります。アイラフォントの大きさや太さ・字形等が変わりすぎると、ユーザーのテキスト理解度は大きく下がりますね。ページ全体の統一感が薄れ、「ゴチャゴチャしている」「煩雑だ」という第一印象に!いくらWebデザインやブログデザインに気を配っても、テキストがゴチャついていては意味が無いように思います。文字色が目立たなくなっている「とにかく文字色を変えればいい」と安易な色配色をすると、ポイントマークするはずだった場所の印象が弱くなってしまいます。Language(ハイパーテキスト・マークアップ・ランゲージ)の略称です。Webページを作成・閲覧するための最も基礎といえる言語であり、現在わたしたちが見ているWebサイト・ブログ等のほぼ全てがHTML(HTMLタグ)が使用されています。Web制作・Webマーケティングを行う上で、基本であるHTMLの知識は必須とも言えるものです。アイラ最も言いたかった筈の最終部分の色文字を「黄色(yellow)」にしたことで、背景色の白色に黄色が埋もれてしまい、ポイント部分が弱くなってしまっています。白背景色に薄いピンク、薄い黄色といった色合いや、黒背景色に濃いグレー・濃い青等を取り入れると、このようにポイントマークがしづらくなってしまいますね。どこがリンクなのかがわからないメール閲覧アプリ等のデフォルト状態では、「青文字+下線」がURLへのリンク、「紫文字+下線」がアクセス済みのリンクとして扱われることが多いです。そのためテキスト内で青文字等の文字色を多用すると、その箇所がリンクと勘違いされてしまうこともあります。NG例4月に入って春の新メニューが8皿登場しました。「そら豆のパスタ」「グリーンベジタブルのスープ」「軍鶏と菜の花入りのオムレツ」等、春を感じられるメニュー満載です。詳しくはMenuページでもご案内しておりますので、ぜひご覧ください。アイラ上記例ではMenuページへ誘導をしたかったはずですが、各料理の名称の方が「リンク?」と思われる可能性が大ですね!誘導が適切に行われず、サイト内をユーザーが辿りにくくなってしまっています。文字装飾を効果的に使うには「目的」を知ることHTMLでもCSSでも同じですが、サイトやブログの文字装飾とは単に「飾ればいい」というものではありません。そもそもなぜ、文字装飾が必要なのか?その目的を理解しておくことが大切です。【文字を装飾する3つの目的】1)文章にメリハリ・リズムをつける長文テキストになるほど、文章は単調に感じられがち。見た時に「同じ大きさ・太さの文字がひたすら並んでいる」というページは難しげに、堅苦しく見えてしまいます。適宜に装飾を行うことで全体にメリハリやリズムが生まれ、「読みやすそう」という印象を与えます。2)文章を理解しやすくする強調すべき部分に文字色や太字等を使うことで、読者側は「この文章の要点はどこなのか?」を理解しやすくなります。文章への理解度が上がり、記事への満足感が高まります。3)読者を記事の最後まで引っ張るユーザーの多くは、表示された記事全体を目にしてから記事を読み始めます。記事後半にも強調部があるという「見た目」によって、ユーザー側は「最後に重要なことが書いてある」と感じ、テキストを最後まで読もうとしてくれます。行うために、まずは文字装飾タグ・文字強調タグの意味を知っておきましょう。emphasis(強い強調)を意味するタグで、そのページの中でも強く重要である点に使います。一般的なブラウザでは、太字で表されます。strongタグの多用がSEO対策に用いられたため、一時期はstrongの多用がGoogleのペナルティを受けたこともありました。現在ではstrongを多用しても、特にペナルティを受けることはありません。言え検索クローラーに「この部分が重要だ」と理解をしてもらうためにも、strongタグは「重要度の高い部分」「打ち出したいキーワード」等に使うべきタグであると言えます。strongタグは<h1><h2>のような見出しタグの中には使用しません。hタグは既に「見出し」という意味を持ったタグであり、その中に「最重要」のstrongを入れると「スパム」と判定されることもあります。「単なる太字装飾ではない」という点をよく理解しておきましょう。ボールドタグbタグはbold(太字)を意味するタグです。strongと同様にブラウザ上ではテキストが太字表示になります。strongとは異なり、強調といった意味合いはありません。「装飾(飾り)」という意味で使います。アンダーラインuタグ(underline)はHTMLでのテキスト部に下線を引くためのタグです。uタグは非推奨要素で、HTML5では廃止される予定となっています。マーカー風といった装飾を行うことも可能です。これらはいずれも装飾的な意味合いであり、強調といった意味はありません。イタリックタグ<i>はitalic(イタリック)、斜体を意味するタグで、英語等の文章では分類学上の名称や技術等の専門用語、多言語による慣用句や訳文といった「その他のテキストと性質が違う言葉」に対して用いられます。日本語の場合、専門用語等に対し別字体を使用するという習慣が無い(そもそもカタカナ表記が外語を表す)ということから、イタリック使用はあまり一般的とはなっていません。そのためメイリオ等のフォント表示の場合、iタグでの表示が正常に行われないことがあります。エンファシスタグ<em>はemphasis(強調)を表すタグですが、HTML5以降ではアクセントを付けるといった意味合いで使われることになっています。見た目は<i>タグと同様、斜体となるブラウザがほとんどです。iタグ同様、日本語での斜体使用があまり一般的でないため、使用頻度は低め。strongのような重要性を伝える意味はありません。【SEOでは文字装飾は同一に扱われる】マイ上記のようなb、em、strong等のタグについては、Googleは「どれも同等・同一に扱う」ということを公表しています。SEO向けというより実際の読者である「ユーザー満足度」を高めるものと考えた方が良いでしょう。読みやすいテキストを作る文字装飾の4つのコツでは実際に、効果的なテキストの装飾・強調を行っていく上でのポイントを抑えていきましょう。1.使用する色は1色~2色まで前述の通り、文字色が多すぎるとテキストは非常に読みづらいものになります。メインの文字色1色に対し、強調色は1色までが基本。しても足りない場合にはもう1色加えて、「文字色1色+強調色2色」という使い方にします。色の使用ルールは必ず事前に決めておきましょう。「卵は1日2個まででは?」と思ってガマンをしている人も多いのではないでしょうか。これは厚生労働省による食事摂取基準によるもので、かつては日本人はコレステロールの摂取制限をすべしと考えられてきました。2015年に厚生労働省はコレステロールの摂取制限を撤廃。コレステロールが低いとガンの死亡率が500%にも上がるといった報告もなされ、適度なコレステロールの摂取は重要と考えられるようになりました。卵を食べる数を無理に制限する必要は無いのです。2.基本は「太字」での強調にする「文字装飾の基本」でも解説したとおり、日本語では英語と異なりイタリック(斜体)による強調の言語文化がありません。そのため原則的にはテキストは「太字」で強調していきます。重要なポイント、キーワードを含む部分には<strong>、そこまで重要ではないがアクセントとして目立たせたい場合には<b>を使用しましょう。以下のような場合には「斜体」「アンダーライン」も使用してOKですが、使用箇所を絞り、1ページ内にアレコレと装飾が入らないようにしてください。等3.強調すべきポイントを絞る太字で強調された部分が多すぎると、「一体何が言いたいページなのか」がわかりづらくなります。「読みやすさをアップする」という意味で、「太字部分だけを読んでいけば、テキストのあらすじがわかる」というのが理想的です。OK例ブログで成功するには?という質問をよく受けます。コツには色々あるのですが、まず大切なのは「ブログは長期的な運営を必要とするもの」と理解するという点です。長く運営をしていくにはネタ切れをしないよう、ネタをストックしておく方が圧倒的にラク。ストック切れを起こさないためにも、自分が本当に興味を持っているテーマを扱う方が良いと思います。三日坊主にならないために、ブログを書く時間を決めるといった習慣作りも大切ですね。背景色が白色の場合には、前述の通り「黄色」等の薄い色は背景に埋もれてしまいがちです。反対に背景色が黒・濃紺等の濃い色の場合、ポイントカラーが「黄色」等だととてもよく目立ちます。強調したいポイントについては、背景色の反対色(補色)を選んだり、トーンが異なる色合いを選んでみましょう。前述のとおり、文字色をあまりにもコロコロ変えるとテキストは非常に読みづらくなります。「ページ全体の見た目が寂しい」と感じる場合には、テキスト部ではなく「画像の使用」「フレームデザイン」等で華やかさを加えるようにした方が良いでしょう。おわりにタグの意味を理解し、ユーザー目線で装飾を行うことによって、サイトやブログのテキスト部の見た目は大きく変わってきます。これからの公式サイト・ブログ執筆の際にこの点を意識するだけでなく、今まで作ってきたサイト・ブログの装飾もできれば改善しておきたいですね。マイ「見やすい・読みやすいサイト/ブログ」を作ることで、読者の数にも良い変化が見られることでしょう。企業・店舗の公式ホームページは、うまく利用すれば大きな集客・売上アップに繋がるツールとなってくれます。ホームページの在り方を一度見直してみませんか?ホームページ集客に成功しているサイトの法則や、アクセスアップの方法等を見てみましょう。