訪問者を惹きつけるブログのデザイン、押さえておくべきポイントとは？

こんな悩みはありませんか？

「ブログのデザイン、いまいち決まらない・・・」
「どんなデザインにすればいいのか、よくわからない・・・」
「自己流でいじってみたけど、なんかダサい・・・」

訪問者を惹きつけるブログのデザインには、パターンや法則があります。
そのポイントを押さえておけば、デザインセンスや感覚に頼ることなく、デザイン性に優れたブログを誰でも構築できます。

この記事では、ブログTOPページと記事ページ、それぞれで押さえておくべきデザインのポイントを解説します。ぜひ、ブログのデザインを考えるときの参考にしてください。

ブログのデザインの重要性

ブログにおいて、見た目の美しさ・心地よさは重要な要素です。
TOPページ、記事ページともに、それは共通します。

ファッションと同じように、ブログのデザインやレイアウトにはトレンドがあります。

時代遅れの古臭いデザインのブログは、第一印象の悪さによって、すぐに離脱される可能性が高いです。ずっと同じデザインのまま、何年、何十年とブログを運用できるわけではありません。

ブログのデザインは「今っぽさ」が重要であり、時代の流れ・トレンドに合ったデザインを選択する必要があるのです。

こちらは、ブログ構築にオススメのWordPressテーマ、「Muum」のデザインです。

TCD85作目のWordPressテーマ「Muum（ムーム）」を見る。

「今っぽさ」を感じる、洗練されたデザインになっているのがわかると思います。
タブレットやスマホなど、モバイル環境での見え方もバッチリです。このデザインのブログを見て、「ダサい」「見にくい」と感じる人は、おそらくいないでしょう。

もちろん、デザインには人それぞれ好みがあるので、万人を納得させることは難しいかもしれません。

ただそれでも、大多数の人が「美しい」「見やすい」と感じるデザインやレイアウトというものは存在します。そして、パターンや法則を覚えたりトレンドを理解したりすれば、多くの読み手に好かれるブログデザインを構築するのは意外と簡単です。

では、具体的なデザインのポイントを見ていきましょう。

美しさ・心地よさを演出するTOPページのデザイン

TOPページでは、主にヘッダー部分が、ブログのデザインの印象を決定づけます。

フル幅ヘッダースライダー

インパクトのあるフル幅ヘッダースライダー。
画像＋キャッチフレーズを組み合わせて、ブログの世界観や、ブログを読むことで得られるメリットやベネフィットを訴求すると効果的です。

キャッチフレーズを考えるときは、以下の記事もぜひ参考にしてみてください。

ヘッダーカルーセル

記事のアイキャッチ画像とタイトルを、ヘッダーカルーセル（ヘッダースライダー）として表示させる形式です。

統一感を意識してアイキャッチ画像を選んでいれば、ブログの世界観やイメージが簡単に伝わります。また、特に読んでほしい記事（収益用の記事など）を露出させることもできます。

ヘッダーなしスタイル

ヘッダーを表示しないスタイルです。
「ブログ」というと、このスタイルを思い浮かべるかもしれません。シンプルかつオーソドックスですが、キチンとデザインされたテンプレート（テーマ）であれば、古臭さを感じさせることはありません。

オススメは、上記の画像のように、ヘッダー下でメルマガ登録や商品・サービスの購入に誘導するレイアウトです。ブログのABOUTページや特に読ませたい記事に誘導する形でもいいでしょう。

以上が、美しさ・心地よさを演出するTOPページのデザインの説明です。
次は、記事ページのデザインについて解説をしていきます。

デザイン性の良い記事ページを作成するポイント

記事ページでは、レイアウトや画像だけでなく、テキスト（文字・文章）もデザインの一種だと考えてください。

「サイドバーは表示すべきか？ それとも1カラムにすべきか？」といったことは、あまり本質的な問題ではありません。
それよりも、テキストの扱い方のほうが、読み手に与える印象において遥かに重要です。

以下では、記事ページのデザインで押さえておきたいポイントをリストアップしました。

テキストと画像の使い方を主に解説しています。
各項目を意識すれば、記事ページの読みやすさ・見やすさがアップするはずです。

また、WordPressの記事投稿画面の具体的な操作方法は、以下の記事が参考になります。WordPress初心者の方は、併せてチェックしてみてください。

それでは、見ていきましょう。

標準的なフォントを使う

文字のフォントは、読みやすさを大きく左右します。

ポイントは、多くの読み手が普段見慣れているフォントを採用することです。
おしゃれなフォントが読みやすいとは限りません（むしろ逆のことが多い）。オーソドックスなフォントを選択することをオススメします。

TCDテーマの場合、標準フォント（メイリオ・游ゴシック・游明朝）から選択可能です。

迷ったら、メイリオか游ゴシックを選ぶといいでしょう。大抵のブログに合います。

また、本文のフォントサイズは16px（12pt）がオススメです。
これより大きいと、間抜けな印象になりやすいです。逆に小さくすると、オシャレな印象にはなりますが、読みやすさが犠牲になります。

シンプルさを意識する

テキストはとにかくシンプルに。
マーカーを大量に引いたり、文字の大きさを不必要に変えたり、色文字を乱用したり、といったことをすると、ごちゃごちゃとした印象の記事になるからです。

特に、視覚を刺激する要素を1スクロール内に詰め込むと、読み手の視線が混乱します（どこに注意を向ければいいのかわからない）。
混乱した脳は常に「No」と判断するので、「もう読まなくていいや、ページ閉じよう」という結果になりやすいのです。

