フリーランスとセルフマネジメントby アキユキ

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

初心者向けヘッダーデザインの作り方と流れ!デモデザインで作る過程を具体的に解説

Webデザインを作成する際にとっかかりヘッダーから作りますよね。

ただこのヘッダーは超重要で、なおかつ結構難しかったりします。特にデザインのパターンがまだあまり身についていない初心者の方にとっては、何をどう配置していったらいいのか迷うことも少なくないでしょう。

見ているだけだと簡単そうだけど、やってみると意外と難しいのがWebデザインのヘッダーパーツ。

ですが、ヘッダーデザインの作り方と流れをある程度理解していると、今後ヘッダーデザインする際に、それなりにはやりやすくなるはずです。

経験を積んでいるWebデザイナーはヘッダーを作るときにだいたい「今回はこのパターンかな」というように、要件や情報量にあわせておおよそのパターンがぱっと出てきます。

つまりヘッダーデザインはある程度パターンを含めて作り方やその流れを知っておくと、引き出しが増えデザインへの落とし込み方もわかるので、初心者の方は、やみくもに勉強するよりもパターンや作り方を理解した上で勉強をする方がよいと思います。

ということでこの記事は以降、ヘッダー デザインの作り方と流れを具体的なデモを使って解説していきます。

※この解説で使っているデザインはヘッダーデザインの作り方を、主にレイアウトの視点から解説するために作ったものですので、配色周りは特にラフですが、ご容赦ください(´・ω・`)

とりあえず情報を並べたヘッダーデザインをまずは作成

まずは何ともないパターンからです。メニュー構成を決めたらよくあるこんなパターンをまずは考えてみます。

普通ですよね。これぐらいなら簡単にデザインできそうです。まずはこの形から初めて次にどうするかを考えていきましょう。

ちょっとボタンをカスタマイズしてメリハリをつけてみる

お問い合わせと採用ページは大切なので目立たせたい!と思ったら、下のようなヘッダーデザインに変えてみます。

ボタンにメリハリがついてちょっと良くなりましたね。まずはこういうところからやっていきましょう。

メニューが多い場合の工夫を考えてみる

では、次に「メニュー多かった場合はどうするのか?」ということを考えてみます。メニューが多い場合は1行に収まらないので、2行にすることがあります。ただ、単純に2行にするとメリハリがないので、見せたい優先度が高いメニューはデザインを大きくして、優先度が低いものは小さくまとめます。

デザインを壊さずにすっきりまとまりました。

このように情報が多い場合は優先順位を考えてヘッダーデザインの中に綺麗に整うようにデザインしていきます。

電話番号表示など重要な要素の検討

では次に電話番号を大々的に入れたい場合はどうしましょう?例えばクリニックのホームページなど予約来店が多いものは、お客さんがホームページを見たらすぐに電話ができるようにしたいですよね。電話番号を目立たせることを考えて下図のようにデザインをしてみます。

これだと電話番号が目立ってわかりやすくていいですよね。ちなみにメニューのデザインは他のパーツとはっきり区別がつくようにデザインを変えたので、その点もあいまって情報は増えても見やすくなってきました。

ちなみに細かいですが、メニューの帯のデザインも色んなパターンがあるので考えてみましょう。若干の違いですが、下図のようなメニューのデザインも多いです。

ちなみにパターンとしてはメニューがヘッダー画像の下にくるようなヘッダーデザインもあります。

インプレッションファーストなWebデザインで使うことがあります。

全体的に装飾をする

さて改めてヘッダーデザインを見てみるとまだまだ寂しい感じです。もちろん色味の問題もありますが、パーツ自体がまだシンプルすぎるなという場合は、ここから色んな装飾をしていきましょう

例えばメニューにアイコンを入れてみます。アイコンを入れのが面倒だなと思う人でもFontAwesomeという無料で使えるアイコンサービスを使えばかなり楽にコーディングができます。これはまたの機会にご紹介しますね。

アイコンを入れるとイメージがガラッと変わります。

別にアイコンマストではないですが、いい感じに装飾されました。次にキャッチコピーに目をつけてみましょう。ここも少しさみしい印象がありますよね。キャッチコピーの上に英語のキャッチコピーを入れました。

英語を入れればいいということではありません。キャッチコピーにサブタイトルみたいなものを入れると見栄え的にもしまるので、1つのアイデアとして参考にしてください。

ただこれでもまだ寂しい感じですよね。キャッチコピー自体を少し装飾しましょう。

文字サイズと色をキャッチコピーの中で少し変えました。また、ここではやっていませんが、フォントを変えるのも印象をがらっと変えるかなり有効な手段です。

だいぶ整ってきましたが、もうひと手間かけたいです。なぜならこのヘッダーデザインだとこの会社が何の会社かまだわかりづらいですよね。(この辺はヘッダー画像のチョイスやキャッチコピーにもよります。今回架空のものなのであまり考えていません…)ということでタグライン等の情報を追加していきます。

タグラインなど情報を付け足す

ということで、タグラインとキャッチコピーの下に補足の文章を入れていきます。タグラインというのはよくヘッダ―ロゴの右側に「◯◯◯◯◯なら◯◯株式会社」みたいな文章があると思いますが、それです。

タグラインはその企業が何なのかを一言で表す言葉で、それがあるとすごくわかりやすくなりますので必要性は高いです。

どうでしょうか、だいぶ見栄えが整っていい感じになってきましたね。もちろん説明用のラフなので配色はしないといけませんが。

文字を遊ばせてみよう

さてここからさらに文字を遊ばせてみましょう。これは必要に応じてですが、文字を遊ばせると印象はだいぶ変わります。

ついでに右上のボタンも変えてしまいましたが、印象はがらっと変わりましたよね。

ヘッダー画像の配置方法を変えてみよう

さらにヘッダー画像の配置方法は色々あります。下図のようにヘッダー画像の配置を変えて、それに合わせて他の部分も調整すると(ヘッダー画像も変わっていますがそれ以上に)まるで違うデザインですね。

まとめ:ヘッダーデザインをマスターするには各パーツのパターンを学習していくと良い

ヘッダーデザインの作り方について1つの例をもとに順を追って解説をしてきましたが、ヒントになったでしょうか。ぜひ色んなWebサイトを見てパターンを勉強していただきたいのですが、ポイントとしては、どこか1つ的を絞ってみてみるということをオススメします。

例えばメニューの並びだけを色んなサイトで比較していくと、パーツごとに様々なパターンがあることに気づきます。

そしてそれは実践でも使える知識になりますよ。僕もそんなことをやったことがありますし、今でもたまにそういうことをやります。ヘッダーデザインは重要な部分なので、ぜひマスターしてください。



プロフィール

田中亮行
アキユキ

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介