ブログのトップページの作り方は?基本のデザインや構成、手順やポイントを解説

デザイン
blog-toppage_thumbnail デザイン

ブログ運営初心者の方のなかには、ブログの立ち上げ方がわからない方や、離脱者の少ないトップページ作成のコツが知りたい方もいるのではないでしょうか。

本記事では、ブログ運営初心者の方向けに、ブログのトップページのつくり方やコツを紹介します。

ユーザーが離脱しないデザインや構成も併せて解説します。

WordPressのおすすめなデザインテーマも紹介するため、これから収益化を検討されている方も参考にしてみてください。

ブログのトップページとは?

ブログのトップページとは、ブログ記事を開いたときに、ユーザーが一番最初に目にするページのことです。

トップページには、主に以下のような項目が掲載されます。

  • ブログのタイトルや概要
  • 最新記事の一覧
  • 記事カテゴリー
  • アーカイブ

トップページは、ユーザーがブログの全体像をつかんだり、関心のある記事にアクセスしたりするためのナビゲーション機能を果たします。

つまり、自分のブログの顔となる部分のことで、ユーザーにとって見やすい形であることが1番重要なポイントといえます。

ブログのトップページでおすすめの形式は、以下の2つです。

  • サイト型
  • ブログ型

サイト型

トップページは、ブログのもっとも重要なページであり、ブログ全体の印象を決定づけるため、見やすくわかりやすいデザインとコンテンツを用いることが重要です。

また、サイトのロゴやブログのタイトルが表示され、ブログのコンセプトや方向性を示すこともあります。

サイト型のトップページには、新着記事や人気記事など、カテゴリーやタグを用いた記事の絞り込み表示機能などがあります。

サイト型のトップページでは、カスタマイズも自分好みにでき、オリジナリティを発揮できます。

トップページをサイト型にするメリットとデメリットは、以下のとおりです。

メリットデメリッ
一目で記事のカテゴリがわかる日付順では記事が読めない
読みたい記事をすぐに見つけられる興味のない記事は読んでもらいにくい
オリジナリティを発揮できる

ブログ型

ブログ型トップページは、最新記事が一覧表示されるようになる仕組みです。

一般的なブログのトップページは、ブログ型のタイプです。

最新の記事が上から順に表示され、タイトルやサムネイル画像をクリックすると、その記事の詳細ページに移動できます。

また、サイドバーやヘッダーには、過去の記事のアーカイブやカテゴリー、タグなどが表示され、ユーザーは関心のある記事を見つけられます。

このタイプのトップページは、ブログの更新頻度が高く、コンテンツが豊富な場合に最適です。

新しい記事を投稿するたびに、ユーザーがトップページを訪問して、最新情報をチェックできるようになっています。

しかし、いざ読みたい記事があってもサイト型のように一目で記事がどこにあるのかわかりません。

記事が多くなれば多くなるほど、記事を探す手間がかかる点がデメリットといえるでしょう。

メリットデメリット
最新記事がすぐにわかるブログ全体の記事が一目でわかりにくい
日付順で記事が読める読みたい記事への到達に時間がかかる

ブログのトップページにおける役割

前述したとおり、ブログのトップページは、「ブログの顔」です。

しかし、トップページに辿り着くユーザーは、全体の20%といわれています。

トップページが見られていない理由は、検索サイトからの訪問者のほとんどが、トップページではなく記事ページから来るためです。

では、ブログのトップページにおける役割はどのようなことなのでしょうか。

トップページの主な役割は、以下の3つです。

  • ブログの自己紹介
  • 記事への誘導
  • 有益な情報の共有

ブログの自己紹介

まずは、ユーザーに必要とされる情報があると知ってもらうために「どのようなサイトか」を伝える必要があります。

つまり、ブログの自己紹介をするということです。

自己紹介といっても、ただサイトの内容を伝えるだけでは意味がありません。

ユーザーが離脱せず読み進めてもらうために、以下のことがユーザーに伝わるようにしましょう。

  • ターゲット
  • 欲しい情報があるか
  • どんなお得情報があるか

自分が役立つ情報が得られると思える、またはユーザーに合った内容の記事を書いているブログだと、ユーザーにとって魅力的に映り、読みたくなるはずです。

人間同士も第一印象が大切なように、ブログも最初の印象が重要です。

ただし、普通のことを書いてもユーザーの興味を惹きつけるのは難しいでしょう。

BloBiz編集部
BloBiz編集部

ユーザーを惹きつけるためには、簡潔に魅力的な言葉で伝えることがベストです!

記事への誘導係

