はじめに

今回は、製造業のコーポレートサイトでよく見かけるデザインパターンを作っていきます。

参考サイト

株式会社TKS
https://tks-gifu.jp/?_gl=1%2A1tct69j%2A_ga%2AMzI0Njk0ODU1LjE3MjgyNzk3OTM.%2A_ga_1YRT15EYTX%2AMTcyODI3OTc5My4xLjEuMTcyODI4MTAwNS42MC4wLjA.

株式会社バイタル
https://vaital.co.jp/vaital/?_gl=1%2A3fitv4%2A_ga%2AMzI0Njk0ODU1LjE3MjgyNzk3OTM.%2A_ga_1YRT15EYTX%2AMTcyODI3OTc5My4xLjEuMTcyODI4MTAwNS42MC4wLjA.

株式会社ISSダイニチ
https://www.kk-dainichi.co.jp/?_gl=1%2A3fitv4%2A_ga%2AMzI0Njk0ODU1LjE3MjgyNzk3OTM.%2A_ga_1YRT15EYTX%2AMTcyODI3OTc5My4xLjEuMTcyODI4MTAwNS42MC4wLjA.

合同会社宇野かばん工房
https://www.unokaban.jp/?_gl=1*1ife39g*_ga*MzI0Njk0ODU1LjE3MjgyNzk3OTM.*_ga_1YRT15EYTX*MTcyODI3OTc5My4xLjEuMTcyODI4MTAwNS42MC4wLjA.

製造業のヘッダーラフ案

上記の参考サイトから、ラフを３つ考えました。ほとんどのサイトでは、電話番号やお問い合わせボタンに背景色をつけて、企業のイメージカラーと組み合わせた配色になっています。

これらに加えて、ホバーアクションがあり、カーソルをメニューに重ねると詳細が出てくる仕組みが多いです。

①アイコンを使ったヘッダーデザイン

全体のコード一覧

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の微調整を考えるのに苦戦しました。