おしゃれでわかりやすいブログにデザインするコツ7選｜おすすめテーマも紹介

サイトの第一印象を決めるものだから

対人関係において「第一印象は3秒で決まる」と言われますが、これはWebサイト（ブログ）にも当てはまります。ブログに訪れたユーザーは、下記のような点を3秒で判断します。

• ターゲットは誰か
• 読み進める価値はあるか
• 自分にとって有益な情報があるか

上記のような点から「このブログが自分にとって有益かどうか」、つまり読み進めるかどうかをユーザーはサイトの第一印象から決めるのです。そのため、第一印象が好ましくないサイトの場合は、いくら有益な内容のブログを書いても読んでもらえない可能性が高くなります。それどころかブログに訪問してすぐに引き返されてしまう確率（直帰率）が上がってしまいます。

直帰率はただの目安に過ぎませんが、デザイン性が悪いことによりサイトの滞在時間が短くなるため、検索結果の順位（SEO：検索エンジン最適化）に悪影響を及ぼします。そうなるとサイトの流入数（訪問者数）が減る＝収益も減る可能性が高いので、ブログにおいてもデザインはおろそかにできないのです。

他のブログと差別化できるから

たとえば「WordPress　始め方」の検索ワードでユーザーが知りたい情報は「WordPressの始め方（手順）」です。こうした検索意図を考慮して記事を書くと、どうしても同じような内容になります。検索ワードにもよりますが、記事の内容での差別化はほぼ不可能と言えるのです。

しかし、デザインはブログ運営社の好みによって自由に設定できるので他のブログとの差別化が容易にできます。たとえ記事の内容は似たり寄ったりでもデザインによる差別化ができれば、ユーザーの印象に残りやすくなるので、再訪の可能性を高めてくれます。

ユーザーエクスペリエンスが向上するから

ユーザーエクスペリエンスとは、ユーザーがブログやサイトに訪問・利用して感じる使いやすさや印象などのことを言います。ユーザーエクスペリエンス（使い心地）とデザインに何の関係があるのか、と思われるかもしれませんが、デザインには色や画像など、ブログの雰囲気を左右する要素だけでなく、記事やメニューボタン、検索窓などのレイアウトも含まれます。つまり、デザインを良くすることで、ユーザーの使いやすさ（ユーザーエクスペリエンス）が向上するのです。

ユーザーエクスペリエンスが向上すると、ブログの滞在時間や回遊率の向上が期待できるので、間接的にではありますが、SEOにも良い影響を及ぼします。これにより検索結果の順位が上がれば、ブログへの流入数増加にも期待が持てます。

枠や表、箇条書きを使用する

文章に比べて枠や表、箇条書きは視認性が高く、「何を書いているのか」がすぐに分かります。たとえば以下のような感じです。

■NG例■
「無料ブログには、アメーバブログ、はてなブログ、ライブドアブログ、note、FC2ブログなどがあります。」
↓
■OK例■
無料ブログには下記のようなものがあります。

• アメーバブログ
• はてなブログ
• ライブドアブログ
• note
• FC2ブログ

枠や表、箇条書きは下記のようなケースでの使用がおすすめです。

【枠・箇条書き・表を上手に使うポイント】

• 枠…「おすすめの人」や「注意点」、「コツ」など強調したいポイントがある場合
• 箇条書き…上記の例のように並列の情報を記載する場合
• 表…並列の情報を比較する場合（上記の例であれば、「特徴」や「機能」、「おすすめの人」など）

重要な部分のみ文字装飾をおこなう

文字装飾には、重要な点やポイントを際立たせてくれる役割があります。先にも触れていますが、ユーザーは何かしらの課題の解決策を求めてブログに訪問しています。その課題の解決策として重要な部分を赤字や太字、下線などで目立たせることで視認性を上げれば、極端な話、ユーザーは文章を読まなくても課題の解決ができるようになります。

ただし、そこかしこに文字装飾を施してしまうのは逆効果です。重要な部分が伝わりづらいため、なかなか課題解決ができない＝ユーザーエクスペリエンスの悪いブログになってしまいます。あくまで文字装飾は重要な部分のみにしておきましょう。また同じ理由で、文字装飾は3～4パターンに留めておくことをおすすめします。パターンがありすぎると目移りしてしまって、記事を読むどころではなくなってしまいます。

【文字装飾を使うときのポイント】

• 重要な部分にのみ装飾する
• 文字装飾のパターンは3～4パターンにおさえる

適度に画像を挿入する

文章だけがズラっと並んでいるブログは、読んでいてしんどくなります。そのため箸休め的に、適度に画像を挿入するのがおすすめです。暗に話の区切りを伝えることもできるため、記事全体にリズムが生まれて読み進めやすくなる効果も期待できます。

