知らなきゃ損する見やすいブログデザイン。失敗例から学び滞在時間を改善しよう!

目安時間:約 16分

ここではすごく基本的なブログデザインの話をします

 

特に変わったテクニックがあるわけでもないのに、

「なんか落ち着いていて、雰囲気がいいなぁ」

「余計な装飾がなくて、見やすいブログだなぁ」

みたいなブログってありませんか?

 

これらのブログはライティングでうまく表現してもいますが、

そもそものブログデザインがシンプルかつ分かりやすくなっています

シンプルな方がブログの滞在時間も伸びてSEOにも有効です

 

そこで今回は失敗例を交えて、見やすいブログデザインを紹介していきます

 

ここをマスターして、落ち着いた雰囲気の親しまれるブログにしていきましょう

 

 

読者への『気づかい』が見やすさの本質

そもそも見やすさとは、読者への気づかいがあってなせる技

 

「どうすれば読者に気持ちよく記事を読んでもらえるかな?」

「どういうレイアウトにすれば見やすいかな?」

 

見やすいブログの運営者は常に読者のことを想って記事を書きます

これを支えてくれるものがブログデザインです

 

しかし一口にブログデザインと言っても、

 

  • ブログの印象を良くするメニューやサイドバーの配置
  • 回遊率を高めるためのヘッダーやフッターの加工
  • 滞在時間を上げる背景、文字、ブログの横幅などの基本設定

 

の3つに分けることができます

ここでは3つ目の

 

滞在時間を上げる背景、文字、ブログの基本設定

 

に焦点を当てていきますね

 

 

失敗例① 背景に模様がある

 

背景がついているブログは、非常に見づらいです

水玉模様のような控えめな柄であればさほど気になりませんが、

複雑な図形やキャラクターのような複数の模様の背景はやめておきましょう

 

背景がにぎやかでは記事に集中できず、中身が入ってきません

読者はブログの背景を見たいのではなく、記事の内容を読みたいのですからね

運営者の立場であれば、読んでもらうなら中身をきちんと持って帰ってほしいですよね

 

解決策① 背景は白で統一する

 

本文に集中してもらうためには背景は白にしましょう

多くの情報発信サイトも白背景をベースに、黒文字が主流です

 

白背景なら黒文字以外にも赤文字やリンク色である青色、

変わり種で緑色などの文字色も見やすいからです

さらにマーカーで背景を黄色にして目立たせるなど、

様々な魅せ方ができるのも特徴です

 

「どうしても白色は嫌だ!」という場合は、

サイトのテーマカラーに近いパステルカラーを利用しましょう

たとえば僕のブログの場合、水色です

 

背景はあくまで飾りなので目立たないようにするのがベストです

 

失敗例② 文字色が薄い

 

背景色に近い薄さの文字色はやめましょう

たとえ記事の内容が良くても、読む気がそがれます

たとえば、僕のブログであればこういう文字色

 

↓ここから

 

今からここに書く文章は、本文とは関係のない文章です

この文字色の読みづらさが少しでも伝わればと思います

 

これから何か新しいことを始めようとしているなら、

時間がないことを言い訳にしないようにしましょう

 

時間はいつだってないもの、そもそも時間は作るものです

スキマ時間をやりくりしたり、最初から設定したりと…

 

たとえば仕事の打ち合わせ

最初から打ち合わせなんて用意されてませんよね?

突然来週の17時から打ち合わせしようとなるはず

 

それでもしなくちゃいけないことだから、

時間がなくても自分の都合をみて、時間を作りますよね

 

これと同じです

 

新しいことを始めるためには、時間がないと嘆くのではなく、

時間をつくろうとスケジュール調整をしたり、

始める時間を決めてしまうのです

 

時間を作って、新しいことを始めましょう

 

↑ここまで

 

どうでしたか?

中身はかなり大事なことを書いていますが、

読みづらいなぁと感じませんでしたか?

 

僕は目の横がグッと痛くなるのをこらえながら、

読みづらいなぁと思って書きました

 

こういう文字色だと、背景と同化してしまうので、

認識するために目にはかなりの負担がかかります

 

そんな負担を強いるような記事を果たして読者は読んでくれるでしょうか?

 

解決策② 黒文字を使用する

 

基本的に文字は黒文字を使用しましょう

黒はほとんどの背景色に対して、見やすい色です

 

特に背景が白色の場合と相性がよく、

前述のように背景を白に設定する場合にオススメ

 

最近では、黒色を少し灰色に寄せた文字の方が、

目の負担が少なく読みやすいといった報告もあります

(参考:伝わるデザイン 配色)

 

どうしても黒色を使用したくない場合は、

テーマカラーの中でも濃い色を選択しましょう

僕のブログなら紺色ですね

 

ブログは文字を読んでもらうことがメインなので、目立つ濃い色を使いましょう

 

失敗例③ 本文の文字が小さい

 

文字色同様に、文字が小さい場合も目に負担がかかります

たとえば、こんな文字サイズはどうでしょうか?

 

 

 

↓ここから

 

文字サイズはブログテンプレートで、ある程度決まっています

無料テンプレートでも、大きめのサイズから小さめのサイズまでさまざまです

 

この点で言えば、有料テンプレートは見やすさが極限まで追求されているため、

見やすいブログを簡単に作ることができます

 

↑ここまで

 

 

 

小さすぎますね…8ptで書きました

やっぱり目が痛くなります…

 

解決策③ 文字は11pt以上を使用する

 

文字は11pt以上を使用しましょう

Wordで使われている標準文字サイズが10.5ptなので、

それより少し大きいサイズです

ちなみに僕のブログは11pt

 

WPであればツールバーから簡単に変更できるので、意識してみましょう

またHTMLタグであれば、

 

