【ブログライター】箇条書きする3つのメリット~脳の仕組みを利用する

2019年8月5日

※Write-Nは「ブログで稼ぎたい!」というアナタのために、アフィリエイトブログで稼ぐ方法をまとめています※
今回お伝えするのは、ブログで箇条書き&リストを使うメリットについて。「見やすいからでしょ?」という人、大正解。でも、メリットはそれだけではありません。脳の仕組みを利用した箇条書きの効果や、SEO的な効果についてもお教えします。

こんにちは。ライトエヌの代表、大ちゃんです。

【ブログライター】のシリーズは、以下の4点を毎回ブログ形式でお伝えしています。

  • ブログを検索で上の方に出すためのポイント
  • ブログを書くコツ
  • ブログ独特のルール
  • 集客できるブログのテクニック

 

今回お伝えするのは、ブログを検索で上の方に出す集客できるブログのテクニックについて。

文章を書くテクニックではなく、ブログを見やすくするテクニックのお話です。

 

HTMLタグも併せてご紹介するので、参考にしてみてくださいね。

既に書いたブログを修正するのはもちろん、これからブログを書く人にもお役立ち!

[temp id=2]

【まずはココ】箇条書きとは?どんな形のモノ?

ブログ 箇条書き アメブロ HTMLタグ

箇条書きには、大きく分けて2つの種類があります。

1つ目は、シンプルなリスト形式

ズラズラ項目が続く文章に使うと、分かりやすく見えます。

 

【Before】
この化粧水には、セラミド、コラーゲン、ヒアルロン酸、プラセンタ、ビタミンCなどの美容成分が配合されています。

 

【After】
この化粧水には、以下の美容成分が含まれています。

  • セラミド
  • コラーゲン
  • ヒアルロン酸
  • プラセンタ
  • ビタミンC

箇条書きにするだけで見やすさUP!パッと見ただけで美容成分が伝わるよね。

 

2つ目は、数字つきの箇条書き。

手順を説明するときに使うと、すごく分かりやすくなります。

【Before1】
メールを送る方法を説明します。まずはアドレス帳を開きましょう。アドレス帳からメールアドレスを選びます。件名と本文を入力したら、送信ボタンを押しましょう。

 

【Before2】
メールを送る方法を説明します。

  • アドレス帳を開く
  • メールアドレスを選ぶ
  • 件名と本文を入力する
  • 送信ボタンを押す

 

【After】
メールを送る方法を説明します。

  1. アドレス帳を開く
  2. メールアドレスを選ぶ
  3. 件名と本文を入力する
  4. 送信ボタンを押す

手順のように「順番」が決まっているものは、番号がある方が分かりやすい!

[temp id=2]

【タグを使え!】箇条書きする3つのメリット

箇条書きするメリットは3つあります。

メリット1.見やすい

ブログ 箇条書き アメブロ HTMLタグ

それだけか!と思われるかもしれませんが、見やすさはカナリ重要です。

ズラズラと文字が続いていたら「分かりにくそう」と思って、ページを閉じられてしまいますから。

箇条書きできるものがあれば、積極的に使っていきましょう!

[temp id=2]

メリット2.SEO対策

ブログ 箇条書き アメブロ HTMLタグ

突然ですが、問題です。

AとBでは、どちらの方がSEO対策的にイイ箇条書きでしょうか?

ブログ 箇条書き アメブロ HTMLタグ

AとBの差は、箇条書きのタグを使ったかどうか

Aは、箇条書きっぽく「・」の記号を付けただけです。

 

一方Bは、HTMLタグを使って箇条書きにしています。

実際の表示はほぼ同じなんだけど、Googleがチェックするタグの部分は全然違うんだ。

▼実際のHTMLタグの画面
ブログ 箇条書き アメブロ HTMLタグ

Googleが「分かりやすいサイトだな」と判断するのは、Bです。

 

