ブログ記事に集中できるおしゃれなデザインにする19のコツ

ブログのデザインがイマイチだと感じています。
おしゃれにして読みやすくするコツはあるのでしょうか?

ブログは文章中心なので、デザインといってもなかなかいい感じに仕上げることが難しいですよね。

大胆なレイアウトにしてかえって読みづらくなってしまったり、色々な装飾をした結果逆に統一感がなくなったり・・

ブログのデザインは、本職のデザイナではない人でも、ほんの少し意識しながらデザインするだけで大きく改善することが可能です。

知っているかどうかだけなので、本記事では3つのポイントに分け、20個のコツを解説します。

このページの内容(目次)

ブログデザインの重要性

ブログのデザイン
  • フォントが薄くて読みづらいから読むのをやめよう
  • なんか古臭いデザインだから怪しいから読むのをやめよう
  • 文字ばかりで読むと疲れるな、読むのやめよう
  • 背景色に文字が埋没していて読みづらい、読むのやめよう
  • 1行がやたら長くてどの行を読んでいたかわからなくなったしもういいや

こんなブログに遭遇したことはないでしょうか?

読みたいけれど、どうにも読みづらくて途中で読むのをあきらめたり、画面を開いた瞬間帰ってしまったといった経験をお持ちのことと思います。

デザインが本文の良さをつぶしてしまうともったいないですよね。

初心者の陥りがちな間違いとして「ブログのデザインに凝りすぎる」というものがあります。やりすぎはもちろんよくないのですが、最低限はクリアしていないと直帰の原因になってしまいます。

ブログデザインはブログ記事を読む上で必要条件なのです。

デザインが良くなると、離脱が減り、記事がよく読まれるようになるため、収益も増えます。

おしゃれなブログを作るための3つのポイント

  1. 面積の大きい要素を改善すると効果が高い
  2. 記事に集中度が高まるデザインにする
  3. 細部の装飾はルールを決めると統一感が生まれる

上記のポイントを押さえれば初心者でも簡単におしゃれなブログを作ることが可能です。

ブログのデザインをワンランクアップさせる19のコツ

ポイント1:面積の大きい要素を改善すると効果が高い

ブログのデザインは、画面に占める面積の大きい要素を改善すると効果が出やすいです。

1:配色パターンを使う

カラーパレットを使う

ブログ全体に反映するのが配色パターンです。

配色はあまり色数を増やしてしまうと全体的に統一感が失われ、重要箇所もわからなくなって読みづらくなります。

メインで使う色数は3色以内にしておくのがベターです。

ブログの配色を考える時に便利なツールがCOOL COLORSというツールです。プレビューして表示されるので、イメージが湧きやすいはずです。

上記サイトは「使える配色」があらかじめ選ばれています。ほとんどの方にとって十分だと思いますが、もう少し色々なパターンを見たいのであれば、Color Huntもおすすめです。

2:行間と行の高さは大きめに取る

行の高さとマージン

ぎっちり行間がつまったテキストはかなり読みにくいのは想像できますよね。

目安として、行間の設定は、2~3emに設定すると良いでしょう。

しんじ

このサイトは3emに設定しています。
説明量がどうしてもある程度多くなるので広めにしています。

サイト全体で、かなり文字量が多いという自覚があるなら行間を1.8~2.0emに、普通くらいというなら1.6~1.7emといった感じで分けるといいです。

3:本文の文字色は真っ黒はNG

文字色は真っ黒はコントラストが強すぎる

