ヘッダのデザイン

ヘッダとは

ヘッダは人の体で言えばhead、つまり頭です。 昔から文書上部の定型部分はヘッダと呼ばれています。この部分には通常、ロゴマークやナビゲーションメニューを配置します。
HTML5からはヘッダであることを示す<header>タグが 追加されていますので、このタグで記述することをお勧めします。

ロゴマーク

ヘッダをビシッと決めるのはロゴマークです。
ネットを見ていて、ロゴ部分がテキストになっているサイトをよく見かけませんか?あれらの多くは無料ブログであったり、アフィリエイト用のテンプレートを利用したものです。
テキストロゴを見ただけでゲンナリしてしまう人も多いはず。いかにも素人デザイン丸出しだからです。

さてそのロゴですが、何もマークやキャラクタのイラストである必要はありません。
デザイン系のフォントを使ったり、文字をちょこっといじれば、見栄えの良い文字のロゴが作れます。
Adobe Illustratorなどのドロー系ソフトがあると、作成が便利です。
このヘッダのスペースは、画面上端から70~100ピクセルくらいの範囲に収めると格好がつきます。
ロゴの右横には、ナビゲーションメニューを置いてもいいですし、検索窓やキャッチコピーを入れてもOKです。

ロゴのデザインですが、企業のようにすでにロゴマークがある場合は別として、新たに作りたい場合にオススメの方法があります。それは書店に行って、美術書コーナーで「世界のロゴデザイン」のような本をめくってみることです。その際、例えばあなたが医療関係のアフィリエイトサイトを作りたいのだとしたら、頭の中に「医療、健康」といった言葉を置いて探すわけです。ロゴマークの無い企業、例えば精密部品を製造する会社だったら、「機械、パーツ」といった言葉を頭の中でつぶやきながらページを繰っていくわけです。ピンと来るマークがなかったら、さらにキーワードを変えてみる。そして気に入ったロゴマークが見つかったら、それを頭の中でアレンジしつつ帰り、Illustratorなどで形にしていくわけです。

またこの作業には、うれしい副産物も付いてきます。それは、当初考えていたロゴよりも素敵なデザインに巡り会った場合、そこからイメージがふくらんで、サイト全体のデザインもグレードアップする事が多いということ。
書店に行く前はいかにもその業種っぽいカラーリングや雰囲気を頭に描いていたのに、戻る頃には「お菓子のパッケージの雰囲気にしよう」とか、「今回はテクノ系が意外といけるかも」とか、新たな視点が得られる事が多いのです。まだやったことが無い方は是非一度試してみてください。

ロゴの作成に手間はかけたくない場合は、Web上で作成できるロゴジェネレーターもあります。
LOGASTER
シンボルマーク付きのロゴが作成可能。テキストを入力すると提示される100個のバリエーションからもっとも気に入ったデザインを選んで色と背景を編集し、保存する。無料でダウンロードできる低解像度版は透かしが入るなどの制限があり、有料ではこれらの制限が解除される。
フリーフォントで簡単ロゴ作成
日本語のフリーフォントを用いたロゴが作成可能。フォントのサイズや色が調整可能なほか、入力したテキストの漢字カナ変換、全角半角の変換など、テキスト周りの編集機能が充実している。PDF出力機能を備えるのも特徴。

>> 本文のデザイン