ブログのトップページの作り方【デザイン・内容の決め方】

こんな疑問にお答えします。

ブログの顔ともいえるトップページ。重要なページでもあるのですが、どんな風に作ればいいのかよくわからないという方も多いはず。

また、できればおしゃれなトップになるように作っていきたいですよね。

ブログのトップページは大きく3つのレイアウトがあるので、レイアウトデザインごとの作り方を解説します。

機能的でおしゃれなブログトップの作り方を習得しましょう。

ブログトップのデザインは大きく3種類

ブログのトップページはおおむね下記の3パターンのレイアウトデザインに分類できます。

一覧型

一覧型のトップページとは、記事の一覧がずらっと表示されるタイプのレイアウトデザインです。アイキャッチ画像を大きく見せるのでカード型ともいわれます。

メリット	デメリット
新着記事がどれか伝えやすい 設定が簡単 サイトのボリュームを考慮しなくていい 再訪問する読者が多いブログに最適	オーソドックスなデザインになりがち 印象に残りにくい 重要なページにアクセスされにくい

基本は新しい記事の順に並ぶスタイルなので、再訪問した際に新着記事を確認するのに最適です。

また、ブログの全体ボリュームを伝えにくい形式なので、逆に立ち上げたばかりのブログにも適しています。

サイト型

サイト型のトップページは、最近の主流になりつつあるトップページの形状です。

メリット	デメリット
レイアウトの自由度が高い おしゃれなデザインを作りやすい 初見の読者に重要な内容を伝えやすい	設定難易度が高い サイトボリュームがないとスカスカになる デザインに統一感が必要になる

サイト型ブログトップは、ページの要素を「すべて手動」で設定できるため、自由度が高いのが最大の特徴です。

作成難易度はやや高くなりますが、きちんと作りこむことができればおしゃれで機能的なトップページを作ることができます。

記事型

記事型のブログトップは、主に記事数の少ない特化ブログにお勧めのデザインです。トップページ自体も記事にしてしまうスタイルです。

メリット	デメリット
小規模な特化ブログに最適 設定が簡単 収益までの導線を絞りやすい	トップページ感がないデザイン ブログの全体像を伝えにくい 記事を探しにくい

ロードマップやまとめ記事をトップページに設定し、成約まで一直線に向かわせたい小規模な特化ブログによくみられるデザインです。

ブログのトップページのデザインの選び方

上記を踏まえると、ブログトップは下記のように選ぶとよいでしょう

• 商標特化型ブログ → 記事型
• 30記事未満のブログ → 一覧型
• 30記事以上あるが、スキル的にサイト型にするのが難しい場合 → 一覧型
• 上記以外 → サイト型

一覧型ブログトップの作り方

一覧型のブログトップは自動で記事が並ぶため、多くの場合WordPressテーマの設定画面で設定すればいいだけです。

サイト型のブログトップの作り方

サイト型のブログトップは

記事型ブログトップの作り方

記事型のブログトップは固定ページを作成し、WordPressの設定で設定するだけです。

ブログトップをおしゃれに仕上げるコツ

ブログのトップページデザインをおしゃれにするコツを解説します。

ブログのトップページのデザインをおしゃれにするには、通常のブログ記事のデザインをおしゃれにするコツに加え、

• 意外性
• インパクト
• 統一感

を「演出」するといいです。

全面ブロックを使ってメリハリをつける

ブログは全体幅が指定されており、「端から端」はこの領域の中に収まります。

しかし画面全域を使える全面ブロック（フルワイドブロックやヒーローイメージ）を使うと、コンテンツを大きく目立たせることができます。

さらにパララックス効果をつけたり、動画を再生するといった動きをつけたりすることで、強いインパクトを生むことができます。

曲線や斜線を入れる

ブログに限らず、WEBデザインにおいては、垂直や水平といった区切りや境界があるのが普通です。

読者は垂直や水平を使ったデザインに慣れているので、既視感が生まれます。

