はじめに：サイトの「回遊性」を高める、案内設計の重要性
こんにちは♬
『からだ職の「まったり」未来設計ラボ』のTatsuです^^
あなたのサイトは、今、素晴らしい内容を備えた、価値ある建物になった状態です。
しかし、どれほど素晴らしい部屋があっても、お客様がその部屋の存在に気づけなかったり、部屋から部屋へ移動する方法が分からなかったりすれば、その価値は伝わりません。
今回の講座⑧は、完成した各部屋を、お客様がストレスなく自由に行き来できるようにするための、「通路」と「案内板」を整備する、極めて重要な回です。
具体的には、サイトの最も目立つ場所である「ヘッダー」「フッター」、そしてその中核をなす「ナビゲーションメニュー」の設定方法を、初心者の方にも分かりやすく、徹底的に解説していきます。
この「案内設計」が優れているかどうかは、お客様の満足度、ひいてはあなたのビジネスの信頼性に、直接影響します。
この記事を読み終える頃には、あなたは、プロが意識する「使いやすさ（ユーザビリティ）」の基本を理解し、お客様をけっして迷わせることのない、親切なWebサイトを構築できるようになっています。
第一章：【基礎知識】サイトを構成する4つの基本パーツ
具体的な設定に入る前に、Webサイトが、どのような基本パーツで構成されているのかを理解しておきましょう。
どのテーマを使っても、この基本構造はほとんど変わりません。
1. ヘッダー (Header)
- 役割： Webサイトの全ページ共通で、一番上に表示される部分です。
サイトの「顔」とも言える場所で、主にサイトのロゴ（あなたの事業のシンボル）と、後述するグローバルナビゲーションメニュー（主要ページへの案内板）が配置されます。
訪問者は、このヘッダーを見ることで、「自分は今、〇〇というサイトにいるんだな」と、瞬時に認識することができます。
2. フッター (Footer)
- 役割： Webサイトの全ページ共通で、一番下に表示される部分です。
ヘッダーほど目立ちませんが、サイトの「土台」として、補足的な情報や、重要なリンクを整理して配置する、大切な役割を担います。
ここには、コピーライト表記、プライバシーポリシーへのリンク、事業所の連絡先などが置かれるのが一般的です。
3. ナビゲーションメニュー (Navigation Menu)
- 役割： サイト内の主要なページへのリンクをまとめた、最も重要な「案内板」です。
通常、ヘッダー内に設置されるメニューを「グローバルナビゲーション」、フッターに設置されるメニューを「フッターナビゲーション」と呼びます。
このメニューが分かりやすいかどうかで、サイトの使いやすさが決まります。
4. ウィジェットエリア (Widget Area)
- 役割： サイトのサイドバー（メインコンテンツの横の領域）や、フッター内部などに設けられた、特定の機能を持つ「部品（ウィジェット）」を配置するための、専用スペースです。
ここには、「プロフィール紹介」「人気記事ランキング」「営業日カレンダー」といった、補足的な情報を配置します。
上から「ヘッダー」、中央に「メインコンテンツ」と「サイドバー」、一番下に「フッター」が色分けされて配置されている。
]
今回の講座では、これらのパーツを、あなたのビジネスに合わせて、一つひとつ設定していきます。
第二章：ナビゲーションメニューの作成 ― サイトの主要な通路を作る
まず、サイト巡回の核となる「ナビゲーションメニュー」を作成します。
ここでは、ヘッダーに表示する主要なメニュー（グローバルナビゲーション）の作り方を例に、手順を解説します。
2-1. メニュー作成画面へのアクセス
- WordPressの管理画面にログインし、左メニューから「外観」→「メニュー」をクリックします。
- 初めてメニューを作成する場合、「メニューを作成しましょう」という画面が表示されます。
2-2. STEP1：新しいメニューの作成
- 「メニュー名」の入力欄に、あなたが管理しやすい名前を入力します。
ヘッダーに使うメニューなので、例えば「ヘッダーメニュー」や「グローバルナビゲーション」といった名前にすると分かりやすいでしょう。
（※この名前は、訪問者には見えません） - 名前を入力したら、「メニューを作成」ボタンをクリックします。
2-3. STEP2：メニューにページを追加する
メニューの「器」ができたので、次に、その中に、案内したいページへのリンクを追加していきます。
- 画面の左側にある「メニュー項目を追加」というボックスに注目してください。
ここには、「固定ページ」「投稿」「カスタムリンク」「カテゴリー」といった項目が並んでいます。 - 「固定ページ」の項目をクリックして開くと、あなたが講座⑦で作成したページの一覧が表示されます。
- メニューに追加したいページ（例：「プロフィール」「サービス内容」「料金」「アクセス」「お問い合わせ」）のチェックボックスに、チェックを入れます。
- チェックを入れたら、「メニューに追加」ボタンをクリックします。
- すると、画面右側の「メニュー構造」というボックスに、選択したページが項目として追加されます。
2-4. STEP3：メニューの順番を整理し、階層化する
追加したメニュー項目は、お客様が分かりやすいように、順番を整える必要があります。
- 順番の入れ替え：
- メニュー項目を、ドラッグ＆ドロップ（マウスで掴んで、好きな場所に移動）するだけで、簡単に入れ替えることができます。
- 一般的な順番の例： 「ホーム(TOP)」「プロフィール」「サービス内容」「料金」「お客様の声」「アクセス」「お問い合わせ」
- 階層化（ドロップダウンメニューの作成）：
- 特定の項目の「子メニュー」として、項目をぶら下げたい場合があります。
例えば、「当院について」という親メニューの下に、「プロフィール」と「院内紹介」を置く、といった形です。 - この場合、子にしたい項目（例：「プロフィール」）を、親にしたい項目の下に移動させ、少しだけ右にずらして（インデントして）ドロップします。
- 「副項目」という表示が出れば、階層化は成功です。
サイト上では、親メニューにマウスを合わせると、子メニューが表示される「ドロップダウンメニュー」になります。
- 特定の項目の「子メニュー」として、項目をぶら下げたい場合があります。
2-5. STEP4：メニューの位置を決定し、保存する
メニューの構造が完成したら、最後に「このメニューを、サイトのどこに表示しますか？」という、場所の割り当てを行います。
- 「メニュー構造」ボックスの下にある「メニュー設定」の「メニューの位置」という項目に注目してください。
- ここには、「ヘッダーナビゲーション」「フッターナビゲーション」といった、テーマが用意したメニューの表示場所の候補が、チェックボックスで表示されます。
（※表示される名称は、お使いのテーマによって異なります） - 今回はヘッダーに表示したいので、「ヘッダーナビゲーション」や「グローバルナビゲーション」「メインメニュー」といった名称の項目に、チェックを入れます。
- 最後に、「メニューを保存」ボタンをクリックします。
これで、あなたのサイトのヘッダーに、作成したナビゲーションメニューが表示されるようになりました。
実際にサイトのトップページを開いて、メニューが正しく表示されているか確認してみましょう。
第三章：ヘッダーの設計 ― サイトの「顔」を整え、ブランドを伝える
ナビゲーションメニューは、ヘッダーを構成する最も重要な要素ですが、ヘッダー全体の設計もまた、サイトの第一印象を決定づけます。
ここでは、テーマのカスタマイズ機能を使って、ヘッダーを整える方法を解説します。
サイトの象徴「ロゴ画像」を設定する
サイトのタイトルを、テキストではなく、オリジナルのロゴ画像にすることで、専門性とブランドイメージが格段に向上します。
- 管理画面の左メニューから「外観」→「カスタマイズ」をクリックします。
- テーマのカスタマイズ画面が開きます。
「サイト基本情報」や「ヘッダー設定」といった項目の中に、「ロゴ」を設定する場所があります。
（※名称はテーマにより異なります） - 「ロゴを選択」ボタンを押し、あらかじめ用意しておいた、あなたの事業のロゴ画像をアップロードし、設定します。
ヘッダーのレイアウトを調整する
SWELLなどの高機能なテーマでは、ヘッダーのレイアウト（ロゴとメニューの配置関係）を、複数のパターンから選択できます。
- 一般的なレイアウト例：
- ロゴが左、メニューが右
- ロゴが中央、メニューがその下
- ヘッダーが、スクロールしても画面上部に固定表示される（追従ヘッダー）
これらの設定も、同じく「カスタマイズ」画面の「ヘッダー設定」から、直感的に変更することが可能です。
あなたのサイトの雰囲気に合わせて、最適なレイアウトを選択しましょう。
【応用編】ヘッダーに「予約ボタン」を設置する
整体院やサロンのサイトでは、ヘッダーの右端などに、常に「ご予約はこちら」といった、目立つボタン（CTAボタン）を設置しておくと、コンバージョン率の向上が期待できます。
高機能テーマには、このCTAボタンを、ヘッダーに簡単に設置できる機能が備わっていることが多いです。
- SWELLの場合： 「カスタマイズ」→「ヘッダー」→「ヘッダーのボタン設定」から、ボタンのテキスト、リンク先、色などを簡単に設定できます。
ヘッダーの右端に、目立つ色の「ご予約はこちら」ボタンが設定されているプレビュー画面]
第四章：フッターの設計 ― サイトの信頼性を補強する土台作り
フッターは、サイトの最下部にありながら、ユーザーの信頼性を担保し、回遊を助けるための重要な役割を担っています。
フッターの戦略的な役割
- 補足的な案内： ヘッダーの主要メニューには含めなかった、補足的なページ（プライバシーポリシーなど）への案内を担います。
- 信頼性の提示： 事業所の連絡先や、コピーライト表記を明記することで、サイトの運営者情報を明確にし、信頼性を高めます。
- 回遊の最終地点： ページの最後まで読み終えたユーザーが、次に行うべきアクション（他のページへの移動、トップへ戻るなど）を提示する、最終的な受け皿となります。
フッターメニューを作成し、割り当てる
ヘッダーメニューと同様の手順で、フッターに表示するための、もう一つのメニューを作成します。
- 「外観」→「メニュー」画面で、「新しいメニューを作成しましょう」をクリックします。
- メニュー名を「フッターメニュー」などと名付け、「メニューを作成」します。
- メニュー項目には、ヘッダーメニューと重複しても構いませんが、特に「プライバシーポリシー」や「免責事項」といった、法的ページへのリンクを含めるのが一般的です。
（※これらのページの作成は、後の講座で詳しく解説します） - メニュー設定の「メニューの位置」で、「フッターナビゲーション」などにチェックを入れ、「メニューを保存」します。
フッターウィジェットに情報を追加する
多くのテーマでは、フッターが複数のエリア（例：左・中央・右の3カラム）に分かれており、それぞれに「ウィジェット」を配置できます。
- 管理画面の左メニューから「外観」→「ウィジェット」をクリックします。
- 「フッター1」「フッター2」といった、ウィジェットエリアが表示されます。
- ここには、以下のような情報を配置するのが効果的です。
- 事業所名、住所、電話番号、メールアドレス（「テキスト」ウィジェットを使用）
- 営業時間や定休日（「テキスト」ウィジェットを使用）
- サイトロゴの画像（「画像」ウィジェットを使用）
- SNSへのリンクアイコン（テーマ独自のウィジェットや、プラグインで追加）
フッターエリアに、「テキスト」ウィジェットで連絡先情報が追加されている状態のスクリーンショット]
コピーライト（著作権）表記を設定する
サイトの最下部に表示される「© 2025 あなたのサイト名。
All Rights Reserved.」といったコピーライト表記は、サイトの公式性を高めます。
これも、「カスタマイズ」画面の「フッター設定」などから、簡単に設定・変更ができます。
第五章：サイドバーの有効活用 ― 回遊を促す補足情報
ブログ記事ページなどで表示されるサイドバーは、メインコンテンツの補助として、ユーザーの回遊を促すための重要なスペースです。
サイドバーに配置すべき、おすすめウィジェット
フッターと同様に、「外観」→「ウィジェット」画面から、サイドバーに表示する内容を設定します。
「からだ職」のサイトでは、以下のウィジェットを配置するのが効果的です。
- 1. プロフィール： あなたの顔写真と、簡単な自己紹介、そして詳細なプロフィールページへのリンクを設置します。
記事を読んであなたに興味を持った読者が、すぐに「どんな人が書いているのか」を確認できるようにするためです。 - 2. 人気記事ランキング： あなたのサイトで、最もよく読まれている記事をリスト表示します。
初めてサイトを訪れた人が、「まずはこの記事から読んでみよう」と、サイトに深く入ってくれるきっかけになります。
（※人気記事を表示するには、「WordPress Popular Posts」などの別途プラグインが必要になる場合があります） - 3. 最新の投稿： サイトが、現在もきちんと更新されていることを示す証拠になります。
- 4. カテゴリー： ブログ記事をカテゴリー分けしている場合に、カテゴリー一覧を表示します。
読者が、自分の興味のあるトピックの記事を探しやすくなります。 - 5. CTA（行動喚起）エリア： 「画像」ウィジェットなどを使い、あなたのサービスや、体験セッションの案内バナーを設置します。
記事を読んで、あなたの専門性に興味を持った読者を、スムーズにサービスページへと誘導します。
上から、プロフィール、人気記事、カテゴリー、CTAバナーが配置されている。
]
おわりに：命が吹き込まれ、動き出したあなたのサイト
今回の講座⑧、本当にお疲れ様でした。
あなたは今、ただページが点在しているだけの「情報の集合体」だったご自身のサイトに、ヘッダー、フッター、そしてナビゲーションメニューという、見事な「動線」を設計し終えました。
- お客様は、もうサイト内で迷うことはありません。
- あなたの最も伝えたい情報（サービス内容やプロフィール）に、いつでもアクセスできます。
- サイト全体が、一つの意志を持った、機能的な「建物」として、動き始めました。
これで、お客様をお迎えするための、外側の準備は、ほぼ完璧に整いました。
次の講座⑨では、いよいよ、この美しい器の中に、あなたの専門知識という、最も価値のある「中身」を、注ぎ込んでいく作業、すなわち「ブログ記事の書き方」を、具体的に学んでいきます。
WordPressの心臓部である「ブロックエディタ」を自在に操り、読者の心に届く、価値ある情報を発信していく、最も創造的なステップの始まりです。
楽しみにしていてくださいね。
P.S.
最高の「案内設計」が完成したあなたの城が、お客様から選ばれ、愛される目的地になるための「武器」について。
その城の価値の源泉となる「① 圧倒的な専門技術」を磨きたいなら、僕が主宰する「日本IASTM筋膜リリース協会」のセミナーが、あなたの城に、揺るぎない輝きを与えるかもしれません。
そして、その素晴らしい城の存在を、世の中に広く知らせるための「② 集客できるホームページ運用術」。
僕自身が300万円の失敗から学んだ全てを注ぎ込み、あなたの城をお客様で満員にするサポートを行う「破格の価格で高品質ホームページも制作」も行っています。
最後までお読み下さりありがとうございました^^
ーTatsu
