ヘッダーデザインの参考例をご紹介
247
Webサイトを制作する上で、ヘッダーのデザインに悩む人も多いのではないでしょうか？ヘッダーはサイトのブランドイメージとなる重要なパーツです。
そこで今回の記事では、参考になりそうなヘッダーデザインについて紹介していきます。
目次
ヘッダーデザインの重要性
そもそもヘッダーとは、Webサイトの全ページに共通して、ページの上部に表示されます。もちろん、トップページにもヘッダーはあるので、ユーザーはWebサイトに訪れたときに、ヘッダーを含むトップビジュアルを最初に目にすることになります。ここでユーザーが離脱することなく、サイトを見てもらうためにも、訴求力のあるデザインを考えなければなりません。
また、ヘッダーにはサイト全体の道しるべとなるグローバルナビゲーションメニューが設置されています。メニューの構造もユーザビリティを意識したデザインにしなければ、見てもらいたいページにユーザーを誘導することも難しいでしょう。
このようにヘッダーは、ユーザーに訴求するデザイン性とユーザーが迷うことなくサイトを閲覧できるUIデザイン設計を意識することが重要です。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
参考にしたいヘッダーデザイン
ヘッダーのデザインをする上で、参考になりそうなサイトを紹介します。
アイキャッチにロゴを使ったシンプルなヘッダーデザイン
ブランドイメージを形成するために、ロゴを配置したヘッダーは多くのサイトが採用しています。中でも、シンプルで見やすいヘッダーを集めてみました。
馴染みのあるロゴに、各メニューにはアイコンがついています。さらに、ドロップダウンメニューとなっており、各ページメニューも画像付きです。視覚効果で、どこに何があるのかとてもわかりやすいと思います。
装飾もなく、必要最低限の情報のみでとてもシンプルです。ほとんどのサイトで採用されている、スクロールしてもメニューが上部に固定されるヘッダーになっています。
また、注目ワードで探している商品のページにすぐにいけるのは、ユーザーには大変使いやすいでしょう。
スマホサイトでよく使われる三本線のハンバーガーメニューを配置しただけのサイトです。おしゃれな写真や映像をトップビジュアルで見せたいときには、これぐらいスッキリしていてもいいですね。
右下に「INFORMATION」とコンテンツを覗かせることで、直感的にスクロールできることがわかります。
おしゃれで目を引くヘッダーデザイン
ロゴやメニュー、SNSアイコン、キャッチコピーをバランスよく配置されたデザインです。シンプルだけど、縦書きのテキストやシャチホコのイラストが目を引くアクセントになっていますね。
こちらは一見特徴のないサイトのように見えますが、お問い合わせボタンのデザインが可愛らしいです。
ヘッダーのボタンでは、アクセントカラーべた塗りのボタンをよく見かけますが、ちょっとした遊び心があると見ていて楽しいですね。
スマホのヘッダーデザイン参考例
PC表示でのヘッダーデザイン参考例を紹介してきましたが、スマホ表示でのヘッダーデザインについても紹介します。
スマホは画面サイズが限られてしまうので、極力コンパクトに作りましょう。縦幅は44〜50pxほどが標準です。情報は入れすぎないように、ロゴ・メニューアイコン・お問い合わせアイコンや検索アイコン、など2〜3要素がベストです。
標準的なヘッダーデザイン
多くのスマホサイトが左にロゴ、右にハンバーガーメニューの固定ヘッダーを採用しています。サイトによっては、メニューアイコンの横に電話やお問い合わせアイコンも設置するのも良いでしょう。
工夫を凝らしたヘッダーデザイン
多くのサイトでありがちなヘッダーデザインでは面白みがない、ちょっと変わったことをしたい、と考えている方に、少し工夫を凝らしたサイトも紹介します。
メニューアイコンの形などのデザインを変えてみるのも良い案です。この場合、邪魔にならないように気をつけないといけませんね。
こちらもメニューアイコンがデザインされています。こども園らしく温かみが感じられますね。メニューアイコンを一からデザインするとオリジナリティが伝わります。
こちらのサイトも保育園ですが、こちらはヘッダーのトップにフラッグのようなラインが入っています。ちょっとした装飾の参考になりそうです。ただ、あまりヘッダーの高さが出ないように気をつけましょう。
ヘッダーデザインはユーザーを意識して作ろう
ヘッダーの重要性や、デザインの参考となるサイトを紹介しました。
ヘッダーデザインはユーザーの使いやすさや分かりやすさと、訴求力を考えることが大切なので、しっかりと作り込みましょう。ぜひ、紹介したサイトを参考にヘッダーデザインにもこだわってみてください。
- CATEGORY :
- サイト制作