[K] frasmの@shintarowfreshさんに当ブログのヘッダを"Reフレッシュ!"してもらった

Screenshot 2012 05 11 14 51 12

どうも、@knk_nです。
今回はヘンな前置きは無しで。まじめにいくよ!

この度、frasmの@shintarowfreshさんに当ブログのヘッダをデザインしていただきました。

frasm企画9発目は@knk_nさんのブログブランディングしてみた*frasm

SPONSORED LINK

きっかけはなんてことなかった

今までの当ブログテーマを見ている方(きっとそんなに多くないはず)はお気づきのことでしょう。

絵やデザインの経験が全く無いので、オシャレなテーマを作ることができません。
なので今まではできる限り画像などを使わず、WordPress、PHP、CSSを駆使して作ってきました。

そこへこんな企画が!

僕に恩を売らせておくれよッ! ブロガー応援企画を思いついたのでやってみる*frasm

これは私のような人間には喉から手が出そうな企画、速攻で応募させていただきましたよ。

そして記事を見て感動! できるかぎり使わせていただこうとリフレッシュ開始。

リフレッシュにあたって

リフレッシュの前にいくつか決断しなければならない点がありました。

1. ヘッダの謎サムネの撤去

少し苦渋ではありましたがヘッダのサムネ群の削除を決定。

ブログにオリジナルのカバー画像を設置する方法 | けんけん.com

苦渋なんて偉そうなことを書いていますが、当時は他に方法がなかった
言い訳になってないけど言い訳にしておきたい。

おそらくですが、強いこだわりをお持ちのヘッダー部分画像羅列をキャンセルした方が、グリッドシステムを採用できるし、ブランディングをばっちり決められるし、画像の読み込みが減るので描画速度も向上するはずです。

via: frasm企画9発目は@knk_nさんのブログブランディングしてみた*frasm

これも残念といえばまたまた偉そうですが、激しく正論だと思います。特に読み込みの速度は以前から気になっていたので。

大きめのディスプレイでもサムネが途切れぬよう数十件分(50~70)の記事サムネを読み込んでいればそりゃ遅くもなるわな。

@Sayobsさんからアドバイスをいただいて「WP-Super Cache」を入れたりもしたのだけれど。

今回の決断で読み込み速度が改善するはずだ。

2. レスポンシブデザインを諦める

どちらかといえばレスポンシブなテーマはオススメできません

編集するファイルの数はひとつでもデバイスごとのサイズにうまく合わせてレイアウトなどを組まなければなりませんし、何より使いにくい。

PC用のテーマでもそうなのですが、基本的に使う側はスクロールが少なくて済むようにしたいのです。
なので私はサイドバーにタブを付けたり、フッターには何も置かなかったりしているのですが現在iPhone用テーマではサイドバーが下の方にあってアクセスしにくくなっちゃいました。

via: [K] Twitter BootstrapなGW・月まとめ終了・レスポンシブテーマについて・ブログデザインなど | ◯刊(2012/05 第1週) | けんけん.com

あれだけ苦労して作っておいたレスポンシブデザインをあっさり撤去。オススメもしてなかったしいずれ戻そうかなとは思ってたけどこんなに早くその機会が来るとは。

レスポンシブデザインを諦めたことでそれまで作ってきたグリッドシステム復活

モバイルテーマは「WP-Mobile Detector」で、専用テーマを割り当ててあります。一周回って原点回帰。細かな部分はこれから修正していきます。

ビフォー・アフター

長々と引っ張りましたが、お待たせいたしました。新デザインの公開です。
といっても、@shintarowfreshさんの記事とほぼ一緒です。

ビフォー

Screenshot 2012 05 11 13 37 47

アフター

Screenshot 2012 05 11 13 38 11

なんつーかもう。変わりすぎ!かっこよすぎ!
ナビゲーションの色ともうまくマッチしています。

テーマ自体シンプルな作りなのでヘッダが目立つと映えますね。全体的なバランスも良い感じです。

新デザインについて

グリッドシステムもバッチリ

Screenshot 2012 05 11 13 38 11 1

グリッドシステムとの噛み合せにけっこう手間取りましたがキレイにそろってる。
そんな風に画像ができているのだなと納得。

ロゴがもう魅力的すぎてめちゃめちゃお気に入り!

Screenshot 2012 05 11 14 51 11

見た瞬間「WordPressのやつだ!」と一発でわかりました(違ったらドウシヨウ…)
WordPress記事が多い当ブログにはピッタリ。

そして「K」の文字。
かつてやっつけで作ったロゴを見てくださったからか、はたまた最近記事タイトルにねじ込んでいる[K]に気づいてくださったからか。

「K」をモチーフにファビコン向きのシンプルなアイコンを作ろうかと思っていたのでこれ幸い。

ありがたくファビコンにも使わせていただいてます。
合わせてFacebookページのプロフィール画像にも使わせてもらいました。Google+ページのアイコンもこれにしようかな。

今までは同じ顔アイコンを使ってましたが今後はいい意味で差別化できそうですね。

ヘッダ画像にはタイトルが右にあるバージョンを使用

Screenshot 2012 05 11 13 55 11

タイトルが中央にあるバージョンもいただいていたのですが、

  • ロゴが目立つように
  • 左右のバランス

と考えた結果、タイトルが右にあるバージョンを使わせてもらうことにしました。

左がロゴ、右がタイトルで左右のバランスもいいんじゃないかな。

ロゴマークの暗黙知について – Webサイトの上部にリンクは必要か? – : Web Design KOJIKA17
「ロゴマーク=左上」は暗黙知らしいですね。

ちょっぴり遊んでみたり

頂いた画像をそのまま使うのは難しかったので少しいじらせてもらいました。パッと見ではわからないくらいの編集です。

SNSアイコンの部分もうまく生かせるようにPHPやCSSを組んでます。「実装編」がなかった理由がよくわかる。
デザインを崩さない程度に遊んでみたので、実際にPCで見てみてね。

そしていただいた画像を組み合わせてTwitterの背景にも転用してみました。
こちらより御覧ください。そして気が向けばフォローもよろしくね。

デザインができるってすばらしい!

@shintarowfreshさんの「おまブラ」企画を見ていて何度も思うのは、「デザインができるというのはなんと素晴らしいことなのだろう」ってこと。

私もPhotoShopやIllustratorの勉強がしたくなりました。いつかやりたいことリストに追加決定ですね。

おわりに

ヘッダを変えるだけでこれだけかっこよくなるなんて。

当初はどうなるものかと眉唾でしたが、さすが本職WEBデザイナー。
餅は餅屋とはよく(ry

このようなカタチでブロガーさんとの接点が持てるのも嬉しいことです。

聞くところによると、まだこの企画は始まったばかりであと20ものブログブランディングが見られるとか。
当記事で少しでも知名度アップに協力できれば嬉しい限りです。

このような素晴らしい企画に参加させていただきありがとうございました。今後のブランディングにも注目させていただきます。

frasm
@shintarowfreshさんのブログ。
おまブラ企画を見逃すな!
Categories:
記事が気に入ったらシェアお願いします!