多くのブログでは新着記事だけが表示されるスタイルです。しかし、そのようなページでは再度訪問した際に使いにくいですよね。そこで、トップページに新着記事だけでなく、各カテゴリの紹介などを盛り込んだ「わかりやすい」ページにしました。その方法と効果を詳細に解説します。さて、何%訪問者数が増加したのでしょうか。
写真1. リニューアルのイメージ(113系リニューアル車、岩国で撮影)
この記事のまとめ
詳細な解説と効果検証の前に、簡単にまとめます。
・普通のブログのトップページだと古い記事が埋もれてしまい、使い勝手が悪い
・その弱点を克服するために、トップページをサイト形式に変更
・その結果、カテゴリページの訪問者数は87%増加
以下、その詳細について記します。
通常のブログのトップページの特徴とその弱点
通常のブログさんのトップページは新着記事だけが表示されるスタイルになっています(図1)。
図1. 一般的なトップページの例(新しい記事から順に表示されるスタイル)
このようなトップページですと、新しい記事だけが表示されて、目的の記事が探しにくい構造になっています。例えば、ヨーロッパの鉄道情報を探したい人は、トップページからは探しにくいです。実際にはグローバルナビゲーションが表示されたり、タグから検索できるのですが、そのようなことを知っているのは弊サイトの管理人の私くらいでしょう。「グローバルナビゲーションを見て！」というのは私のエゴイズムなのです。
※グローバルナビゲーションについては、グローバルナビゲーションを常に表示する方法【simplicity2】で詳しく解説しております。
そこで、トップページに各カテゴリ一覧とその説明をつけることにしました(図2)。
図2. 弊サイトリニューアル後のトップページの例(カテゴリ一覧を表示するスタイル)
完成形をご覧いただいた(といってもトップページを開けば簡単に確認できますよ！)ところで、この詳細について述べることにしましょう。
トップページ変更の手順
そうはいっても、トップページ変更は手間がかからずにすぐにできるものではありません(そこまで高度な技術がなくとも可能なので「簡単」ですが、「容易」ではないのです)。準備が必要になります。多くのサイトさんでは準備の段階では書かずに、本番のことしか書いていません。親切で有名な私は準備段階から記します。
1) カテゴリの整理
※タグの整理は必須ではありませんが、これを機にタグも整理すると良いでしょう。
2) カテゴリページの充実
3) 必要な写真の用意
※1)～3)が準備段階です
4) 固定ページを作成、新着記事へのリンクも作成
トップページ変更の準備段階
弊サイトではsimplicity2というテーマを利用しています。そのため、本記事はsimplicity2をベースとして記しています。他のテーマを利用している人は適宜読みかえてください。
先ほどの章でいう1)～3)の内容を記します。
準備1：カテゴリの整理
ブログには多くの記事があります。多くの記事を整理して見つけやすくすることがトップページ変更の最大の目的です。色だの配置だのということは枝葉に過ぎません(センスのない私が自らを正当化するためのセリフでもあります)。多くの記事を整理(※)する第1段階は適切なカテゴリ分けを適正化することです。
※本来、「整理」というのは不要なものをなくすことであり、本来は「整頓」と表現するべきところです。しかし、それではピンとこない人もいるでしょう。そこで、本記事では「整理」と表現させていただきます。
では、多くの記事をどのようにカテゴリ分けすれば良いのでしょうか。この分類はいろいろな考えがあり、私自身もきちんとした知見があるわけではありません。しかし、1つの重要な考えがあります。カテゴリは縦に分類、タグは横に分類、というものです。
以下、弊サイトでの適用方法を述べますが、多くの考えがあることでしょう。1つの考えかたとしてご認識ください。
弊サイトではタイトルからわかる通り、鉄道に関する趣味ブログです。弊サイトでは鉄道に関する記事ばかり書いています。例えば、縦軸は趣味の分類が良いでしょう。鉄道趣味は「車両鉄」「ダイヤ鉄」「乗り鉄」「音鉄」「模型鉄」「撮り鉄」などに分かれています。そのほかの分類もあるでしょうが、鉄道趣味の分類は本記事の内容にそこまで関わらないので、これ以上の議論は避けましょう。
私の興味の中心は「鉄道ダイヤ」だったり、「乗り鉄」だったりするので、これらが軸となりましょう。また、各路線の混雑についても興味を持っています。そのような鉄道趣味の分類をカテゴリ分けすることにしました。今までは地域別で分類していましたが、そのような分類はやめました(地域別の分類はタグで可能です)。
「鉄道ダイヤ」に関してもダイヤ改正について詳細に述べたり、関係する路線の接続関係に特化したり、と多くの記事があります。これらは毛色が異なるので、同じカテゴリにあってもさらに細分化するのが良いでしょう。そのため、子カテゴリを設定しています。
混雑関係に関して広くまとめたサイトにもしたいと考えましたので、動線を確保するための記事が必要となりました。そのため、混雑に関する記事を大量に執筆いたしました。多くの記事は内容は薄く、検索にも引っかかりませんが、動線確保のためなので良いのです。
この方今月にはいってめっちゃ混雑調査されてるけどどういう方なんだろうhttps://t.co/77WI611RjA
— o-cn (@xmilieux) February 27, 2020
twitterを眺めると、上記のツイートがありましたが、そのような意図があったのです。場合によっては動線確保のための新しい記事も必要です(私はその記事を書くのに3か月かかりました…)。
では、タグはどのように活用すれば良いのでしょうか。タグは横の分類です。弊サイトではタグは地域別(というより鉄道会社)ごとの分類に活用しました。意味がわからない？ですよね！
たとえば、東急電鉄という会社があります(多くの人が「東急」と呼んでいるアレです)。弊サイトには東急電鉄に関するダイヤ関連の記事も、混雑の記事もあります。人によっては東急電鉄の混雑状況だったり、ダイヤ改正記事だったりと広く知りたい人もいるでしょう。そこで、重要になるのがタグです。弊サイトではそのような記事について「東急」というタグをつけています。
図3. カテゴリとタグについての概念図
ここまで弊サイトでの例を述べましたが、当然ながらご自身の運営しているサイトによって分類は異なるでしょう。家電関連のブログを運営しているのであれば、カテゴリはパソコン、テレビ、ラジカセ…となり、パソコンのカテゴリの中にwindowsとMacという子カテゴリが入るのでしょうし、タグにはPanasonic、富士通、…というメーカーが入るのでしょう(家電関連に疎い私の想像です)。
トップページを変えるための作業としては、(技術的には)タグの整理は必須ではありませんが、本来の目的を考えるとタグの整理も必須です。特に探しやすくするためにはタグの表記を統一するのは必須です。例えば、東急電鉄に関する記事のタグに「東急」「東急電鉄」「東京急行(※)」と混在するのは良くないということです。どれかに統一しましょうということです。
※東急電鉄は2019年9月1日までは正式名称は東京急行電鉄でした。ただし、近年は当の東急自身も含めて「東京急行」と称してませんでしたがね。
準備2：カテゴリページの充実化
カテゴリを整理したら、カテゴリページを充実させます。多くのサイトさんではそのカテゴリの記事について新着順に表示されるだけです。これでは、せっかくトップページを充実させても、各カテゴリの新しい記事を探しやすくなるだけです。これでは中途半端です。せっかくであれば、各カテゴリの記事を探しやすくしましょう！
では、どのようにカテゴリページを充実させましょうか。上級者向けの解説では「固定ページをカテゴリページにしましょう」とあります。しかし、それでは多くの人は実践できません(そして上級者向けの解説ページは書きかたが不親切！)。では、どのようにすれば良いのでしょうか。
私も「固定ページをカテゴリページにする」方法を一生懸命探していました。しかし、やりたいことは記事を探しやすくすることです。記事が探しやすければ、別に新たに固定ページを作成する必要などありません。
simplicity2には各カテゴリの説明を示す機能があります。もちろん、この説明は各自で入力する必要があります。そう、カテゴリの説明を詳細に書けば、カテゴリページの導入部分としてきちんと機能します。
では、どのようにすればカテゴリのページを詳細に書けるのでしょうか。
図4. カテゴリの編集画面へのアクセス
WordPressのダッシュボードからカテゴリの編集画面にアクセスできます(図4)。
図5. カテゴリの編集画面
そして、説明を詳細化したいカテゴリを選びます。そのカテゴリを選んだら、詳細な説明を記入します。ここには表も記入することができます(TablePressであらかじめ作成しておいて、そのショートコードを入力すれば良い)。ただし、見出しの装飾は反映されません。そのため、見出しを装飾したければ、装飾用のコードも記入する必要があります。以下のような感じです(<>は全角にしています)。
＜h2 style="font-size:24px; background:none; border-bottom: 3px solid #006e54; border-left: 10px solid #006e54; padding:13px; margin: 2px;"＞見出し＜/h2＞
ここでのポイントは style="装飾したい書式"としていることです。
ただし、simplicity2はカテゴリの説明部分は枠線あり、背景色灰色、となっていますので、見た目は違和感があります。そこで、追加CSSで枠線なし、背景色を白色に変更します。
.category-description {
background-color: #fff;
color: #333;
border: none
}
これで違和感なく表示できます。私は最後に「新着記事一覧です」という文言をいれて、記事一覧の場所と違和感ないように小細工しています。
準備3：必要な写真の用意
写真を用意することはそこまで重要ではありません。トップページをかっこ良くしたければ、凝った写真を入れましょう。全部の記事に凝った写真を入れる(よくアイキャッチ画像にこだわる人がいますよね)必要まではありませんが、トップページくらいはこだわりましょう、という程度の感覚です。
トップページにはかっこ良い写真を入れていますが、何のことはありません。旅行や自宅で撮影した適当な写真を加工しただけです。その加工もPhotoshopやillustratorのような素晴らしい加工ソフトは使っていません。以下の手順で加工しただけです。
1) 写真を撮影し、パソコンに取りこむ
2) パソコンに取りこんだら、圧縮してからwordに貼りつける
3) wordで白黒に加工し、テキストボックスでテキストを上書きする
※テキストは白文字に黒枠か、黒文字に白枠だと文字がはっきりします
4) 3)の画像をペイントに貼り付けて適当なサイズに切り抜いて(=空白部分を取り除く)、終了
固定ページの作成
ようやく準備完了です。ここまでの準備は各自で必要に応じてやれば良いと思います。ここからようやく本番です。
WordPressのデフォルトの機能にトップページを固定ページにするものがあります。今回はこの機能を最大限活用します。
図6. ホーム画面の設定画面へのアクセス
ダッシュボードのホーム画面の設定画面で変更できます。左側の「設定」をクリックし、表示設定をクリックします(図6)。そこで、トップページにしたい固定ページと、新着記事を表示する固定ページを選択すれば終了です。
図7. ホーム画面の設定
デフォルトでは投稿記事になっていますから、それを上記2つに選択し直せば終了となります(図7)。え？その固定ページをどうやって作るのか？ですよね！細かな部分も含めて解説しましょう。トップページ開設のための方法を解説という感じですね。
固定ページの作成1：トップページの作成
新着記事の一覧のことはいったん忘れて、まずはトップページを作成します。ここでのポイントは以下の通りでしょう。
ポイント1. カテゴリページへのリンクを忘れずに貼る
ポイント2. (私のようにやるのであれば)WP Gallery Custom Linksというプラグインで、画像を横並びに並べつつ、リンクも貼る
ポイント3. 新着記事へのリンクは忘れずに！
大変な準備をした人もいることでしょう。ついにその苦労が報われるときです。重要だと思うカテゴリから用意した画像を上から貼りつけます。そのときにその画像にカテゴリページへのリンクも忘れずに貼りましょう。カテゴリページへのリンクがわからない？私は当該のカテゴリページを開いてそのURLをコピーしましたよ。
もう少し親切にいうと、何もしなければカテゴリページのUPLはドメイン名/カテゴリ名です。弊サイトの「電車の混雑」というカテゴリであれば、https://tetsudoulab.com/category/電車の混雑です。カテゴリの編集でスラッグを設定していたら、そのスラッグが入ります。
写真が単なる横1列というレイアウトも芸がありません。そこで私はWP Gallery Custom Linksというプラグインを導入(※)することで、写真を横並びに並べつつ、画像にもリンクを貼りました。
※2021年6月あたりにプラグインが不要なやりかたを導入いたしました。画像を横並びに並べる方法(プラグイン不要！、Flexbox利用)に書いています。
では、どのようにギャラリーを追加するのでしょうか。手順を示します。
1) メディアを追加→ギャラリーを追加から、画像を選択
図8. ギャラリーの追加(画像の選択)
ここでは、希望の画像を選びます。今回の例では、「電車の混雑」と「鉄道ダイヤ」の画像を挿入したいので、それらの2つを選びます(図8)。(後で変更をしなければ)先に選んだほうが左側に表示されます。
2) 画像にリンクを貼る
図9. ギャラリーの追加(リンク先の選択)
次に、写真ごとにリンクを挿入します(図9)。URLはご自身のカテゴリページをコピペすれば問題ありません。リンク先はSame PageかNew Pageを選択できます。デフォルトではSame Page(同じウィンドウに表示)ですが、元もページが消えるのは不親切と考え、ここでは新しいウィンドウで表示させる設定にしました(これは好みの問題ですね)。
現在選択されている画像は強調表示されます。もう1枚の画像を表示するには、もう1枚の画像をクリックします。それぞれの画像に別々のリンク先を貼りつけることができます。
3) ギャラリーのレイアウトを決定
図10. ギャラリーのレイアウトを決定
最後にギャラリーのレイアウトを決めます。ここでは横に2列なので、数字は2を選びます。そして、サイズはサムネイル(小さい画像)ではなく、フルサイズを選びます。フルサイズを選んでも、モバイル環境ではちゃんと縮小表示されますので、心配の必要はございません。
プラグインではなくCSSで解決！
プラグインを導入すると、ページが重くなってしまいます。そこで、CSSで解決しました。プラグインを削除することで、サイトの速度ではなく、安全性も若干向上していることでしょう！
画像を横並びに並べる方法(プラグイン不要！、Flexbox利用)
これで、カテゴリページへのリンクを整えることができました。私はこの後に各カテゴリの概要説明を導入しましたが、これは各自の好みで良いでしょう。私は説明過多の部分があるので、概要説明を入れただけのことです。
最後に新着記事のリンクを貼る必要がありますが、これは別のページを作った後に、当該のページへのリンクを貼りましょう。この時点でリンク設定がかたまっているのであれば、
新着記事はこちら
のような文章を打ちこんでおいて、こちらにリンクを設定することも手でしょう。
ここまでトップページの作りかたを述べましたが、以下の3点の表示上の不都合があると思います。
1) トップページにタイトルが表示されてしまう
2) トップページの作成日や更新日が表示されてしまう
3) (目次を設定している人であれば)目次が表示されてしまう
これらの問題点の解決方法を述べましょう。
トップページにタイトルが表示されてしまう
通常、記事を作成する場合は、タイトルを設定することでしょう。トップページもそのようなタイトルを設定すると、当然ながらそのようなタイトルが表示されます。これについては、トップページのタイトルを空白にすれば問題ありません。
トップページの作成日や更新日が表示されてしまう
トップページも(システム上は)1つの記事です。そのため、作成日や更新日が設定されています。そのようになっていると、トップページにもこれらの情報が表示されます。システム上、これらの情報をなくすことは困難でしょう。そうであれば、見た目更新日を表示させなければ良い、という視点に変えましょう。そう、見えなければOKなのです。
このためには、CSSを編集する必要があります。まず、記事の固有のID番号をメモします。この番号をメモしたら、CSSに以下のコードを貼り付けます。
/*トップページの日付非表示*/
#post-〇〇 .post-meta {
display: none;
}
目次が表示されてしまう
いくつか見出しがあるときに目次を表示させる設定にしている人も多いことでしょう。そのような人は(トップページも1つの記事である以上)目次が表示されてしまいます。でも隠したいですよね。
これは、目次を入れるプラグインであるTable of Contents Plusの設定画面から設定できます。
図11. 目次：固定ページを除外
トップページは固定ページです。多くの記事は投稿ページ(post)ですので、ここにはチェックしつつ、固定ページ(page)にはチェックしなければ問題ありません。多くのサイトさんで、固定ページはプライバシポリシーのようなページですから、目次がなくとも問題ないでしょう。
固定ページの作成2：新着記事を表示させるページの作成
従来はトップページが新着記事を表示させるページでした。今度は「きちんとした」ページをトップページにしたので、従来の新着記事一覧のページを作成せねばなりません。
今度はそう難しいことではありません。新しく固定ページを作成します。白紙にしつつ、何も書きません。ただし、パーマリンクを設定することと、そのリンクを忘れないことは重要です(忘れたら固定ページ一覧で確認すれば良いです)。
リンクを設定したら、トップページにこのページへのリンクを設定しましょう。
トップページの設定
ここまででトップページと新着記事ページを作成しました。次に設定を変更し、トップページを変更します。
図12. (再掲)ホームの設定状況
設定→表示設定から、トップページにしたい固定ページと、新着記事を表示する固定ページを選択すれば終了です(図12)。
小賢しいテクニック：固定ページに新着記事を表示する方法
ブログを訪問する人の中には、「きちんと更新されているか見たい」「よく訪問するので新着記事を見たい」という人もいることでしょう。そのような要望を無視して、「カテゴリ別一覧から見てね！」という設計をするのはエゴイストです。そこで、カテゴリページ一覧とともに新着記事をいくつか表示するのが正義でしょう。
では、どのように新着記事一覧を表示させるのでしょうか。ブログテーマによっては新着記事一覧を表示させる機能があるのかもしれませんが、わがsimplicity2にはありません(ウィジェットから固定ページに入れられそうですが、固定ページが2つ以上ある弊サイトには無理な相談です)。世間にある解説を読んでもさっぱりです。高度な質問に答えている記事ってわかりにくいんだもん…。
私の導き出した答えは、手入力です。記事を新たに書いたら、そのURLをトップページに貼り付ければ、トップページに新着記事が表示されます。幸いなことに、simplicity2はURLを書いたら、ブログカードが出力されます。このブログカードで新着記事を表示させれば見栄えも悪くありません。
頭で解決できないのであれば、最後は気合と根性で何とか対応する、という私の悪い癖が最後に出てしまいましたね。でも、訪問されるかたにとってはエレガントな解決法でも、気合と根性であっても関係ありませんよね。
新着記事を自動で表示
5か月ほどこのような運用をしていましたが、ついに自動化に踏み切りました！その方法を詳細かつわかりやすく書いています。
固定ページ(ホーム画面)に新着記事を自動で表示する方法(抜粋も表示、simplicity2)
効果の測定
では、このようなリニューアルは効果はあったのでしょうか。3/30-4/1にかけてこのようなリニューアルを行いました。となれば、この前後で効果を測定するのが理にかなっています。弊サイトでは平日と休日で訪問されるページが異なりますので、1週間単位での比較が自然です。直後のデータは汚いかもしれないので、翌日の4/2のデータは除きます。
今回のリニューアルでカテゴリページに向かいやすくなっているので、カテゴリページへの訪問者数を数えるのが自然です。では、直前と直後の訪問者数はどうでしょうか。
(リニューアル前)
3/23-3/29：315PV(45PV/日)
(リニューアル後)
4/3-4/9：590PV(84.3PV/日)
おおむね1日で45PV→84.3PVとなっており、おおよそ87%の増加です。つまり、ホームページのリニューアルは非常に効果があったと判断できます。
トップページリニューアルまとめ
トップページを固定ページにし、その固定ページにカテゴリごとに案内ページを作成しました。それと同時に、カテゴリページを充実させました。このことで、トップページがサイトの顔としてふさわしい姿になりました。
このようなリニューアルをするうえで必要なことは以下の通りです。
・カテゴリの整理(カテゴリとタグが縦と横の関係になるようにする)
・カテゴリページの案内の詳細化(カテゴリ説明の欄に詳細な説明を入れる)
・トップページを投稿ページから固定ページに切り替える
また、トップページから新着記事を確認できる工夫も必要です。そのための必要なことは以下の通りです。
・新着記事一覧を表示できる固定ページを設定
・最新記事をトップページに掲載すること(私は手入力でしたが)
このことで、カテゴリページに訪問する人は87%増加し、大きな効果が得られたこともわかりました。
この発想の根源はGoogle AdSense マネタイズの教科書[完全版]から得られたものです。
その本の書評と実践記を記しました。この記事と合わせてお読みいただけると、さらに理解が深まるでしょう。