はじめに
本書の目的
このドキュメントは、ホームページの「メニュー」に焦点を当て、役割や種類、設定方法、実装のコツまでを分かりやすくまとめたものです。制作や運用の現場ですぐに活用できる実務的な知識を提供します。
想定読者
- ホームページを作成・管理する初心者の方
- WordPressでサイトを運用している方
- デザインや導線を見直したい制作担当者
専門用語は最小限に抑え、具体例を交えて説明します。
本書で扱う主な内容
- メニューの基本的な役割と種類（ナビゲーション、フッターなど）
- WordPressでのメニュー設定方法（実際の手順を想定）
- ハンバーガーメニューの実装（モバイル対応を中心に）
- グローバルナビゲーション設計のポイント（ユーザー導線の考え方）
- 制作全体におけるメニューの位置づけ（コンテンツとの関係）
読み進め方の目安
章ごとに実践的な手順や注意点を示します。まず第2章で基本を押さえ、第3章以降で具体的な設定や実装方法を確認してください。制作中に迷ったら、本書の該当章を参照すると効率よく解決できます。
注意事項
本書は一般的な制作手順を示します。テンプレートやプラグインごとの細かい違いは各環境で確認してください。必要な場合は実際の画面を見ながら設定することをおすすめします。
ホームページメニューの基本的な役割と種類
メニューの基本的な役割
ホームページのメニューは、訪問者が必要な情報へ迷わず到達するための道しるべです。ページ間のつながりを示し、目的別に情報を整理します。使いやすいメニューは滞在時間を延ばし、目的達成を助けます。
主なメニューの種類と特徴
グローバルナビゲーション
サイトの上部に配置し、主要なカテゴリやサービスへ直接リンクします。初めて来た人でもサイト構成が分かるように、項目は5～7個程度に絞ると良いです。
スマホ用ヘッダー
画面上部に表示される簡易版ナビです。ロゴと検索、メニュー開閉ボタンを配置し、縦スクロールの操作を妨げないようにします。
ハンバーガーメニュー（スマホ開閉メニュー）
小さな画面で多くの項目を収めるときに使います。開閉で一覧を見せ、階層は深くしすぎないことが重要です。主要項目はトップに置きます。
フッターメニュー
ページ下部にある補助的なナビです。会社情報、利用規約、問い合わせ先などの固定情報を置きます。全ページ共通のリンクを示すのに向いています。
固定フッター（スマホ向け）
スマホで常時表示されるボタン群です。問い合わせや予約、カートなど頻繁に使う動作をワンクリックで行えます。表示領域を圧迫しない配慮が必要です。
各メニューは役割を分け、重複を避けると使いやすくなります。ユーザーの行動を想像して配置を決めると良いです。
WordPressでのメニュー設定方法
はじめに
WordPressのメニューは訪問者を案内する重要な部分です。ここでは管理画面での基本操作をわかりやすく説明します。
メニューを作る手順
- ダッシュボードの「外観」→「メニュー」に移動します。
- メニュー名を入力して「メニューを作成」をクリックします。
- 左側から固定ページ、投稿、カテゴリー、カスタムリンクなどを選んで「メニューに追加」します。
順序と階層の作成
追加した項目はドラッグ＆ドロップで並べ替えます。項目を少し右にずらすと子メニュー（ドロップダウン）になります。階層を使って見やすく整理してください。
表示位置と保存
テーマごとに設定できる表示位置（例：グローバルナビ、スマホ用ヘッダー、フッター）を選び、「メニューを保存」して完了です。
ちょっとしたコツ
- 外部リンクはカスタムリンクで追加します。
- 「表示オプション」からCSSクラスや説明を表示できます。
- メニューが反映されない場合は、テーマのメニュー位置設定やキャッシュを確認してください。
この手順で基本は完成します。必要に応じてプラグインで拡張することもできます。
ハンバーガーメニューの実装
ハンバーガーメニューは、モバイルで画面をすっきり見せるための定番です。ここではHTML・CSS・JavaScriptを使った実装手順を、わかりやすく説明します。
1. レイアウト作成
ヘッダーの中にbutton要素（ハンバーガーボタン）とnav要素（ナビ）を用意します。例：buttonで開閉を制御し、navにリンクを並べます。buttonはアクセス性のためにaria-expanded属性を使います。
2. ヘッダー・フッターのスタイル調整
ヘッダーは目立ちすぎない高さにしておきます。フッターとの重なりを避けるためz-indexを調整します。ボタンとナビの余白はタップしやすいように広めに取ります。
3. メニュー構造作成
nav内はul>li>aの構造にすると管理しやすいです。サブメニューがある場合は折りたたみ用のクラスを付けておきます。
4. クリック動作のJavaScript制御
ボタンのクリックでnavにクラスを付け外しし、表示・非表示を切り替えます。例：button.addEventListener(‘click’, ()=>{nav.classList.toggle(‘open’);button.setAttribute(‘aria-expanded’, nav.classList.contains(‘open’));}); リンクを押したらメニューを閉じる処理も入れます。
5. PCサイズのレイアウト作成
メディアクエリで一定幅以上はハンバーガーを非表示にして、横並びのグローバルナビを表示します。トランジションを使うと開閉が滑らかです。
ポイント：buttonとnavは意味を持つ要素なので、ボタンで操作しnavにナビゲーションを記述するやり方を守ると構造が明確になります。
グローバルナビゲーション設計のポイント
目的
グローバルナビゲーションはサイト全体で重要な情報へ直接移動できる道しるべです。ユーザーが迷わず目的のページにたどり着けることを最優先に設計します。
設計の手順
- サイト構造を把握する：主要なページと補助ページを洗い出します。例）会社サイトなら「会社概要」「サービス」「料金」「採用」「お問い合わせ」。
- 優先順位を決める：ユーザーにとって重要な順に並べます。トップは最も訪れてほしい情報を置きます。
- 数を絞る：トップレベルは5〜7項目が目安です。多いと見づらくなります。
ラベリングと並び順のコツ
- 短く分かりやすい語を使う（例：「料金」「お問い合わせ」）。
- 同類項目はまとめてグループ化します。
- CTA（例：無料相談）は目立つ位置に配置します。
モバイル対応
モバイルでは表示スペースが限られるため、優先順位を見直して主要項目を優先表示します。ハンバーガーメニュー内の構成も同じ基準で整理します。
アクセシビリティと運用
キーボード操作やスクリーンリーダーに配慮し、リンクテキストは具体的にします。運用面ではアクセス解析で利用状況を確認し、定期的に改善します。
ホームページ制作における全体的な位置づけ
役割と位置づけ
ホームページは会社やサービスの「顔」です。WordPressなどのCMSを使うと、テキストや画像、バナーを効率よく配置できます。テンプレートを使えば、レイアウト変更だけで全体の雰囲気を整えられます。メニューは導線の核で、訪問者を目的のページへ導きます。
制作の流れ（実務的）
- 目的と対象を定める（例：問い合わせ増加、商品案内）
- 情報設計を行う（ページ構成とメニュー）
- テンプレートに素材を当てはめる（ヘッダー・フッター含む）
- レスポンシブ調整と動作確認
- 公開後の運用・更新
メニューとデザインの統合
メニューは見やすさを優先します。主な項目を上部に配置し、カテゴリはドロップダウンで整理します。ハンバーガーや固定ヘッダーも検討します。ビジュアル（バナーやアイコン）と合わせると誘導力が高まります。
運用・保守の視点
CMSなら更新が容易です。画像やテキストは区切って管理し、更新手順をマニュアル化します。バックアップとセキュリティ対策も日常的に行ってください。
実務のヒント
- 初期はシンプルなメニューで始め、分析を見て改良する
- テンプレートのブロック機能を活用して部品化する
- スマホ表示を常に確認する
これらを意識すると、制作と運用が両立しやすくなります。