見出し以外の本文のフォントサイズは原則的に統一し、使う色も最低限にしましょう。

太字：通常の強調
赤字：ネガティブ、警告系の強調
青字：ポジティブ系の強調

といった形で、ルールを設定しておくと運用しやすいです。

見出し（Hタグ）を使う

区切りのない文章の塊が並んでいると、非常に読みづらいです。
見出し（Hタグ）を使って文章を区切ることで、読みやすさ・見やすさが向上します。

目安として、300〜500文字ごとに見出しを挿入することをオススメします。

箇条書きを使う

3つ以上何かを並列したり、物事のステップを説明したりするときは、箇条書きを使いましょう。通常のテキストで説明するよりも、遥かに理解しやすくなります。

また、箇条書きは目立つので、流し読みをする読み手の注意を引きやすいというメリットもあります。

項目を単純に並べる場合は、以下のように、番号なしの箇条書きを使います。

• ○○○○○○
• ○○○○○○
• ○○○○○○

物事のステップや順番を表すときは、以下のように、番号付きの箇条書きを使いましょう。

1. ○○○○○○
2. ○○○○○○
3. ○○○○○○

ただし、あまりに乱用すると読み手の視線が混乱するので、ピンポイントで使うといいでしょう。

囲み枠で目立たせる

特に強調したい部分や、他の文章と区別して見せたい部分には、囲み枠（ボックス）がオススメです。読み手の視線を強制的に引きつける効果があります。

囲み枠も箇条書きと同じく、乱発しないよう注意してください。本当に大事な箇所、目立たせたい箇所でのみ使いましょう。

吹き出しで視覚・直感に訴える

メッセージアプリ風の吹き出しをピンポイントで使うのもいいでしょう。
情報を視覚的・直感的に受け取れるので、読み手の負担が軽減します。

注意したいのは、吹き出しに入れる文章量です。

「それ、吹き出しじゃなくてもいいのでは？」というくらい大量のテキストを詰め込むと、視覚的・直感的に情報を受け取れるという、吹き出しのメリットが機能しなくなるからです。

会話風の短い文章を意識しましょう。

改行を適度に入れる

改行されていない文章の塊を読むのは、読み手にとってかなりの負担です。

改行がないと、ほとんどの読み手は「読むの大変そうだなぁ・・・」 と感じて、離脱します。改行を適度に入れて、パッと見の読みやすさを向上させましょう。

オススメは、文の流れが変わるタイミング（接続詞を使うタイミング）で改行することです。「しかし〜」 「一方〜」 「さらに〜」 などを使うタイミングで改行すれば、読み手は話の転換点を理解しやすくなります。

漢字とひらがなのバランスを意識する

漢字が多すぎる文章は読みづらいですし、硬い印象も与えてしまいます。

「出来る」 「余り」 などの漢字は、ひらがなに直したほうが、パッと見の読みやすさが向上するのでオススメです。以下のリストの漢字は、ひらがなに直すことをオススメします。

記事カードリンクを使う

内部リンクを設置するときは、通常のリンクよりも、以下のようなカード型リンクのほうが目立ちます。

カード型リンクは視認性に優れているので、流し読みをする読み手の注意を引きやすいです。

WordPressなら、URLをそのまま記載するだけで、自動的に出力されます。
TCDテーマの場合、「関連記事カードリンク」 というクイックタグが用意されていて、こちらを使うと、よりデザイン性に優れたカード型リンクを出力できます。

アイキャッチ画像に統一感を持たせる

ここでいう統一感とは、すべて同じ配色にしろ、ということではありません。

そうではなく、画像のテイストを記事間で統一すべき、ということです。
日本人素材と外国人素材、あるいはイラストと写真が混在していたりすると、ブログの雰囲気がチグハグになります。

以下の記事は、アイキャッチ画像選定の参考になるので、ぜひチェックしてみてください。

また、アイキャッチ画像の選定が面倒な場合は、あえて同じ画像素材を使い回す方法もアリです（各記事のタイトルやキャッチコピーを挿入するといい）。

以下の記事でご紹介しているCanvaというツールを使えば、テキスト挿入の加工は簡単にできます。

画像の横幅を統一する

記事に挿入する画像は、記事ページのカラムサイズに統一しておきましょう。
記事内の画像サイズがチグハグだと、整っていない印象を与えてしまうからです。

縦のサイズ（高さ）は画像によって変わってきますが、横幅はすべて統一することをオススメします。

オリジナル画像を使う

図解や図表などのオリジナル画像を挿入するのも効果的です。
記事がリッチな印象になりますし、読み手の理解度も増します。記憶にも残りやすいです。

「Canva」 というツールを使えば、上記のような画像は比較的簡単に作れます。

まとめ

ここまで、訪問者を惹きつけるブログのデザインについて解説してきました。

訪問者を惹きつけるブログのデザインには、パターンや法則があります。
TOPページ、記事ページにおいて、今回の記事で解説したポイントを実践すれば、センスや感覚に頼ることなく、デザイン性に優れたブログを誰でも構築できます。

TCDでは、ブログ構築に適したWordPressテーマを多数販売しています。
いずれも、デザインが既に完成されているので、細かなカスタマイズは不要。テーマをインストールして、綺麗な画像素材をはめ込めば、デザイン性に優れたブログを簡単に構築できます。

以下のページから、ブログにオススメのWordPressテーマをぜひチェックしてみてください。
ブログのWordPressテーマ一覧