ChatGPTと一緒にヘッダーを全面アップデート！固定ヘッダー＋サイドメニューの導入方法まとめ

最近、サイトのカテゴリが増えてきて、ヘッダーのメニューが入りきらない問題が発生しました。

特にスマホでは見にくく、操作性も良くなかったので、ChatGPT と対話しながらヘッダーを大幅にリニューアルしました。

この記事では、その作業ログと、実際に行った改善内容をまとめておきます。

■ 課題：カテゴリが増えてヘッダーが狭すぎる

今までは「横並びメニュー」をそのままヘッダーに置いていたため、

• PC：表示が詰まる
• スマホ：最悪はみ出す
• デザインも崩れやすい

という状態でした。

そこで、思い切ってヘッダーの構成を見直すことにしました。

■ 解決策：ヘッダーは最小構成、分類はサイドメニューへ移動

最終的に、ヘッダーとメニュー構成は次のように整理しました。

● ヘッダー構成

ヘッダーは「三本線ボタン・ロゴ・問い合わせ」の3要素に絞りました。

｜三本線｜　　｜YPOindustry｜　　｜問い合わせ｜

• 左：三本線のメニューボタン（サイドバーを開く）
• 中央：ロゴ（トップページへのリンク）
• 右：問い合わせボタン（問い合わせページへのリンク）

● サイドメニュー構成

これまでヘッダーに詰め込んでいたカテゴリは、サイドメニューに移動しました。

• 「私たちについて」へのリンク
• カテゴリ一覧（mapping.php から自動読み込み）
• 文字が長い場合は折り返して全文表示
• サイドバー幅は「画面の約1/3」に固定

これにより、ヘッダー自体はシンプルなままにしつつ、カテゴリ数が増えても対応できる構成になりました。

■ 実際に行った作業内容

① 旧ヘッダーのコードをリファクタリング

もともとの header.php は「横並びメニュー前提」の構造だったので、次のように作り替えました。

• 左に三本線のメニューボタン
• 中央にロゴ（トップページへのリンク）
• 右に問い合わせボタン
• 言語切替バーはヘッダーの直下に固定
• サイドバーは画面左からスライドイン表示

サイト全体のナビゲーションが統一され、見た目も操作感もスッキリしました。

② CSS を整理して header.css を分割

既存の style.css が大きくなってきていたので、ヘッダー専用の header.css を新しく作りました。

header.php では、CSS の読み込みを次のように変更しています。

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/header.css">

header.css を後ろで読み込むことで、ヘッダー周りのスタイルをここに集約でき、管理がかなり楽になりました。

③ style.css から旧ヘッダー関連の不要部分を削除

次に、style.css から「昔のヘッダー用スタイル」を掃除しました。

削除・整理したものの例：

• .header（旧レイアウト用）
• .logo / .nav / .menu-button
• .menu-checkbox
• 旧スマホメニュー関連のメディアクエリ
• 旧 .lang-bar（ヘッダー高さ 70px 前提のもの）
• main { padding-top: 70px !important; } のような強制上書き

トップ画像やショップギャラリー、記事一覧など、コンテンツ側のスタイルはそのまま残しています。

④ メニューボタンと問い合わせが端に寄らない問題を修正

ヘッダーを組み替えたあと、「三本線ボタンと問い合わせボタンが画面の端まで寄らない」という問題が発生しました。

原因は、ヘッダー内のコンテナである .header-inner に max-width: 1200px; と margin: 0 auto; を指定していたためです。 これだと、ヘッダーの中身が中央寄せの箱に収まってしまい、左右の端にぴったり寄らなくなります。

そこで、header.css の .header-inner を次のように変更しました。

.header-inner {
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 8px;
}

この変更により、

• 三本線ボタン：画面左端寄りに配置
• ロゴ（YPO Industry）：中央に表示
• 問い合わせボタン：画面右端寄りに配置

という狙いどおりのレイアウトになりました。

■ 実装後の見た目と使い勝手

● スマホ表示

• 左上に三本線ボタン、中央にロゴが来てバランスが良い
• 三本線タップでサイドメニューがスライドイン
• カテゴリが増えてもスクロールで一覧できる

● PC表示

• 左右の余白を取りつつ、ロゴがきちんと中央に表示される
• 問い合わせボタンが右端に固定されていて使いやすい
• サイドメニューは幅が画面の約1/3で、文字は折り返し表示

ヘッダーがシンプルになったことで、コンテンツ側の情報にも目が行きやすくなりました。

■ 今回の改善まとめ

• ヘッダーを「三本線＋ロゴ＋問い合わせ」の最小構成に整理
• カテゴリ一覧はサイドバーに逃がして、ヘッダーの視認性を確保
• ヘッダー用 CSS を header.css に分割して管理性UP
• 旧スタイルを整理して、style.css をスリム化
• 左右の位置調整は .header-inner の width / margin で制御

ChatGPT と対話しながら進めたおかげで、詰まりそうなポイントもスムーズに解決できました。

■ 今後の予定

• トップページのナビゲーションを新ヘッダーとより統一
• 記事ページ上部のレイアウトもヘッダーに合わせて調整
• 多言語対応（Google 翻訳）の UI を、もう少し分かりやすく改善

ヘッダーまわりはサイト全体の「見た目」と「使いやすさ」に直結する部分なので、 今後も少しずつアップデートしていく予定です。