【Photoshop×CSS】よくあるヘッダー５選 〜デザイン編〜
本日は、オーソドックスなホームページのヘッダーデザインをご紹介します。同じ素材を使っていても、加工や配置の仕方で雰囲気はガラッと変わります。
ヘッダー製作に悩んだら、ぜひ眺めてみてください。
また、「よくあるデザイン」でも、自分で製作するとなると、意外と「あれ？ここはどうするんだったかな…？」という部分が出てくると思います。Photoshop×CSSでの製作工程がパッと思い浮かばなかったものについては、実装編もご覧ください！
その１. 横並びメニュー
まずは、もっとも一般的な横並びのメニューです。
ファーストビューに使用する写真が決まっている場合、文字やボタンの色は、写真から抽出すると良いでしょう。数カ所から色を抽出し、実際に配置してみて、全体によく馴染む色を選びましょう。
横並びメニュー 〜応用編〜
横並びメニューを用いた、他のデザインです。同じ写真素材を使ってもかなり印象が変わって見えると思います。
実装方法がわからない方は、コーディング編をご覧ください！
その２. 縦並びメニュー
次は、横書きの文字を縦に配置したメニューです。すっきりとおしゃれなWEBサイトでよく見かけますね。
ファーストビューに縦長の写真を採用したい場合や、メニューバーに載せたい項目がやや多い時などにも活躍します。
縦並びメニュー 〜応用編〜
横並びメニュー編で使った写真を再び登場させました。メニューを縦並びにすると、メリハリが効いて大人な印象になりましたね。
メニュー部分をダークカラーにするか、白（or カラー）グラデーションするかで、また印象が変わります。どちらもよく使われるので、両方すぐ作れるようにしておきましょう。
その３. 縦書きメニュー
縦書き文字を使ったメニューです。凝ったデザインのホームページや、和風テイストのページでよく見かけます。
…とはいえ、まだ横書きメニューの方が一般的です。ユーザーが「メニュー」とわかるよう、余白を十分とって（メッセージやキャッチフレーズに溶け込まないよう）メリハリのあるデザインにしたいところです。
縦書きメニューには、下記のようにも使えます。
メニューに入れたい項目は多いけれど、ページデザインはスッキリさたい…そんな時はメニューを「かたまり」ごとに２つに分けましょう。ひとつ目のかたまりは、左上のメニューをクリックすると展開するようにしておきます。そしてふたつ目のかたまりは、左サイドに縦並びに配置します。
これで、メニューバーがずらずらと長くなることを防げます。
その４. 「絵＋文字」のメニュー
ユーザーに親やすさを感じてもらうために、メニューの文字にイラストやアイコンをプラスするパターンがあります。
この場合、メニューの文字だけでなくイラストにもリンクが適用されていなければなりません。コーディングの際はこの点に注意しましょう。
写真は、Photoshopの「曲線ペンツール」を使って切り抜きをしています。切り抜き方は実装編で解説します。
「絵＋文字」のメニュー 〜応用編〜
イラスト（またはアイコン）と文字を横並びにしたバージョンです。ファーストビューは、最近よく見かける「ふにゃふにゃ図形」で写真をくり抜いたものにしてみました。これも、Photoshopの「曲線ペンツール」で簡単にできますよ！
その５. 項目が多いメニュー
前章でも少し触れましたが、ホームページによってはメニューバーに入れたい項目が多くなってしまう場合があります。
特に、学校や企業のホームページに顕著です。企業のページでは、ヘッダーの目立つところに電話番号や「お問い合わせ」ボタン、「おも見積もり」ボタンを置くことも多いため、メニューバーの内容がてんこ盛りになってしまうこともあります。
他にも、「英語、日本語、中国語…」など言語切り替えボタンを設置したり、（お年寄りのためなど）文字サイズを大きくするボタンをメニューバーに加えることもあります。
メニューバーに載せる項目が多くなってしまう場合は、項目を分類し、「かたまり」ごとに段を分けたり、配置を工夫することでユーザーに分かりやすいヘッダーを心がけましょう。
最後までお読みいただきありがとうございました。
今回例示したホームページデザインは、この記事のために作成したものであり、実在の団体のホームページはありません。また、今回使用した画像は「pixabay」「PhotoAC」「Adobe stock」から、ロゴは「Canva」から取得したものです。どれも基本的に商用利用可能な素材を扱っています。
ただし、ご自身でご利用の際は、各素材サイトの規約をよく確認しましょう。商用利用の範囲はサイトごとに細かく決まっております。写真やロゴそのものの販売はNGであったり、ビジネスでの使用にはそれぞれの規約に基づいたアクション（料金の支払ってデザインを買い取る、クレジットの表記…）が必要になりますのでご注意ください。