frasm企画21！発目は@Mori2ndさんのブログブランディングしてみた

らす２！

いやー、全然関係ないけどWWDC2012面白かったですね、イングランドvsフランスの後半関係なくなるくらい面白かったですね。
ウィズレティーナは相当魅力ですが、僕はエアーを年末に買おうかなと思っています。

さて、今回は@Mori2ndさんのブログですが、青が印象的なブログです。
ちょっとヘッダー周りで遊んでみたいと思っています。

では早速いってみましょう。

こちらがビフォー

こちらがアフター

まあ、タイトル部分はほとんど変わってませんね。
書体は最近細いのが好きなので、細めを選択、細いとイメージがシュッとしますね。

太くて丸っこいのも可読性が高くて嫌いじゃないのですが、差別化が計りにくいので、ロゴっぽい仕上がりにしてみました。
ノーマルな書体にイタリックが上手いこと混ざると、洒落た感じになります。

で、タイトルロゴだけだと少し寂しいので、向こう側にもうちょっとロゴっぽい奴を飛ばしてみました。
@Mori2ndさんはサイトのロゴをすでにお持ちのようでしたので、そちらをリユースしようと思ったのですが、「M」と「Ⅱ」がくっつくこのロゴは、ちょっと判別しにくいんですよね。へたすると「MⅠ」って読めちゃう可能性があるので。

こういう可能性をつぶしておいたほうが無難かなと、とにかくロゴはインパクトと可読性が重要だと私は考えます。

なので、タイトルと連動したロゴを一応作ってみました。
と偉そうに言えるほどのロゴではありませんが、グラデーションのブルーとM2の文字。可読性を確保して、ロゴっぽく仕上げています。
さらに、統一感を計るためにRSSアイコンもロゴ入りにしてます。

こういうのは数を繰り返し使うことで有効になる手段なので、一つ不採用だと全滅ですが、攻めの姿勢で。
統一感を持たせたのですっきり感はブーストされていると思います。

後はレスポンシブとの兼ね合いでどうなるかですが、こればっかりはシュミレートできないので、実装して具合が悪かったら修正させてもらいたいと思います。

イメージに合わせてfaviconも作りました。

それでは実装編です

タイトルロゴ化に伴いすこしいじりました。バックアップを取ってから挑戦してみて下さい。
hgroup#site-title img {
max-width: 100%;
margin: 0 0 10px;
}
#site-title {
padding: 29px 0 15px;
background: url(画像のURL) no-repeat 87% 22px;
}

全部入りダウンロード

最後に

書体の選定はこれはもう趣味に近いわけで、正解なんてない訳ですが、タイポグラフィを使ってタイトル周りをロゴっぽく仕上げてあります。。
タイトル周りは少し作り込めば、しっかりとした印象を与えることが出来るという、いわばロゴ作成のお手本的なブランディングとなっています。

文：シンタロヲフレッシュ

はてブ

pocket

twitter