はてブ 
pocket 
twitter
frasm企画9発目は@knk_nさんのブログブランディングしてみた
に選定していただきました。✌('ω')✌
- 2012-5-10
- life with direction
- 0
テスト用のプラグスーツはエロ過ぎるだろ、あれ。
一番好きなエヴァーは仮設五号機です。@shintarowfreshです。
あのメカメカしさと、カラーリング、躯体設計がたまりません。
前回から名称を変更したブランディング企画「おまブラ第1部」ですが、序破急で言うと「破」に突入しました。
さて、今日もご機嫌にブランディング（ごきブラ）して行こうかと思いますが、さて、どんな感じにしようかなと@knk_nさんのブログを訪問してみると。
ふじもなおのアトリエで描いていただいた似顔絵が届きました！ | けんけん.com
と、もうすでに「おまブラ」と同じような有料の企画に応募されているッ!
こちらの企画は6月3日まで開催されているようです。うちは締め切ってしまいましたので、ブランディングに困っている方は応募されてみてはどうでしょうか。
数名の方に餅は餅屋(笑）と言わしめたGデザイナーの私のブランディングと似顔絵職人さんのそれとどのように料理が違うのか、これはこれで楽しい「破」になりそうです。
では行ってみましょう、、、、の前に
知ってる人は知ってるけど知らない人は知らないデザインのルール的なアレをいくつか
デザインは数学とまでは言わなくとも、結構システマティックです。
さらに言うと人間が行うこと（機械ならなおさら）なので、ある程度指標というか、規則性というか、そういうやつが存在します。
僕がなぜタイポグラフィーが好きかというと、ルールが超絶明確だからです。
なぜだか綺麗に見えるアレやそれらには、実は裏付けが存在するのです。
知らないと知らないので、ごくごくさわりだけお知らせします。
なんでこんなことを頭にやるのかは、後になればわかりますので、しばしおつきあいを。
- グリッドレイアウト
- 視線のコントロール（強調・フック）
グリッドレイアウト
誤解をおそれず簡単にいうと、縦とか横とかをびっちりと「もうなにも考えずに」合わそうよ。
という感じになります。
いくつか例を示します。
たとえば@kentaro_jpさんの時のヘッダーイメージ
これですが
macの位置と、小物の位置に注目してください。
どうしてこの位置になっているかというと
こんな感じで、コンテンツとサイドバーの端っこに合わせているからです。
もちろん、全部無視して感覚で置くことも出来ますし、ど真ん中あわせにすることも出来ます。
が
グリッド（線・整列）というルールに乗っかった方が、楽です。もうなにも考えなくてもスッキリ見えます。実際は、ブログの骨組みをした人がしっかり考えてくれているので、僕は何も考えなくてもｲｲだけなんですけどね。
さらに、もう1例。
ごりゅご.com
ごりゅご.com
@goryugoさんの新型ごりゅご.comです。
バッチバチのグリッドレイアウトです。おおらくデザインした方はルールを熟知されているのでしょう。すっきり感が半端ないですね。
解説するのも野暮ですが、あえて紐解けば
縦がきっちりとそろっています。
ブログの横幅が、上部の最小正方形10個分、偶数である、これは奇数よりも安定するので、そこまで計算されていると思います。
メインとサイドバーの比率、6：4もまず間違いなく計算。過不足なく、安定しています。もちろん、7：3でもよかったでしょうけど。これは好みの問題。グリッド的にいうと、6：4がベストでしょうね。偶数だし。
さらに言うと徹底的にグリッドに寄せているので、見る側の環境がいかなる場合（モニターサイズ、ブラウザ、モバイル環境）でもグリッドが崩れません。
あな恐ろしや。私が言うのもなんですが、コーディングした人はよほど優秀な人だと思います。
次に。
何も考えずにこちらの画像をご覧下さい。
この画像だけで僕が何が言いたいかわかった人は、とりあえず握手とかしましょう。
目配せだけ送りあい、握手して、そして何も言わずに別れましょう。
もうすでに何も考えずと振った段階で、何か考えろよと同義なので、つべこべ言わずに言いたいことを言いますが。
おそらく、適当に配置した文字列ですが、これは、横書きです。見ればわかりますね。
横書きの場合、無意識にしろ意識的にしろ、人は一番左上から見始めます。
今回の場合。
こんな順番で目視したんじゃないでしょうか。2と3とは入れ違ったとしても、1と4は不動のはず。
ブログのタイトルがほぼ左上にあるのは、こういう理由です。
卵が先か鶏が先かは知りませんが、横書きの場合左から右に読むので、自然とこういう流れになるはずです。
次に明らかに意味深な画像が登場しますが
おそらくfrasmと打たれた文字がなーんか、気になるはずです。
同じ書体、同じ色で打っていても気になるはずです。気になってください。
つまりこのセクションから学ぶべき教訓は
目線の移動はコントロールしうる、そして、見てほしいもの、気になってほしいものをちゃんと目立たせよう
遅れてセクションタイトル
視線のコントロール（強調・フック）
となります。
読ませたいものを読ませたい順番で正しく配置しなければ、目線がしっちゃかめっちゃかになります。これは不親切の極み。
そして、ばっちりとみてもらいたいモノは、意図的に「これ見て！」とした方が、見る人にとっては親切になります。
一番言いたいことは、デザインはセンスでゴリゴリやるものではなく、知っていると得する知識の集積そして、少々のセンスと審美眼とポリシーが必要だと言うことです。
偉そうな講釈はこのくらいにして、言葉じゃなくハートで伝えたいと思います
グリッドシステム唯一の弱点は、ルールにとらわれすぎると窮屈に見えることです。
今回はあえてのルール無視風、○や、サイズのことなる□をルールにそってランダマイズすることによって、ルールブレイクを試みた快作です。
おそらくグリッドシステムの弱点を克服するにはこれしか方法がないと行ってもいいんじゃないでしょうか。
こればっかりはセンスが命になってきますね。
まずはグリッドシステムを意識して、縦をそろえます。@knk_nさんはデバイスによってダイナミックにレイアウトが変わるレスポンシブなテーマです。故にメインコンテンツ部分はモニタのサイズやウインドウのサイズによって大きさがリアルタイムに変化してしまいます。
それでもやはりブログ全体の縦をそろえた方がスッキリして見えると思います。
具体的にはタイトルロゴの位置、メニューの文字の位置あたりが該当します。
それから、視線のコントロールに関してですが、私個人の意見としては、どうしてもヘッダーの画像羅列部分は、情報量が多すぎで、ヘッダー下のミドル部分、サムネメニューと相殺している印象が否めません。
機能的なサムネメニューを実装しているので、徹底的にいかすためにはヘッダー部分をシンプルにした方が絶対有利です。ブランディング的観点からいうと、どうしてもサイトのタイトルや、ロゴはばしっと目立つに限ります。
おそらくですが、強いこだわりをお持ちのヘッダー部分画像羅列をキャンセルした方が、グリッドシステムを採用できるし、ブランディングをばっちり決められるし、画像の読み込みが減るので描画速度も向上するはずです。
が、これはあくまで私個人の意見です。
@knk_nさんのデザインやレイアウトを否定するモノではありません。
デザイナーがブランディング的に考えた結果の私なりの解です。正解もへったくれもありません。
記事内で書かれていた旧@knk_n君も再描画しておきました。
よければどうぞ。
今回は実装編なし
別にいじわるでもなんでもありません。ごっそり変えすぎて、とてもじゃないけどCSSでは追いつきません。
それのそもそもブログの機能そのものをアレしないと行けなくなってくる提案です。どうぞ無視してください。
僕自身はグリッドシステムに挑めたので満足です。
全部入り画像ダウンロード
@goryugoさんのブログと正反対にというか、僕自身は安定とか、システマティックとか本来は嫌いです。ぶっ飛んでいるのに何故か安定しているとか、ぶっ飛びすぎて安定しているとか守るべきルールと破るべきルールを駆使します。
今回の場合数えてみてもらえるとわかりますが、四角は奇数で構成されています。それに○とかも使います。色も結構モリモリです。
当然ルールは知らないと破れないのですよ。
デザイン上知っておくと有利なルールは山ほどあります。興味がある方は一度ググってみるといいのではないでしょうか？
次で二桁！
文：シンタロヲフレッシュ
一緒に読んで欲しい記事
