Studioのヘッダーナビを崩れにくくする設計——841pxで収める幅の計算と、スマホへの切り替え

ロゴとナビが重なる、右端のボタンが見切れる——ヘッダーは、ほかの部分よりも崩れが目立ちやすい場所です。「絶対に崩れない設定」があればよいのですが、項目の文字数や書体、見る端末が変われば必要な幅も変わるため、そう言い切れる設定値はありません。

そこでこの記事では、「どの幅でも収まるか」を足し算で確かめる方法を紹介します。本文の数値は、実際にブラウザで測った例です。Studioの規定値ではなく、自分のヘッダーに置き換えて使うための目安として読んでください。

前提：3つの帯域と、それぞれの「いちばん狭い幅」

Studioの初期設定のブレイクポイントは、パソコン（編集の基準は1280px）・タブレット840px・モバイル540pxです。公開したサイトでは、区切りの中では同じ設定が効くため、パソコンの設定は841px以上のすべての幅で使われます。

つまり、各帯域の「いちばん狭い幅」で収まっていれば、その帯域のどの幅でも収まります。確かめる幅は次の3つです。

• パソコン：841px
• タブレット：541px
• モバイル：375px前後（さらに小さい320px前後の端末も想定）

追加のブレイクポイントを設定している場合は、同じ考え方で「次に狭い区切りの1px上」を使います。区切りの考え方はStudioのブレークポイント入門——PC・タブレット・スマホで崩れにくいサイトの考え方、区切りの中で崩れるケースはStudioで公開したサイトが「PCより少し狭い画面」だけ崩れるときに疑うことにまとめています。

パソコン帯域は、841pxの「幅の予算」で考える

画面の左右に余白を取ると、ヘッダーの中身が使える幅（内側の幅）が決まります。この内側の幅に、ロゴ・ナビの全項目・ボタンが、間隔も含めて入っていれば収まります。

ナビの幅は「項目の文字幅の合計＋項目どうしの間隔」で出せます。全角の文字は、文字サイズと同じ幅になります。文字が14pxなら、4文字の項目は56pxです。

上の図の前提は、左右の余白32px（内側777px）、ロゴ幅120px、ロゴとナビの間16px、項目の間24px、ボタンは文字の左右に20pxずつの余白、文字14pxです。この前提で、文言の長さと項目数を変えながら実ブラウザで測ると、次のようになりました。

• 4文字×5項目＋ボタン4文字：使用632px（145px余る）
• 4文字×6項目＋ボタン4文字：使用712px（65px余る）
• 4文字×5項目＋ボタン9文字（「ご相談・お見積もり」）：使用702px（75px余る）
• 4文字×6項目＋ボタン9文字：使用782px（5px溢れる）
• 6文字×5項目＋ボタン4文字：使用約772px（約5px余るだけ）
• 6文字×6項目＋ボタン4文字：使用約880px（約103px溢れる）

項目を1つ増やす、ボタンの文言を長くする、といった小さな変更が重なると、あっという間に足りなくなることが分かります。収まらないと、右端が見切れたり、ナビがロゴに重なったりします。

崩れにくくするための約束事

• ナビは5項目まで、ボタンの文言は4文字以内を目安にする（上の実測では、4文字の項目5つ＋4文字のボタンで145px余った）
• 計算で「ぴったり」を狙わず、数十px以上の余裕を残す（書体や環境で数pxずれる。上の値はMacのChromiumでの実測）
• ロゴは幅を決めて固定する。画像ボックスの「Imgモード」なら、元の縦横比を保ったまま表示できる（公式ヘルプ）
• 項目の文言を後から長くしたときは、幅の計算をやり直す
• 入りきらない項目は、文言を短くするか、フッターへ回して減らす

タブレット・スマホでは、ナビを別の形に切り替える

タブレット帯域でいちばん狭い幅は541pxです。左右の余白を24pxずつとすると、内側は493px。ロゴ（120px）とその間（16px）を引くと、ナビに使えるのは357pxしかありません。上の例のナビだけで376pxなので、ボタンを置く前に足りなくなります。だから、タブレットとモバイルでは、ナビを横に並べず、ハンバーガーメニューに切り替えるのが現実的です。

ただし、公式ブログでも案内されているとおり、ボックスの構造（入れ子の関係）はブレイクポイントごとに変えられません。そこで、パソコン用のナビと、ハンバーガーのアイコンを別々のボックスとして両方置き、帯域ごとに表示・非表示を切り替えます。公式ヘルプで案内されている手順は次のとおりです。

• レイヤーパネルで対象のボックスの目のアイコンを開き、表示したくない帯域のチェックを外す
• パソコン用のナビは、「タブレット」「モバイル」のチェックを外す
• ハンバーガーのアイコンは、「デフォルト」（と「スモール」）のチェックを外す
• スマホ用のメニューは「モーダル」のページとして作り、中に閉じるボタンを置いてリンクを設定する

注意点として、親のボックスを非表示にすると、その中のボックスもすべて非表示になります。ナビ全体を1つの親ボックスにまとめて切り替えると、設定が1か所で済みます。

ハンバーガーのアイコンは、指で押しやすい大きさにします。タップ領域の目安として、AppleのHuman Interface Guidelinesは44pt、Material Designは48dp、WCAG 2.2の最小基準は24pxです。44px前後にしておくと、どの基準にも収まりやすくなります。モバイルでは、375pxで左右の余白を16pxずつとすると内側は343px。ロゴ120pxとアイコン44pxの合計は164pxなので、179px余ります。320pxの端末でも、内側288pxに対して124px余ります。

この記事の計算例を、帯域ごとにまとめると

次は、上の計算をそのまま並べた「設計の一例」です。Studioが決めている値ではなく、自分のヘッダーの数値に置き換えて使ってください。

• パソコン（841px〜）：左右の余白32px／ロゴ幅120px／ナビは横並び（4文字×5項目で376px）／ボタン96px
• タブレット（541〜840px）：左右の余白24px／ロゴ幅120px／ナビはハンバーガーに切り替え（アイコンのタップ領域44px）
• モバイル（〜540px）：左右の余白16px／ロゴ幅120px／ハンバーガー（アイコンのタップ領域44px）

公開前の確認は、境目の両側で

確認する幅は、375px・540px・541px・840px・841px・1280pxがよい組み合わせです。540pxと541px、840pxと841pxのように、区切りの両側を見ておくと、切り替わり直後の取りこぼしを防げます。実機か、ブラウザの開発者ツールで幅を変えながら、ロゴ・ナビ・ボタンが重なったり切れたりしていないか確かめましょう。

まとめ

ヘッダーを崩れにくくするコツは、「帯域ごとのいちばん狭い幅で、足し算が合っているか」を確かめることです。パソコンは841px、タブレットは541px、モバイルは375px前後で計算し、入らない帯域ではハンバーガーに切り替えます。

レスポンシブ全体の設計はStudioのレスポンシブ設定で崩れにくくする4つの設計——構造・最大幅・サイズ単位・方向に、ヘッダーを全ページで共通にする方法はStudioのコンポーネント機能の基本——ヘッダー・フッターを1箇所で管理するにまとめています。生成AIに作らせたヘッダーがずれる場合は生成AIに複数ページのサイトを作らせると、ヘッダー・フッターが微妙にずれる理由と揃え方も参考になります。