ブログデザインをおしゃれにするコツ15個【初心者でも再現できる】

こんにちは！「SHUN BLOG」を運営しているしゅん（@a1_shun）です。本業は都内でWebマーケターをやっています。

ブログの準備を進めているけど、そろそろデザインも着手したい。読みやすくておしゃれなブログってどうやって作るの？

こんなお悩みを、解決していきます。

本記事の内容

本記事の信頼性

本記事では、ブログデザインをおしゃれにするコツと読みやすい記事にするコツについて解説します。

結論、おしゃれなブログとは「シンプルで統一感のあるブログ」のことです。決して奇抜な装飾や派手な配色がおしゃれの条件ではありません。

上記を守りつつ、本記事でお伝えする内容をブログに反映させることでデザインの整ったおしゃれなブログを作れますよ。

これからブログのデザインを整えようとしている人は、ぜひ本記事を参考にしながらおしゃれなブログを完成させていきましょう！

記事を書く前にブログデザインを整えよう

ブログサイトのデザイン（主にトップページ）は、コンテンツの内容と同じぐらい大切です。

なぜなら、サイトに訪問してくれた読者がもっとも目にする部分だから。ここのデザインが整っていないと、記事を見る前に離脱される可能性もあります。

人は見た目が9割といいますが、思っている以上に見た目の影響は大きいということですね。

おしゃれでわかりやすいデザインにして、気持ちよく読者を迎えてあげるようにしましょう。

サイト全体とブログ記事のデザインを整えるメリット

サイト全体とブログ記事のデザインを整えることで、大きなメリットが発生します。

下記の通りです。

サイト全体のデザインを整えるメリット

ブログ記事のデザインを整えるメリット

さらに、この2つのデザインを整えることで生まれるひとつのメリットがあります。

おしゃれなブログは読者の離脱を防ぐメリットがある

それぞれのデザインを整えると、読者の離脱を防ぐことができます。

コンテンツの質はもちろんですが、まずはサイト全体とブログ記事のデザインを整えておしゃれにすることを意識してみましょう。

ブログサイトをおしゃれにする5つのコツ

まずはじめに、ブログサイトをおしゃれにする5つのコツをお伝えします。

ブログサイトをおしゃれにする5つのコツ

その①：ブログサイトの配色を決める

まずは、ブログサイトの配色を決めましょう。

いきなり難しいと思うかもですが、わかりやすく解説するのでご安心ください。

ブログサイト全体の配色を決めるときに、

を意識すると、バランスがよくなるといわれています。

上図のイメージです。

それぞれの色に役割がありまして、少し深掘りして解説します。

ベースカラー（全体の70%）

ベースカラーは、サイトの中で背景色や余白として使用します。

サイト全体の70%の面積を占めるので、目に優しい淡い色にするとコンテンツが目立ちやすくなり読者にとっても親切ですね。

メインカラーやアクセントカラーを際立たせる脇役的な存在ですので、黒や赤など主張の激しい色を採用することは避けるようにしましょう。

メインカラー（全体の25%）

メインカラーは、サイトの中でも主役的な存在です。ヘッダーや見出しタグなどで使用します。

サイトの印象を左右するもっとも重要といっても過言ではない色なので、他のサイトも参考にしながら決めていきましょう。

アクセントカラー（全体の5%）

もっとも出番の少ない色ですが、CVボタンや内部リンクの装飾など「とくに強調したいポイント」で使用します。

扱いが難しいので、たくさんの色を採用するのは控えるようにしましょう。

その②：ブログサイトの操作性を高める

配色や画像だけがおしゃれなブログの条件ではなく、サイトの操作性も非常に重要です。

ちなみに操作性を高めるには、

といった、基本をおさえておけばOK。

グローバルメニューはこんな感じです。

操作性も伴ってこそおしゃれなブログなので、デザインばかりこだわらないように注意しましょう。

その③：広告の数を控えめにする

ブログサイトの主役はあくまで記事なので、広告をバンバン貼りつけるのはNGです。

トップページのヘッダーあたりに広告を貼っているブログをたまに見かけますが、読者にとってマイナスでしかありません。

最近の読者は広告に対する抵抗感が強いので、数は控えるようにしましょう。

