ブログのトップページを設計する方法 | ゴールを明確にした作り方

アフィ博士
アフィ博士
どうも!博士じゃよ。
みなさんはブログのトップページの設計はきちんとやっておるかの?
ラボくん
ラボくん
やってない人も意外と多いんだよね。ブログのトップページを軽視しがちな人が意外と多いけど実は重要なページってきいたことがあるけど、博士どうなの??
アフィ博士
アフィ博士
ラボくんの言う通り、ブログのトップページは重要なページの一つなんじゃよ。今回は、なぜトップページが重要かというところから、ブログのトップページをどのように作成していけば良いのかを解説していくぞ。

ブログのトップページは誰が見るのか

まず、ブログのトップページは誰が一番見るページなのかという点に注目してみましょう。

ブログ全体のアクセスが集まってくるにつれて、実はトップページは再訪ユーザーが多いページになります。

なぜ再訪ユーザーが多いのかというと、

  • 新着記事をチェックできる
  • トップページからが一番欲しい記事を探しやすい

といったような特徴がブログのトップページにあるからです。

よく使うブログであればトップページをブックマークやお気に入り登録しておく、なんて人もいるかもしれませんね。

トップページはまさに、再訪ユーザー(ブログのファン)が使うページなんです。

アフィ博士
アフィ博士
ファンがよく使うページであれば、軽視はできないのじゃよ。繰り返しブログで情報を熱心に探してくれる読者ということになるので、購買行動も積極的に行ってくれるユーザーなのじゃ。

ブログのトップページの最重要課題

誰のためのページなのかは理解できたところで、ブログのトップページの最重要課題をここで明確にしておきます。

ブログのトップページでの一番の課題は、「読者が探したいページを探しやすくすること」です。

なので、ブログのトップページを設計する際は、「再訪ユーザーが探したいページをすぐ探せるには、どう設計したらいいの?」という問いに絞って考えていきましょう!

ラボくん
ラボくん
トップページの役割は、記事が探しやすいページになることなんだね!

ブログのトップページ設計のゴールを決める

さて、ブログのトップページの課題が明確になったところでゴールを決めなくてはいけません。

ゴールを決める際には、ブログのトップページが良くなった、悪くなったを判断するための材料が必要になります。それも数字で測ることができる明確なものです。

それが、「回遊率」です。

なぜ再訪ユーザーの人が記事を探しやすい設計を目指すのかというと、読者さんにブログを回遊してもらってたくさん記事を見てもらいたいからです。

なので、「回遊率を上がる→記事を探しやすくなった」と判断することができるわけなんですね!

アフィ博士
アフィ博士
回遊率は、PV(ページビュー)とsession(セッション数)を使ってPV/sessionという指標で測れられることが一般的じゃが、難しい場合はUU(ユーザー数)を使ったPV/UUで測って数字の増加を目標にしていくといいぞ

ブログのトップページ設計方法 | 簡単な作り方5STEP

ゴールの設計イメージを持つ

ブログのトップページの最終的なデザインイメージを持つことは大切なことです。

ここでは王道のユーザーが使いやすい設計をゴールとして解説していきます。

以下は完成の参考イメージになります!

参考:初ヨガ!ダイエット – イラストでわかる初心者のヨガ専門サイト 

メインキーワードに関連したカテゴリー設計をする

カテゴリー設計をする際には、コンセプトを決めておいた方が、さらにきっちりと設計できますが、コンセプト設計は少し難しいので、、

  • 中級者以上の人:コンセプト設計→カテゴリー設計
  • 脱初心者の人:カテゴリー設計

という流れで作成していくこともオススメしますよ。以下は解説記事です!

カテゴリーページへの導線バナーとタイトルを作る

ブログのトップページを、以下の示した箇所のようにカテゴリーのタイトルと導線バナーを設置していきます。

参考:初ヨガ!ダイエット – イラストでわかる初心者のヨガ専門サイト 

カテゴリーは先ほど設計したカテゴリーの中で再訪ユーザーにニーズが高いものを左上から順に並べていきます。

なぜ左上から順に並べるのかというと、スマホで表示した時に左上の導線バナーとカテゴリータイトルから表示されるからです。細かいですけど、ここも読者のことを考えて楽に欲しい記事に届く工夫をしていきましょう!

アフィ博士
アフィ博士
スマホユーザーが多いブログは多いので、スマホで表示した時の上から表示される順番には気をつけた方が良いぞ

カテゴリーページへの導線バナー下に1~2行の説明を載せる

カテゴリーの導線バナーとタイトルがあるだけでは、そのカテゴリー導線の先にどんなコンテンツがあるか読者は分かりづらくなってしまいます。そこで、このように

参考:初ヨガ!ダイエット – イラストでわかる初心者のヨガ専門サイト 

1~2行の簡単な説明を載せることで分類が分かりやすく、読者さんが求めているコンテンツにたどり着きやすくなります。

アフィ博士
アフィ博士
カテゴリーが分かりやすいものになっている場合でもあと少し具体的に、簡潔に、1~2行で表現してあげると読者はクリックして読んでくれるものじゃよ。

カテゴリー中のイチオシ記事をチラ見せする

ここまででカテゴリーの説明までを載せるところまでは終わりました。とってもシンプルな見やすいブログのトップページになってきましたね。

先ほどのカテゴリーの導線バナーの下に簡単な1~2行の説明を入れることの他に、もう一つカテゴリーを分かりやすくする工夫を施しておくとベターです。それはこのように、

参考:ブログ集客専門家ジュンイチのブログ

カテゴリーの中でイチオシの記事をチラ見せすることで「各カテゴリーの中でどんな記事があるのか」がさらに分かりやすくイメージできるようになります。

アフィ博士
アフィ博士
この時にチラ見せする記事はクリック率も高いからチカラを入れた目を引くような記事を選定するといいんじゃよ。
ラボくん
ラボくん
博士ありがとう〜!これで体系的にブログのトップページを学ぶことができたよ!さっそくやってみる!