はるなぴログ

WEBサイト作成技術研究

はてなブログテーマを比較してみる

はてなブログでオリジナルテーマを作成するにあたり、はてなブログの既存テーマを調べて比較してみます。

テーマには公式テーマとオリジナルテーマがありますが、テーマストアから人気順に10テーマずつピックアップして比較します。

人気テーマは更に詳細に見ていきたいと思います。

f:id:hal7pi:20180929082417j:plain

オリジナルテーマ

まずはオリジナルテーマの比較を行います。トップ10を比べてみましょう。

2018年8月時点でのトップ10を表にしてみました。

順位 テーマ インストール数 投稿日
1 Minimalism 18,493 2017-06-16
2 Brooklyn 21,831 2016-02-04
3 Innocent 24,260 2015-12-20
4 ZENO-TEAL 6,318 2017-03-11
5 Haruni 2,515 2018-03-11
6 SOHO 4,448 2017-07-08
7 Undershirt 1,922 2018-01-06
8 DUDE 17,842 2016-01-17
9 CONTENTS 6,217 2016-05-23
10 Blank 15,881 2015-04-13

あれ?インストール数を元に順位をつけているんじゃないのかな?

1年あたりのインストール数に換算してランキングを見直ししてみましょう。

オリジナルテーマの1年あたりのインストール数を比較

投稿日を勘案して1年あたりのインストール数を計算しランク付けをやり直したのが以下の表です。

順位 テーマ 年換算インストール数
1 Minimalism 15,995
2 Innocent 9,167
3 Brooklyn 8,661
4 DUDE 6,943
5 Haruni 5,961
6 Blank 4,763
7 ZENO-TEAL 4,443
8 SOHO 4,059
9 Undershirt 3,218
10 CONTENTS 2,798

うわ!大分入れ替わりました。

Minimalismがトップは動かず。ですが2位にInnocentが上がり3位のBrooklynと入れ替わりました。またDUDEが4位に躍進です。Haruniは5位動かずですが6位にBlankが食い込んできました。

それではトップ3のオリジナルテーマの特徴を見ていきましょう。なお自作テーマはすべて2コラムが基本と思われます。

Minimalism

圧倒的なインストール数を誇るMinimalismです。

Minimalism - テーマ ストア

極めてシンプルな2コラムテーマでレスポンシブ対応テーマです。

トップランキングに敬意を表して少し詳しく見ていきましょう。ざっとCSSファイルを眺めました。

基本は2コラムですが簡単に1コラムに変更できるよう予めCSSが準備されています。

メディアクエリのブレークポイントは2か所。640pxまでがSmall Tablet & Smartphone、768pxまでが通常のTablet、それより上がデスクトップ環境です。

フォントファミリーの指定は以下のようになっています。

font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;

Windowsの方は游ゴシックがメイリオに優先して表示されます。はるなぴはメイリオがお好みですが游ゴシックも美しいですね。

シェアボタンのスタイルが用意されているのも特徴でFontAwesomeを用いてボタンを表示することが可能です。

Innocent

Innocent - テーマ ストア

はるなぴが利用しているテーマです。

サムネイル画像を設定することで見やすいサイドバーつきの2コラムデザインとなります。CSSファイルの容量は36kBです。

またアドセンス広告やアフィリエイト広告を貼り付けるためのデザインがよく考えられているように見えます。はるなぴはこれで決めました。

ナビゲーションバー、SNSシェアボタン、おすすめ記事リストのカスタマイズ方法も詳しく解説されており、人気テーマだけあって情報も豊富でカスタマイズで困ることがありません。

素のデザインはいたってシンプルで、カスタマイズすることが前提でデザインされています。逆に言えばカスタマイズしないままだと素気ないデザインということもできます。

Brooklyn

Brooklyn - テーマ ストア

Brooklynはかなり特徴的なテーマです。

白と黒を基調としたデザインです。サイドバーの見出しは吹き出し付きのボックス表示です。好みが分かれるところかもしれません。CSSファイルの容量は31kBです。

レスポンシブデザイン対応でスマートフォンでも美しく表示可能。グローバルメニュー、シェアボタンの設置、読者登録ボタンの追加などのカスタマイズのも簡単に対応できるよう設定が考えられています。

作者のshiromatakumiさんは2018年現在はてなブログで活動中なので今後のメンテナンスも期待できると思われます。

公式テーマ

2018年8月現在テーマストアの公式テーマのトップ10を比較します。

インストール数順にトップ10を表にしてみました。

順位 テーマ インストール数 投稿日
1 Epic 243,004 2011-11-07
2 Evergreen 79,396 2013-03-24
3 Report 64,560 2012-03-16
4 Life 60,161 2016-10-24
5 Handwriting 48,034 2014-01-16
6 Aero 33,904 2011-11-07
7 Reach 33,285 2013-04-18
8 Bordeaux 32,859 2011-11-07
9 Novel 31,938 2013-06-05
10 Natural 31,373 2011-11-07

これを見るとインストール数ではEpicが24万以上で圧倒的です。でも投稿日が2011年になっていますね。オリジナルテーマ同様に公開された年が古いのでインストール数も多いと読めます。

昔は今ほどテーマの数も揃っていなかった筈で、古いテーマはそれだけ優位にあったと考えることもできますね。

公式テーマの1年あたりのインストール数を比較

オリジナルテーマ同様に、投稿日を勘案して1年あたりのインストール数を計算しランク付けをやり直したのが以下の表です。

順位 テーマ 年換算インストール数
1 Epic 36,012
2 Life 33,783
3 Evergreen 14,785
4 Handwriting 10,549
5 Report 10,100
6 Reach 6,279
7 Novel 6,178
8 Aero 5,024
9 Bordeaux 4,869
10 Natural 4,649

Epicの1位に変わりはありませんが2位にはLifeが躍進しています。Evergreenは3位に入れ替わりました。

Lifeの投稿日は2016年10月でしたから最近になって勢いを得てきたテーマであると分かります。

Handwritingも投稿日が2014年1月の割には4位に食い込んでいます。Lifeほどではありませんが人気のあるテーマだと分かります。

公式テーマのコラム数を比較する

続いてコラム数を比較してみましょう。

順位 テーマ コラム数
1 Epic 2
2 Life 1
3 Evergreen 1
4 Handwriting 2
5 Report 2
6 Reach 2
7 Novel 2
8 Aero 2
9 Bordeaux 2
10 Natural 1

オリジナルテーマはすべて2コラムが基本でしたが公式テーマには1コラムのものが見受けられます。

はるなぴはアクセス増を考えるなら2コラムが良いと考えています。サイドバーに人気記事などを配置することによりサイト内回遊を促し、検索エンジン流入ユーザのサイト離脱を防ぐ効果があるからです。

1コラムは記事そのものに集中できるデザインです。最近1コラムへの回帰が起こっているようにも思います。

ここから更に公式テーマの比較をしようかと思ったのですが、もう3000字を超えました。はるなぴもあまりのテーマの多さに疲れてきましたのでいったんここで打ち切りとさせていただき、続きはまたどこかでしたいと思います。お楽しみに!