ブログのデザインはどうすればいい?10のポイントを実例で紹介!
こんにちは。
ブログを3年運営し続けながら、ブログノウハウも学んでいる、セオヒナコです。
ブログを開設する時、悩むのが「ブログのデザイン」ですよね。
見た目、色、画像など「どういうものが最適なのか、わからない」という方も多いと思います。
そこで今回は、ブログのデザインを考える時の10のポイントについて解説します！
実例を用いてわかりやすく説明していますので、ぜひ参考にしてみてくださいね。
もくじ
なぜブログのデザインは重要なのか？
ブログのデザインが重要な理由は、直帰率に大きく関わるからです。
直帰率とは、サイト全体の訪問者のうちで、サイトの1ページのみを開いて離脱していった人の割合を示す数値です。
例えば、その日1日の訪問者が5人いたとして、そのうちの1人が1ページを閲覧したのみで離脱してしまった場合は、1÷5＝0.2、つまり直帰率は20％となります。
この数値は、低ければ低いほど「すぐに離脱した人が少ない」ということになるため、サイトが良い状態であると言えます。
ブログのデザインが悪く読みにくいと、それだけで読者は離れていきます。
つまり、本文を読む前に離脱されてしまうんです。
逆に、デザインが良いという印象を与えられれば「内容も読んでみよう」と思ってもらえます。
せっかく時間を掛けて内容を充実させたブログも、デザインで離脱されていては意味がありません。
なので、ブログのデザインは力を入れるべき部分です。
ブログのデザインを作る時の10のポイント
ブログのデザインを作る時のポイントは、以下の10個あります。
- 色合いを統一する
- 見た目を統一する
- 画像を適宜入れる
- 見出しを修飾する
- 行間を調整する
- リンク部分はわかりやすく表示する
- 表記ルールを統一する
- アイコンを使う
- アイキャッチ画像の雰囲気を統一する
- スマホやタブレットでも読みやすいデザインにする
一見すると多く感じる数ですが、一度ルールとして決めてしまえば後々煩わしくなりません。最初だけ気合いを入れて整えてしまいましょう！
セオヒナコ
１．色合いを統一する
ブログ全体の色合いは、同じ系統の色で揃えて統一させましょう。
なぜなら、バラバラの配色だと読んでいて目が疲れたり、文字が読みにくくなってしまったりするからです。
使う枠やマーカー、文字の色はなるべく少なくして記事間で統一すると、読みやすさがアップします。
テーマの色とも合わせるようにすると、より見やすくなりますよ。
例えばこの記事でも、以下の色しか使っていません。
・マーカーの色：黄色
・文字の色：黒のみ
これがバラバラだと、以下のように読みにくくなってしまいます。
ノートやメモを取る時も「使う色は3～4色までが良い」と言われますよね。
ブログの記事も、それと同じです。
あまり色が増えすぎると、かえってどこが重要なのかわからなくなり、せっかくの記事が読者の記憶に残りません。
さらに目が疲れるので、読み返してくれる確率も減ってしまいます。
なので、使う色は少なくし、ブログテーマの色とも合わせることが大事。
白や黒、ネイビーなどのシンプルな色にすると、色の組み合わせが考えやすいですよ。
色合いを考える時は、サルワカさんが作成した「COOL COLORS」というツールや、「Scheme Color.com」というサイトを使うと便利です。
気に入った配色をそのまま参考にできるので、好きな色を使ったおしゃれな配色を見つけられます！
２．見た目を統一する
ブログ全体の見た目は、ぱっと見て「同じブログのページなんだな」とわかるように、統一しましょう。
例えば、画像の大きさ、フォントの大きさ、枠や見出しのデザインなどを揃えると、統一感が出ます。
WordPressを使用してブログを開設する場合は、テーマを使用するとラクです。
最初から枠や見出しのデザインが設定されているので、記事を書くごとに悩まなくて済みます。
画像やフォントの大きさも、記事を書き始める前に自分のルールを定めておくと便利。
記事数が増えてから直していくのは大変ですから、最初から統一感を意識してコンテンツを充実させていくのがおすすめです。
３．画像を適宜入れる
ブログには、見出し画像や説明を補足する画像などを適宜入れるようにしましょう。
実は、ブログを小説や専門書のように読み込む人は少ないのが事実です。
なので、ブログ記事は、流し読みでも内容がわかるように工夫する必要があります。
文字だけだと、流し読みではなかなか頭に入ってきません。
目安として、文字を10行以上書く場合は、画像を入れるようにすると良いですよ。
また、画像を入れる際は、画像の横幅のサイズを揃えるようにしましょう。
記事のウィンドウ幅に揃えると、綺麗に見えます。
４．見出しを修飾する
見出しは必ず、わかりやすく修飾するようにしましょう。
何も修飾していない状態だと、読者からは「ただの太文字」と勘違いされてしまいます。
もちろんSEOの効果としては、見出しタグが設定されていれば問題ないです。
しかし、いくらSEO施策を万全にして検索順位を上げても、記事がわかりづらいせいで読まれないのでは意味がありません。
ブログ記事で何より大切なのは、読者ファーストで記事を書くこと。
読者が一目で「ここが見出しで、ポイントなんだ」とわかるように作ることが重要です。
５．行間を調整する
行間は、記事の読みやすさに直結する部分です。
文字が詰まりすぎていても、離れすぎていても、読みにくくなってしまいます。
WordPressでテーマを使用すると、最初から設定されていることが多いです。
しかし、その他のブログサービスを利用したり、行間の設定がされていないテーマがあったりする場合は自分で設定する必要があります。
なので、細かい部分ですが、必ずチェックするようにしましょう。
行間は、CSSを利用して設定できます。
CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略称。
「ウェブページを、どのように修飾するか？」を指定するための言語のことを指します。
ウェブページを表示する際のレイアウトなどの他に、音声の再生スタイルや印刷時の出力スタイルも、このCSSを使って指定することが可能です。
細かい設定方法は、サルワカさんの「【CSS】line-heightで行間を調整する方法：おすすめの値は？」という記事がとてもわかりやすいので、こちらを参照すると良いでしょう。
６．リンク部分はわかりやすく表示する
記事の文中に貼るリンクは、わかりやすく表示しましょう。
GoogleやYahooでも使われているような「青色」にすると、読者も見慣れているので、すぐにリンクだとわかってもらえます。
しかし、このブログでも「青色」は取り入れていません。
なぜなら、ブログ全体の色合いにそぐわないと判断しているからです。
なので、このブログでは文字色を変えたうえで「下線」を取り入れています。
こうすることで、マウスオーバーがないスマホでも、すぐリンクだと理解してもらうことが可能です。
７．表記ルールを統一する
記事の表記ルールは、統一すると違和感がなく読めます。
例えば、以下のような表記揺れ。
・「ください」と「下さい」
2～3つ程度なら、気にせず読み進められます。
しかし、いくつもあると、読者にストレスを与える可能性があるんです。
記事を読むことにストレスを感じると、当然、直帰率も上がってしまいます。
なので、表記揺れには注意して記事を書くようにしましょう。
８．アイコンを使う
ブログには、積極的に自分のオリジナルのアイコンを使用していきましょう。
自分らしいアイコンを使うことで、シンプルにまとめたデザインのブログでも、個性を表現できます。
ブログは、自分らしさを出してファンを増やし、リピーターを作ることも重要です。
なので、アイコンを作って使うようにすると、ブログ運営においては有利になります。
また、吹き出しに使用すると、記事を華やかにすることも可能です。
アイコンについては、こちらの記事でも詳しく解説していますよ。
９．アイキャッチ画像の雰囲気を統一する
アイキャッチは、ほとんどのブログでトップページに一覧で並べられるものです。
ブログ全体のデザインを考える上でも重要な部分になってきます。
例えば、可愛らしくポップな印象のブログなら、可愛らしいフォントの文字を入れたアイキャッチに統一する。
引用：ルカルカちゃんねる
洗練されたデザインのブログなら、あえて文字を入れない写真のみのアイキャッチに統一する。
引用：トバログ
これらのブログのように、全体と調和したアイキャッチに揃えると、デザイン性の高いブログにもなります。
アイキャッチは、デザイン以外にもブログに与える効果があるので、こちらの記事も参考にしてみてくださいね。
１０．スマホやタブレットでも読みやすいデザインにする
今やブログは、パソコンよりもスマホやタブレットで読む人の方が圧倒的に多いです。
なので、スマホやタブレットでも読みやすいデザインにするのは必須。
媒体が変わると表示が崩れるようなデザインは、絶対に避けましょう。
とはいえ、自分で全ての媒体のデザインをチェックし、修正もするとなると、手間が掛かりますし大変ですよね。
やはりおすすめは、WordPressでブログを開設し、テーマを使用することです。
有料テーマでは、最初からスマホやタブレットでもデザインが最適化される仕様になっているものもあります。
「記事の執筆に多くの時間を割きたい！」という方は、既存のテーマを導入してデザインの時間を短縮すると良いですよ。
ブログのデザインの良い実例3つ
ポイントを踏まえても、実際にブログを見てみないと、なかなかイメージが湧きませんよね。
そこで、実例として以下の3つのブログをピックアップしました。
「どういったところが、デザインとして良いポイントなのか？」を解説していますので、ぜひ自分のブログのデザインを考える際の参考にしてくださいね。
セオヒナコ
ヒトデブログ
引用：ヒトデブログ
- ブログ全体の色合いが統一されている
- 見出し、おすすめカテゴリの配置が均一になっている
- オリジナルのアイコンを使っている
ヒトデブログは、ブロガーのヒトデさんが運営する、初心者向けにブログノウハウを提供しているサイト。
特徴的なアイコンを存分に活用したブログになっているので、読者の印象にも残りやすいです。
色合いも、比較的明るめな色を使っていますが、目が疲れにくいよう配慮されています。
オリジナルさを出しながらも、読者ファーストで作られていることがわかりますよね。
manablog
引用：manablog
- シンプルな色のみを使っている
- おすすめカテゴリの配置が均一になっている
- アイキャッチ画像の雰囲気が統一されている
manablogは、ブロガーのマナブさんが運営する、ブログやプログラミングの知識を提供しているサイトです。
色合いや、文字を入れないシンプルなアイキャッチから、洗練された印象のあるブログになっています。
固めでしっかりした印象があるので、読者に「記事の内容も信頼できそう！」と思わせることも可能です。
このように、ブログのデザインは執筆者やブログへの信頼度にも繋がるので、意識して作っていきましょう。
サルワカ
引用：サルワカ
- カテゴリが一覧で表示されている
- 人気記事の配置が均一になっている
- アイキャッチ画像の雰囲気が統一されている
サルワカは、ブロガーのサルワカさんが、暮らしに役立つ知識やインターネット知識を提供しているブログです。
サルワカさんは、オリジナルのWordPress用ブログテーマ「SANGO」を作成されており、このブログでも使用しています。
特徴は、行間・色合い・カテゴリ一覧など全てが、読者にとっての見やすさを追求されたものであること。
読んでいてストレスがないので、ずっと読み進めたくなります。
ブログのデザインで注意すべきこと
ブログのデザインを考える上で注意すべきことは「読者が求めている情報が探しやすいか？」という点です。
ブログの読者は、自分の求める情報を読むために、あなたのブログを訪問しています。
なので、求める情報が探しやすいブログは必然的に「読者にとって、親切な設計のブログ」となり、リピーターも増えるというわけです。
読者にとって求める情報が探しやすいブログにするためには、以下の3つの方法があります。
- 記事をカテゴリごとでまとめる
- 目次だけで、記事の全体像がわかるようにする
- 関連記事を表示させる
ブログのターゲット層を絞ると、どのジャンルを目立たせていけばいいのか明確になるので、その点もあわせて考えてみると良いですよ。
記事をカテゴリごとでまとめる
求めている情報についての記事がすぐわかるように、記事はカテゴリごとでまとめておきましょう。
カテゴリは、大カテゴリの下に小カテゴリも作っておくのがおすすめです。
例えば、記事を「ブログ」という大カテゴリにまとめていたとします。
それだけでも十分に見やすいですが、その下に「デザイン」、「書き方」のような小カテゴリがあると、よりダイレクトに求める情報に辿り着けるんです。
とはいえ、カテゴリが細分化されすぎていても逆に見づらくなります。
カテゴリ分けは、2段階程度にとどめておくと良いですよ。
目次だけで、記事の全体像がわかるようにする
記事には必ず目次を挿入して、目次だけで記事の全体像が把握できるようにしましょう。
なぜなら、読者は「自分の求めている情報がある」とわかってからでないと、記事を読んではくれないからです。
暇つぶしでない限り、読者は知りたいことの答えを求めてブログを読みに来ています。
そんな時、いちいち記事を読んで探していたら、時間が掛かってしまって仕方ないですよね。
なので、読者が素早く自分の求める情報に到達できるよう、ブログを作ることが重要です。
関連記事を表示させる
記事を読んでいると、さらに疑問が出てくることがあります。
そんな時、記事の最後に関連記事が表示されていると、続けて読まれやすいです。
読者にとっても、わざわざ記事を探し直す必要がないので、手間がかかりません。
やはり、知りたい情報に、様々な形でアクセスしやすいブログは便利ですよね。
なので、関連記事は記事内にリンクを挿入するだけでなく、末尾に一覧で表示されるような設定をするのがおすすめです。
間接的な繋がりがある記事も、読んでもらえるようになりますよ。
ブログのデザインはどうすればいい?10のポイントを実例で紹介! まとめ
ブログのデザインは、読者の集客率、直帰率に関わる重要な部分です。
10のポイントは数は多いですが、この記事を参考に、しっかり設定してみてくださいね。
もちろん、ブログ運営には記事の質も重要です。
SEOを意識したキーワード選びや、記事のタイトルも意識してみると良いですよ！
書人百花にて活動している私たちも、チームでブログ運営ノウハウを学びながら、ライティングを実践しています。
新たに発足する、女性限定ライティングサロン「Site New Tourism」でも、インプット&アウトプットしながら、実践で学んでいくことが可能です！
詳しくは、以下のページでご説明しています。
最後までお読みいただき、ありがとうございます。