また、文章で書くのではなく、画像を使って図解するのもおすすめです。パッと見て内容を理解できるため、ユーザーが文章を読まなくても課題の解決策を得られる、良いユーザーエクスペリエンスを与えられるでしょう。ただし、画像の入れすぎはうるさい印象を与えてしまうので要注意。中見出し（H2）ごとに1枚程度におさえておきましょう。また、画像のサイズやテイストがバラバラだとおしゃれ感が薄れてしまうので、統一感を意識しておくと良いでしょう。

【画像を挿入する際のポイント】

• 画像の設置は中見出し（H2）ごとに1枚がベスト
• 画像のサイズ、テイストは統一する

表記ゆれを無くす

表記ゆれとは「同じ意味を持つ言葉に対して、異なる表記をする」ことです。たとえば「WordPress」と「ワードプレス」といった感じです。また、誤字脱字や英数字の半角・全角なども表記ゆれに含まれます。

「意味が伝わればよいじゃないか」と思われるかもしれませんが、あまりに表記ゆれが多いと、ユーザーは記事の内容そっちのけで表記ゆればかりに気を取られてしまいます。本来の目的である「課題の解決」も達成しにくくなるので、できるだけ表記ゆれをなくす努力をしましょう。

とはいえ目視だけで表記ゆれをチェックするのは大変なので、ツールの活用をおすすめします。有料のツールもありますが、まずはMicrosoft社が提供しているWordを使用してみましょう。文章校正機能を使えば、表記ゆれをはじめ、誤字脱字やスペルミスがある場合に、下線で教えてくれます。

【表記ゆれを無くすポイント】

• Wordの文章校正機能を使う

漢字・かな・カタカナのバランスを整える

たとえば下記のA・Bであれば、どちらの文章が読みやすいと感じるでしょうか。

• A：御洒落な外観の建物が六本木に建設されていた
• B：おしゃれなデザインの建物が六本木に建設されていた

ほとんどの人がAは読みにくいと感じたはずです。このように漢字の割合が多いと読みにくいうえに、堅苦しい印象を与える文章になります。忙しい現代人はブログやWebサイトを隙間時間で閲覧しています。そのため、「読むのに時間がかかる＝理解に時間がかかる」文章は嫌煙されがち。スラスラ読める文章にするためにも、文章の見た目にもこだわりましょう。

一般的には漢字3割、ひらがな7割の文章が読みやすいとされています。また適度にカタカナも使用すると、文章の見た目にメリハリが生まれて読みやすくなります。

【漢字・かな・カタカナのバランスを整えるポイント】

• 漢字3割、ひらがな7割
• 適度にカタカナも使用する

アイコンや吹き出しを活用する

ブログはテキストメインの媒体であるため、どうしても文字の割合が多くなりますが、アイコンや吹き出しを利用することで、情報を伝えながらユーザーに休息を与えられます。また、アイコンを使用することで親近感を持ってもらいやすくなるので、ブログへの信頼度も高まるでしょう。

ただし、文字装飾や画像と同じで多用しすぎると、うるさい印象を与えてしまううえに伝えたいポイントもかすんでしまいます。そのため、アイコンや吹き出しの使用はここぞというポイントのみにしましょう。

【アイコンや吹き出しを活用するポイント】

• 重要なポイントを伝えるときに使う
• うるさい印象を与えてしまうので多用は避ける

広告を貼りすぎない

ブログやWebサイトを閲覧しているときに、スクロールする際に誤って広告をクリックしてしまった経験がある人も多いのではないでしょうか。集中して記事を読んでいたのに、押すつもりのなかった広告をクリックして別のページに飛ばされてしまうと一気に読む気が削がれます。広告をクリックしなかったとしても多すぎる広告は記事を読むのに邪魔でしかないので、収益目的だとしてもブログに貼る広告の数や位置には気を配りましょう。

また、あまりに広告が多いと読みにくいだけでなく、ユーザーからの信頼も損なうことになるので長期的に見て損でしかありません。ブログにおいて「読まれる」ことが収益化への近道なので、たくさん貼りたい気持ちはグッと我慢しておきましょう。

【広告を貼りすぎないポイント】

• ユーザーにとって広告は邪魔でしかないことを心得る

SWELL

引用元：SWELL

SWELLは株式会社LOOSが提供する、シンプルでおしゃれなデザインのブログを作れる有料テーマです。簡単に記事が書けるWordPressのブロックエディタに対応。SWELL専用ブロックもあるため、直感的な操作が可能で、HTMLやCSSなどの知識がなくてもブログのカスタマイズを楽しめます。またデザイン面だけでなく、表示速度が速いことやSWELL専用のSEO対策プラグインがあることなど、SEOに強い点もおすすめできるポイントです。

