\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
レベル順ブログ講座 カテゴリから記事を探す

【完全版】SEOに効果的なブログの装飾や囲み枠の使い方・見せ方

記事の書き方
この記事は約8分で読めます。

この記事では、SEOに強い、ブログ記事の装飾・囲み枠・吹き出しの使い方と見せ方をご紹介いたします。(特にCocoonユーザの方は必見)

記事を書いていると、様々な囲み枠や強調文字を使いたくなり、カラフルになりがち。

今日こんにちのSEO対策とは、テクニックより、ユーザにコンテンツ内容をわかりやすく伝えることが先決です。

①適切な改行・空白、 ②装飾・囲み枠の使い方、③装飾・囲み枠の配色、の3つがポイントになります。

この3つを守ると、見やすい&センスがある記事に仕上がります。

スポンサーリンク

1.【そもそも論】SEOに強くわかりやすいブログの書き方

SEO対策をやりつつも、自分らしい文章を書きながらキレイな記事に見せるには、

大きく分けて3つのポイントがあります。

  • 文章の書き方
    文の構造を簡潔にする
  • 画像の見せ方
    画像はスマホファーストで作る
  • 装飾の使い方
    記事・文の装飾は多くて3パターン

この記事では、効果的な装飾の使い方について深堀りしていきます。

2.SEOに効果的なブログの装飾や囲み枠の使い方・見せ方

SEOに効果的なブログの装飾や囲み枠の使い方・見せ方は、

テクニックは2割、ユーザファーストにコンテンツを作成することが8割を締めます。

  • 改行タグ・空白を適切に設ける
  • マーカー・強調・囲み枠の使い方のコツ
  • マーカー・強調・囲み枠の配色のコツ

上の通り、私のブログは大変見やすい・センスがあるとよく褒めていただけます。

これもすべて、トップブロガーさんのコンテンツを研究して、毎日質を上げ続けたおかげ。

2か月半で5桁を達成するという結果も出ているので、

記事を書くときに常に見れるよう、スクショ・メモ・ブックマークをおすすめします。

2-1.改行タグ・空白を適切に設ける

WordPressの改行には、Enter もしくは、 Entershift があります。

Enter は<p></p>、Entershift は<br>というタグが入力されます。

ブログでのの使い分け例文

例えば、このような文章があるとします。

<br>タグを入れるとこうなる
ブログでbrタグを使う例文

文章を読みやすくするために

Entershift (<br>タグ)で 左のように改行すると…

スマホから見た時のbrタグを使用した文章

<br>タグは見る端末の幅によって改行が増えてしまいます。

できるだけEntershift<br>タグは使わないようにしましょう。

<p>タグを適切に使う
意味段落で改行された文章

通常、本などの読み物は、意味段落や形式段落で改行します。

これをブログに使用しても、大きな問題はありません。

モバイルフレンドリーに書かれた文章

しかしwebでは、スマホから見たときに見やすいかどうかが重視されているので、

読点「、」句読点「。」で<p>タグを入れましょう。

(詳しくは文章の書き方講座へ)

余白のために<p><br>タグを使わない
誤ったpタグの使い方

空白を設けるために、<p>タグを使用してはいけません。

誤ったbrタグの使い方

<p>タグと同様、

空白を設けるために<br>タグを使用してはいけません。

空白はスペーサ―を使いましょう。

空白を設けたい時はスペーサーを使う
ブログに適切な空白を設ける

空白を設けたい時は、スペーサ―という、

記事に空白を入れるものを使いましょう。

スペーサ―が無い方はCSSのheightを使ってください。

2-2.マーカー・強調・囲み枠の使い方のコツ

そもそも論、文章のマーカーや強調を、自分ルールで大量に入れないようにしましょう。

その自分ルールで分けられた装飾の種類は、

他人から見るとどういったルールや違いがあるのかわかりません。

以下では、マーカーや強調の使う時のコツをお話しします。

マーカーか強調どちらかに統一する
誤ったマーカーと強調の使い方

大げさに悪い例です。

