Webサイト制作～よく使う文字装飾タグとその効果

Web制作には見た目も重要！文字の装飾と効果について

Webサイト制作において、
ユーザーの満足度(UX;本来は、ユーザーの体験を意味するUser Experience)を上げるには、

サイトのデザインが美しい
フォント・文字が適切なサイズ・見やすい
文章が読みやすい
何を伝えたいのか
何の情報がどこにあるのか

などが非常に大きな要素となっています。

✅前回お話した『見出し』には、伝えたい情報がどこにあるのか、
✅その前にお話した文章構成の法則は、読みやすい文章や伝えたい情報をどう伝えるのか、
に関わってきます。

今回お話するのは、SEO対策としても重要になる文字装飾についてです。
＜storng＞タグや＜b＞タグ、そして赤字やマーカーラインなど私が使うタグの紹介もしていきます。

少しずつ、htmlやcssの要素も入ってきます。
でも、今回の内容は難しい内容ではありませんので、是非参考にして下さい。

SEOにも効果的！文字の装飾で一歩上行くWebサイトへ

最も重要な部分は赤文字。
注意したい部分は、赤や黄のアンダーライン。
目立たせたい場合は、カッコ（【】や『』、<>など。）
は、小学生のうちからやっていたことだと思います。

Webサイト制作においても、当然のように必要になります。
その中でも一番重要なのが、＜strong＞（強調）タグです。
狙うべきキーワードには、必ず＜strong＞タグを使いましょう。

この＜strong＞タグは、

クローラーに対してのアピールにもなる
ユーザー（訪問者）に対してのアピールにもなる
制作者の意思がぶれないようにする意味合いもある

まさに、【三方良し】の超優秀タグです☆彡

だからこそ、注意点もあります。

strongタグ使用時の注意点

多用は厳禁。使い過ぎは、ペナルティの対象に。
ひと段落に各キーワード1回ずつで十分効果アリ。
装飾タグをあまり被せ過ぎない！過度な装飾もペナルティに。

→例）＜strong＞タグ＋赤文字＋アンダーライン＋文字の拡大…など。せいぜい２つくらいにしておきましょう。

優秀だからこそ多用は逆効果。
スパムサイト扱いなんてされたら、元に戻すのが本当に大変です！

strongタグに似たタグとして＜b＞タグがあります。
→これは、strongタグと同じ黒の太文字ですが、SEO効果は一切ありません。

Webサイト制作によく使う文字装飾タグ

お団子茄子が、よく使う文字装飾タグを紹介します。
SEOとして最も効果のあるのは、strongタグですが、
他の装飾に関しては、SEO対策としてはあまり大差ないと感じています。

なので、『ユーザーにどれだけしっかり認知・満足してもらい、UXをあげるか』という目的です。
①赤文字

span style="color:red;"

1	span style="color:red;"

文章全体を赤文字にしたいなら、＜p＞タグですが…文章全体を赤文字にすることはめったにないですよね。
可能性があるのは…

②アンダーライン（蛍光ペン風）

span style="background: linear-gradient(transparent 60%, #ff0 0%);"

1	span style="background: linear-gradient(transparent 60%, #ff0 0%);"

“ff0が色を表します。
Webカラーのコード表は、コチラでたくさん見ることができます。

③傍点
HTML

&lt;span class="ondot"&gt;目立たせたい文字&lt;/span&gt;

1	<span class="ondot">目立たせたい文字</span>

css

.ondot {
text-emphasis: filled double-circle red;
-webkit-text-emphasis: filled double-circle red;}

.ondot {

text-emphasis: filled double-circle red;

-webkit-text-emphasis: filled double-circle red;}

もちろん枠や見出しもおしゃれに装飾したりしますが、それは別な記事で。

◇番外編『文字を点滅させる』

&lt;span id="blink8889"&gt;点滅&lt;/span&gt;&lt;script&gt;with(blink8889)id='',style.opacity=1,setInterval(function(){style.opacity^=1},500)&lt;/script&gt;

1	<span id="blink8889">点滅</span><script>with(blink8889)id='',style.opacity=1,setInterval(function(){style.opacity^=1},500)</script>

点滅に関しては、コチラのサイトからコードを使わせていただいています。
コチラのサイトでは、いろいろな文字装飾タグを自動で生成してくれます。

Webサイト制作も自分の想い通りに動かす楽しみ

Webサイト制作するなら自分の想い通りに動かせるにようになりましょう♪
その為には、やはりhtmlやcss,java scriptといった知識が必要になります。

ただ、文字装飾やWebデザインの初歩だけならネット上でデータを探してコピペでも問題なし！
（アプリやかなり凝ったサイトを作る場合は、深い知識が必要になります。）

そして、
文字を装飾しだすといろいろコード（タグ）を見つけたくなります。
自分の思ったようにサイトや文字や画像を動かせるのは、プログラミングの最初の面白さでもありますネ☆彡

次回は、プログラミングについてお話しします。
では。