はじめに
今回は、製造業のコーポレートサイトでよく見かけるデザインパターンを作っていきます。
参考サイト
製造業のヘッダーラフ案
上記の参考サイトから、ラフを３つ考えました。ほとんどのサイトでは、電話番号やお問い合わせボタンに背景色をつけて、企業のイメージカラーと組み合わせた配色になっています。
これらに加えて、ホバーアクションがあり、カーソルをメニューに重ねると詳細が出てくる仕組みが多いです。
①アイコンを使ったヘッダーデザイン
全体のコード一覧
See the Pen アイコンを使ったヘッダーデザイン by Uka Suzuki (@uukasuzuki_) on CodePen.
②ホバーするとアコーディオンメニューが開くヘッダーデザイン
全体のコード一覧
See the Pen ホバーするとアコーディオンメニューが開くヘッダーデザイン by Uka Suzuki (@uukasuzuki_) on CodePen.
JavaScriptのコード解説
document.querySelectorAll(".has-submenu").forEach(function (menu) {
menu.addEventListener("mouseenter", function () {
menu.querySelector(".submenu").style.display = "block";
});
menu.addEventListener("mouseleave", function () {
menu.querySelector(".submenu").style.display = "none";
});
});
- .has-submenuクラスが付いた要素にホバーイベントを追加しています。また、mouseenterイベントでサブメニューを表示し、mouseleave イベントでサブメニューを非表示にします。
③ホバーするとテキストの色が変化するヘッダーデザイン
全体のコード一覧
See the Pen Untitled by Uka Suzuki (@uukasuzuki_) on CodePen.
今後の課題
独学期間を含めて振り返ると、「どういった要素が求められるのか？」を逆算して考える思考力と、スムーズな操作性などUI/UXに関する技術も少しずつ磨かれているように思います。これらを踏まえ、今後の課題は下記の２点が挙げられます。
1. 参考サイトを分析し、言語化するスキルを高める。
2. デザインの引き出し（ジャンル別に展開するパターン）を増やす。
上記２点がこれからの課題だと考えました。Qiitaでは、学習ノートみたいな感じで「自分が考えた事柄」、「得た知識をもとにアウトプットする力を養う」ことに重点を置き、コーディングとデザインに関する記事をまとめています。
まとめ
今回は、製造業のサイトから見るヘッダーデザインについて考えました。実際に手を動かして制作してみると、paddingやmarginの微調整を考えるのに苦戦しました。