価格は17,600円（税込）と有料テーマのなかでも高額な部類に入りますが、それに見合った豊富な機能を有しているため、買って損はないでしょう。

SWELLの詳細を見る

SNOW MONKEY

引用元：SNOW MONKEY

株式会社モンキーレンチが販売するSNOW MONKEYは、Twitterや動画のURLをそのまま貼り付けても、自動で最適なレイアウトに調整してくれるなど、初心者にも利用しやすいように配慮されているテーマです。デザインはいたってシンプル。ブロックエディタにも対応していますが、無料の専用プラグインである「Snow Monkey Block」「Snow Monkey Editor」と併用することでさらに使い勝手が良くなります。

買いきりの有料テーマが多いなか、SNOW MONKEYは年単位のサブスクリプションを採用。16,500円と少々高めの設定ですが、金額に見合ったスペックとサポートが受けられるうえにWordPressのアップデートにもいち早く対応しているので、安心してブログを運営できます。SNOW MONKEYでは公式サイトでトライアル版を配布しているので、まずはトライアル版を試してみることをおすすめします。

SNOW MONKEYの詳細を見る

JIN

引用元：JIN

JINはCrossPieceが提供するポップでかわいいデザインが好きな人向きのテーマです。淡めの色使いなので、女性向け商品を取り扱うのに最適。11個あるサンプルからデザインを選択するだけで、簡単におしゃれなブログを作れます。公式プラグインをインストールすれば、さらにデザインの幅が広がります。

アフィリエイターの方が開発しているので、デザイン性が高いだけでなく、アフィリエイトやブログにおいてかゆいところに手が届く設計なのも嬉しいポイント。また、公式HPには解説動画もあるので、導入・カスタマイズしやすいうえにJINユーザーが多いので、疑問を解決しやすいなど、初心者に優しいテーマとなっています。

JINの詳細を見る

COCOON

引用元：Cocoon

Cocoonは「わいひらさん」という個人の方が提供している有料級の機能を備えた無料のテーマです。ブログ運営や収益化に必要な機能をほとんど備えているうえにシンプルなデザインが人気を博しています。Cocoon独自のブロックもあるため、カスタマイズの難易度も低めです。公式サイトにはマニュアルも掲載されているので、初心者でも安心して利用できます。

ただし、独自機能が多いため、のちのちテーマを乗り換える場合には苦労するでしょう。また、プラグインが基本いらないほどの機能を備えている分、テーマ自体が重いので表示速度は遅くなりがちな点には注意が必要です。

Cocoonの詳細を見る

yStandard

引用元：yStandard

yStandardは「よしあかつきさん」が提供する無料のテーマです。「カスタマイズありき」を謳っているとおり、HTMLやCSSなどでのカスタマイズを楽しむためのテーマであるため、専門知識のない初心者にはおすすめできないテーマです。ただし公式サイトにインストール方法や各種マニュアルがあるので、高度なデザインでなければ初心者でも特に問題はないと言えるでしょう。

カスタマイズ前の状態は超がつくほどシンプルなデザインですが、そのシンプルさを活かした洗練されたサイトを作ることもできます。SNSのシェアボタンなど、標準で備わっている機能のデザイン性が高いのも特徴です。あくまで中～上級者向けのテーマであるため、フォーラムのサポートも薄めであるため、疑問や操作については自力で調べる必要があることを留意しておきましょう。

yStandardの詳細を見る

副業コンパス

引用元：副業コンパス

副業コンパスはクニトミさんが運営する、余計なものはそぎ落としたシンプルなデザインのブログです。ホーム画面には上記のファーストビューと人気記事一覧、検索窓、運営社情報など、必要最低限の要素のみであるため、ユーザーがどこを見ればよいか迷うこともありません。シンプルで統一性のあるデザインが好きな人に参考となるブログです。

トバログ

引用元：トバログ

ガジェット系の紹介を中心にブログを運営されているトバログ。おしゃれなセレクトショップのようなファーストビューが印象的なブログです。余白を広めにとっているため、各カテゴリの堺がはっきりしており、ユーザーが情報を探すストレスを抱えずに済む点は参考例としてマネしたいデザインでしょう。

Tsuzuki Blog

引用元：Tsuzuki Blog

「ブログでの稼ぎ方」を発信しているTsuzuki Blogさんのブログは至ってシンプル。色使いも黒と白、グレーの3色に抑えており、全体的にまとまりがあります。カテゴリのタイトル部分には、背景にぼかした写真を使用するなど、シンプルながらおしゃれさを感じさせる小技を効かせています。