こんにちは。ささえみです。
今回は、「ユーザーの読みやすさに配慮した記事の装飾」についてお話ししていきます。
パソコンやスマホなどデバイス上の画面で情報を得る際には、縦スクロールをするという特徴があります。
ブログ記事のように横書きの文章は、ユーザーが縦にスクロールしていくことで全部が読めるようになります。
・・・ということは、
逆説的に言えば、
ユーザーを最後まで飽きさせないようにする工夫が必要ですね。
それには記事の内容が面白いことは大前提です。（この場合の「面白い」とは、ユーザーが興味関心のある内容だということ）
それにプラスで、
文章の装飾や画像の配置によって、ユーザーの読みやすさに配慮した記事作りをしていく
ことがポイントになります。
それでは、早速記事装飾のポイントについて、まとめていきますね！
※面白い内容の記事（＝ユーザーが興味関心のある内容の記事）を書くにはどうしたらいい！？というあなたは、下の2記事で確認してみてください！
＞＞ブログに書く内容は「リサーチ」すれば一目瞭然！すぐできる２つのリサーチ方法
＞＞訪問ユーザーの満足度を上げる！ブログの書き方6つのコツ
読みにくい画面と読みやすい画面を比べてみよう
ごちゃごちゃ説明するよりも、まずは実際に画面を見てもらった方が一目瞭然です。
ネット上で情報を閲覧するときに、読みにくいと感じる画面と、読みやすいと感じる画面の違いをご覧いただきましょう。
その違いは丸分かりですね！
読みにくいと感じる画面は、
- 文字が詰まっている
- 画像や動画がない
- 文字の色が単色
という特徴が。
対して読みやすいと感じる画面は、
- 段落ごとに適宜改行がされている
- 見出しを使って話の流れを作っている
- 画像や動画による「イメージで語り掛ける部分」がある
- 強調したい部分で文字の色や大きさが変わっている
という特徴があります。
ブログ記事のようなネット上の情報というのは、書籍のように文章が延々と続くパターンは求められていません。（電子書籍は例外）
ささっと検索して、熟読せずとも内容がある程度頭に入ってくる記事が好まれます。
つまり、文章半分・イメージ半分だということです。
画像や動画によって記事のイメージを伝えつつ、文章を段落ごとに区切って「読むリズム」を作る。
これが「ユーザーの読みやすさに配慮した記事の装飾」の極意です。
それでは、次の章からは具体的な記事装飾の小技をお伝えしていきます。あなたのブログでも実際にやってみましょう！
記事装飾の具体例その1 文章を段落ごとに区切ろう
まずはきっちり詰まった文章に、スペースや改行を加えていきましょう。
ポイントは、一息で読めるところで区切る」ことです。
大体2～3行くらいをひと段落とし、次の段落との間にスペースを空けると読みやすくなります。
※2～3行というのはあくまで目安です。文章の流れに沿うような自然な段落分けをしていきましょう。
ワードプレスのビジュアルエディタならば、
段落： Enterのみ
改行： Shift＋Enter
ができます。
テキストエディタならば、
段落： <p>ココに文章を入れる</p>
改行： <br />
段落と段落の間をさらに空ける場合： <p> </p>
慣れるには実際に手を動かすのが一番！やってみてくださいね。
記事装飾の具体例その2 文字装飾と見出しを加える
文章中の強調したいところは、文字の色や大きさを変えるとアクセントになります。
これをすることで流し読みユーザーにも「ここが重要なんだよ！」とアピールすることができます。
また、見出しを設けることで話の流れを作ることができ、ユーザーの理解度を深めることができます。
ワードプレスのプラグイン、TinyMCE Advancedを導入していると簡単におこなうことができます。
TinyMCE Advancedの実装方法はこちらの記事を参考に！
＞＞こりゃ便利！WordPressを立ち上げたらまず実装すべきプラグイン10選
下は私が実際に文字装飾をおこなっている動画です。
見出しを入れるときの注意！
記事中の文章に見出しを入れる際は、見出し3～見出し6を段階的に入れるようにしましょう！
大見出しは「見出し3」
大見出しの中の小見出しは「見出し4」
小見出しの中にさらに小見出しを入れる場合は「見出し5」・・・
という風に。
テキストエディタの場合は、
<h3>見出しタイトル</h3>
<h4>見出しタイトル</h4>
<h5>見出しタイトル</h5>
<h6>見出しタイトル</h6>
という順になります。
見出しを階層的に入れることによって、Googleボットが読み込みやすい（クロールしやすい）サイトの状態になり、SEO効果があります。
なお見出し3から使用する理由は、ワードプレスのテーマの仕様上、サイトタイトルが見出し1、記事タイトルが見出し2を使っているケースが多いからです。（ここでも階層が重要だということ！）
記事装飾の具体例その3 画像や動画を入れる
画像や動画はあらかじめ準備しておき、それをワードプレスにアップロードして記事中に入れていきます。（Youtube動画の場合は、「埋め込みコード」をテキストエディタの任意の場所に貼り付けます）
画像はビジュアルエディタで簡単に挿入することができます。
Youtube動画は、動画再生中に右下にあらわれる歯車マークを右クリックすると、埋め込みコードを取得する選択ができます。（※右クリックはWindowsの場合）
特に画像の場合は、挿入する位置を統一した方が見やすくなります。（例：見出しのすぐ下に統一する）
画像や動画は無断でパクっちゃあかんで！
記事内に画像や動画を入れる際には、次のことに注意が必要です。
- 自分で作成したもの、または著作権フリーで商用利用可のものを使う
- 動画の場合は＜公式＞と表記されているものを使う
つまり、無断で人が作ったものをパクるのは良くないよ！ということですね。
映画館でやったら捕まりますからね。これはネットの世界でも当てはまります。（ちなみに、先ほど貼り付けたYoutube動画は自作です）
ちなみに、「画像 無料 商用利用可」で検索すれば、無料で画像がダウンロードできるサイトがたくさん見つかりますよ。ぜひあなたのお気に入りのサイトを見つけてみてください。
参考までに、私が愛用している画像サイトを紹介しておきます。
＞＞photoAC
※要会員登録。
人物からモノ、景色までなんでもござれ。無料で使用できますが、有料版にすると使い勝手が良くなります。
＞＞ぱくたそ
※会員登録不要。主に人物中心の画像サイト。リアクションが面白い画像がたくさんあります。
＞＞pixabay
※海外のフリー画像が手に入るサイト。日本語で検索できますが、英単語を入力すると候補の数が増えます。一部撮影者の表記が必要な画像もあるので注意。
画像や動画を記事内に入れると、かなり見やすいブログになりますね！
まとめ
今回お伝えしたように、ユーザーの見やすさに配慮した記事の装飾のポイントは次の4つ！
- 段落ごとに適宜改行がされている
- 見出しを使って話の流れを作っている
- 画像や動画による「イメージで語り掛ける部分」がある
- 強調したい部分で文字の色や大きさが変わっている
まずはこの4つさえマスターすれば、かなりユーザーライクなブログ記事に仕上げることができますよ！
記事装飾の上達も、習うより慣れろです。
数をこなしていくことでだんだんコツがつかめてきますし、1記事にかける時間も短く済ませることができます。
じわじわとブログ構築のスキルは上がってきていますよ。あなた自信でレベルアップのBGMを感じながら、日々の記事更新をしていきましょう！
ブログのネタ探しから記事の装飾まで、ひと通りの作業に慣れてきたら、カテゴリーやタグでの分類、アドセンス広告の効果的な配置にも意識を向けてみてくださいね。
詳しくはこちらのページで！↓
＞＞ブログのカテゴリーとタグの設定と管理方法 ユーザーライクな分類を！
＞＞アドセンス広告は「見られる」場所に！効果的な貼り方を解説
そして、SEOに効果的なプラグイン「All In One SEO Pack」の個別記事設定も抜かりなくやっておきましょう！↓
＞＞All In One SEO Pack 記事編集画面の個別設定の方法
