【Cocoon】ブログの離脱率を下げるトップページ設計案【初心者向け】

ブログ運営1か月目のアナリティクス分析を経て、「トップページでの離脱率が高い＝デザイン面で問題がある」という課題が生まれました。

よって、ブログの顔となるトップページのデザインを設計していきます。

この結論に至ったきっかけの「ブログ運営1か月目経過報告」は以下の記事にまとめてありますので、興味のある方は是非ご覧ください。

以下で記録していく記事の内容をひとことでまとめると、「どの記事がおすすめなのか分からないので、グループごとに分けて表示する」設計をしています。つまりは、離脱を減らす配置の考え方についてを記事にしています。

あくまで「どのようにトップページの構成を考えていくか」という記事なので、じゃあ実際にどうやって改修していくの？という点についてはまた別途記事にして近日中に公開する予定です。

今のブログの見栄えを確認する

まず、今のブログを上から下まで見てみて、どこが問題なのかをピックアップしてきます。

こうしてトップページを眺めてみると、以下のように気付く点があります。

かなり……というか、全く個性のないブログだなという印象ですね。

改善するべきポイントを洗い出せたので、次はそれを基にトップページの構成を考えていきます。

私の場合は上図のように、トップページのスクリーンショットをペイントツールに読み込んで、改善案を赤ペンで書き出していっています。

ヘッダー・・・初見のユーザーが迷わず操作できるように、サイトタイトルを左寄せ、ナビメニューを右寄せにして、ロゴマークを作成しよう、背景色はどうしようか？

記事一覧・・・読者が「最新の情報」が欲しいのか「みんなが認める良記事」が欲しいのか、目的に合わせて選べるように、「新着順」「人気順」「カテゴリー別おすすめ順」でグループごとにまとめようか？

サイドバー・・・プロフィールを付け足して、どんなサイトなのかを簡潔に説明しようか？

などなど、思いついたらどんどん書き込みます。

あーでもない……こーでもない……と書き足しては修正したりを繰り返し、最終的に以下のような配置にしよう、と決めました。

ポイントは以下の3つです。

これだけでユーザーの迷いを軽減でき、離脱率が大きく改善される……はず！

以上、興味を引く記事への導線を整えるためのデザイン設計でした。

アイコンとかロゴマークとかヘッダー画像とかまだ何も手についてないので、「デザインというか、単なる配置決めでは？」と思われるかもしれませんが、配置決めも立派なデザインです！と言い張ります！

ひとまず、読者にとって見やすい配置のトップページを作ってから、ロゴマークなどの「個性」を詰めていきます。

サイトが育つにつれ、その配置自体もどんどん変化していくでしょうが、それはそれで良しです。

さて、配置について決まったので、次回は「実際にどうやって配置を変更するのか」です。まずはヘッダーをカスタマイズしていきます。