繰り返しになりますが、ブログの主役は広告ではなく記事コンテンツです。

その④：使用する画像のサイズ・雰囲気を合わせる

おしゃれなブログサイトを目指すなら、画像の存在は欠かすことができません。

ですが、サイトの雰囲気に合わなかったりサイズがバラバラだと、逆に悪い影響を及ぼしてしまいます。

当ブログの場合、画像サイズは「縦1024×横630」を使用することがほとんどです。（※アイキャッチ画像など）

画像の雰囲気とサイズにも気を配り、おしゃれなブログを目指してくださいね。

その⑤：デザインの統一感を意識する

これまでお伝えした内容の総集編的な内容になります。

ここでいうデザインとは「ブログサイトを通じて読者に認知されるすべて」が対象で、統一感を意識することが大切です。

どんな有名なブロガーさんでもデザインの調整は定期的に行っていますが、共通するのは「読者を第一に考えている」「デザインに統一感がある」といったポイントです。

まずはシンプルに、サイト全体を通しての統一感を意識してみてください。

ブログ記事を読みやすくする10つのコツ

続いては、ブログ記事を読みやすくするコツについて解説します。

基本はシンプルであること。そうすると強調したい内容が伝わりやすくなるので、読みやすいブログ記事を作ることができるようになりますよ。

ブログ記事を読みやすくする10つのコツ

その①：文字のサイズや色を統一する

文字のサイズや色を統一するだけで、読みやすい記事ができあがります。

文字をデカ文字にしたりカラフルにしているブログをたまに見かけますが、あまりオススメできません。

重要なポイントはどこなのかわかりづらいですし、目が疲れてしまいます...

頻繁に使う文字はシンプルでOK。強調したい箇所だけ装飾を施すようにしましょう。

その②：太字やマーカーで文字を目立たせる

とくに重要なポイントを伝えたい場合、太字やマーカーは非常に有効です。

逆に装飾されていないと、重要なポイントなのに読み飛ばされてしまう可能性すら出てきます。

下記をご覧ください。

装飾のない文章と比較すると、「どこを読んでほしいのか」ひと目でわかりますよね。

かなり便利ですが、使いすぎると本当に伝えたい内容が伝わりにくくなるので注意してください。

その③：漢字・ひらがなのバランスを意識する

漢字3割、ひらがな7割（カタカナ0〜1割）の比率にすると文章は格段に読みやすくなります。

新聞などの活字媒体でもこの比率になっています！

ただでさえ読むのが億劫な新聞でも、しっかり読みやすさを考えて作られているんですね。

ブログ記事は気軽に文字変換ができるので漢字が多くなりがちですが、ひらがなの割合を多くすることを意識して取り組んでみましょう。

その④：表記ゆれに注意する

表記ゆれとは、「記事内で登場する単語が統一されないこと」を意味します。

表記ゆれの例

こんな感じですね。

表記ゆれがあると文章が読みにくくなったり、内容がわかりづらくなるというデメリットがあります。

SEOにも悪い影響を及ぼす可能性があるので要注意です！

表記ゆれは、文章を書いている最中に気づくことが難しいので、書き終えたあとのチェックを習慣化しましょう。

その⑤：文章に余白をもたせる

文字の行間や段落間に余白をもたせると、文章の内容を理解してもらいやすくなります。

当ブログも行間を考えて設定してますし、文章が長くなりそうなら改行を入れて余白を生みだしています。

下記、参考事例です。

余白のない文章と比較すると、改行するだけで読みやすくなりますね。

おしゃれで読みやすいブログを作るなら、余白が非常に重要ですよ。

その⑥：見出しデザインを整える

デザインされた見出しは目にとまりやすく、これからどんな内容が書かれているのか理解しやすくなります。

下記、参考です。

当ブログの場合、こんな感じですね。

見出しには文章の階層構造をわかりやすくする効果もあるので、あるだけでグッと読みやすくなりますよ。

その⑦：箇条書きで要点をまとめる

箇条書きを使うと文章に緩急がつくので、読者を引きとめて要点をしっかり伝えることができます。

下記、参考事例です。

並列の内容や順序を構造的・視覚的に伝えることができるので、かなり便利ですよね。

