Webデザイン好きが考えた、戦わないヘッダーを生む７つの秘訣

どうも、ハガネ屋（@hagane_ya）です。

すでにお気づきかもしれませんが、ヘッダー画像を変えました。

ついでにグローバルメニューその他もろもろについても模様替え。

Webデザイン全般の話に関しては以前も書いたんですが、ヘッダーデザイン単体の記事はまだ書いていませんでしたね。

僕がブログデザインを含め日々の生活で常に考えていることは、とにかくパワーインフレに陥らない。"参戦しない" ことです。

パワーインフレってのは、いわゆるバトル漫画などにみられる "戦闘能力・霊力・HP/MP等で際限なく力(ちから)くらべをし続ける" 状態のこと。

ピッコロが出てきてベジータが出てきてフリーザが出てきて・・・当ブログ的に表現すると "ドラゴンボールZ症候群" といったところでしょうか。

こういう行為が好きな方々を否定・批判するつもりは一切ありませんが、結局 後出しジャンケンで不要な物をゴテゴテくっ付け続けていくと、振り返った時に違和感を感じる出来であることが多かったりします。

それが嫌なので最初っから参戦しないだけのことであり、例のごとくそのスタンスはヘッダーデザインにおいても同様です。

戦わないヘッダーを生むための７つの秘訣

ド派手の "真逆" をいく

というわけで さわりの文章でおおかた説明してしまいましたが、目立とう目立とうと思うがあまり奇抜な行動で人目を引きたがるのは "人間の性" です。それは僕にもあります。こればっかりは仕方が無い。

ここで大事なのは、その欲求を上手くコントロールできるかどうか。

とにかく目立ちたい方々が傍目からどのように映っているかと言いますと、ギャル車のダッシュボードのファーやキョロ充君の○○デビュー的なノリ・・・はたまた、族車のバニング (羽付きハイエース) を遠目から見ているあの感じ。

例えがやや雑ですが、こういう類の価値観を格好良いと思うか思わないか？　そこで判断されたらよろしいのではないかと思います。

常識と非常識の "ちょうど良いポイント" を探す

普通に考えたら人体模型的なモチーフをヘッダーに持ってくるとか非常識なはずなんですが、単色で取り入れると意外と文字となじみます。

「いやいや、なじんでねーし」とか「非常識の要素が十分強いぞ」など、人によって感じ方・考え方が異なるのはもちろん当たり前ではあるんですが。

僕が言っているのは、カラーバランスとしての話です。

純粋に人体模型の写真などを持ってくれば、ひたすらにグロいだけであり【※閲覧注意】なヘッダーになってしまいます。これではただの非常識。

あくまでもブログデザインとなじませるのが目的ですので、目を引くモチーフでありつつも脇役に徹しなければならない。ゆえに単色。

単色単色言ってますが、別に単色じゃなくても良いんですけどね。

「非常識なモチーフをいかに違和感なく場になじませるか？」の思考で対象をながめてみると、ちょうど良いポイントが見えてきたりするものです。

異なる要素を "あえて" ぶつけて、臭みを飛ばす

前項 (常識と非常識の～) にも多少通ずる話かもしれません。

例えば今回のヘッダー画像は文字をカタカナにしてみたんですが、普通に使うとすれば以下のようなサイバー系と相性が良いと思うんですね。

ですが僕は別の要素 (大正文学的な空気) も入れたかったので、あえて元の文字が持つ方向性に "別の要素" をぶつけています。

今回の場合ですと、サイバー要素に "印刷物" の空気感を入れました。

サイバー的なモチーフにしても大正的なモチーフにしても、実は結構やり尽くされているというか結構ありきたりなんですよね。

同様にメタル・パンク・オルタナ・エレクトロ系のモチーフも、やってみたらやってみたで被っていることが多かったりします。

あと、エレクトロ系デザインと系統が似ている『AKB48』のデザインに至っては、笑っちゃうほどパクられまくっていますからね。

既存の対象へのカウンターとして産声を上げたものばかりであるはずが、結局メインストリームに昇格している時点で被らないわけがないんです。

既存のデザインをベースに、複数のインスピレーションを掛け合わせる

前項 (異なる要素を〜) からの、ある意味続きになります。