<span style="font-size: ○pt;">文章</span>

 

のように書きたい文章を<span style>タグで挟み込めば変更可能です

○の部分に好きな数字を入れて、大きくすることも小さくすることもできます

 

文字は読んでもらうためのモノなので、しっかり見えるようにしておきましょう

 

失敗例④ 黒文字だけの本文

ただひたすらに黒い文字が並んでいるだけのブログ、

僕はオススメしません

 

しっかりとライティングの勉強をした人の文章なら、

文字装飾がなくても読みやすく、どんどん引き込まれていきます

でもほとんどの場合、こういった文章術を持っていません

 

ならまずはライティングの勉強をしてからブログを始める?

それではどんどん後回しになっていきませんか?

 

解決策④ 文字装飾をする

 

文章にメリハリをつけるために文字装飾をしてみましょう

よく使われる文字装飾は5種類です

 

  • 太字
  • 下線
  • 色文字
  • フォントの
  • 背景ライン

 

使いどころは人それぞれ

僕の場合、強調したいところは太字、

その中でも特に伝えたいところは赤字にしています

 

あとは見やすさを意識しながら、大きいフォントにしたり、

下線を引いたり、背景ラインをいれたりしています

使用基準が明確化されていれば、一貫性が取れるので、

より見やすいブログが出来上がります

 

文字装飾があるだけで、ブログの印象は大きく変わります

 

もちろんライティングの勉強は必要です

しかし、まずは自分で文章を書けるようになりましょう

それからスキルに頼ると、段違いに効果を実感できます

 

失敗例⑤ ブログの横幅が広い

 

画面いっぱいにコンテンツが広がっているブログを見たことありませんか?

普段見ないことも相まって、ブログの横幅が広いものは見づらいです

 

たくさんのコンテンツを見せたいのは分かるけど、

正直言ってどこを見ていいか分からないですよね

 

解決策⑤ ブログ記事が画面中央に来るようにする

 

本文を見やすくするためにブログ記事が画面中央に来るようにしましょう

基本的にテンプレートの初期設定通り使えば問題ありません

 

僕はアンリミに付属している有料テンプレート「NEO」を使用していますが、

無料テンプレートでもある程度見やすさは追求されています

 

ブログをやるとついアレもコレもと詰め込みたくなりますが、

日々の生活と同じでメリハリが大事

 

空けるところは空けるし、詰めるところは詰める

魅せたいものをきちんと魅せていきましょう

 

失敗例⑥ 段落分けがない・改行が少ない

 

段落分けがなかったり、改行が少ないブログは見づらいですね

段落分けがないと、どこまでが一区切りの話なのかが分かりません

書いている本人も分かっていない可能性もありますが…

 

ブログを書くと言っても、ただやみくもに書けばいいわけではありません

アナタの伝えたいことがしっかり伝わるように書きたいものです

 

そのためにはまず自分の中で意見を固めて、

流れを作ってから文章にしていく必要があります

 

これらの事前準備をしてから書くと、読みやすい文章になります

 

解決策⑥ 見出しをつける・2~4行で改行する

 

まずは内容の流れに合わせて見出しをつけましょう

見出しをつけることで、何を書けばいいかがハッキリします

読者も何について書かれているかが分かるので、

読みやすさも上がります

 

また見出しを適切に使うことで、SEO効果が期待できます

見出しをつけると、記事が構造化されるからです

検索エンジンは構造化された文章を好みます

 

加えて2~4行ごとに改行しましょう

改行することで物理的に内容を切り離すことができ、

見やすさ、読みやすさともに上がります

 

最近のブログの傾向は、読みやすい文章を意識して書くことです

この点でも、見出しをつけること・改行することは、効果的ですね

 

失敗例⑦ 文章がとにかく長い

 

これが最後ですが、完全なる偏見

文章の長いブログ嫌いです

内容の濃さに関わらず、長いのはきつい

 

長ければ長いほど満足するように思いますが、

正直最初に書いてあったことなど最後になったら忘れています

(実際満足感は得られるが、結局何していいか分からない)

 

この記事の最初の項目思い出せますか?

 

 

 

 

 

 

 

『読者への気遣いが見やすさの本質』です

このためここで挙げているのは、すべて気遣いの具体例です

 

それでは最後の解決策を…

 

解決策⑦ 内容をひとつにしぼる

 

長い文章にならないように内容はひとつにしぼりましょう

何か一つでも持って帰って欲しいなら、内容はひとつに絞るべきです

 

僕は本業が塾講師なので、身をもって実感しています

ひとつの授業でアレもコレもとやっても、生徒は結局何も覚えていません

 

それならいっそ、

「他のすべてを忘れてもいいから、これだけは覚えて帰れ!」

という方が効果的です

 

ゆえに1つの記事でアレもコレもと、ごちゃごちゃかき混ぜず、

ひとつの結論へスッとたどり着く方がいいです

 

文章を短くするコツは、メッセージを明確にすることです

かくいう僕のこの記事も4000字を越えているため、短いとは言えません

が、最近のブログの流行りは5000字以上なので、短め…かな?

 

この記事に関連する記事一覧

コメントは2件です

  1. とろり より:

    とろりと申します。はじめまして。
    大変勉強になる記事でした。
    偏見、とのことでしたが、全ての広告、僕も全く同感でした。
    長い記事は書いていて、これはいまいちだよなあ、と思っています。
    ありがとうございました。また読みに来ます!

    • 大地 より:

      とろりさん、初めまして。
      ブログ訪問&コメントありがとうございます。

      記事が役に立ったようで何よりです。
      意外とみなさん感じていることなんですかね?
      人のふり見てなんとやら、僕も気をつけていきたいです。

      読了ありがとうございました。
      ぜひまたいらしてください。

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

ページの先頭へ