本文の色は真っ黒(#000)ではなく、一段階薄い濃いグレー(#333)にしておくと、読み疲れしにくくなります。

背景色が真っ白の場合、真っ黒だとコントラストが強すぎて目が疲れやすくなります。#333 くらいのの濃いグレーだと目に優しく、見た目には黒なので違和感もありません。

4:WEBフォントを活用すると雰囲気がかなり変わる

最近では、WEBフォントをブログに使うことが増えてきました。Googleフォントサービスを利用すると、端末にインストールされている標準的なフォント意外のフォントで表示することができます。

可読性の高いフォントを選択しておくと読みやすく、おしゃれに感じれることが多いです。

ただし、WEBフォントはフォントデータを読み込む必要があるため、とりわけスマホのような通信環境が安定しないブログでは表示速度が多少遅くなります。

PCがメインと思われるブログや、デザインにこだわるならWEBフォントの利用を検討してみてください。

5:見栄えのいい画像を使う

ブログで使う画像には様々なものがありますが、とりわけ、下記のものに見栄えの良い画像を使うとぐっと印象が変わります。

  • アイキャッチ画像
  • 記事本文に挿入するイメージ画像

アイキャッチ画像とはWordPressの標準機能で、記事の代表画像のことです。

テーマによって使用箇所が違いますが、

  • アーカイブリスト(新着一覧や人気記事一覧)
  • 記事のメインビジュアル
  • OGP画像

と複数の箇所で使われます。露出箇所が多く、面積も大きいため、真っ先に見る画像なので見栄えのいい画像を使うと効果が大きいです。

ブログのアイキャッチ画像の作り方【ツールやデザインのコツ】

また、記事内で使う画像は、なるべく同じテイストの画像を使用し、横幅一杯に広げて使うと統一感が出ます。

≫ 参考:ブログの画像について

ポイント2:記事に集中度が高まるデザインにするには?

いうまでもなく、ブログの主役は記事本体。記事を読みやすく、集中の度合いを高めることで、記事から生まれる成果(売上)を高めることができます。

6:記事幅は660px以下にする(視点の移動を考慮)

記事幅は660px以下に設定する

本文のあるカラムをメインカラムとか、中央カラムといいます。

メインカラムの幅は、ブログによってばらつきがありますが、デザインの美しいブログに共通していることは、記事幅が660px以下にしてあるということです。

概ね610~650pxが最も多い幅(PC)です。

これは、1行に含まれる文字数が30~40文字以下になるようにするのに適した幅です。

行の高さと行間

ブログは文章が主役です。1文の長さが長くなると、視点の横の移動が大きくなり、改行時に次の行を見落としがちになってしまいます。

逆に1行の長さが極端に短くなってくると、今度は改行の数が多くなりすぎるため結果的に視点の上下の移動回数が増えるため、これも読み疲れにつながります。

読みにくい・気が散るデザインは記事への集中度が下がってしまうことになるため、読んでいて不自然さがない幅が610~650pxということになります。

しんじ

例えばこのブログは631pxに設定しています。
1行あたり36文字程度になるようにしています。

7:余白をしっかりとる

余白をしっかりとる

背景色との境目や、見出しの上下の余白を一切入れないと、図のようにかなり不自然な感じに仕上がります。

かといって広くとりすぎても間延びした感じになるため、余白はバランスを取りながらもある程度ゆとりのある状態に設定しておくと良いです。

実は余白についてはWEBデザインよりも紙のデザインの方が美しさを感じられやすく参考になります。私はデザインを考える時はよく、AXISという雑誌を参考にします。デザインについて全般的に扱われている雑誌なのですが、さすがデザイン誌だけあって、どのページを見ても非常に美しく、インスピレーションを受けるのには最適です。少し高めなので、書店で立ち読みするだけでもいい刺激になりますよ。

8:背景色は薄いグレー系の色にする

背景色は薄いグレーがおすすめ

ブログのメインカラムは白抜きにし、濃いグレーの文字にされることが非常に多いです。黒背景など濃い色味にすると、印象的にはなりますが、やや怪しいサイトのイメージが先行するので避けられることがほとんどです。

一方、メインカラムにできるだけ集中できるよう、メインカラムの周囲になる背景色は薄めのグレーなどの色を引くことが多いです。

背景に薄いグレー系の色が入り、メインカラムが白背景になると、縦にラインが意識でき、視線移動時の開始点と終点を見つけやすくなります

垂直方向に「揃い」を感じれると安定感が増すので、仮にグレー系でなくてもメインカラムの背景色とは異なる色を設定するのがおすすめです。

デザインがいいと紹介されているブログはグレー系の色を引いていることが大半です。純粋なグレーだけでなく、青寄り・黄色寄りなど、メインカラーに合わせて少し色を寄せたグレーが使われることもよくあります。

尚、背景色とメインカラムの間に実線を引くとさらにメインカラムが引きしまり安定感が出ます。線の色は、背景色よりワントーンだけ濃い色にしておくと効果的です。

しんじ

このブログは背景色が#fcfcfcで、メインカラムと背景色の間に#f7f7f7fの薄い実線を引いています。

PC版の場合はサイドバーが設置されることが多いのですが、おすすめは白抜きにしないこと。せっかくメインカラムを意識しやすい設定にしているのにサイドバーの各ウィジェットの背景色を白抜きにするとそちらにも目線が行きやすくなるので効果が半減してしまうためです。

9:見出しはかたまりを意識できるようにする

見出しのデザイン

見出しタグ(hタグ)は文章の骨格になる要素です。

見出しであることが明確にわかり、ここから記事内容が切り替わることがハッキリさせるデザインのなっているのがベストです。

見出しタグにはレベルがあり、h2は文の骨子、h3は補足内容が入るようになるはずですので、装飾のデザインとしてはh2は画面を区切るように横断し、h3は画面を横断せずにワンポイント装飾にすると文の区切りが明確になります。

ブログの見出しについて

ポイント3:細部の装飾はルールを決めると統一感が生まれる

記事の本文は文字だけで埋めてしまうと非常に読みづらくなります。

10:強調方法にルールを作る

強調はルールを決める

文字装飾の代表が「強調」です。太字の強調・色文字・マーカーが代表です。

これらをルールを決めずに場当たり的に使用すると、ブログ全体を通してどこが重要なのかがわかりにくくなります。強調を行う場合は、多くても3段階程度にとどめ本文以外の文字色を使う場合は使う色を決めておくようにしましょう。

11:マーカーは1色のみにしておく

特にやってしまいがちなのがマーカーをカラフルに使ってしまう場合です。

ブログのテーマで設定されているマーカー色が複数ある場合に、色々な色を使ってしまうことがあるのですが、ルール付けしてあるなら問題ありませんが、気分やノリで色を増やすのであれば控えるようにしましょう。

12:リンクカラーは青系にする

ウェブサイトでのリンクカラーは一般的なサイトであれば青系が使われます。

最近は黒系に下線というサイトも増えている印象がありますが、それでもやはりリンクの色と言えば青系が中心です。

主要な検索エンジンでは下記のような色が設定されています。

検索エンジンPCスマホ
Google#1a0dab#1558d6
Yahoo#000d99#0b62e5
Bing#1a0dab#1a0dab

青系といっても様々で、最近ではスマホのリンクカラーをワントーン上げることが増えているようです。

13:吹き出しの向きや使い方を決めておく

吹き出しにはどんな効果があるの?

しんじ

読者の心の声を代弁したり、話言葉で説明できるので頭に入りやすい効果がありますよ

こんな使い方もできますね

上記のように、吹き出しを使うと、単調な説明調から口語調に変えることができるので、緩急がつきやすくなります。

また、擬人化したり、読者の心の声を代弁すると感情移入もしやすく、共感しやすくなります。

使う際は、読者の声は左、著者は右、吹き出しに使うアイコンはキャラ設定をしたり種類を制限する、のようにあらかじめルールを決めておくと散らかった印象になりにくくなります。

14:リストのパターンをあらかじめ決めておく

リストデザイン
参考:CSSで作るリストデザイン38選!オシャレな箇条書きを実現

順番付きリストや箇条書きになる部分は、積極的にリストを使っていきましょう。

リストは、

  • 一文が短くなるので読みやすい
  • 全体像をつかみやすい(すべてを列挙できる)
  • 深堀りできる
  • 漏れを防げる
  • マークを設定できる
  • 順序を表現できる(番号付きリスト)

といった効果があります。

リストを使うシーンは

  1. 単純に列挙する(箇条書き)
  2. 順番を指す(番号付きリスト)
  3. 全容を示す(番号付きリスト)
  4. チェックリスト・ポイントリスト
  5. メリットの列挙
  6. デメリットの列挙
  7. 注釈の一覧を示す

などが考えられます。上記の7パターンに対して装飾を用意しておくとどのような記事を書く際でも応用できます

15:ボックスのパターンを決める

ボックスデザイン
参考:【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

ブログの装飾で最もバリエーションが多いのが、ボックスのデザインパターンです。

単純な囲みに始まり、キャプションのついているボックス、アイコンのついているボックスなどデザインの種類も豊富です。

ボックスを使うときのパターンとしては以下のようなものが考えられるので、それぞれにデザインパターンを用意しておくと良いでしょう

  1. 補足説明・メモ
  2. 重要箇所・ポイント
  3. 注意喚起
  4. 禁止
  5. 引用
  6. CTA・広告
  7. コード

コツとしてはテイストを合わせておくことです。

ボックスは一つの記事の中で複数使うことがありますので、近い雰囲気のデザインにしておくと統一感が生まれます。

16:テーブルのパターンを決める

テーブル(表)は解説の中でよく使われる装飾方法です。

テーブルは、基本的に

  • 一覧
  • 比較

のどちらかで使われます。

  • 商品を一覧するのに利用するテーブル
  • メリットとデメリットの比較表
  • 複数の項目をクロス集計する表

の3種類ほどを用意すればOKです。

17:ブログでよく使われる特殊レイアウトを活用する

ブログでよく使われる特殊レイアウト

ブログでは、下記のような装飾が良く利用されます。

WordPressテーマによって内容や使い方は異なりますが、どれも可読性を高め、使い勝手が上がるものです。積極的に活用していきましょう。

  • ステップ
  • FAQ
  • アコーディオン
  • タブ
  • ブログカード
  • ランキング

18:スマホのリンクは44×44px以上を確保してタップしやすくする

スマホの画面はPCと比較してかなり小さいため、PCと同じようにテキストリンクを張るなどしても、タップして先に進みにくいことがあり得ます。

スマホアプリでは、ガイドラインが定められており、タップ領域は44x44以上を確保するように推奨されています。

特にテキストリンクを並べる場合は周辺の余白に気を付け、タップできることを確認するようにしましょう。

19:目を引きたい所には動きをつける

  • マーカー部分が画面に入った時に線が引かれるアニメーションが設定されている
  • 吹き出しのアイコンが少しうごくようになっている
  • ボタンにキラッと光る効果が設定されている

といったように、目を引きたい箇所は動きを付けるとそこに視線が集中します。

まとめ:簡単に統一感のあるデザインにする方法は有料テーマ

以上、ブログ記事を読みやすく、記事に集中できるおしゃれなデザインにするコツを19個紹介しました。

確かにそうした方がいいと思えることもあったんだけど、CSSやHTMLを編集できないと実現できそうにないなあ

と思った方も多いかもしれません。

ブログのデザインはある程度凝ってくると、どうしてもstyle.cssを編集したり、プラグインを導入したり、function.phpで機能拡張しなければならなくなってしまいます。

初心者の方にとってはかなりハードルが上がってしまうのも事実です。

そういった場合は有料テーマを利用すると一気に解決できます。

WordPressテーマのうち、特に有料のものはデザイン性が高いものが多く、本ページでふれた内容についてはほとんどのテーマでデフォルトでクリアしているか、簡単に設定可能です。

特にお勧めのWordPressテーマはこちら

このページの内容(目次)
閉じる