僕は、自分のデザインが特段優れているとは一切思っていません。
差別化差別化言っていますけど、実際出来ているかどうかなんて怪しいし。

"だからこそ" です。もはやベースとなる素材は出尽くしているので、あとは色々と組み合わせてみるしかないんですよね。そんなスタンス。

ちなみにこちらが、今回作成したヘッダーのインスピレーション元。

• ROCKIN'ON JAPAN
• Tool (バンド)・仏像・人体模型
• 大正文学
• わら半紙・印刷物
• タモリ倶楽部
• サイバー (あるいはサイバーパンク)

それと、後から「なんか似てるな～」と思ったのがこちら。

よりにもよって『ダイノジ』と『タモさん』という、音楽に縁のある２組。

ダイノジはともかく『ブラタモリ』のロゴは頭の片隅にあったのかもしれない。

テーマ (テンプレート) に合わせてデザインする

確かに、ヘッダーを目立たせることは超大事。

ですが目立たせることだけにこだわり過ぎるがあまり、お使いのテーマ (テンプレート) になじんでいない場合があります。

例えば当サイトのテーマ (Pinboard) は白の背景を使っていますが、設定で黒にしたとします。すると、ヘッダーだけが浮き上がっちゃう。

右がソーシャルボタンコーナー・左がヘッダーと決まっていまして、全面に張りめぐらすタイプの "どデカヘッダー" が使えない類のテーマです。

画像の透過処理でもしていれば上手くごまかせないこともないですが、どちらにしてもバックに埋もれてしまう色合いでは意味がない。

無論、最初っからこの手のテーマを使わないという手もあります。
しかしながら、覚えておけば色々と応用が利く知識であることも事実。

目立たなきゃいけないけど、浮いてもいけない。そんな感じです。

やり過ぎると、無料ブログの奇抜な初期テーマ風になってしまう

無料ブログって、意外と凝ったテーマがたくさんありますよね。

ところが。実際に入れてみると、どうもしっくり来なかったりしませんか？
なんなら、ビジネス系のシンプルテーマが一番オシャレだったりして。

こうなってしまう理由は単純。
細かい箇所をいじるのが難しいからなんですよね。

WordPressだとプラグインや自由度の高いテーマを使えば割と簡単ですが、無料ブログで同じことをやろうとすると CSSの知識などが必要。
だから、差別化しようとして奇抜にしたつもりが「あれっ？」となったりします。

ただ WordPressも下手にいじれるもんだから、ついこだわり過ぎちゃうと無料ブログの奇抜な初期テーマ (の高品質版) みたいなヘンテコなデザインに。

もちろんこの現象を華麗に解決した超こだわりブログもありますが、彼らが高度なセンスや技術を駆使されているのは言うまでもないでしょう。

究極は、テキストヘッダー

これまで散々ヘッダー画像のことについてあれこれ書きましたが、最終的に行き着く先は "テキスト" によるヘッダーだと思います。

テキストヘッダーはページの読み込みが軽くなるため、検索エンジンからの評価が得られやすいのも理由の 一つではあるんですが。

やはり、シンプルスタイルで差別化できる人は本当の意味で強い。

有益な記事ありきで、後からヘッダーが認知されていくパターン。
あるいは、純粋にテキストヘッダーそのものが格好良いパターン。

どちらにしても、簡単そうでいて誰にでもできる芸当ではありません。

前提となる知識はもちろん膨大にインプットされているだろうし、単にシンプル＝オシャレの図式だけから導き出されたものではなく、当然のごとくそこに至るまでのトライ＆エラーがあってこそでしょう。

その点で言えばまだ僕はスタート地点にすら立てていませんし、おそらく終わりは無いと思います。結局は自分との戦いですから。

まとめ

というわけで、思いあたるものを７つほど挙げてみました。
僕が何かしらをデザインする際は、いつもこんな感じです。

合っているか間違っているかの話ではなく、"これが自分のやり方" という話。
とはいえ無意識にですが、基礎はある程度押さえているかと思います。手前味噌ですが。

机の上でのお勉強ではなく色々なデザインを片っ端から見て回り、"実際に作ってみて" 自分が感じたことや考えたことを書いていますので。

一人のデザイン好きな人間による "我流" での分析に過ぎませんが、何かしらの参考になれば幸いです。