マーカーと強調のどちらが大切か、ユーザから見ると優劣が付きません。

強調文字を使いたいなら強調だけを使う、といった統一感を出しましょう。

正しい強調の使い方

統一感があるので、強調しているところに自然と視線が向き、

どこがポイントなのかが一目見ただけでわかります。

正しいマーカーの使い方

マーカーを使用するときも、マーキングしすぎないように注意しましょう。

たまにアニメーション付きマーカーを使っている方がいますが、普通に見づらいのでやめましょう。

強調タグ<strong>と<b>の使い分け

先日大騒動になったこちらのネタ。

SEO関連の記事を書いているメディアや、トップブロガーさんを研究しまくった結果、

「ここぞの時に強調タグ<strong>を使用する」で収まりが付きそうです。

▼ちなみに色々なトップブロガーさんを調べてみた結果はこちら

ブロガー名<strong>,<b>の使用状況
Mさん<strong>を<b>に変換
Kさん<strong>,<b>両刀使い
Kさん<strong>のみ
Sさん<strong>のみ
Hさん<strong>のみ
Uさん<strong>のみ

<strong>のみでもスパム判定されてないし、

十分稼がれているトップブロガーたちが、たくさんいらっしゃいました。

そもそも、スパムだと判定されるほど強調を使用していることがだめ!

先ほども述べましたが、マーカーや強調を多用すると、

ユーザは、何が大切なのかが一目見ただけじゃわからなくなります。

流し読みの時代なので、一目でわからせるように記事を書きましょう。

使用する囲み枠は3種類まで

記事中で使用する囲み枠は多くても3種類までにしましょう。

私が良く使用しているのは、以下の3つです。

  • アイコンリストといいます
  • アイコンが選べます
  • 枠線の色も選べます

白抜きボックスといいます。

枠線の色が選べます。

案内ボックスです。

「合わせて読みたい」などの、ほかの記事を掲載するときに使っています。

2-3.マーカー・強調・囲み枠の配色のコツ

マーカーは多くて2色まで
  • 強調にマーカーを使用する場合は、多くて2色までにしましょう。
  • ユーザが一目見てすぐにわかる、対比したカラー2色を使用するのがおすすめです。

記事の強調にマーカーを使用する方は、多くて2色までにしましょう。

対比しているカラー2色(ピンク・水色など)がおすすめです。

強調色は多くて3色まで

できれば2色、多くても3色の使用にとどめましょう。

  • 強調色①
  • 強調色②
  • 強調色③

私は対比のために、②の赤色と、③の青色を使用しています。

トップブロガーさんの中には、ここぞの時に、だけを使っている方もいらっしゃいます。

囲み枠の配色は親和性のあるカラーを

テーマやスキン内で使用されているカラー、もしくは親和性のあるカラーにしましょう。

Cocoonではオリジナルパレットが作れます。

自分のサイトにあっている、オリジナル囲み枠を作りましょう。

ダメな例です。

当ブログに赤枠はあまりにも目立ちすぎです。

良い例です。

ヘッダー・フッターの色、スキンの配色に似せて、

オリジナルパレットを作って使用しています。

3.まとめ:SEOに効果的なブログの装飾や囲み枠の使い方・見せ方

改行タグ・空白を適切に使う
  • 端末幅によって改行が増えるので<br>タグは使用しない
  • 改行はEnterで<p>タグを使用する
  • 余白のために<p><br>タグを使わない
  • 空白を設けたい時はスペーサーを使う
マーカー・強調・囲み枠の使い方
  • マーカーか強調どちらかに統一する
  • ここぞの時に強調タグ<strong>を使用する
  • 囲み枠で強調するときは一記事に多くて3種類まで
マーカー・強調・囲み枠の配色
  • マーカーは多くて2色までにする
  • 強調色はできれば2色、どんなに多くても3色にとどめる
  • 囲み枠はテーマやスキンと親和性の高いカラーを使用する
  • もしくはオリジナルパレットを作って使用する
タイトルとURLをコピーしました