インコ

 

こんにちは。ささえみです。

今回は、「ユーザーの読みやすさに配慮した記事の装飾」についてお話ししていきます。

 

パソコンやスマホなどデバイス上の画面で情報を得る際には、縦スクロールをするという特徴があります。

ブログ記事のように横書きの文章は、ユーザーが縦にスクロールしていくことで全部が読めるようになります。

 

 

・・・ということは、

逆説的に言えば、
ユーザーを最後まで飽きさせないようにする工夫が必要ですね。

 

 

それには記事の内容が面白いことは大前提です。(この場合の「面白い」とは、ユーザーが興味関心のある内容だということ)

 

それにプラスで、

文章の装飾や画像の配置によって、ユーザーの読みやすさに配慮した記事作りをしていく

ことがポイントになります。

 

 

それでは、早速記事装飾のポイントについて、まとめていきますね!

 

※面白い内容の記事(=ユーザーが興味関心のある内容の記事)を書くにはどうしたらいい!?というあなたは、下の2記事で確認してみてください!

>>ブログに書く内容は「リサーチ」すれば一目瞭然!すぐできる2つのリサーチ方法
>>訪問ユーザーの満足度を上げる!ブログの書き方6つのコツ

 

 

読みにくい画面と読みやすい画面を比べてみよう

 

ごちゃごちゃ説明するよりも、まずは実際に画面を見てもらった方が一目瞭然です。

ネット上で情報を閲覧するときに、読みにくいと感じる画面と、読みやすいと感じる画面の違いをご覧いただきましょう。

 

読みやすさの違い

 

その違いは丸分かりですね!

 

読みにくいと感じる画面は、

 

  • 文字が詰まっている
  • 画像や動画がない
  • 文字の色が単色

 

という特徴が。

 

 

対して読みやすいと感じる画面は、

 

  • 段落ごとに適宜改行がされている
  • 見出しを使って話の流れを作っている
  • 画像や動画による「イメージで語り掛ける部分」がある
  • 強調したい部分で文字の色や大きさが変わっている

 

という特徴があります。

 

 

ブログ記事のようなネット上の情報というのは、書籍のように文章が延々と続くパターンは求められていません。(電子書籍は例外)

ささっと検索して、熟読せずとも内容がある程度頭に入ってくる記事が好まれます。

 

 

つまり、文章半分・イメージ半分だということです。

 

画像や動画によって記事のイメージを伝えつつ、文章を段落ごとに区切って「読むリズム」を作る。

これが「ユーザーの読みやすさに配慮した記事の装飾」の極意です。

 

 

それでは、次の章からは具体的な記事装飾の小技をお伝えしていきます。あなたのブログでも実際にやってみましょう!

 

 

記事装飾の具体例その1 文章を段落ごとに区切ろう

 

まずはきっちり詰まった文章に、スペースや改行を加えていきましょう。

ポイントは、一息で読めるところで区切る」ことです。

 

大体2~3行くらいをひと段落とし、次の段落との間にスペースを空けると読みやすくなります。

※2~3行というのはあくまで目安です。文章の流れに沿うような自然な段落分けをしていきましょう。

 

 

ワードプレスのビジュアルエディタならば、

段落: Enterのみ
改行: Shift+Enter

ができます。

 

テキストエディタならば、

段落: <p>ココに文章を入れる</p>
改行: <br />
段落と段落の間をさらに空ける場合: <p>&nbsp;</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
※要会員登録。
人物からモノ、景色までなんでもござれ。無料で使用できますが、有料版にすると使い勝手が良くなります。

フォトAC

 

 

>>ぱくたそ
※会員登録不要。主に人物中心の画像サイト。リアクションが面白い画像がたくさんあります。

ぱくたそ

 

 

>>pixabay
※海外のフリー画像が手に入るサイト。日本語で検索できますが、英単語を入力すると候補の数が増えます。一部撮影者の表記が必要な画像もあるので注意。

pixabay

 

 

 

画像や動画を記事内に入れると、かなり見やすいブログになりますね!

 

 

まとめ

 

今回お伝えしたように、ユーザーの見やすさに配慮した記事の装飾のポイントは次の4つ!

  1. 段落ごとに適宜改行がされている
  2. 見出しを使って話の流れを作っている
  3. 画像や動画による「イメージで語り掛ける部分」がある
  4. 強調したい部分で文字の色や大きさが変わっている

まずはこの4つさえマスターすれば、かなりユーザーライクなブログ記事に仕上げることができますよ!

 

 

記事装飾の上達も、習うより慣れろです。

数をこなしていくことでだんだんコツがつかめてきますし、1記事にかける時間も短く済ませることができます。

 

 

じわじわとブログ構築のスキルは上がってきていますよ。あなた自信でレベルアップのBGMを感じながら、日々の記事更新をしていきましょう!

 

ブログのネタ探しから記事の装飾まで、ひと通りの作業に慣れてきたら、カテゴリーやタグでの分類、アドセンス広告の効果的な配置にも意識を向けてみてくださいね。

詳しくはこちらのページで!↓

>>ブログのカテゴリーとタグの設定と管理方法 ユーザーライクな分類を!

>>アドセンス広告は「見られる」場所に!効果的な貼り方を解説

 

そして、SEOに効果的なプラグイン「All In One SEO Pack」の個別記事設定も抜かりなくやっておきましょう!↓

>>All In One SEO Pack 記事編集画面の個別設定の方法

 

家族も自分も大事にできる
『ブログで人生を豊かにする方法』メルマガ

メルマガ登録フォーム

 

登録した方に、「知識ゼロからでもできるブログ収入の作り方」のレシピを無料でプレゼント!

 

「子供との時間を優先すれば、収入が減る」
「仕事の時間を優先すれば、大切な子供との時間が犠牲になる」

 

そんなジレンマをもつあなた。

 

家族との時間を大切にしながら、今の収入+10万円を実現できる方法を、この機会に知ってみてください。