トップページの役割は、ユーザーを記事に誘導することであり、記事の誘導係の役割を果たします。

トップページが見やすく、ユーザーにとって重要な情報をわかりやすく提示することで、ユーザーの興味を引き、記事へ誘導できます。

また、デザインやレイアウトはシンプルかつ、ユーザーがストレスを感じないようなものにすると効果的です。

有益な情報の共有

ユーザーの興味が掴めたら、今度はユーザーにとって有益な情報を発信します。

ブログは、つい自分が伝えたいことを執筆しがちですが、ユーザー視線で有益な情報の共有を図るようにしましょう。

ユーザーにとって、「ブログを読んで良かった」「この記事を読んで悩みが解決した」と感じてもらう記事作成が必要です。

ユーザーの求めていることを意識しながら構成を考えるといいでしょう。

ブログのトップページの基本構成

ブログのトップページの役割がわかったところで、さっそくトップページを作ってみましょう。

トップページの基本構成は、以下の3つです。

  • ファーストビュー
  • コンテンツ情報
  • 運営者情報

ファーストビュー

ファーストビューとは、ブログを開いたときに1番最初に表示されるページのことです。

この第一印象で、ユーザーがブログを読むのか、離脱するのかが決まってしまう重要な部分です。

離脱者を少なくするためには、以下3つがわかるように設定する必要があります。

  1. ターゲット
  2. 有益情報
  3. 概要

短くてわかりやすい文章と親しみやすい画像を使用し、誰がターゲットなのかを中心に訴求しましょう。

さらに、どんな記事があるかを示すメニュー名なども設けてみましょう。

コンテンツ情報

メインとなる情報は、ユーザーが欲しい情報をピックアップして伝えます。

その際、キーワードを含めることで、SEO対策にも繋がります。

大切なのは、ユーザーが求める情報にスムーズにアクセスできるようにすることです。

しかし、カテゴリーや配置がわかりづらい場合は、ほかのサイトを参考にすることをおすすめします。

BloBiz編集部
BloBiz編集部

ほかのサイトを見ることで、自分にとっても有益になる情報があります!

運営者情報

最後に、自分自身についての情報を入れることも大切です。

運営者情報は、プロフィールだけでなく、運営者のSNSリンクを掲載することが望ましいです。

運営者情報を入れることによって、ユーザーからの信頼度や、Googleからの評価も高くなり、将来的収益にも繋がるでしょう。

WordPressによるトップページの作り方

さまざまなブログサイトがあるなかで、近年WordPressというブログサービスをよく耳にする方もいるのではないでしょうか。

WordPressはサイト型で、かつさまざまなテーマを自分に合わせて選ぶことができ、カスタマイズも自由自在です。

ここからは、WordPressでのトップページの作り方について解説します。

1. トップページ用固定ページの作成

ブログの解説と聞くと、難しく感じる方もいると思いますが、以下の手順で簡単に作成できます。

  1. WordPress管理画面へログイン
  2. 左にあるメニュー固定ページ
  3. 新規追加
  4. トップページに表示する内容を作成
  5. 「公開」ボタンを押す

上記のように設定することで、トップページとして表示される固定ページが作成されます。

固定ページを設定することで、サイトのイメージや特徴をわかりやすく伝えることができ、ユーザーにとっても親しみやすくなります。

2. 固定ページをトップページに設定

固定ページができたら、トップページに設定しましょう。

  1. WordPress管理画面ログイン
  2. 左のメニューから設定
  3. 表示設定をクリック     
  4. ホームページの表示のところで「固定ページ」を選択   
  5. 「固定ページ」の下にあるホームページ横を「固定ページ」へ 
  6. 「変更を保存」をクリック

これでトップページの完成です。

固定ページをトップページにすることで、サイトの導入部分を自分でカスタマイズできるだけでなく、ユーザーに重要な情報をすばやく伝えられます。

ブログのトップページを作成する4つのポイント

トップページは、ユーザーの目に留まるようなものでなければいけません。

以下で、3つのポイントを紹介します。

レイアウトを重視する

レイアウトを重視することは基本です。

ここでのポイントは、人目に留まるオシャレなデザイン、かつユーザーの知りたい情報がすぐにわかることが重要です。

つまり、オシャレなデザインに惹き寄せられても、情報がどこにあるかわからなければユーザーはブログから離れてしまうため、注意しましょう。

スマホ表示を確認する

ユーザーはパソコンだけでなくスマートフォンからもブログを閲覧します。

そのため、記事を投稿する前に、スマートフォンからも読みやすいレイアウトになっているかを確認しましょう。