そこに、曲線・波・斜線という要素が入ると既視感がなくなり意外性を感じ、集中度が高まります。

カラムブロックを使って横並びにする

ブログは文章にせよ、画像にせよ、ボタンにせよ、縦に積んでいくデザインが基本です。

カラムブロックは、ブログの文章領域内を分割する役割を持つブロックです。

テーマによっては使いやすくカスタマイズされていたり、専用のオリジナルブロックを実装しているものもあります。

左に画像付きで固定の記事、右にテキストのみで新着順のような形で横並びにした例

通常縦に積まれるブロックを、横に並べることができるようにすることで一度に見えるコンテンツ量が増えると同時に、意外性も演出できます。

ただし、横方向を活用できるのはPCのみで、スマホになると画面幅が狭いので回り込みの処理が行われて縦に積まれるので注意しましょう。

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

トップページに配置する要素で大きな面積を取るのが記事一覧です。

デザインは画面に占める面積が大きいものほど効果が出やすいです。アイキャッチ画像は一つ一つは小さくても、ブロック全体でみると大きな面積を取ります。

アイキャッチ画像に一定の統一感を感じることができると、「整っている感」が出ます。

• レイアウトを同じにする
• 色の使い方を統一する
• 同じ作者の作ったイラストを使う

などやり方は様々ですが、何かしら統一感を感じられるようなアイキャッチ画像を作りましょう。

有料WordPressテーマを使う

有料テーマには、トップページのカスタマイズに適したオリジナルブロックが豊富にあります。

とりわけ、サイト型のトップページを作るなら、無料テーマよりも有料テーマを使うほうが圧倒的にできることが増えます。

また、デザインの調整には欠かせないフォントの設定・余白の設定・配色の設定が管理画面から行うことができるので、試しながらデザインを作りこんでいくことができます。

稼げるトップページに仕上げるコツ

掲載するコンテンツ内容の決め方はトップページの役割

ブログのトップページの最大の役割は奥ページに読者を誘導することです。

多くのブロガーさんが「おしゃれなデザインに仕上げたい」と考えますが、どちらかといえばおしゃれにすることよりも、奥ページに誘導できることに集中した方が稼げるブログにできます。

優先すべき要素の決め方はトップページの使われ方

ウェブページは、読者の見たいものから順に配置するのが鉄則です。

読者の見たいものは、ページの役割を考えると見えてきます。

ブログのトップページはサイトの入り口になることは非常に少ないです。

しかし、回遊の起点になる機会は多いので、別のページに遷移するのに必要な要素から配置していくとよいでしょう。

ブログのトップページは離脱率に着目しよう

ブログのトップページがきちんと有効に機能していれば、トップページを最後に離脱するユーザーは減少するはずです（広告のクリックで離脱する場合を除きます）。

特に記事を読んで満足したため、他にもよい記事がないかを確認したくてトップページに来たユーザーが読みたい記事を見つけられずに閲覧を終了してしまうのは避けたいところ。

• そもそも次に読む記事を探すためにトップページに来なくても済むように、各ページで読者が興味を持つはずのページにリンクを貼る
• それでもトップに来たのなら、次に読むべき記事を探す手がかりになる情報を提供する

といったことを行って離脱率が上がらないようにしましょう。目安としては40%以下になっていれば問題ないはずです。

参考までに、当サイトのトップページは離脱率が21%、直帰率が35%でした（ともに2023年3月）。

まとめ：ブログのトップは有効に機能しているかを確認しよう

本記事ではブログのトップページのデザインをどうするかや、コンテンツ内容について解説しました。

トップページは必ずしも入口にならないこともあって、どう作れば良いのか迷うのも当然です。

最終的に稼げるブログにするために、トップページは離脱率を下げることを目標に、PDCAを回すといいですよ。

掲載するコンテンツや、デザインはそのための手段です。

おしゃれなブログデザインにするコツ