ブログのトップページを大幅にカスタマイズした経緯と具体的な方法

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

ゆーすけ(守屋祐輔)

ブログに加え、デザイン、カメラマン、執筆をこなす複業サラリーマン。時間を管理し、多様な働き方を取り入れるライフスタイルを提唱中。プロフィールはこちら。運営サイト：サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム。

最新記事 by ゆーすけ(守屋祐輔) (全て見る)

• ご署名ネットの紹介マンガが誕生しました！ - 2019年6月15日
• サイン作成セミナーを開催しました - 2019年6月1日
• スーツをクリーニングに出す頻度はどれくらい？あなたの常識は間違っている！ - 2019年5月23日
• スーツのクリーニングに何日かかる？日数を調べました - 2019年5月23日
• 新入社員が持っておくべきスーツは何着？理由とともに解説します - 2019年5月5日

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

これまでブログ記事を書き続けてその数は400以上！

自分でもかなり積み上げてきたなという実感があります。

でもここまで数が多くなるとふと疑問に感じるんです。

記事はたくさんあるけどどこに何の記事があるんだろうか？

そうなんです、記事が多くなると情報が混乱してしまい、お目当ての情報にサッとアクセスすることが難しくなるんです。

情報を発信する者として常に頭に入れておくべきことは読者目線。

誰だってきちんと情報が整理されてどこに何があるかひと目でわかるブログのほうがいいに決まってますよね。

僕のブログのトップページはその不満点を少しでも解消するべく、普通のブログ画面とは違う大幅なカスタマイズを加えました。
（2018年4月現在は通常のトップページの表示に戻していますが、ここで紹介している設定方法はそのまま使えるので、気にせず読み進めて下さい）

スポンサーリンク

通常のトップページ

みなさん日頃から色々な人のブログを読んでいると思いますが、トップページを見たことはありますか？

一般的なブログのトップページの構成はこんな感じです。

一番上にタイトルがあって右側にプロフィールやカテゴリーを載せたサイドバー、そして新規記事が上から下にかけてズラリと並び、ページの下にはページャーがあります。

ページャーはこういうやつのことだね

こういうブログにおいて情報の検索性を高めるために取られる工夫は次の3つ。

1. サイドバー

サイドバーにカテゴリ一覧やタグ一覧、新着記事を載せることでページをスクロールした時に目に入るようにします。

でもサイドバーはページ途中までは表示されるものの、ずっと下までいくと見えなくなったりしますし、そもそもカテゴリー名が見えるくらいでは検索性はあまり高くありません。

2. 検索窓

ブログの中で情報を検索できる検索窓。

これは自分が欲しいキーワードを入力すればピンポイントで探し出すことができる便利機能ですが、言い方をかえるとピンポイントでしか見つけることができません。

このブログはこんな情報を発信してるんだな、という幅広い情報提供には適していません。

3. ページャー

ページ一番下にあるページャーで少しでもページ移動を楽にするための機能ですが、これもあまりいい方法とはいえません。

僕のブログの場合28ページもあります（2017年3月現在）。

1つ1つ移動して隅から隅まで読もうという人がいったいどれだけいるでしょうか？そんな面倒なこと誰もやりません。（やってくれると嬉しいけど） 

いかがでしょう、要するに記事が多くなると情報量がどんどん増えてしまい、お目当ての欲しい情報が埋もれていってしまうんですね。

これって明らかにユーザー目線に立ってないことだと思いませんか？

欲しい情報がどこにあるかわからない。

どうやって探していいかわからない。

Googleだってユーザー目線を第一に掲げてるのにそれに反することをしてたらアクセスされなくなるのは当然のこと。

目指すはYahoo!ジャパン

毎月600億以上のPVを叩き出すモンスターポータルサイト「Yahoo!ジャパン」。

トップページにはニュース記事をはじめとしてカテゴリーへのアクセス、天気予報、広告ページなどスッキリとデザインが構成されて欲しい情報が一目でわかるようになっています。

ブログはあくまでも個人媒体なのでポータルサイト運営とはスタイルが異なります。
でもユーザー目線に立つとやっぱりYahooのようなわかりやすい導線を採用するのはいい案だと思うんです。

欲しい情報を見つけやすいブログ。
アクセスしてよかったと思ってもらえるブログ。

そんな理想を達成したいと考えています。

新しいトップページの構成

やっぱり記事を書く以上は少しでも多くの記事に目を通してほしいというのがブロガー共通の想いなんです。

そのためには記事の内容が一番大事なのですが、見やすいレイアウトも決しておろそかにしていいことではないんですよね。

少しでも使いやすさを向上させ、欲しい情報が一目でわかるように工夫したい。

そう悩みぬいた結果で行き着いたのは主な要素を4つに絞ったこんなトップページスタイルでした。

新着記事

トップページに最新の5記事が表示されるようにしました。

それより古い記事は「その他の記事はこちら」のボタンから移動することで記事一覧ページへと誘導しています。

特集記事

季節やタイミングに応じたオススメの特集コーナーを設けました。

ここのレイアウトは色々と試行錯誤中です。 

カテゴリーの3カラム表示

カテゴリーを3カラムにして画像とともに表示するようにしました。

