frasm企画10！発目は@tamkaiさんのブログブランディングしてみた。その２

今一番言いたいのは

プロとかちょっと自重してよね！@shintarowfreshです。

もちろんみなさんご存じだとは思うのですが、@tamkaiさんは東京のプロのデザイナーさんです。
あんた、自分でどうにでも出来るだろう！と、完全に思いましたが、せっかく企画を盛り上げてくれているのだ、さらに言うと僕のように田舎のフリーのデザイナーが東京のプロに作品を見てもらう機会なんてない訳で、腕試しにはちょうどいいという訳なのです。

最悪何かの素材にでもお使い下さい。

というわけで、行きます。

ビフォー

あ、間違えた
こっちこっち

アフター

一応あれこれ解説しますと、どうしても、一番上にサムネメニューが来るのは、UI的にあんまりよくないと思うんですよね。
プライオリティーが狂うというか、暗黙の約束に近い、あの、ホームボタン件ブログタイトルは、一番左上に来るべきだ、というのが私の考えでして、さらに言うと、ブログを見に来る人は大抵そう思ってくると思うのです。

おそらく記事上ヘッダー下に持ってくると邪魔になるという配慮、さらにはタイトル、サブメニュー、記事への流れを途切れさせたくなかったのか。
ブログを閲覧中のマウスカーソルの位置ってだいたいどこにいますか？

僕の場合右側、真ん中少し下あたりに待機させておく場合が多いですね。なので、いざ、記事を読み終わって、サムネリストにたどり着こうとすると、ちょっと遠い。
やはり注目して欲しい、もしくはクリックして欲しいコンテンツは画面中央、もしくは少し下が好ましいと思うんです。

意識的にしろ無意識にしろこの「遠い感覚」っていうのはクリック率に影響すると思うんです。
クリック率に影響するってコトは、使われにくいってことで、さらに言うと使われにくいくせに画像を読み込みやがる（描画速度パフォーマンスに影響を及ぼす）邪魔な奴となりかねないのです。

なんで、やっぱり、ミドルあたりにいてくれるとありがたいなぁと。さらに言うと、個別記事を読みに来る人はいの一番に記事のタイトルを見ますので、その辺にいた方が有利かなと。

あと、hoverしたときにタイトル文字が出るよりかは、タイトル文字は常に出てる方が親切かなとも思います。これは好き好きですね。

タイトル部分ですが、ロゴにした方がブランディング的効果は高いと思います。このタイトル部分が文字だと、なんとなくデフォルトを想像して、クオリティーが一段下がった感じがします。逆に言うと、この部分にロゴを当てるとブログクオリティーは一段上がると言えます。オリジナリティーが疾走します。

トップ部分のブランディングバナーに好きな画像を使っている人はいっぱいいますが、ブログタイトルにロゴを使える人は意外と少ないんです。

なので、今回も骨組みに関わるので実装編はなしです。

一応タイトル部分のCSSだけ

body {
background: #F2F2F2;
}

#page {
background: white;
box-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 12px 0px;
}

#thumbnailheader {
height: 140px;
margin: 0 0 15px 0;
border-bottom: 1px dashed #CCC;
}

#branding {
border: none;
position: relative;
border-top: 2px solid #BBB;
}

#branding hgroup {
width: 94%;
margin: 0 30px 0;
}

#site-title {
font-size: 32px;
text-shadow: 0px 1px 1px #CCC;
}

#site-title a {
font-size: 30px;
font-weight: bold;
text-decoration: none;
display: block;
height: 150px;
width: 500px;
background: url(画像のurl);
text-indent: 100%;
overflow: hidden;
line-height: 4;
margin: 0 0 10px;
}

#site-description {
font-style: normal;
color: #999;
line-height: 1;
font-size: 14px;
margin: 0 0 20px;
}

#branding #searchform {
position: absolute;
top: 10px;
right: 30px;
text-align: right;
}

.thumbnailtopimg img {
border: none;
height: 140px;
margin: 0px;
box-shadow: rgba(99, 99, 99, 0.308594) 0px 0px 30px 0px;
}

といいながらごっそり全部載せるのには理由があって。
なぜだかテーマのCSSと別に書いたのか、いろんなセクションのCSSが2つ書かれてます。子テーマで変更を加えるとこういう感じになるんでしょうか？
子テーマに挑戦したことがないのでわからないのですが、一つのクラスやidは一つの場所に統一した方が描画パフォーマンスは上がりそうなモノですが。ちょっと私にはわかりませんでした。

ちなみに上に書いてあるCSSは最低限の加工ですので、骨組みはどうしてもhtmlの順番を入れ替えないと動きません。

さらに、「おまブラ」エントリー中にコンテンツを一個増やすという挑戦をカマシてきたので、一応作りました。なぜならブランディングとは「統一感」だ！俺がブランディングだ！と口酸っぱく言ってきたからです。

さらにブログの質感を挙げるテクニック的な奴

テクスチャを使うとなんかグッと洒落っ気がまします。
frasmでいうと、背景に布のアップル的なテクスチャ敷いています。

切り抜きジャックだとブランディングバナーの部分に紙のテクスチャを引いているような、アレです。

背景でもロゴでもテクスチャを薄く使うと一気に洒落っ気が疾走します。背景が真っ白の場合は引きようがないですけどね。

あと、どんなエフェクトでも効果でも薄く。薄く！これがポイントです。

ちょっとAIのバージョンがわからないのでCS４です。

全部入りダウンロード。

何かの素材にでもどうぞということで。

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

はてブ

pocket

twitter