- 今すぐマネしたいトップページが見つかる！
こんな人向け
・ブロガーさん
・オウンドメディア担当者さん
こんにちは。ガクマーケティングの井上です。
2週間前、wordpressのテーマをNewspaperにしました。それからというものの、ずっとトップページばかり改修しているような気がします笑
心の奥から「記事をかけ！」と言われるような気もします。でも、やっぱりオウンドメディアとしてはトップページの重要度は高いと思うんです。そのブログの顔になるわけですから！
そこで本日は、ブログのトップページ構成で参考になるリンクを集めてみました。
思わずマネしたくなるような、素敵なトップページがたくさん！ ぜひ最後までご覧くださいませ。
目次
アナグラムのブログ【ブログのトップページ参考リンク集1】
オウンドメディアにしては珍しい、ワンカラムのブログトップページ。すっきりしていて、パソコンでもスマホでもシンプルに見やすいのがお気に入りです。
上部にある「このブログについて」説明するテキスト。これってあるようでないんですよね。どんなブロックがはっきりわかるし、思わずブックマークしてしまいたくなる文章です。
「最低でも週に1回は〜」と更新頻度を明言しておくことで、また見にこようかなと言う心理にさせるのでしょうか。 うーん、これはいいトップページ。
少し画面を下げると、 オレンジ色の背景で人気記事と言うセクションが出てきますよね。途中で背景を変えると、雰囲気がガラッと変わって目が止まりませんか？ この後紹介する参考リンクでも共通しているんですが、背景色ごと変えてしまうのはなかなか良い手段だと思いました。
そしてそのした。基礎知識をまとめたところです。 ここも面白いですよね。おそらく、まだリスティング広告などに慣れてない、ルーキー広告運用担当者に向けたセクションだと思います。
で、ルーキー広告運用者の気持ちになると(実際私がそうなんですけれど！）この基礎知識の記事、全部読みたくなっちゃうんですよね。挙句の果てにはブックマークしたくなっちゃうんですよね。役に立つブログだなと、印象に残ります。
さらにした、メルマガ登録を呼び込む、CTAのスペース。基礎知識のセクションのところで充分アナグラムのブログに対する信頼度が上がっているわけですから、その後にメルマガ登録フォームを置くのはめちゃくちゃ合理的。
フッターもイラストが置いてあったり、かわいい見た目で好きです。こういうキャラクターを持っている人は、記事中の吹き出しだけでなく、こういったパーツに活用するのもいいかもしれませんね。
NHKニュースWEB【ブログのトップページ参考リンク集2】
これは個人的にめちゃくちゃ参考にしてるサイトです。私の家、テレビないので情報収集は全部ここに頼ってます笑
そんな個人的なストーリーは置いといて。NHKニュースウェブはとても見やすいサイトだと思います。
緊急性のある話題は、上部にバナーを設置。 最新ニュースなんかもここからすぐに見れます。これが便利なんですよねー。
最新記事はスタンダードなシンプルな表示。カテゴリーとタグもあるので、他の記事も探しやすい。
そして、下のほうに行くと各種特集バナー。これもまた見やすい。
NHKニュースサイトの特徴としてはこの見やすさだと思います。 さすがNHK。文字も読みやすいし、色も気遣われているような気がします。
文字の読みやすさで言うと、記事への配慮も凄いです。 例えば見出し。ほとんどがスマートフォンで見ても1行に収まってます。めちゃくちゃ見やすいですよね。
個人運営するブログだと、SEOのために見出しが長くなることがありがち。(この記事も、その例の1つ) なんですか、さすがのNHKさん。小手先のSEOなんてせずに、正しい情報を発信すること、そしてわかりやすく伝えよう、という思いが現れていると思います。
また、スマホのメニューの使いやすさも見所です。カテゴリーがわかりやすく一覧できて、検索窓も置いてある。要素が多いんだけれども、シンプルな配置なので見やすく感じます。
Sheage【ブログのトップページ参考リンク集3】
お次は、パソコンでの表示がお気に入りのトップページ。
ファーストビューから少し下がって、特集のところ。目につきますよね。背景色がかわると、やっぱり手と目が止まってしまいます。
さらにもう少し下がると、今度は水色の背景色も出てきます。 また雰囲気が変わるので手が止まります。そして思わず読んでしまう。変化があるから飽きがなくて、楽しいサイトだなぁって感じます。画像もおしゃれですしね。
で、私の1番のお気に入りがフッター。これ、見やすくありませんか？ 私は最初見たとき、けっこう衝撃でした。
ブログを書いているとどうしても、カテゴリーとかタグが乱立するじゃないですか。あれを上手いこと魅せてるな〜と参考にしています。
シェアージュのブログでは、おすすめテーマ（その配下にも子テーマ）、おすすめスポット、人気のテーマ、などど区切って、「関連する単語を多く出す」ように工夫しているように感じます。様々なジャンルを扱うブログなので「こんなテーマもあるんだよ！」とミニマムに情報が届きますね。
会員登録機能もあることから、リピーターユーザに使いやすい設計を目指しているとも見れます。フッターのメニューはいかにも、使ったことがある人向けなデザインにも見えますね。
このサイトはレスポンシブではなく、アダプティブデザイン。なので、スマホで見るとフッターは違う表示になってます。（割と普通のデザイン）
ただ、スマホ表示になると、今度は「ホットキーワード」というセクションが出現します。おそらくブログのタグをまとめてるものだと思います。こちらのメディアではInstagramにも力を入れています。Instagramはハッシュタグの文化ですから、そこに似せた見せ方に工夫しているのだと思います。
日経doors【ブログのトップページ参考リンク集4】
20～30代の若手女性向けの、働き方にフォーカスしたメディア。
さすがの日経が運営しているだけあって、とてつもないトップページですね。
何度か登場している、背景色を途中で変えるトリックも活用されています。レイアウトが複数種類あって、飽きません。タグクラウドは「＃」をつけて若年層女性向けに。などなど、上げたらキリがないくらいですね！
求人情報を表示する部分もあります。メディアをただのメディアとして終わらせるのではなく、求人情報が見れるツールにもなっています。そういうサイトって、ブックマークして何度も見てしまいます。ゲームの攻略サイトとか、ダメージ計算サイトとか。
記事を見てみると、連載記事がたくさんあります。 冒頭にバックナンバーが書いてあるのですが、これが面白いんです。「続きはこちら」という連載じゃないんです。このテーマに関して、「別の著名人のインタビューが続く」というスタイルの連載です。興味が湧くし、読んでみたくなってしまいます。
『記事のバックナンバー』をあえて作ることで、読まなきゃと思ってしまいます。読んでいない『バックナンバー』があると、まるで一話飛ばしてしまったドラマがあるような・・・そんな強い求心力があると感じました。これはうまく活用していきたいですね。
さて以上で、オススメの真似したくなるトップページの紹介は終わります。ここから先は、トップページのポイント等について考察した情報をお届けします。
手戻りが出ないように、トップページを回収する前にぜひご覧ください。
今は「スマホトップ」を主眼に
アクセスのほとんどがスマホ。トップページも、スマホを起点に作っていくのがベターだと思います。
パソコン表示で配置したサイドバーが、スマホだと下に配置されるのは『あるある』ですが、それは果たしてスマホユーザーに最適化されているのか？ なんて視点が求められます。
ワードプレスのテーマによっては、スマホとパソコンのトップページを別々に設定できるものがあります。アダプティブデザインと言うやつですね。アダプティブデザインに対応したテーマを選ぶのも1つの手です。
もしくはCSSで、display:none; で上手いこと表示を最適化するとか。固定ページに、パソコン表示とスマホ表示のHTMLを直書きして、メディアクエリで表示を分けるとか。
最近ではパソコン表示でも、ワンカラムにするブログも増えてきましたね。コンテンツに集中してもらえるメリットはもちろん、パソコン表紙とスマホ表紙を統一できるので、管理が楽だと言うメリットもあると思います。
ブログのトップページ構成ポイント
私の思うトップページ構成のポイント！ ざっくばらんに書いてみようと思います。最適解ではないと思いますが、要素としては間違っていないはず・・・？
賑わい感【ブログトップページの構成ポイント】
個人的に、1番重要視したいところです。個人ブログってどうしても哀愁が漂ってしまうんです私だけかもしれないけど！
日々更新されている、賑わっていることって、メディアの信頼性に繋がると思うんです。どんよりしたサイトで、いつ書いたか分からないような記事が並んでいたりしたら、ちょっと読みたくないじゃないですか。
特集バナーがあったり、連載があったり。なんだか楽しそうなブログだな、と思わせることって意外と重要だと思ってます。LIGさんのブログとか、思わずいろんなとこに目を通しちゃうじゃないですか！
一覧性【ブログトップページの構成ポイント】
雑記ブログであれ、特化ブログであれ、一覧性は必要だと思います。カテゴリー一覧なんかは最たるもの。Sheageさんのフッターとか、日経doorsさんのバックナンバーとかも。
どんな記事を書いているのかと言うざっくりした情報も、必要だと思います。アナグラムのブログさんが参考になりますね。
100記事以上もあるブログなのに、トップページからは20記事しか見れない。これは、少し前のこのブログのお話・・・。もったいないですね。
過去に書いた記事をゴミにせず、資産として活用したほうがお得です。
ツール性【ブログトップページの構成ポイント】
これは、私もまだ実験段階です。
ブックマークしてしまうニュースサイト。ブックマークしてしまうゲーム攻略サイト。
ブックマークされないブログ。
これらの違いは何か考えてみました。その違いは『そのサイトにもう一度アクセスしたい”メリット”があるか』だと思います。ニュースサイトなら、最新情報をみるメリットが。ゲーム攻略サイトなら、新しいイベントとか、ダメージ計算とか。
ただの情報サイトではなく、『ツール』であること。まるで『なにかのアプリ』であるかのような、メリットがあるといいのかなと思います。
まとめ：ブログのトップページ構成で参考になるリンク集
今すぐマネしたくなる、参考になるブログのトップページをご紹介いたしました。
どれもオススメです！メディアとしても最高峰で、記事の中身やコンテンツそのものも参考になると思います。
パクリはNGですが、よいインスピレーションにして、あなたのブログをパワーアップしましょう！