初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則

デザインを変更したり新たな機能を追加するのも、ブログ運営の楽しみ方の一つだ。記事ネタが思い浮かばないとき・モチベーションが下がっているときの気分転換にもなる。

効率的にブログネタを探す方法8選＆どうしても見つからないときの対処法

しかし、やり過ぎはよくない。どんなデザインにしようと運営者の勝手だが、最終目的は「読まれるブログ」を作ることではないだろうか。それならば最低限のルールに沿ったデザインにしたほうがよい。

本記事では、ブログ初心者が覚えておくべきデザインの基本とルールを解説していく。

デザインは読者のためにある

大前提として覚えておくべき基本は、「デザインは読者（ユーザー）のためにある」ということ。

自分のためだけに作ったブログなら 100 ％ 自分に合わせればよい。でも、あなたが読みやすい・使いやすいと感じているから周りもそうだ、とはかぎらない。

客観的な視点をもつのは難しいが、ユーザーを置いてけぼりにするような形はできるだけ避けよう。SEO を考えるなら、検索エンジンが理解しやすいブログにするのも大切だ。

ルールを守りつつ少しだけオリジナリティを加える

WordPress でブログを作るときは、だれかが制作したテーマを使うことがほとんどだ。よほどこだわりがあるか Web 関連の仕事をしていなければ、ゼロから構築することはないだろう。

既存のテーマを使えば、Web デザインの原則から大きく外れることはない。ある程度テキトーに設定してもそれなりの見栄えになる。一方で、他のブログと差別化しづらいというジレンマも生じる。

2022 年時点では、無料テーマであれば「Cocoon」、有料テーマであれば「SWELL」の利用者が多い。あちこちのブログを見て回っていると、これは SWELL を使っているな、というのが一目でわかるのではないだろうか。

わかったところで問題があるわけではないし、WordPress をさわったことのない一般ユーザーは気にしないかもしれない。とくに、スマホで見ればどのテーマも大した違いは感じられないはずだ。

それでも、ブロガーである以上はこだわりがあってもよいと思う。皆と同じデザインではつまらないし、自分のブログに愛着をもてなければ運営は楽しくないのだから。

最も重要なのは記事の内容だが、デザインも含めてのブログだ。Web のルールに従って読みやすいデザインを確保しつつ、少しだけオリジナリティも加えておこう。

最低限守っておくべきルールにはどのようなものがあるか、以下解説していく。

ブログデザインの大原則

#1 スマホでの読みやすさも考える

ブログの管理・執筆はパソコンで、という運営者が多いと思う。しかし、ジャンルによるものの、ブログを読むユーザーはスマホのほうが多い。

総務省の調査によると、インターネットに接続するデバイスはスマホが 68 ％以上となっている。

SISTRIX の調査では日本のモバイル検索は 75 ％ となっているから、ブログの読者は約 7 割がスマホ、と考えてよいだろう。実際のデータはアクセス解析でわかるから、一度チェックしてみてほしい。

統計からわかるのは、スマホでの読みやすさも考えるべき、ということだ。ユーザー数から言えば、むしろ優先したほうがよい。

パソコンでブログを書いていると、プレビュー画面もパソコンのサイズになる。それだけを見て画像の配置や表のレイアウトを考え、スマホユーザーの存在を忘れてしまう運営者は多い。改行や段落も同じだ。

記事を公開したあとは、必ず自分のスマホで読みやすさをチェックしてほしい。

#2 ファーストビューに広告を置きすぎない

ファーストビューとは、ブログにアクセスしてスクロールせずに見える部分を指す。英語では「Above the fold」。

スマホとパソコンでは表示が多少異なると思うが、いずれの場合でもファーストビューの配置には気をつけよう。広告だらけになっているのは当然 NG であり、他の要素でメインコンテンツを押し下げる形になっているのも好ましくない。

具体的には、以下の悪影響がある。

• ユーザーの印象が悪くなる
• Google AdSense の規約に反する
• 検索評価が下がる

端末やモニターの解像度、ブラウザのサイズでファーストビューの高さは異なる。パソコンでは高さ 600px ほどで考えておくとよい。

ファーストビューに広告を配置すること自体は問題ないが、その場合も記事タイトルやリード文の一部は見えるようにしておいたほうがよい。「スクロールしなければ何のページかわからない」という状態だけは避けよう。

投稿ページは問題なくても、ホームページ（トップページ）に意味不明なヘッダー画像をデカデカと掲載しているブログをたまに見かける。ホームページを見るユーザーの目的は何か、というのも考えてみてほしい。

#3 不要なブログパーツは置かない

サイドバーや記事下など、メインコンテンツ以外の部分に不要なブログパーツをたくさん置いていないだろうか。

• ランキングサイトのリスト
• Twitter や Instagram の埋め込み
• 訪問者数

上記のようなパーツが有利に働くこともあるが、あまり意味がなく表示速度を低下させるだけになっていることが多い。