文章が長くなりそうなとき、活用してみてください。

その⑧：ボックスを使ってポイントを伝える

文章の中でとくに強調したいポイントは、ボックスを使用すると視覚的にわかりやすくなります。

当ブログの場合、画面をスクロールして文章だけが続いてしまう場合にもボックスを使用しています。

その⑨：吹き出しを使ってポイントを伝える

ボックス同様、強調したいポイントで使用します。

自分の意見を伝えるときも吹き出すを使うことが多いですね。

吹き出しで使用する画像はフリー素材でもいいですし、本格的なものを作りたいならココナラなどで依頼してみましょう。

補足ですが、広告の世界には「美人（Beauty）赤ちゃん（Baby）動物（Beast）」を使うと好感をもたれやすいという3Bの法則があります。

その⑩：画像を適度に配置する【例：h2タグの下】

画像を適度に配置すると、文章に緩急がついて最後まで読んでもらいやすくなります。

当ブログの場合、h2タグの下は必ず入れるようにしています！

読者は文章が読みたいのではなく、情報を求めてやってきます。「どうすれば文章が読みやすくなるか＝情報が伝わりやすくなるか」を意識しましょう。

画像のalt属性を埋めよう

alt属性とは、画像につける名前みたいなものです。

なんらかの理由で画像が表示されなかったときに、alt属性で指定したテキストが表示されるのでSEOにいい影響を与えてくれます。

自分の場合、アイキャッチ画像なら記事タイトル、本文なら見出しタイトルをalt属性に指定してます！

WordPressならサクッと設定することができるので、忘れないようにしましょう。

【参考】おしゃれなブログサイト3選

続いて、おしゃれなブログサイトを参考としてご紹介します。

デザインの再現性が高いものだけを厳選しました！

幼児教材ガイドブック

参考：幼児教材ガイドブック

まずはじめは、幼児教材ガイドブック。

サイトのタイトル通り、幼児教育の通信教材に特化したブログサイトです。

「こんなおしゃれなブログサイト作れないよ」と思うかもですが、WordPressテーマを使用すれば解決します。後ほど解説しますね。

ほたるノート

参考：ほたるノート

続いてご紹介するのは、ほたるノート。

ヘッダー画像はかなりカラフルですが、記事本文の装飾は控えめでとても読みやすいです。

ターゲットが女性なら、かなり参考になるのではないでしょうか。

monogrow（モノグロ）

参考：monogrow

最後にご紹介するのは、monogrow（モノグロ）。

当ブログと同じWordPressテーマ（親テーマ：AFFINGER6 EX / 子テーマ：JET2）を使用しています。

記事一覧がカード型で表示されるので目立ちやすく、クリック率の向上を狙えます。

記事本文はシンプルで内容もわかりやすく、アイキャッチ画像も雰囲気に合っていますね。

WordPressテーマ（AFFINGER）でデザインを再現しよう

今回ご紹介した3つのブログサイトは、WordPressテーマ（AFFINGER）で似たようなデザインを再現することができます。

プログラミングの知識がないと難しいブログサイトのデザイン調整ですが、WordPressテーマを使用すれば想像以上にサクッと終わりますよ。

当ブログでも使用しているAFFINGERについて詳しく知りたい方は下記を参考にしてみてくださいね。

他のWordPressテーマも検討したいという人は、下記をご覧ください。

WordPressテーマを導入するだけで、文章や見出しタグの装飾などもサクサク進めることができますよ！

おしゃれなブログで読者を増やそう

本記事では、ブログサイトをおしゃれにするコツや記事を読みやすくするコツについて解説しました。

おしゃれなブログの共通点は、「シンプルであること」「デザインに統一感があること」「記事に適度な装飾が施されていること」です。

はじめから完璧でなくても、少しずつ自分なりのおしゃれなブログを目指していきましょう。

下記、記事内容の復習です。

ブログサイトをおしゃれにする5つのコツ

ブログ記事を読みやすくする10つのコツ

量が多くて大変かもしれませんが、ブログサイトをおしゃれにしたい、記事を読みやすくしたいならどれも必須です。

おしゃれなブログは読者がつきやすく、離脱率も下がるので頑張りましょう...！

今回は以上です。