ブログデザインをいじるTIPS

はてなブログの8割は似たようなデザイン。

ブログデザインいじりたい病

「このブログはデザイン等ほぼほぼデフォルトのままでいい」
と書いたものの、細かいところが気になり始めている。

こういう正解のない作業は、ある程度のところで見切れる人が「できる人」になれるし、延々没頭する人が「趣味人」になれる。

ところで。
はてなブログはWebデザインに精通している人からとりあえず無料でブログを開設してみたかった人まで、割とユーザー層が幅広い。
で、精通している人がデザイン案を出すと、『とりあえず組』がそれをコピペで真似るから、同じデザインが色んなところに伝播する。

オリジナリティを出そうとしてカスタムしているのに結局テンプレートから抜け出せないのは悲しい。
あとブロガーって色んなタイミングで「自分らしさ」とかそういう感じのフレーズ謳いがちだと思うけど、マンネリのコピペのコピペのコピペではちょっと自分らしさも見失いそう。

GSSMBOYの逆襲の場合

というわけで、このJIGMAGがほとんどテンプレ状態から手を加えていないのに対し、GSSMBOYの逆襲（ぼくがやっているもう一つのブログ）はかなり色々いじっていることを改めて実感した。

どんなポイントに気を付けながらデザインをしているのか、書いてみる。

ただし、コピペでOKみたいなお手軽カスタム術を紹介したいわけではなく、デザインを作っていくうえでのぼくの考え方をまとめていくものなので、呼んでもピンとこない人もいるだろう。

色の統一感

GSSMBOYの逆襲では基本的に白と黒、それとくすんだ青しか使っていない。
これはサイトのイメージにもよるが、ある程度色に統一感がある方がデザインにまとまりが出る。

また、その色が担う役割を明確にしておくことも重要。
たとえばオレンジがサイドメニューではリンクになっているのに本文中ではただの強調として使われている、みたいなケースはユーザーが混乱する。

パソコンであればカーソルホバーでリンクかどうかは判別できるが、モバイル端末はリンクをタップしないと分からないのが通常。
なので、出来る限り直感的に分かりやすい色の使い方をしたい。

形の統一感

「シェアボタン コピペで一発」「読者になるボタン 自作」などの検索で色々なところからデザインを引っ張ってきた人にありがちなパターン。
それが、各部のデザインに統一感がなくなるやつ。

こっちのシェアボタンは白抜きだけど、フォローボタンは楕円……？
ん……？？？

みたいなことにならないよう、GSSMBOYの逆襲では基本的にシェアボタンやフォローボタンは円、カテゴリーなどの四角い部分は角丸にしないことを統一している（一部だけ例外あり）。

フッターの挿入

ぼくもはてなの無料ユーザーだから、URLにだってばっちりhatenablogと入っているわけだけれど、やっぱり「はてな感」というか「定型感」というか、そういうものはなるべく排除したほうが見栄えはいい。
フッター自体のデザインどうこうより、これがあると「こだわっているんだな」という印象が生まれると思う。

Webフォントの導入

これは好みと言ってしまうとそこまでだが、特徴的なフォントを使うとデザインが締まる。
また、PCでもスマートフォン等携帯端末でも同じ表示のされ方になるという利点もある。

先ほどと同じ画像だが、タイトルのTHE RETURN OF GSSMBOYやその下のメニュー部ではJosefin Sansというフォントを使っている。
AとかMが特徴的である。

ただし、これをそのまま本文中で使うと漢字やひらがなに馴染まずに浮いてしまう。
なので、記事タイトルのMを見てほしい。別のフォントである。

こっちはLatoというフォントを使っている。

余白

このへんはテンプレートのままいじっていない人が大半だと思う。
段落を入れる際に前の文章とできる隙間。余白。
これをどの程度設けるかでも見栄えはずいぶん変わる。

GSSMBOYの逆襲では見出しに派手な色や効果を使いたくなかったため、余白を広げることでぱっと見でも文章の切り代わりを分かりやすくしている。

また、これはぼくの好みだが、ブログ全体の横幅を比較的狭くして、目線の左右の移動を小さくしている。

余談

GSSMBOYの逆襲はこのBrooklynというテーマをベースにデザインしている。


比較してみると独自のカスタマイズのヒントがあるかもしれない。ないかもしれない。

おしまい

同じこと言うにもデザインがかっこいいサイトやブログの方が説得力あるわな。