はてなブログテーマを配布して気づいた「人気のあるテーマ」を作るために意識したい4つのポイント

いつの間にか自分で制作したはてなブログテーマ「Simple Gray」が1,000インストールを超えてました。1度でも使ってくださったユーザーの皆さまありがとうございます。

やっぱり、テーマを配布していて人気は気になりましたね。
テーマ一覧の画面で人気順にソートして、自分のテーマはどのあたりにいるかなって毎日チェックする時期もありました。

そんな時期を経て、気づいたことがあります。

人気順でソートした時に、大体いつも同じテーマが上に表示されるのです。それらのテーマには大まかな共通点がありました。これからテーマを配布しようとする方や、カスタマイズを予定している方はチェックしてみてください。

1.背景色は白がベース

上のキャプチャ画像は2月17日午前0時半あたりの人気順の並びです。
(当テーマは3位だね、わーい♪)
ほとんどのテーマの背景色に白色が使われています。
白色が使われていないテーマでもメインコンテンツ部分には白色の背景色が使われています。私が作った「Simple Gray」もそうです。

投稿内容が一番見せたいものなので、メインコンテンツは白色が鉄則でしょう。それに白地に黒字がやっぱり見やすいですよね！

2.余白の取り方に統一感を持たせる

当ブログの余白ですが、ある程度は余白の取り方に統一感を持たせています。
特に縦の関係はメインコンテンツ・サイドコンテンツ共に上下間30pxで統一しています。

人気のあるテーマはこの余白の取り方がうまいです。余白の量も、比較的多めにとっているデザインのテーマの方が人気があります。

3.サイドコンテンツの各要素には枠をつけない

プロフィール・ランキング・最近の投稿といったサイドコンテンツの各要素それぞれに枠で囲っているデザインを見ますが、私は個人的には無い方がいいと思います。ただでさえ狭いエリアにサムネイル画像や長いタイトルでゴチャつくのに、枠をつけると余計にゴチャつきます。

それに、枠線があると目がいっちゃうんですよね。まず目を向けるのはメインコンテンツのはずなので、サイドコンテンツからは取り除くほうが無難です。人気のテーマでも採用していない方が多いのが現状です。

枠をつけるよりかは、要素間に区切り線を入れる方がまだマシかと思います。

4.CSSの記述で「!important」は極力使わない

テーマを配布する際に自分の記述したCSSコードに「!important」がたくさん付いていませんか？

はてなブログユーザーは自らCSSをカスタマイズする方が結構多いです。
これには私も驚きました。

原型が多少残るくらい大きくアレンジするユーザーもいます。その方の理想に近づけるために役立つのであれば、ガンガンCSSで上書きしてもらって結構です。

しかし、配布テーマのCSSコードに「!important」が付きまくっていると、上書きが効かなくて面倒なのでユーザーには優しくないですよね。
デザインだけでなく、ソースコードにおいても、出来る限りユーザーがカスタマイズしやすいよう配慮してあげるべきです。（当テーマはそこまで配慮してないかも。）

さいごに

自分のブログだけに適用させるカスタマイズなら、自分のやりたいようにしてもOKです。しかし、テーマを配布してみんなに使ってもらう場合は、色々な使い方を想定した汎用性のあるテーマの方が好まれるでしょう。私もサイドコンテンツにおける表示・非表示の切り替えのせいでデザイン的に妥協した部分がいくつかありました。

それでも皆さんに使ってもらえる方が何倍も嬉しいですね♪ 挑戦してみて良かったです。また機会があれば別のテーマも配布してみたいですね。

ではでは、またー！