Aでつかった「・」は、検索エンジンからするとただの文字です。

でもBは「箇条書き用のタグ」を使っているので、「これはリストだな」と分かります。

 

リストだと分かることに、どんなメリットがあるのでしょうか。

目の不自由な人が利用する、読み上げソフトを例に考えてみましょう。

 

インターネットは、目の不自由な人も利用します。

Aのようにただ記号を使っていると、「・アドレス帳を開く」は「てんアドレス帳を開く」と読み上げられてしまうんです。

音声だけで聞くと、「テンアドレスチョウって何??」と困ってしまいますよね…。

★を使ってるサイトもあるけど、これだと「★アドレス帳を開く」→「ほしアドレス帳を開く」となっちゃう。もう意味不明。

一方BのようにGoogleが理解できるHTMLタグを使っておくと、「リストを読み上げるんだな」ということが分かります。

分かりやすさは、検索で上位表示されるための重要ポイントです。

見た目が同じなんだから…と思ってしまいますが、どうせ箇条書きするなら「HTMLタグ」を使っておきましょう。

 

HTMLタグ@数字つき箇条書きリスト

以下のように、箇条書きリストの前に数字をつける場合のHTMLタグです。ワードプレスの場合、表示を「テキストモード」に切り替えて入力します。(通常はビジュアルモード)

  1. ・・・
  2. ・・・
  3. ・・・

▼HTMLタグ
<ol>
<li>・・・</li>
<li>・・・</li>
<li>・・・</li>
</ol>

・・・のところに箇条書きの文字が入る。増やしたいときは<li>・・・</li>を追加、減らしたいときは<li>・・・</li>を消す。

 

HTMLタグ@シンプル箇条書きリスト

以下のように、シンプルな箇条書きリストを作るときのHTMLタグです。ワードプレスの場合、表示を「テキストモード」に切り替えて入力します。(通常はビジュアルモード)

  • ・・・
  • ・・・
  • ・・・

▼HTMLタグ
<ul>
<li>・・・</li>
<li>・・・</li>
<li>・・・</li>
</ul>

数字タグと一緒で、・・・のところに箇条書きの文字が入る。増やしたいときは<li>・・・</li>を追加、減らしたいときは<li>・・・</li>を消す。

[temp id=2]

メリット3.脳全体で理解できる

ブログ 箇条書き アメブロ HTMLタグ

意外と知られていないのが、脳の仕組みから見るメリット

右脳と左脳、という言葉を聞いたことがありませんか?

右脳はひらめき・感情・イメージ(図や絵)の処理をつかさどる「直観的な脳」、左脳は計算などを行う「論理的な脳」と言われています。

 

脳はどちらか片方だけでなく、両方使った方が理解度がUPします。

 

ブログに並んだ文字を処理するのは、主に「左脳」です。

右脳はほとんど使われません。

 

一方で箇条書きは、「図」のような印象を与えます。

箇条書きにするだけで右脳と左脳の両方が使われ、「なにこれ超分かりやすい!」と理解度がUPするというわけです。

右脳で図として捉えて、文字は左脳が処理する。まさに連係プレー。

[temp id=2]

【実践編】箇条書きのQ&A

箇条書きについて、クライアントから質問されることが多い内容をまとめました。

気になる項目があれば、チェックしてみてください。

 

箇条書きの数は何個がベスト

ブログ 箇条書き アメブロ HTMLタグ

箇条書きの数に決まりはありませんが、「マジカルナンバー7」の法則を使うと便利です。

マジカルナンバー7というのは、人が一度に記憶できる数を表しています。

選択肢が7個以上になると、脳は「覚えられない=分かりにくい」と判断してしまうんです。

分かりやすいブログにしたいのなら、箇条書きは7個以下になるようにしましょう。

 

さて問題です。

以下の例文は、ズラズラと9個の箇条書きが並んでいます。

