frasm企画16発目は@QuoQlishさんのブログブランディングしてみた
ん、これ、全部終わる?
楽勝です!@shintarowfreshです!
無駄に「!」マークをつけて自分を鼓舞してます。
というわけで、何となく「おまブラ」ファーストシーズンの終わりも見えてきましたね。
ぶっちゃけ、名刺とか、配布しようと思っているステッカーとか、全然準備が出来てませんが、東京が楽しみです。
というわけで、@QuoQlishさんのブログのブランディングを張り切っていってみましょうよ。
とはいえ、すでにあらかたヘッダー部分の装飾は終わってるみたいですね。
では、今回は、素のイメージをそのまま流用して、一応プロが作るとどういうことになるかをお見せしたいと思います。
では行きます。
こちらがビフォー
こちらがアフター
うん、ほとんど変わってないね。
そうです、パーツパーツをちょびっとだけ洗練させてみました。という奴です。牛さんの時と要領は同じですね。
皆さんおわかりだと思うのですが、アップルといえばグレイッシュ。そして、グラデーション(笑´∀`)
さらに付け足すと、書体が細い。この細い書体の選定が、シュッとしたイメージを加速してますね。
既存のイメージをガンガン使い回させて頂きました。おかげで、アップルライクな仕上がりになっていると思います。
さらにサイトの説明に当たる「学生×ブログ×ライフハック」というキーワードもいい感じにアピール出来ていると思います。
誤解を招くとアレですので、自分でばらしますが、キーボード部分は僕が書いたモノではありません。
素材を使わせてもらいました。
VECTOR: teclado Apple | ✚ComoYoDsg Blog
VECTOR: teclado Apple | ✚ComoYoDsg Blog
こんな感じで。時間を短縮するためにうまいことリソースを利用してクオリティーを上げることも時には必要なのです。うん。手抜きじゃない!
手は僕がかきました。てへへ。
高級感には余白が欠かせない
余白(ホワイトスペース)を上手く使うことによって、高級感や洗練を印象づけるコトが出来ます。
どのくらい余白を使うかはこれはもうセンスとしかいいようがないわけですが、思い切りが必要です。
スペースを埋めたくなる気持ちをグッとこらえて、空間に余裕を持たせれば、うん、スッキリするし、ぐっと小洒落感アップ!
さらに細かく、サーチウインドウの背景色も変更しました。部分部分にちゃんとこだわれば、キーカラーの緑が映えますね。
大胆さこそが醍醐味だ
これは僕がデザインするときによく使う手法です。
思いっきり見切れさせたり、回転させたり、大胆に配置するんです。
別にルールはありません、むしろ驚かそうくらいの心づもりでちょうどいい感じです。
レイアウトに関してはやり過ぎはありません。
ただ、見づらくなったり意味が消失したりすると本末転倒になるのでご注意を。
では実装編です
といっても画像を配置し直すだけなので、サーチウインドウだけです。
#branding .only-search #s {
background-color:
rgba(27, 64, 0, 0.46875);
border-color:
rgba(74, 74, 74, 0.457031);
color:
#222;
}
こんな感じで緑の統一感が生まれると思います。
こういう機会がないと細かいパーツって微調整が面倒ですからね、ぱぱっとやってしまいましょう。
画像のダウンロード
超さりげなくグリッドレイアウトを意識していることに気がついたあなたは、「おまブラ」の大ファンですね。握手しましょう。
終わりに
今回はリソースを使った、一見ずるい手法ですが、いいんです。
クオリティーをたたき出す、ブランディング力をブーストすることこそ最終の目的。
使えるモノは、何でも使うのです。
しかしほんと最近の学生は意識が高いですね。
僕の頃はブログとかじゃなくて、テキストサイトでしたけどね、ネタ系の。
黒歴史!!
文:シンタロヲフレッシュ
一緒に読んで欲しい記事