カテゴリーの簡単な説明とカテゴリーごとのおすすめ記事を紹介することでクリック率のアップを狙っています。 
（スマホだと3カラムではなく1カラムになります。3カラムで見たい人はPCからアクセスしてください） 

ブログ全体を通してのオススメ記事

カテゴリーの枠を外してムクッといこうブログ全体でのオススメ記事を掲載しています。

カスタマイズ方法

それでは具体的にどうやってこのトップページを作っているかご紹介しましょう。

ブログのトップページってどれも似たように記事が並んでるだけでつまらない

と思ってる人にとってもカスタマイズのいい機会かもしれません。

固定ページを2つ用意する

実は僕のブログのトップページは固定ページを表示させるようにしています。

新着記事を並べたりカテゴリーを大きく9個に分けて紹介しているのは全て固定ページのレイアウトにカスタマイズを加えています。（WordPressで説明します）

まず何でもいいので固定ページを作ります。
タイトルも内容も適当で大丈夫。 

ブログのテーマにもよりますが、もしここでサイドバーをどうするか選択できる場合はサイドバーなし（1カラム）を選択しておきましょう。

今と同じ要領で固定ページをもう1つ作っておきましょう。

つまり2つの固定ページを作る必要があります。

カスタマイズ設定

次に[外観]-[カスタマイズ]に進み、固定フロントページの項目を表示します。
ぴったり同じ項目名がない場合はそれに似た項目を探してみて下さい。

ちなみに僕が使っているOPENCAGE（オープンケージ） のSTORK（ストーク）テーマだと、項目を開くとこんな風になってます。

 「フロントページの表示」という欄があるので、ここで固定ページを選択しましょう。すると、

フロントページ

こうやって「フロントページ」と「投稿ページ」の2種類が表示されます。

ここでさっき作った固定ページを指定してやればOK。

任意の固定ページをブログトップ画面として表示させることができるというわけなんです。

つまり今までみたいに新着記事がズラズラと並ぶだけの何の変哲もないトップページではなく、htmlやCSSを駆使して固定ページをオシャレにカスタマイズしてトップページを自由に作ることができます。

投稿ページ

いま設定したフロントページの下に「投稿ページ」という項目があります。

ここで設定した固定ページに投稿記事が新着順にどんどん並ぶようになります。

例えば僕のブログのトップページを見てもらうとわかるように、新着記事は5記事までしか表示していません。

でもその下に「その他の新着記事一覧はこちら」というボタンを設置しています。

そこをクリックすると今までのブログ画面のように記事がズラッとならんだページに移動します。

投稿ページを一覧表示したい人はここでも固定ページを選択しておくことを忘れないようにしましょう。

新着記事を表示する

新着記事を表示させるためにはSTORK（ストーク）テーマにもとから備わっているウィジェットを利用しています。

OPENCAGE（オープンケージ） のSTORK（ストーク）はブロガーにとってかゆいところに届く機能が満載です。

今回のように最新記事もキレイに画像付きで表示することもできるしフォントも読みやすい、しかもスマホで最適環境で読めるよういろんな工夫が施されています。

OPENCAGE公式サイト

最新記事を表示させるためには “Newpost Catch”というプラグインを使うことでも代用できます。

カテゴリーを3カラム表示する

一番目をひくカテゴリーの3カラム表示ですが、実はこれもSTORK（ストーク）に備わっているショートコードを使うことで簡単にできちゃいます。

たとえばショートコードを使って画像とコメントを3カラムで表示するとこんな風になります。（スマホの方はPCから御覧ください）

これはリンゴです

これはバナナです

これはぶどうです

ね、画像とコメントが横に並んでますよね。

普通だったら縦に並ぶだけなんですけど、ショートコードを使うと簡単にこんな見た目も作ることができます。

これをうまく応用するとカテゴリーを並べて表示することができるんですね。

まずカテゴリーを表現する画像を配置してその下に簡単な説明文を書きます。

カテゴリーで人気の記事を3つピックアップしてリンクを貼り、一番下のボタンクリックでカテゴリー記事一覧に飛ぶ仕組みです。

この辺りもまだまだカスタマイズの余地があるので試行錯誤しながらやってます。

こういうカラム表示がいいなぁと感じたらOPENCAGE（オープンケージ） のSTORK（ストーク）テーマの導入を検討してみてください。 

OPENCAGE公式サイト

有料テーマですが、お値段以上に恩恵を受けることができるオススメのテーマです。

HTMLやCSSの知識が少ない人は、STORKのように初めから完成されたテーマを導入することにより、無駄な作業時間を省くことができます。

スポンサーリンク

まとめ

ユーザー目線に立つことって簡単なようで難しいことです。

こんな機能があったら読みやすいのに

もっとわかりやすい案内があったらいいのに

みたいに自分が読者になった立場で考えることはできますけど、それを実装しても万人に受ける設定は存在しないんですよね。

日々反応を見ながら少しずつカスタマイズを加えて少しでも理想形に近づける作業の繰り返しです。

ネタも文章も内容もデザインも全て大事な要素です。
どれが欠けても良質なブログって成り立たないんですよね。

精進あるのみ！