そして伝説へ「おまブラ」1st.シーズン最後は@masa6127さんのブログブランディングしてみた。

タイムライン

そして伝説へ「おまブラ」1st.シーズン最後は@masa6127さんのブログブランディングしてみた。

バリスタ

に選定していただきました。✌('ω')✌

長きにわたる戦いに今、終止符を打つ。

「お前は今までブランディングしたヘッダーの<div>数をおぼえているのか?」と途中から題して展開してきたこのヘッダー画像を作らせてもらうシリーズ(ファーストシーズン)もとうとう最後のお一人となってしまいました。

総勢22ブログのブランディングセクションを触らせてもらう至極のこの企画も始めれば終わりが来るのです。

とりあえずこちらをお聞き下さい。

テンションが上がったところで行きますか?もうちょっと引っ張りますか?
そうですか、
今までどんな感じでやってきたかを振り返りたい方はこちらです。

いやほんとにブログ百花繚乱とでも申しましょうか、本当にいろんな方がブログをやられていますね。
規模の大小関わらず、少しでもお役に立てたのなら、本望です。

それではラスト、張り切って行きましょう。
こちらがビフォー

こちらがアフター

まさにラストを飾るにふさわしい、私の真骨頂でもある小洒落日本語タイトリング!
「蒐」であつめるって読むんですね。知りませんでした。

もやっと野暮ったくなりがちな日本語タイトルですが、カラフルかつポップなロゴ風にすることでむしろ差別化が図られます。

ちゃっかり漢字の中にアップルマークやドロイド君を仕込むことで、さりげなくどんなブログなのかもお知らせ機能を実装。それでいて読める!うん、これ大事。
ゴシックだと堅くなりすぎるので、蒐の部分は少しランダマイズして遊び心を足してみました。

キーカラーのブルーが映えるように同色系と補色を使ったカラーリングもポイントです。

それでは実装編です。

文字から画像に差し替えてますので、いろいろいじりました。
バックアップを取ってからお試し下さい。

#wrapperpub {
margin: auto;
padding: 0 0 0 0;
background-color: fff;
position: relative;
width: 980px;
text-align: center;
border-right: 1px solid gainsboro;
border-left: 1px solid gainsboro;
overflow: hidden;
}
div#header {
margin: 0 0 0 0;
height: 12em;
background:
white;
position: relative;
}
h1 a {
color: black;
display: block;
width: 500px;
height: 200px;
margin: 0 auto;
background: url(https://quusookagaku.com/img/fre-fes/joho01.png);
text-indent: 100%;
overflow: hidden;
line-height: 3;
}
.description {
color: #444;
font-family: ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif;
font-size: 1.3em;
position: absolute;
top: 170px;
left: 50%;
margin: 0 0 0 -240px;
display: inline-block;
width: 480px;
text-align: center;
}
h1 a:hover {
color: #444;
background: transparent;←この行を消す
}
a:hover {
background: #F3F3F3;←この行を消す
color: #0299FF;
text-decoration: none;
outline: 0;
}

faviconも設定されていないようでしたので作りました。

全部入りダウンロード

最後に

まっすぐが基本のwebの世界なので、少し斜めや見切れをいれてやると躍動感というか、遊び感というか、そういう余裕が生まれます。
これはもうセンスとしかいいようがないので、いろんな出版物や、どのくらい傾けるのか等は、トライアルアンドエラーを繰り返すしかないですね。

最後の最後に

一月半、やってみた感想というか、そういう奴を言わせてもらえれば、とてつもなく勉強になりました。

いろんなテーマをのぞき見て、自分の思っているとおりのレイアウトにすることや、モニターサイズの大小にかかわらず、ちゃんと表示させること、レスポンシブ対応等、わかっていても数こなさないとデキなきことが、もう物理的にわんさかと出てきて、調べて、そして理解してを繰り返すことが出来ました。

それにもまして、やっぱり、すでにあるブログのカラーや、テイストに合わせてデザインを変化させなければいけないという、引き出し全開な感じ、これが実に楽しい。

もっともっといろんな素敵を見て、勉強して、一段上に行かなければなぁと痛感できる瞬間が一杯ありました。

思いつきの企画、そして、どこの誰ともわからない僕の企画に乗ってくれた人たち、そして、作ったモノを使ってくれている人たち、そして、作ったブランディングセクションに対して、感想やコメントをくれた人たち、あなたたちがいなければ、この企画最後までやり通すことは出来なかったでしょう。まずは感謝を。

まさか22名も乗ってくれるとは思わなかったし、最後の方はほとんど一月以上お待たせしてしまいましたが、楽しい時間を過ごすことが出来ました。ありがとうございました。
別にブログの記事にされなくてもいいやと思って、特に記事にしてねとかお願いもしなかったのですが、ほとんどの方が記事にしてくれました。涙が出るほど嬉しかったです。実際はそんなに出ませんでした。

時間がなくてまとめとかは作れませんでしたが、折りを見てまとめたいと思います。

さらにいうと、ファーストシーズン締め切ってからも、まだ間に合いますか?や、やってもらいたかった、第二弾はありますか?等のお言葉を頂いてあります。

もちろんやります!

こんなに面白いことやらないでどうするよ。

というわけで、RSS登録や、Twitterの@shintarowfreshをフォローしたりしてお待ち下さい。このたびは本当にありがとうございました。
別にfrasmは終わらずゆるふわで進めていきますので、今後とも引き続きのご声援をよろしくお願いします。

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

一緒に読んで欲しい記事

前の記事(Previous)
frasm企画21!発目は@Mori2ndさんのブログブランディングしてみた
次の記事(Next)
【PR】諦めないで!『まだ間に合うブロガー名刺 for #Dpub5 』やろうと思ってます。