スマホで見ると、サイドバーがメインコンテンツ下に配置されるか、メニューボタンをタップしなければ表示されないようになっているはずだ。ページの最下部まで見るユーザーはごくわずかだし、隅々まで見てくれるユーザーもほとんどいない。たいていは記事本文だけを見ており、多くても数記事読むだけで帰ってしまう。

前述のとおり、スマホユーザーのことも考えてほしい。ブログパーツの存在に気づかれていないなら、外したほうがスッキリするし、表示速度もアップする。

#4 読むのに邪魔なアニメーションはつけない

一部の WordPress テーマやプラグインには、アニメーション機能が備わっている。

面白いのでたくさん使ってみたくなる気持ちはわかるが、残念ながら邪魔だと思われることのほうが多いだろう。

ブランドイメージを伝えるコーポレートサイト、または商品販売の LP で適度に使うなら効果がある。しかし、ブログを読みにくるユーザーの目的は「自分の悩みや疑問の答えを知る」ことだ。ド派手なアニメーションが多用されていれば、読む気が失せて離脱してしまうかもしれない。

どうしても使いたいのであれば、ワンポイントぐらいに留めておこう。いくら CSS と言えど、多用すると表示速度低下につながってしまう。

#5 文字の大きさに気をつける

文字の大きさ（font-size）は、読みやすさにかなり影響する。

もしフォントサイズの調整に悩んでいるのであれば、ブラウザのデフォルトサイズである 16px を基準に考えよう。小さすぎても大きすぎても読みづらいし、メインコンテンツの幅（＝ 1 行の文字数）も関係してくる。

このほか、以下の要素も考慮しよう。

• 文字と文字の間隔 letter-spacing
• 1 行の高さ line-height
• 余白 margin / padding

フォントサイズを変更するだけでよしなに調整してくれるテーマもあるが、様々な指定が関係してくることを覚えておけばどこかで役に立つはずだ。

#6 文字色と背景色のバランスに気をつける

読みやすさを考えるなら、フォントサイズだけではなく色（color）にも気をつけよう。

文字の見やすさ・読みやすさに関わる「コントラスト比」は、少なくとも「4.5 : 1」にするよう WCAG2.1 で明確に規定されている。

Web Content Accessibility Guidelines (WCAG) 2.1

いちいちコントラスト比を計算するのは面倒なので、Adobe Color の カラーコントラストアナライザーツール で調べるのがおすすめ。レベルを「AAA」に設定し、合格マークが表示されれば問題ない。

通常の文章は問題なくても、ボックスなどで背景色を変える場合は注意しよう。以下のボックスはコントラスト比を 3 : 1 にしている。

特定の色を識別しづらいユーザーもいる、という点も考慮すべきだ。できるだけシンプルにしておけば、どのユーザーにとっても読みやすいブログになる。

#7 テキストリンクは青色＋下線を基準にする

CSS で何も設定しなければ、テキストリンクは青色（#0000FF）＋下線で表示される。

全体の配色をもとに色を変えたり下線を外すこともあるが、それがリンクであるとユーザーが気づくデザインでなければ意味がない。リンクを赤文字に、強調を青文字にしていると、大多数のユーザーは混乱してしまうだろう。

これはリンク？ただの装飾？

パソコンではカーソルを乗せればリンクだとわかるが、スマホではタップしないとわからない、という点も覚えておいてほしい。

以下のようなカード型リンク（ブログカード）も、リンクだと気づいていないユーザーがいる可能性はある。リンクを入れたのにまったくクリックされていないときは、デザインに問題がないか見直してみよう。

【2023年最新データ】主要サイトのテキストリンク色比較 – Reinx

リンクのデフォルトカラー（初期値）は青色「#0000ee」です。Googleなど主要サイトではどのような指定になっているのか、調査比較してみました。

re-inx.com

#8 装飾ルールを統一してできるだけシンプルに

本文の装飾が多すぎて、どこを強調したいのかまったく伝わってこない記事をよく見かける。吹き出しやボックスの多用も同じだ。

適切な装飾は読みやすさを補ってくれるが、過度な装飾は逆効果となるので気をつけよう。文字を打つたびに装飾するのではなく、本文をすべて書き終えてから装飾するとよい。

また、赤は否定 / 緑は肯定 など全体のルールを統一しておくと読みやすくなる。何色も使うと、執筆者にしかわからないルールになってしまうので、多くても 3 色ぐらいに留めておこう。下線やマーカーの色にも注意してほしい。

カラフルすぎるとまったく頭に入ってこない

さいごに

WordPress テーマは要素の配置に制限があっても、配色は自由にできる場合が多い。また、知識があればいかようにもカスタマイズできる。

オリジナリティを出すのは難しいかもしれないが、最低限のルールを守りつつ調整していこう。

自分だけのブログを作り上げて、楽しみながら運営してほしい。