こんにちは。ささえみです。
今回は、「ユーザーの読みやすさに配慮した記事の装飾」についてお話ししていきます。
パソコンやスマホなどデバイス上の画面で情報を得る際には、縦スクロールをするという特徴があります。
ブログ記事のように横書きの文章は、ユーザーが縦にスクロールしていくことで全部が読めるようになります。
・・・ということは、
逆説的に言えば、
ユーザーを最後まで飽きさせないようにする工夫が必要ですね。
それには記事の内容が面白いことは大前提です。(この場合の「面白い」とは、ユーザーが興味関心のある内容だということ)
それにプラスで、
文章の装飾や画像の配置によって、ユーザーの読みやすさに配慮した記事作りをしていく
ことがポイントになります。
それでは、早速記事装飾のポイントについて、まとめていきますね!
※面白い内容の記事(=ユーザーが興味関心のある内容の記事)を書くにはどうしたらいい!?というあなたは、下の2記事で確認してみてください!
>>ブログに書く内容は「リサーチ」すれば一目瞭然!すぐできる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 記事編集画面の個別設定の方法