スマホでヘッダーが画面の33%を占めていた実測と直し方

先に結論を書きます。スマートフォンで開いたとき、ヘッダー（画面いちばん上のメニュー部分）が画面の3分の1を占めていたとします。それだと最初の1画面で読める本文はほとんど残りませんが、自分のサイトがまさにその状態でした。375×812で測ると269.7px、画面の33.2%です。

2026年8月11日に、修正前のバックアップと現在公開中のサイトを同じ条件で測り直しました。結果は次のとおりです。

• 修正前：ヘッダー 269.7px（画面の 33.2%）、4行に折り返していた
• 修正後：ヘッダー 170.4px（画面の 21.0%）、3行

この記事では、何がどう膨らんでいたのかと、直したあとに何がどれだけ変わったのかを書きます。あわせて測り方を間違えると数字が変わってしまう落とし穴も置きました。あなたのサイトを測る手順も最後に置きました。

自分のサイトで同じことを確かめてほしい場合は無料のサイト診断からURLをお送りください。375px幅で実際に描画して測ってお返しします。

ヘッダーが4行に折り返していた

パソコンで見ると、ヘッダーは横1列に収まります。左にメニュー3つ、中央に屋号、右にメニュー3つと「無料サイト診断」のボタン。よくある形です。

問題は、これを幅375pxのスマートフォンに畳んだときでした。横に並びきらない要素が縦に積み上がり、次の4行になっていました。

指で押せるように、ナビゲーションのリンクは1本あたり高さ44pxが確保されます。44pxのかたまりが4段積み上がれば、それだけで画面の3分の1です。 ボタンを押しやすくする配慮が、そのまま画面占有につながっていました。

デザインとして崩れているわけではありません。横にはみ出してもいないし、リンクが隠れてもいない。だから見た目のチェックでは合格してしまいます。「壊れていないが、場所を取りすぎている」という不具合は、測らないと気づけません。

直したあと、最初の1画面で読める本文が1.5倍になった

2026年8月11日に測りました。修正前（2026年8月8日付のバックアップ）と現在公開中のサイトを、同じブラウザ・同じ画面サイズ（375×812、指で操作する端末として設定）で比べています。

ヘッダーが99.3px縮み、そのぶん本文の領域が18.3%広がりました。最初の1画面で目に入る文字数は141字から212字へ、約1.5倍です。

画面の大きいiPhone 14相当（390×844）でも測りました。ヘッダーは同じく269.7px→170.4px、画面に占める割合は32.0%→20.2%、見出しの位置は416px→303pxでした。端末が大きくなっても、ヘッダーの高さ自体は変わりません。小さい端末ほど割合が上がるということです。

直した内容は、実質1行

やったことは、右側のメニューとボタンを包んでいた箱を「無かったこと」にして、親の並びに直接参加させただけです。

``css .z-hd .rightgrp{ display:contents; } ``

この箱があるあいだは、中のメニューとボタンが必ずセットで1つの塊として扱われ、他の要素と同じ行に並べませんでした。箱を透明化すると、屋号とボタンが1行に同居できるようになります。あわせて、屋号の英字表記をスマートフォンでは非表示にし、メニューは横スクロールできる1行として畳みました。

足したのではなく、余計な入れ物を1つ取り除いただけです。 ヘッダーが縦に伸びる原因は、たいていこの手の「畳めない入れ物」です。

31%と33%、同じサイトで数字が2つ出た

ここがこの記事でいちばん伝えたい部分です。

同じサイトの同じヘッダーを、同じ375×812で測っているのに、測り方を変えると数字が変わりました。

原因は、マウスカーソルの有無で切り替わる指定です。自分のサイトのCSSには「指で操作する端末では、リンクの高さを44px以上にする」という1行が入っています。44pxという数字は、指で確実に押せる大きさの目安として広く使われているものです。

• 指で操作する端末として測ると、この指定が働き、メニューのリンクは1本44pxになる
• パソコンのブラウザを狭めただけだと、この指定は働かず、リンクは23.5px（修正前は35.3px）のまま

つまりパソコンの画面を狭めて確認していると、実際のスマートフォンより2割ほど小さいヘッダーを見ていることになります。修正の効果も、パソコン基準なら「ほぼ半分になった」、実機基準なら「3分の1減った」と、印象がかなり違います。