マジカル7の法則を使って分かりやすく書き換えるには、どうしたらいいでしょうか?

【例文】
当PCショップでは、以下の人気グッズを取り揃えております。

  • エクセル完全攻略本
  • ワード完全攻略本
  • パワーポイント完全攻略本
  • ハジメテのPC本
  • マウス
  • マウスパッド
  • キーボード
  • ワイヤレススピーカー
  • CD-R

おおお・・・。分かりやすくしようと箇条書きを使っているのに、数が多すぎて逆に分かりにくい…

 

 

▼答えはこうです▼

当PCショップでは、以下の人気グッズを取り揃えております。

<書籍>

  • エクセル完全攻略本
  • ワード完全攻略本
  • パワーポイント完全攻略本
  • ハジメテのPC本

<周辺機器>

  • マウス
  • マウスパッド
  • キーボード
  • ワイヤレススピーカー
  • CD-R

 

いかがでしょうか。

箇条書きの項目が多くなりそうなときは、項目を分けると分かりやすくなります。

 

目安は、箇条書きの数が7こを超えるかどうか。

箇条書きの数に悩んだら、マジカルナンバー7を目安にしてみてくださいね。

[temp id=2]

どんなものを箇条書きにすればいい?

ブログ 箇条書き アメブロ HTMLタグ

僕がアフィリエイトブログの「・」で箇条書きするのは、以下の項目です。

  • 化粧品の成分
  • サプリの成分
  • 原材料
  • テーマパークの詳細(営業時間・料金等)

 

一方、以下のように「順番」があるものは「1.・・・」のように番号付きで箇条書きすると分かりやすくなります。

  • パソコンの操作手順
  • 返金方法
  • 申し込み方法
[temp id=2]

うまくリストにならない

ブログ 箇条書き アメブロ HTMLタグ

アメブロの場合とワードプレスの場合をご紹介します。

原因は、シンプル!

HTML表示で入力していないか、タグが間違っています。
※実際に使うHTMLタグは、1つ下の質問項目からご確認ください

 

HTMLタグは、HTMLタグ用の画面で入力しなければいけません。

普通の画面で文字を打っても、そのままタグが表示されてしまうだけです。

 

アメブロの場合

ブログ 箇条書き アメブロ HTMLタグ

「通常表示」で入力すると、HTMLタグがそのまま表示されてしまいます。

タグは「HTML表示」の画面で入力するようにしましょう。

 

HTML表示で入力しているときはアルファベットの羅列にしか見えませんが、通常表示に切り替えれば綺麗な箇条書きになっているはずです。

 

ワードプレスの場合

ブログ 箇条書き アメブロ HTMLタグ

「ビジュアル」で入力すると、HTMLタグがそのまま表示されてしまいます。

タグは「テキスト」の画面で入力するようにしましょう。

[temp id=2]

箇条書きのHTMLタグが分からない

数字つきと、数字なしの2パターンをご用意しました。

数字つき

<ol>
<li>・・・</li>
<li>・・・</li>
<li>・・・</li>
</ol>

数字なし

<ul>
<li>・・・</li>
<li>・・・</li>
<li>・・・</li>
</ul>

・・・のところに箇条書きの文字が入ります。

箇条書きを増やしたいときは<li>・・・</li>を追加、減らしたいときは<li>・・・</li>を消してください。

[temp id=2]

まとめ

まとめ ブログ キーワード 集客 何個 数

ブログで箇条書きを使うメリットは3つ。

  • 見やすい
  • SEO対策
  • 脳の理解度UP=分かりやすくなる

 

なおHTMLタグを使わないと「SEO対策」のメリットがなくなってしまいます。

「・」や「★」など記号を使って見た目だけ箇条書きにするのではなく、HTMLタグを使って箇条書きしておきましょう。

アメブロでは「HTML表示」、ワードプレスでは「テキストモード」で入力するのを忘れずに!

[temp id=2] [temp id=3]