BloBiz編集部
BloBiz編集部

パソコンとスマートフォンでは表示されるレイアウトが変わるため、文章の配列などに対する配慮が必要です!

配色を考慮する

「色を多く使えば目立つ」というわけではなく、ブログや会社のイメージカラーに統一することが重要です。

たくさんの色を使うよりも、統一感がある方が見栄えが良く、ブランディングにも繋がります。

たとえば、ブログのイメージカラーが青であれば、記事タイトルや背景色にも青を使うなど、統一感のある配色を心がけましょう。

また、会社であれば会社のイメージカラーで統一することで、ブランドイメージをより強固にできます。

文字数・情報量に注意する

文字数や情報量にも考慮しましょう。

もし、ブログが文字ばかりの画面だった場合、ユーザーが読む気をなくしてしまう可能性があります。

文字数の目安は、スクロールせずに読める範囲で、本文は100~200文字までで記事を書きましょう。

また、主とする情報は1〜2個でまとめましょう。

おしゃれなトップページが作れるデザインテーマ5選

WordPressでブログを立ち上げる際に、テーマで迷う方も多いのではないでしょうか。

以下で、おしゃれなトップページを作れるデザインテーマを紹介します。

無料版から有料版まであるため、自分に合ったテーマを探してみてください。

Cocoon(コクーン)

Cocoon(コクーン)は「スキン」というカスタマイズ機能があり、作成したスキンをほかの方と共有できます。

「スキン」は、Cocoon公式ホームページで紹介されているため、デザインに悩んだらCocoonの公式ホームページからお気に入りのデザインを見つけ簡単に着せ替えることが可能です。

無料で利用できるため、費用をかけずにWordPressでブログを始めたい方におすすめです。

SWELL(スウェル)

SWELL(スウェル)は、以下に配慮された有料版のテーマになります。

  • 簡単
  • シンプル
  • 楽しく
  • 素早く執筆

価格は17,600円(税込)でお手頃とはいえませんが、とにかく使いやすいです。

そして、SWELL最大のメリットは、デモサイトのデザインをそのままコピーできる仕組みがあることです。

サイトで気に入ったデザインがあれば、サイトを丸ごとコピーできるため、デザインに自信がない方でも簡単に立ち上げられます。

Affinger(アフィンガー)

Affinger(アフィンガー)は、ブログで収益を上げることに特化したテーマです。

スタイリッシュなデザインでカスタマイズ性に優れています。

Affingerのメリットは、収益化に特化しているというだけあり、収益の目的達成への支援機能が豊富に組み込まれているところです。

価格は14,800円(税込)です。

JIN(ジン)

JIN(ジン)は、優しく可愛らしいデザインのテーマです。

読み手と書き手の両者が使いやすいように考慮されています。

デザインが柔らかく、どちらかといえばフェミニン要素も入っているため、柔らかいイメージのブログを作りたい方におすすめです。

価格は14,800円(税込)です。

SANGO(サンゴ)

SANGO(サンゴ)は、柔らかくナチュラルなイメージのデザインテーマです。

分析機能や収益化に対する支援機能を充実させており、長期的なサイト改善がしやすい点が魅力です。

価格は14,800円(税込)です。

トップページはサイトの顔となる存在

今回は、ブログのトップページの作り方や、WordPressを使う方に向けておすすめのテーマについて紹介しました。

ブログのトップページは、最初に開くページのことであり、離脱率を低くするために工夫が必要です。

ブログ運営を始める前に、ターゲットを決めてからブログを立ち上げてみましょう。

ブログ開設に関する悩み相談を無料受付中!

ブログ運営で稼げるかどうかを左右するのは、はじめにどんなジャンルを選んで、どんなブログサイトにするかという点です。

実際、ブログをやっていて稼げないという方をみていると、そもそもブログが収益化に適したつくりになっていない方も少なくありません。

BloBizでは、これからブログを始める初心者の方向けに、30分間の無料相談を実施しています。

大手企業のアフィリエイト事業部の責任者、1,000本以上の記事を執筆したライター、800人のブロガーを添削した講師がどんな質問にもお答えします。

WordPressブログの構築代行、ジャンルやキーワードの選び方、記事の書き方まで、一貫してサポートしていますので、ぜひお気軽にご相談ください。

この記事を書いた人
Nakazato

大学時代からWebライティングを始め、累計1,000本以上の記事を執筆。
その後、Webディレクターとして複数のメディアサイトに参画し、サイトの成長やライターの育成に寄与。
現在はSEOコンサルタント/マーケターとして活動。

FOLLOW US!
BloBiz