frasm企画7発目は@reynotchさんのブログブランディングしてみた
今日の晩ご飯はうどん!
さあ、ネタに詰まってどうでもいい書き出しになってきました@shintarowfreshです。
起承転結で言えば、承の部分突入した訳ですが、べつに小さくまとまるつもりなどありません。
さて、今日はみんなの大好きな、そして僕の大好きなタイポグラフィーで行こうかと思ってます。
タイポグラフィーのすばらしいところは、文字だけでデザインが出来てしまうところでして、他に特に素材を作ったりしなくてもいいところが実にイイ!
だからといって手抜きになっているのかどうかは、ぜひ作品をみて決めて下さい。
では行きます。
こちらがビフォー
こちらがアフター
@reynotchさんからはごっそり変えてくれてもイイと事前に伺っていたので、ヘッダー周りはサイズから、タイトルの位置まで結構細かく変わってます。
にもかかわらず、そんなに違和感を感じないのは、タイトル右の空きスペースをタイポで埋めることに成功したからではないかと思ってます。
右セクションと左セクションで違ったタイポ感を味わえるお得仕様!
僕自身の哲学というか、デザインに取り組むときの考え方というか、そういうやつのなかに
ん?
を作る。というのがありまして。もちろん「ん?なんじゃこれ??」の「ん?」ではなく、フックになる何かを残すという意味です。
よく見て頂けるとおわかりだとは思うのですが、右セクションは大々的に変形のサンセリフ系(ちょっとだけサンあり)つまりゴシック系ですが、右セクションのタイトルは「セリフ」系の書体です。
右の奴にあれだけインパクトがあるんだから、左のタイトルも書体を合わせろよ、とか、書体の使いすぎは素人っぽいとか、突っ込みは端から織り込み済み。
テクノロジーの文字につられた訳ではありませんが、個人的にはサンセリフよりもセリフ系の方が落ち着きや上品さを持っていると思っています。
右でがっつり遊んだ分、うわつかないようにしっとりとさせる働きを持つとともに、いい感じのフックになっていると自分では思っています。カラーも背景になじむカラーリングを選択。
とはいえ、やっぱりへんだよ、と思われるかもしれないので、ゴシックも用意しているこの顧客満足度乞食な側面もちゃんと持ち合わせている我と客とのバランシング。
ツー訳でお好きな方でどうぞ。
あと、ブログの説明文ですが、長すぎるとタイポにかかって大変見にくくなります。
なので、もしよければカットをしてもらえるとデザイン的にはかなり助かります。
このへんちょっと我が出てしまいました。
では実装編です
結構ダイナミックに変えましたので、一つずつやってもらうとミスがないと思います。
ぜひバックアップをとってからゴニョられることをオススメします。
#header {
text-align: left;
width: 980px;
margin: 0 auto;
color: white;
padding: 70px 0 0 0;
background: URL(画像のURL) no-repeat bottom right;
height: 170px;
}
#header p {
font-size: 32px;
font-weight: bold;
padding-bottom: 10px;
}
#header a {
color: white;
width: 188px;
height: 80px;
margin: 0 0 0 0;
display: inline-block;
background: URL(タイトル画像のURL);
overflow: hidden;
text-indent: 100%;
line-height: 2;
}
#header a:hover {
color: #D5BFAA;
background: URL(うえのタイトル画像と同じURL) no-repeat bottom left;
}
#header h1 {
font-size: 14px;
padding-left: 5px;
text-shadow: rgba(97, 74, 0, 0.65625) 0px 1px 1px;
}
#menu {
width: 100%;
float: left;
margin: -9px 0 20px 0;
padding: 5px 0;
background: white;
border-top: 1px solid rgba(99, 93, 66, 0.5);
border-bottom: 1px solid #F0F0F0;
box-shadow: rgb(255, 250, 242) 0px 2px 2px 0px;
}
#menu li a {
display: block;
width: 138px;
color: #6A5236;
line-height: 20px;
border-right: 1px solid #D8D8D8;
text-shadow: rgba(232, 183, 162, 0.8) 0px -1px 1px;
}
.layout #box {
width: 980px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
text-align: left;
background: url("http://blog-imgs-42.fc2.com/r/e/d/rednoir/gt-custom-2back.png") no-repeat;
}
と、こんな感じで大丈夫だと思います。
こうしてみるとブラウンてあまりwebデザインに使われないけどシックでクールなカラーリングですね。
遊び心はあるけど締めるとこ締められた、洗練さえ感じるブランディングセクションになったのではないでしょうか。
どすか?
追記。画像張り忘れちゃった。
全部入りダウンロード
文:シンタロヲフレッシュ
一緒に読んで欲しい記事