制作会社から「スマートフォンでも確認しました」と言われたら、パソコンの画面を狭めて見たのか、端末の設定に切り替えて見たのかを聞いてみてください。ここが違うだけで、押しやすさも高さも変わります。

公開中の32ページを測り直した

1ページだけ直しても意味がありません。サイトマップに載っている全32ページを、公開中のURLに対して1ページずつ測りました（2026年8月11日）。

• ヘッダーの高さ：32ページすべて170.4px（トップ、サービス、制作実績、コラム、実績の個別ページ、記事ページを含む）
• 横方向のはみ出し：32ページとも無し
• ヘッダー内のリンク：トップなど7本、記事ページは6本。すべて画面内に収まっていて、横スクロールしなくても押せる

ヘッダーは共通のCSSファイル1本で管理しているので、1か所直せば全ページに反映されます。逆に言えば、1か所ぶ厚いままだと全ページで同じだけ損をします。 ここは真っ先に測る価値があります。

測って見つかった1件と、その場で直した記録

同じ測定で、直っていない箇所が1つ見つかりました。ヘッダー右上の「無料サイト診断」ボタンの高さが 42.4px で、自分のCSSに書いた下限44pxに届いていませんでした。

理由もわかっています。「指で操作する端末では44px以上」という指定を後から書いたのに、スマートフォン向けに個別に書いた指定（40px）のほうが強く効いていたためです。押せないわけではありませんが、自分で決めた基準を自分の実装が下回っていました。

この記事を公開した当日（2026年8月11日）に修正しました。 スマートフォン向けの指定を40pxから44pxに変更し、同じ条件（375×812・指で操作する端末として設定）で測り直しています。

ボタンを基準まで戻しても、ヘッダーは1.6px（0.2ポイント）しか増えませんでした。 押しやすさと画面占有は、この規模ならトレードオフになりません。「小さくすること」自体が目的になると、こういう1.6pxを惜しんで基準を割ります。

規則を書いただけでは守られない。測って初めて、守られているかどうかがわかる。 数字の演出が壊れていた件（JavaScriptが止まると実績の数字が全部0になっていた）と、まったく同じ構図でした。

あなたのサイトを3分で測る手順

専門知識は要りません。上から順に、できるところまでで十分です。

手順1：自分のスマートフォンで開いて、スクリーンショットを撮る

いちばん簡単で、いちばん確実な方法です。自分のサイトをスマートフォンで開き、一度もスクロールしていない状態でスクリーンショットを撮ってください。

その画像を見て、上から順に何が写っているかを数えます。

• メニュー部分が画面の3分の1を超えていないか
• 本文（あなたが伝えたいこと）が何行入っているか
• 「電話する」「予約する」などの行き先が見えているか

3分の1を超えていたら、それだけで見直す理由になります。 数字を測らなくても、指で画面を三分割すればわかります。

手順2：パソコンで正確に測る（Google Chromeの場合）

正確な数字が欲しいときは、次の順に操作します。画面に出る文字のまま書きます。

1. 自分のサイトをGoogle Chromeで開く
2. キーボードの F12 を押す（開発者ツールが開きます）
3. Ctrl + Shift + M（Macは Command + Shift + M）を押す（端末の表示に切り替わります。この操作を飛ばして、ブラウザの窓を手で細くするだけでは、この記事で書いた「2割小さく見える」状態になります）
4. 画面上部の幅と高さの入力欄に 375 と 812 を入れる
5. F5 を押してページを読み込み直す
6. ヘッダーの上で右クリックし、「検証」 を選ぶ。選ばれた部分の大きさが画面に表示されます

確認が終わったら、同じ Ctrl + Shift + M で元に戻してください。

手順3：割合を1行で出す

同じ開発者ツールの 「Console」 タブに、次の1行を貼り付けて Enter を押すと、ヘッダーが画面の何割を占めているかが小数で返ります。

``js document.querySelector('header').getBoundingClientRect().height / window.innerHeight ``

0.33 と返れば33%です。この記事の修正前がまさに 0.332 でした。 目安として、0.25（25%）を超えていたら畳む余地があります。

