ヘッダーのナビはCMSから変えられる? ヘッドレス構成で「本文の外側」を渡す設計
ヘッダーのメニューやサイト名も、ヘッドレスCMSならクライアントが編集できます。EmDashのメニュー・サイト設定・ウィジェットエリアの3つを整理し、どこまで渡してどこをコードに残すか、自サイトの実装を例に線引きの基準をまとめました。

「ヘッダーのメニュー、クライアント側で並べ替えられますか」。ヘッドレスCMSの構成を提案すると、ディレクターからほぼ必ずこの確認が入ります。WordPressの「メニュー」画面に慣れていれば当然の質問で、WordPressから移行するときにも一度立ち止まる論点。答えは「できます。ただし全部を渡すのは勧めません」。
CMSで編集できるのは記事や固定ページの本文だけ、と思われがちなのがヘッダーのナビ、サイト名、フッターの文言といった「本文の外側」。ここをどう設計しておくかで、公開後に飛んでくる「ここも自分で変えたい」の数が変わります。
本文の外側は3つに分かれる
EmDashを例にすると、本文の外側は次の3つで扱います(本文の中を拡張する話は別記事に書きました)。
- メニュー — ヘッダーやフッターのリンクの並び。管理画面(
/_emdash/admin/menus)で順番と階層を編集し、テンプレートからはgetMenu("primary")で読みます。項目の種類はページ・投稿・タクソノミー・コレクション一覧・カスタムURLの5つ。ページや投稿を指した項目は/{コレクション}/{スラッグ}に自動で解決され、項目に子をぶら下げればドロップダウンになります。 - サイト設定 — サイト名、タグライン、ロゴ、ファビコン、正規URL、1ページあたりの表示件数、日付書式、タイムゾーン、SNSアカウント、SEOの既定値。
getSiteSettings()でまとめて取れます。 - ウィジェットエリア — テンプレート側で名前をつけた領域(サイドバー、フッターの1列目など)に、管理画面から中身を差し込む仕組み。入るのはリッチテキスト、メニュー、登録済みコンポーネント(最近の投稿、カテゴリ一覧、検索フォームなど)の3種類。
3つとも「使えるかどうか」ではなく、どれを渡すかが設計の中身になります。

全部をCMSに寄せない
このサイトのヘッダーには5つのリンクが出ています。うちCMSのメニューに入っているのは「制作実績」と「About」の2つだけ。残りはコードに直接置いています。
- 「相談する」(CTAボタン)は渡しません。問い合わせ導線を、管理画面の操作ミスが届く範囲に置きたくないからです。
- 「ブログ」は記事が1件でもあるときだけ出す。1件だけ取得して有無を判定しているので、手動でオン・オフする必要がない。
- 「よくあるご質問」は位置もスタイルも決め打ちで、動かす理由がありません。
判断の軸は更新頻度 × 壊れたときの痛さ。よく変わるうえ壊れても軽いものはCMSへ、めったに変わらないのに壊れると売上に響くものはコードへ。この線引きを実装前にやっておくと、あとで「なぜここは変えられないのか」を説明するのがぐっと楽になります。

空でも壊れない書き方にする
渡す以上、消される前提で書きます。
getMenu() は、その名前のメニューが無ければ null を返す。だから受け側はこうしておく。
const menu = await getMenu("primary");
// テンプレート側
{menu?.items.map((item) => (
<a href={item.url} target={item.target}>{item.label}</a>
))}メニューごと削除されてもヘッダーは落ちず、CMS由来のリンクが消えるだけで済みます。サイト名やタグラインも同じで、このサイトでは settings?.title || "Tsudzuri" のようなフォールバックを置いてあります。ロゴは実際いまも未設定のまま。設定されていれば画像、無ければテキスト、と分岐させてあるので表示は崩れません。
空になったときエラーとして扱うのか、その部分を省略するのか。これはデザインの判断でもあるので、実装前にディレクターと決めておくのが早い。
渡す前に決める3つ
- 誰が触るか。サイト設定はサイト全体に効きます。EmDashではAPIやAI経由の操作について、設定の読み取りはEditor以上、更新はAdminと権限が分かれている。日々の更新担当をEditorに置けば、サイト名やSEOの既定値までは触れません。
- 触れる範囲は「作らないこと」で決まる。フッター用のメニューを作らなければ、フッターのリンクはCMSから触れない。権限で塞ぐより、そもそも入り口を用意しないほうが事故が減ります。
- 触れない箇所は理由とセットで渡す。「ここは固定です」だけだと、公開後に不満として返ってくる。「ここを変えると問い合わせ導線が消えるので固定にしています」まで書けば、たいてい納得してもらえます。

本文の中をどう割るか(コレクションのフィールド設計)と、本文の外側をどこまで渡すか。この2つはセットで決めるものです。「本文だけ更新できます」で納品すると、たいてい1か月後に「ヘッダーも変えたい」が来ますから。
実装だけ任せたい制作会社の方へ
ヘッドレスCMSの構築で、クライアントに渡す範囲の設計から実装まで請けています。既存サイトの改修や、実装の難所だけの切り出しでも構いません。お問い合わせはこちらからどうぞ。
本記事は2026年8月時点の情報です。