【Webデザイン】読みやすさを考慮したブログ記事ライティングの方法
Webページ上で文章を書く場合、やはりその見た目の面での読みやすさにも注意をしたいところです。
行間が狭すぎたり、白と黒しか使っていなくて強調がされていない文章だと、やはりそのページを開いた瞬間に読む気をなくしてしまいますよね。
そこで今回はWebデザイン的な観点から「読みやすい記事を書くにはどうしたらいいのか」ということについて解説をしていました。
本来なら、可読性、視認性、判読性といった要素にもとづいて説明するところですが、WordPressでブログを作るのであればだいたいのことはテンプレートが補ってくれるので、フォント、行間、レイアウトなどについては触れずにいこうと思います。
Contents
文章を読むのは苦痛
そもそもということで認識をしておいて頂きたいのですが、文章を読むというのは苦痛です。
現代人は皆忙しい日常を過ごしていて、落ち着いて文章を読む暇がない人がほとんどです。
ツイッターやLINEに代表されるように、現在では短文形式のコミュニケーションツールが流行っていますね。
一昔前であれば、「日々受け取る情報量＜人が処理できる情報量」となっていましたが、現在は圧倒的に「日々受け取る情報量＞人が処理できる情報量」となっていて、僕たちは情報過多になっています。
一説によれば現代人が1日に得る情報量は、江戸時代の農民の一生分に相当するんだとか。
おそらく、あなたのメールボックスにも大量の未読メールや、後で読もうと思ってそのままになっているブックマークなどがたくさん溜まっているのではないでしょうか。
このような状況下で自分の文章を読んでもらうと思うのであれば、やはり少しでも読みやすいように工夫をして読み手のストレスを減らすことを考えなければならないのです。
読みやすさを考慮したブログ記事ライティングの方法
それではここからは具体的にどうやって見た目の面で読みやすい文章を書けるのかについて見ていきます。
WordPressではフォント、行間、リンク色、文字色といった部分はテンプレートが勝手に設定してくれているので、それ以外の要素について見ていきます。
今回は例として2016年10月27日(木)8時40分配信のYahoo Newsを使っていきます。
４行以上になるのなら改行する
上の文書だと改行がなされておらず、かなり見にくいですね。
そこでまずは１文ずつごとに改行を施してみます。
改行を施すだけでも、かなり印象が変わりましたね。
人間が集中して読み続けられるのは４行ぐらいまでだそうです。
スマホで見る場合のように、１行の文字の数が少ないのであれば６行あたりでも問題ないとは思いますが、PCの場合はだいたい３行あたりまでで止めておくのが無難です。
色、太字、下線に統一感を与える
それでは、さらにここに色や太字を加えて強調をしていきます。
この時のポイントは強調にルールを持たせることです。
こちらは特に何の規則性ももたせずに適当に強調させたい部分を強調させて見ました。
強調に統一感がなく、どれが本当に強調させたい部分なのかよく分かりませんね。
そこでこの文章を次のように変更してみました。
この文章で伝えたいことは「新垣結衣が可愛いすぎる」ということです。
よって
「新垣結衣」
「28歳となって今もそのかわいさは無敵」
「なぜイノセンスな輝きを一切失うことなく、”全盛期”であり続けることができるのか？」
というこの文章の根幹をなす大事なポイントを太字＋色つきで強調しています。
このように強調を行う際は、下線、色を数色、さらに太字と、とにかくたくさん使うのではなく
その文章の根幹をなす文 ⇒ 太字＋色
その次に大事な文 ⇒ 太字のみ
などのようにきちんと使い方を意識しましょう。
現代人は強調されている部分しか文章を読まない傾向にあるので、強調部分だけを読めばその文章で何が書いてあるのか分かるようにするのがベストですね。
また、色を使う時はリンクの色と被らないようにすることも覚えておきましょう。
上の例で言うとこの色を使ってしまうとリンクの色と被ってしまい、クリックできるという間違った印象を与えてしまいます。
箇条書きを入れる
並列できる要素はボックス上にしたり箇条書きにしてしまいましょう。
「とにかくかわいすぎる」「ガッキーが女神のよう」は並列できますね。
この他にも何か商品について紹介する場合は、特徴やメリットを過剰書きするなど、同レベルの要素はまとめておくとより見やすくなります。
見出しタグを使う
上の文章の続きです。
「公私ともにスキャンダル知らず、何事にも転ばない強さ」
「今どきめずらしい謎めいたプライベート＆“程よい距離感”を持つ女優」
という小さい見出しが用意されていますが、他の文章と文字の大きさも色も同じです。
そこで見出しタグを使って次のように変更してみました。
かなり印象が変わったのではないでしょうか。
実は見出しタグの中にあるキーワードは検索エンジンもよく見ています。
タイトルに盛り込んだキーワードは見出しタグでも積極的に使うことでSEOによく働き、狙ったキーワードで上位表示がさせやすくなります。
見出しタグについては「見出しタグ デザイン」などで検索すると、たくさんの種類が出てくるので、ぜひそれらを参考にしてみて下さい。
ただし、H3タグが来た後にH1タグが来てH2タグに戻るなど不自然な使い方は禁物です。
このような使い方をすると人間だけでなく、検索エンジンも文章の構成がよく分からずに混乱してしまいます。
目次をつける
文章が長くなる場合は、目次をつけましょう。
目次をつけることで読みたい箇所から読めるようになりますし、あらかじめ「これだけの量がありますよ」と伝えることで目次を見せられた相手も読むための準備を無意識的にします。
目次を設定するには”Table of Contents Plus”というプラグインを使うのがオススメです。
画像や図を使う
最後に画像を入れてみました。
やはり画像や図があるだけで、イメージが一気に湧きます。
特に抽象的で難解なことを説明する時はどこかから図を引っ張ってきたり、”PowerPoint”や”Keynote”で作ったりしましょう。
画像のサイズは文字や見出しと同じ幅にすると見栄えがよくなります。
こちらでカスタムサイズを選べば、画像のサイズを細かく設定できます。
まとめ
ということで今回は見やすい文章を書くための方法について簡単にまとめてみました。
今回紹介した方法以外にも見やすくするための工夫はたくさんあると思いますので、ご自身のサイトの雰囲気に合わせて見やすさを研究してみて下さい。
