ブログを運営していますが、記事がすごく見づらいです（泣）
どうすれば見やすい記事が作れるんだろう？
こんな悩みにお答えします。
本記事で紹介する内容
- 見やすいブログ記事の最低条件
- 見やすいブログ記事を作る7つの技
- ブログの装飾に関する注意点
見やすいブログ記事を作りたいけど、最初の頃は何をやって良いのか分からないので難しいですよね？
私は毎日いろんなブログ記事を読んでいるうちに、見やすい記事の共通点を発見しました。
この記事では、見やすいブログ記事が誰でも作れる7つの技を紹介します。この技を会得することで、今日からあなたも最高に見やすい記事が作れることでしょう！
それでは、どうぞご覧ください。
目次
見やすいブログ記事の最低条件
ブログの記事を見やすくするためには、いくつかの条件を満たす必要があります。
- 読んでいて疲れない
- 読んでいて意味が理解できる
- 見出しと文章の中身が合っている
- 難しい言葉や漢字が使われていない
- 記事の構成がしっかりしている
- テンポよく読める
見やすい記事を作るには、上記のようなことに配慮しなければいけませんが、今回ここで紹介する内容は、文章のテクニックや見出しの付け方ではありません！
さらに基本的な「読者の視覚」を意識して見やすく改善できる技を紹介します。
読まれる文章のテクニックに関しては、以下の記事を参考にしてください。
-
【ブログ文章の書き方】読みやすい文章が誰でも簡単に書ける文章術！
続きを見る
滞在時間を延ばして、SEOに効果的なテクニックを紹介しています。
人気のデザインテーマ
見やすいブログ記事を作成する「7つの技」を紹介
ブログの記事を見やすくするための7つの技を紹介します。
どの技も簡単にできて効果抜群なので、この機会にぜひマスターしてください。
それでは、紹介していきます。
1：目次を設置する
記事には目次を設置しましょう。
残念ですが、ネットの記事を最初から最後まで読む人は少ないです。
なんで全部読まないんですか？
ネット記事の場合は、書籍と違って無料だからじゃないでしょうか？
書籍などは、お金を出して購入しいてるので「全て読まなくては損！」という感覚になるのかもしれませんね？
もうひとつの理由に、必要な内容だけを読みたいという考えがあると思います。
もちろんターゲットにドンピシャ合った内容なら全部読んでもらえると思いますよ！
目次がないと記事の内容が分からないので、読むのを辞めてしまう人もいます。
目次があると、読者も「見やすい記事」と判断してくれるので、必ず設置しましょう。
目次の設置方法は、以下の記事を参考にしてください。
-
ブログ記事の目次の作り方を画像と動画で分かりやすく紹介！最強のプラグインはコレだ！
続きを見る
プラグインを使って5分で出来る方法を紹介しています。
2：見出しを付ける
「見出しをつける」というと当たり前なので、もう少し詳しく言うと「テンポよく見出しを入れる」です。
1つの見出しで1つの話題を書くように意識しましょう。
文章が長くなる場合は、ダラダラと長文にせずに、新しい見出し(h3やh4)を使って文章を仕切り直しましょう。
魅力的な見出しを付けることを意識することで、読者が飽きずに読むことができます。
見出しの付け方やルールがいまいち分からない人は、以下の記事を参考にしてください。
-
【ブログの正しい見出しの使い方】見出しが綺麗なコンテンツは誰からも愛される
続きを見る
[kanren postid="9231"]
正しい見出しの使い方ができるようになり、SEOにも効果が期待できます。
3：文書は「3×3の法則」を使うと見やすくなる
読み手の心理として、ストレスなく文章を読むことができる行数と段落は大体決まっています。
読み手を疲れさせせないテクニックとして、行数と改行の「3×3の法則」を使って書いてみましょう。
3×3の法則
- 1つの段落に入れる文章は3行が目安
- 1つの見出しに入れる段落は3〜4つが目安
あくまで目安ですが、両方「3」という数字がポイントになります。
1つの段落の行数の目安を3行にすると、読者が疲れづらく、読みやすい文章になります。
⭕️良い例（3行目で終わり）
あああああああああああああああああああ
いいいいいいいいいいいいいいいいいいい
ううううううううううううううううううう
❌悪い例（文章が複数行にわたる）
あああああああああああああああああああ
いいいいいいいいいいいいいいいいいいい
ううううううううううううううううううう
えええええええええええええええええええ
おおおおおおおおおおおおおおおおおおお
悪い例の文章は、一瞬見ただけで疲れます。
行数は3行以内にまとめると、スッキリして見やすくなりますね！
次に、段落につい解説します。
1つの見出しに入れる段落は、3～4つを目安にすると見やすいです。
❌悪い例を⭕️良い例に変える方法
悪い例は、1つの見出しで多くの段落が入ることになります。
しかし、文章上どうしても段落が増える場合は、次の技を使いましょう。
- 吹き出しを入れる
- ボックスを入れる
- 箇条書きを入れる
このように、途中で装飾を使うことで、目と気持ちの疲れを1度リセットすることができます。
✅改善例
【h2：見出し】
１段落目：ああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいううううううう。
２段落目：ああああああああaああああああああああああいいいいいいいいいいいいいいいいいいいいううううううう。
３段落目：ああああああああaああああああああああああいいいいいいいいいいいいいいいいいいいいううううううう。
【h2：見出し】
１段落目：ああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいううううううう。
２段落目：ああああああああaああああああああああああいいいいいいいいいいいいいいいいいいいいううううううう。
３段落目：ああああああああaああああああああああああいいいいいいいいいいいいいいいいいいいいううううううう。
ここで見出しを入れて文章をリフレッシュします。
そうすると、さらに文章が続いてもストレスになりません！
こんな感じで1度、見出しや装飾などを間にいれてリフレッシュすると読み続けることが楽になります。
4：装飾を使う（文字、ボックス、吹き出し）
装飾を使うと、テンポよく疲れずに記事を読むことができます。
- 文字を装飾する(太字、マーキング、斜体)
- ボックスを挿入する
- 吹き出しを使う
他にもいろんな装飾の方法がありますが、装飾を使うと記事の見栄えも良くなり、記事が華やかになります。
そうですね！
僕は普段から漫画しか読まないので、どうしても文字が多い記事が苦手です！
ゴリゴリに装飾しまくると逆に見づらくなるので注意しましょう。
特にマーカーや太字は大事な文章だけに使うようにしないと、必要性が分からなくなります。
カラーの使用に関しては、3色以下に抑えた方が良いと思います。リンクのカラーは「青色」というのが一般の認識なので、その他で2色にしましょう。
5：文字の大きさ・行間・改行幅をカスタマイズ
他の人のブログ記事を見ていて、装飾していないのに文字の大きさや行間、改行幅が標準より大きいな？感じたことはありませんか？
私のブログもそうですが、読みやすくするために、文字、行間、改行幅を大き目にカスタマイズしています。
使用しているデザインテーマによっても変わってきますが、私の使っているストークではコードをCSSに追加すれば自由に変更可能です。
注意ポイント
変更前には必ずバックアップをとっておきましょう。
変更前の設定画面をキャプチャしておくと安心です。
✅画面のキャプチャ方法（Windowsの場合）
Windowsの場合、画面をキャプチャするのは簡単です。
✔方法：1「キーボードのPrtscを使う方法」
①キーボードの一番上の列にある「Prtsc」を押す。
②ペイントを選ぶ。
③ペイント画面の左上の貼り付け→「貼り付け」を選ぶ→あとはデスクトップなどに保存するだけ。
✔方法：2「Snipping Tool」を使う方法
①Snipping Toolを選ぶ。
②Snipping Too→新規追加。
③左クリックをしながらマウスを移動して切り取りたい範囲を決める→決まったら左クリックを離す。
④あとはデスクトップなどに保存するだけ。
Windowsの場合は、ペイントもSnipping Toolも、初めから実装されているソフトだと思います。
無い場合は、ググれば無料でダウンロード可能です。
便利なツールなので、ぜひ活用してください。
6：画像を挿入する
記事に画像が入っていると見栄えも良くなり、見出しや文章の関連画像はSEOにも効果的と言われています。
特にh2見出しの下には見出しに関連した画像を貼ると、視覚でも文章の内容が読み取れるので見やすい記事ができます。
無料の画像でも十分良いと思います。
有料画像と無料画像は、料金以外では何が違うんですか？
無料画像の場合は、ダウンロードの枚数制限があったり、世の中に同じ画像が出回っているので、オリジナリティに欠けます。
有料画像もダウンロードの枚数制限はありますが、そんなに多く使われていないので、他のサイトとの差別化ができます。
おすすめの画像サイト
- イラストAC：無料でも利用可能（プレミアム会員なら無制限でダウンロード可能）
- 写真AC：無料でも利用可能（プレミアム会員なら無制限でダウンロード可能）
- PIXTA（ピクスタ） ：月額プランよりも年間プランがお得
：無料でも利用可能（プレミアム会員なら無制限でダウンロード可能）7：表を使って目で理解できる記事にする
文章だけでは分かりづらい説明は、表などを使うと良いですね。
表を使うと分かりやすくなるだけでなく、記事のデザインにもなるので見た目が良くなります。
- Excel
- PowerPoint
- ペイント
など、いろんな無料ツールで自作できるので、ぜひ活用してみてください。
読者も分かりやすく、見やすい記事が作れると思います。
ブログ記事の装飾に関する3つの注意点
ブログ記事に装飾をする場合は、以下の3つのことに注意点してください。
- ストロングタグの使い過ぎに注意
- 画像はJPGを使用するのが基本
- モバイル画面ビューで最終確認
それでは、順に解説します。
1、ストロングタグの使い過ぎに注意
ここで紹介する内容はSEOにも影響する大事な内容なので、詳しく解説します。
ストロングタグとは、いわゆる太字のことです。
ワードプレスで文字を太字にする際に、ビジュアルモードで「B」を使って太字にすると、HTML上ではストロングタグになります。
私はいつも「B」を使っていますが、ストロングタグの何がいけないんですか？
あくまでウワサですが、ストロングタグを使い過ぎると、クローラー(Google)にスパム行為と判断されると言われています。
スパム行為は、SEOに悪影響を及ぼすので気を付けなくてはいけません。
スパム行為とは？
スパム行為とは、簡単に説明すると「迷惑行為」です。
- 大量の迷惑メールを送り付ける
- 自動の記事作成ソフトで、関連記事を大量に作って内部リンクを貼る
- 記事の中に必要以上にキーワードを散りばめる
- 無駄に文字を強調する
などの行為が、ネットではスパム行為と呼ばれます
これから紹介する方法は、ストロングタグを使わずに文字を強調する技ですが、あくまで「気休め」と思ってください。
理由は後程お話します。
文字を太字にするときは、<b>タグを使いましょう。
「AddQuicktag」というプラグインをインストールしてから、メニューに<b>タグを追加すると簡単に使えるよ！
ストロングタグの確認方法と
まずは、ストロングタグを確認するを方法を紹介します。
②ワードプレスのビジュアルエディター画面上の「表示」→＜＞ソースコードをクリック。
②次に「F3」キーを押すと右上に入力窓がでるので「strong」と打ち込みます。
そうすると、記事の中に打ち込まれている該当の文字数が表示されます。
③わざと「B」ボタンを使って1カ所、ストロングタグにしてみます。
このように、ストロングタグが現れたので場所の特定ができます。
④次は、ストロングタグ「B」ボタンを使わずに＜b＞で文字を強調してみます。
このように、＜b＞文章＜b＞＜／b＞となりストロングタグではなくなります。
＜ｂ＞タグを使ってストロングタグにする方法
＜ｂ＞タグを使ってストロングタグにする方法は、すごく簡単です。
方法：1
ワードプレスのビジュアルエディター画面を「テキスト」に切り替えて、太字にしたい文字の両端を＜ｂ＞タグで挟めばOKです。
例：＜ｂ＞太字にしたい＜ｂ＞
方法：2
もう一つの方法は、プラグインを入れて＜ｂ＞タグを登録する方法です。
使用するプラグイン：AddQuicktag（無料で使用可能）
①プラグインをインストールして有効化したら、ワードプレスのダッシュボード→設定→AddQuicktagを選ぶ
②設定画面で＜ｂ＞を入力（2カ所）、チェック欄に✅を入れる、好きな名前を付ける。
③実際に記事を作成する場合は、下記の赤枠から選べるようになります。
毎回テキストで入力するのは面倒なので、登録しておいた方が便利ですね。
先ほどストロングタグを使わずに文字を強調する技が、あくまで「気休め」と言った理由を説明します。
以下の動画は、Google WebmastersがYouTubeで「ストロングタグ」と「bタグ」の使い分けにSEOは影響するのか？についての回答です。
英語なので翻訳してみましたが、完璧ではないのはご了承ください。
今日の質問はパリのジャンマルクから来ています。
Jean-Marcは、SEOの観点から、強いの違いは何ですかテキストの特定の単語を強調するためのbタグ。
ユーザーの観点からは、両方のタグの効果は同じですが、単語は太字で示されています。
どのタグをどの状況で使用する必要がありますか？OK、これはおなじみのトピックのように聞こえました。そして、私は以前にこれに答えたように感じました。だから私は行き、検索し、メールを調べました。そして、私たちは以前にそれに答えたと思います。しかし、それは2006年でした。
それで、私はあなたにあなたに最先端を与えるつもりですと2006年時点で回答。答えがどうにか変わったとは思わないが、しかし、その小さな警告を追加させてください。当時、私たちがチェックしたときはいつでも、強くてbランキングとスコアリングに関してまったく同じように扱われたそして、それらがどのようにインデックス付けされているか、そのようなものすべて。
同様に、E-M、em、そして、i、斜体を表し、それらがまったく同じように扱われました。そして、あなたはどちらかを使うことができます、そしてそれは、Googleのランキングに違いはありません。したがって、2006年以降は状況が変化した可能性があります。しかし、私は本当にそれを疑っています。私はいつも仮定の下にいました。
bとiは非推奨になっています。しかし、HTML5にはまだ残っているようです。それは強く、emはそうです。多くの人々が使用することを好む新しいホットのようなもの。しかし、技術的には、プレゼンテーションについて話している、そして間違いなく大胆に言っています。
もう1つは、セマンティックラベルの一種です。これを強く扱います。しかし実際には、すべてのブラウザが先に進む太字にします。簡単な答えは、心配しないでください。
私の知る限り、Googleは強いと大胆な同じとem斜体も同じです。そして、あなたはそれを心配する必要はありませんその観点から。したがって、セマンティクスを決定する限り、やりたいことは何でも、どちらにせよ強く感じてもそれはまったく問題ありません。Googleにとってそれは重要ではないと思うからです。
引用元：Is there a difference between the "strong" and "b" tags in terms of SEO?／YouTube
ストロングタグがSEOに悪いのか？についてはハッキリと答えていませんが、どうやらストロングタグを使おうが、＜ｂ＞タグを使おうが太字には変わりなさそうでね。
ということで、先ほど「気休め」という言葉を使わせてもらいました。
人によって解釈は違いますが、私の意見をまとめます。
- 念の為、太字にしたい時は＜ｂ＞タグを使おう。
- ストロングタグの使用は、1記事で3回以下くらいにしておきましょう。
って感じですね。
2、画像はJPGを使用するのが基本
画像を使う場合、画像の形式はJPGを使用するのが基本です。
理由は、PNG画像などを多く使用すると容量が重くなってしまい、サイトのスピードが落ちるからです。
サイトのスピードを測定したい人はこちらで測定できます。
こちらを利用するとPNG画像→JPG画像に変換できます。
使用方法は、画像をPNG to JPG に「ドラッグ&ドロップ」→「ダウンロード」→デスクトップに「ドラッグ&ドロップ」終了です。
元画像とダウンロード画像の容量をプロパティで確認してください。
プロパティの手順
①画像を右クリック→プロパティをクリック→サイズを確認。
JPG画像に変換しても容量が軽くなるとは限りません。
ファイルの中身の容量を確認してください。
3、モバイル画面ビューで最終確認
パソコンを使って記事を書く人がほとんどだと思いますが、最後に必ずモバイル画面で表示を確認しましょう。
パソコンでは綺麗にレイアウトされていても、モバイルでは全然違うレイアウトになっていたりします。
最近は、モバイルでネットを見る人の方が圧倒的に多いので、モバイル優先で表示を合わせ込みましょう。
まとめ：読者に対して見やすいサイト作成を心掛けよう
見やすくて読みやすい記事とは、文章の内容も大事ですが、読んでもらう工夫がされている記事です。
ストレスなく読者の方に読んでもらうために、記事のデザインをキレイにすることでも滞在時間のアップにつながり、SEOにも効果的です。
人気があるブログ記事を読むことも勉強になります。
- 文字の装飾
- 改行のタイミング
- 使用している枠やボックスの種類
などを参考にすると、自分も見やすい記事が作れるようになってきます。
有料のデザインテーマを使うと、キレイで見やすいサイトを早く作ることができます。
ちなみに私のサイトは「ストーク」を使っていますが、大変満足です。
以下のデザインテーマは、プロブロガーもご愛用の人気のデザインテーマです。
人気のデザインテーマ
私のブログでは、ブログの初め方やノウハウ、手順やおすすめのツール、トラブル対応や雑学など、ブログやアフィリエイトに関する情報を幅広く配信します。
よろしければご覧ください。_(._.)_
それでは、今日はこの辺で失礼します。
またネ☆(*^-^)oﾞ