なお、この1行は header という書き方をしている作りでないと数字が返りません。返らない場合は手順1のスクリーンショットで判断すれば十分です。スマートフォン全般の確認はスマホ対応ができているかの確認方法にまとめてあります。

まとめ｜スマホでヘッダーが画面を占める割合と、その直し方

• 修正前はヘッダーが269.7px（画面の33.2%）、修正後は170.4px（21.0%）でした（375×812・2026年8月11日測定）
• 最初の1画面で読める本文は141字から212字へ、約1.5倍になりました
• 測り方で数字が変わります。指で操作する端末として測ると33.2%、パソコンのブラウザを狭めただけだと31.1%です
• 目安は画面の25%以内。超えていたら畳む余地があります
• ヘッダーは共通のCSS1本で管理されるので、1か所直せば全ページに効きます

よくいただく質問

ヘッダーは何%までに収めるべきですか

明確な基準として決まった数字はありません。この記事で使った25%という目安も、自分のサイトを測って決めた社内基準です。ただ、33%（3分の1）を占めていたときは、最初の1画面に本文が141字しか入っていませんでした。 21%まで下げると212字入ります。「最初の1画面に、伝えたいことが何字入るか」を基準にするほうが、割合そのものより実用的です。まずは自分のサイトで両方を数えてみてください。

メニューをハンバーガー（三本線）にすれば解決しますか

高さは確実に下がります。ただし、メニューの中身が1タップ分遠くなるという代償があります。自分のサイトはページ数が少なく、リンク6本を1〜2行に畳めば収まる見込みがあったので、開かなくても見える形を選びました。ページ数が多いサイトや、階層が深いサイトでは三本線のほうが素直です。どちらが正しいというより、畳んだあとに何が見えているかを測って決める話だと考えています。

この高さは検索順位に影響しますか

この記事は順位対策の話ではありません。測ったのは「最初の1画面に何が見えているか」だけです。ただ、Googleはスマートフォン向けの表示を基準にページを評価すると公表しています。スマートフォンでの見え方は、もともと確認しておく価値があります。順位への影響を確かめたいなら、制作会社の宣伝文句ではなく実際の検索結果で確かめる方法を「SEOに強い」制作会社かを確かめる方法に書きました。

制作会社にどう伝えればいいですか

「ヘッダーを小さくしてください」ではなく、測った数字で伝えると早いです。たとえば「375×812で見たときにヘッダーが画面の33%を占めています。25%以内に収まりませんか」という形です。手順1のスクリーンショットを添えれば、それだけで伝わります。直し方は作りによって変わるので、方法まで指定する必要はありません。制作の考え方や進め方はサービスのご案内にまとめています。

この記事の測定について

• 測定日：2026年8月11日
• 対象：yutaka-web.jp のサイトマップに載っている全32ページ、および修正前のバックアップ（_backups/2026-08-08_canonical/index.html）
• 画面サイズ：375×812（一部の項目は390×844でも測定）
• 測り方：ブラウザを自動操作し、ヘッダー要素の高さ・各リンクの位置と大きさ・見出しの開始位置・横方向のはみ出しの有無を、Webフォントの読み込みが完了した状態で取得
• 端末の条件：指で操作する端末として設定した場合と、パソコンのブラウザの幅を狭めただけの場合の両方で取得し、差を記載

この記事に書いた数字は、すべて上記の方法で測った実測値です。修正前が269.7px（33.2%）、修正後が170.4px（21.0%）でした。公開中の32ページすべてが170.4pxで横のはみ出しが無かったこと、CTAボタンが42.4pxだったことも、同じ2026年8月11日の測定です。

なお、同じ箇所を2026年8月9日に測ったときの記録は252px→129pxでした。これはパソコンのブラウザを狭めた状態での値で、今回の再測定（252.3px→129.4px）と一致します。数字が食い違って見えたのは、サイトが変わったからではなく、測り方が違ったからです。 この記事では、実際にスマートフォンで見たときに近い値のほうを本文の数字として採用しています。

375×812でヘッダーが画面の何%を占めているか。これは制作会社に頼まなくても、自分の端末で測れます。手順は上に全部書きました。測ってみて数字の読み方に迷ったら、測り方を相談するへどうぞ。無料で、そのまま終わりにしていただいて構いません。