【手順】Studioでヘッダーを固定する方法｜スクロール追従と本文が隠れる対処

「ヘッダーを固定したら、本文の1行目がヘッダーの裏に隠れてしまった」「スクロールしてもヘッダーが付いてこない」——Studioでヘッダーを固定するときに手が止まるのは、だいたいこの2か所です。どちらも設定を1つ足すだけで直ります。この記事は、150名以上が参加するStudio学習コミュニティ「ノーコードサロン」を運営する立場から、サロンに届くヘッダーまわりの相談で特に多い「隠れる」と「高さ」を軸にまとめました。実装手順だけでなく、作ったあとに必ず確認したい点まで順に見ていきます。

結論：配置を「固定」にして、横幅Fillと重なり順を整えるだけ

Studioでスクロール追従のヘッダーを作るには、ヘッダーのボックスの配置（Position）を「固定」にします。それだけでスクロールしても画面上部に残りますが、ここで止めると見た目が崩れます。横幅をFillにして上からの位置を0に合わせ、重なり順を前面にする。この3つをセットで設定するのが完成形です。カスタムコードは必要ありません。

ヘッダーを固定する手順

次の4ステップで進めます。先にヘッダーの中身を組み立ててから固定にすると、位置の調整が楽になります。

手順1. ヘッダー用のボックスをページ最上部に作る

ボックスを1つ置き、中にロゴ・ナビゲーション・お問い合わせボタンを横並びで入れます。この段階ではまだ固定にせず、通常の配置のまま中身とパディングを決めてしまいます。ロゴの高さとパディングでヘッダーの高さが決まるため、ここで決めた高さは後で使います。メモしておきましょう。

手順2. 配置（Position）を「固定」にする

ヘッダーのボックスを選び、配置を「固定」に変更します。固定にした要素は通常の流れから外れ、スクロールしても画面上の位置が変わらなくなります。このとき本文がヘッダーの下に潜り込みますが、不具合ではなく固定の正常な挙動です。対処は後の見出しで説明します。

手順3. 上揃え・横幅Fillで画面上部にぴったり合わせる

上からの位置を0にし、横幅をFill（画面いっぱい）にします。横幅を固定値のままにすると、ブラウザの幅を変えたときに右側が切れたり、不自然な余白が出たりします。左右の位置も0に揃えておくと、どの画面幅でも端まで届きます。

手順4. 重なり順を前面にして、背景を決める

重なり順（レイヤー）を前面にします。これを忘れると、スクロール時にヘッダーが本文の下をくぐっていくように見えます。あわせて背景も決めてください。背景が透明のままだと、本文の文字とヘッダーの文字が重なって読めなくなります。常に背景色を置くか、スクロール後に背景が付くよう設定するかの二択です。

本文が隠れる・アンカーがずれるときの対処

固定ヘッダーで最初に当たる壁が「隠れる」系のつまずきです。原因はどれも同じで、固定した要素はページの高さを持たないため、本文側がヘッダーの分を知らないまま一番上から始まってしまうことにあります。

本文の1行目が隠れる

本文の先頭に、ヘッダーと同じ高さの余白をとります。本文を包むボックスの上パディングで入れるか、高さだけを持たせた空のボックス（スペーサー）を1つ置くか、どちらでも構いません。ヘッダーの高さを変えたら、この余白も必ず同じ数値に直してください。ここがずれているのが、公開後に「少しだけ隠れている」状態になる一番多い原因です。

ページ内リンクで飛ぶと見出しが隠れる

同じページ内の見出しへジャンプするリンクを置くと、飛んだ先の見出しがヘッダーの裏に入ります。考え方は同じで、飛び先の見出しの上にヘッダーの高さ分の余白をとるか、リンクの飛び先をその見出しより少し上の要素に設定します。目次を置いているページでは必ず起きるので、公開前に全項目を押して確かめましょう。

ドロップダウンがヘッダーの下に隠れる

ヘッダー内にプルダウンメニューを入れると、開いたメニューがヘッダーや本文の下に潜ることがあります。これは余白ではなく重なり順の問題です。原因別の直し方はStudioのプルダウンメニューの作り方にまとめています。

「固定」と「追従位置（Sticky）」の使い分け

Studioには、スクロールに関わる配置の設定が2種類あります。名前が似ているため取り違えやすく、「セクションを抜けたらヘッダーが消えた」という相談につながります。違いは効く範囲です。

比べる点	固定（Fixed）	追従位置（Sticky）
効く範囲	ページ全体。常に画面に残る	親のセクションを表示している間だけ
向いている要素	ヘッダー、画面隅に常駐させるボタン	セクション内の見出し、背景固定の演出
本文との関係	流れから外れるので本文側に余白が必要	流れに残るので余白はいらない

ヘッダーなら「固定」です。特定の区間だけ要素を貼り付けておきたい場合は、Studioの追従位置で背景固定・横スクロールを作る方法で扱っている追従位置を使います。

固定ヘッダーがコンバージョンに効く理由2選

固定ヘッダーは単なる飾りではなく、サイトの成果に直結するUIです。常に画面上部にメニューや申し込みボタンを表示しておくことで、ユーザーをスムーズに次の行動へ導けます。その効果を理解して、戦略的に設計しましょう。

1. いつでもCTAに触れられる
2. 回遊性が上がる

それぞれ詳しく解説します。

理由1. いつでもCTAに触れられる

長いページをスクロールしている途中でも、固定ヘッダーに申し込みやお問い合わせのボタンがあれば、思い立った瞬間に行動してもらえます。ボタンを探してページ上部まで戻る手間がないため、機会損失を防げます。特にLPでは、この常時表示のCTAが成約率を左右します。

理由2. 回遊性が上がる

どのセクションを見ていても、固定ヘッダーのメニューから別のページへすぐ移動できます。これにより、ユーザーは興味のある情報を探しやすくなり、サイト全体の回遊性が高まります。離脱を防ぎ、より多くの情報に触れてもらうための、地味ですが効果的な仕組みです。

固定ヘッダーで失敗しない注意点3選

便利な固定ヘッダーも、設計を誤ると逆にユーザー体験を損ないます。次の点に注意して、邪魔にならない快適な固定ヘッダーに仕上げましょう。

1. 高さを取りすぎない
2. スクロール時の見やすさを保つ
3. 全ページで同じ状態にそろえる

それぞれ詳しく解説します。

注意1. 高さを取りすぎない

固定ヘッダーは常に表示される分、高さが大きいとコンテンツの表示領域を圧迫します。特にスマホでは画面が狭いため、ロゴとメニューボタンだけに絞り、PCよりも低く設定しましょう。本文がしっかり見える高さに抑えることが、快適な閲覧体験の前提になります。ナビの項目をスマホで畳む方法はStudioのハンバーガーメニューの作り方で解説しています。

注意2. スクロール時の見やすさを保つ

本文に重なって表示されるため、背景が透明だと文字が読みづらくなることがあります。スクロール後は背景を白くしたり影を付けたりして、コンテンツと区別できるようにしましょう。最上部では軽やかに、スクロール後は視認性高く、という切り替えが理想です。スクロールしたときのスタイル変化を設定すれば、この出し分けができます。

注意3. 全ページで同じ状態にそろえる

トップページだけ固定、下層ページは固定なし、という状態は意外と起こります。ヘッダーをコンポーネントとして共通パーツにしておけば、1か所の修正が全ページに反映され、高さや余白のずれも起きません。やり方はStudioのコンポーネントの使い方にまとめています。

ヘッダーのデザインで第一印象を高めるコツ3選

ヘッダーはすべてのページで最初に目に入る、サイトの顔です。固定して機能性を高めるだけでなく、デザイン面でも第一印象を左右します。細部まで作り込んで、信頼感のあるヘッダーに仕上げましょう。

1. ロゴとナビのバランスを整える
2. CTAボタンを目立たせる
3. スクロール時の変化で印象づける

それぞれ詳しく解説します。

コツ1. ロゴとナビのバランスを整える

ロゴが小さすぎたり、メニュー項目を詰め込みすぎたりすると、ごちゃついた印象になります。ロゴは適切な大きさで左に、ナビは厳選した項目を右に、と余白を活かして配置しましょう。すっきりしたヘッダーは、それだけでサイト全体の信頼感を高めます。

コツ2. CTAボタンを目立たせる

ヘッダーの中で、申し込みやお問い合わせのボタンは最も重要な要素です。色を変えるなどして、他のメニューより一段目立つようにしましょう。常に視界に入るヘッダーで行動を促すことが、コンバージョン向上の地味で確実な施策になります。

コツ3. スクロール時の変化で印象づける

最上部では透明、スクロールすると白背景に変わるといった演出は、洗練された印象を与えます。背景の切り替えや影の付与で、コンテンツに重なっても読みやすさを保てます。動きのある変化は、サイトの完成度が高いという印象づけにも役立ちます。

よくある質問

Q1固定ヘッダーで本文が隠れます。どうすれば？

本文の先頭にヘッダーの高さ分の余白（パディングやスペーサー）を入れると、隠れずに表示されます。固定要素は通常の配置から浮くため、その分のスペースを本文側で確保する必要があります。ページ内リンクで飛んだ際に見出しが隠れる場合も、同じ考え方で余白を調整しましょう。

Q2配置を固定にしたのに、スクロールで付いてきません。

多いのは、ヘッダーのボックスではなく中のロゴやテキストを選んだまま設定している場合です。ヘッダー全体を包んでいるボックスを選び直して、配置を固定にしてください。付いてくるのに本文の下に隠れていく場合は、固定はできているので、重なり順を前面に変えれば直ります。

Q3スクロールでヘッダーの色を変えられますか？

スクロール時のスタイル変化を設定すれば、背景を半透明から白へ変えたり、影を付けたりといった演出ができます。最上部ではデザインを邪魔せず、スクロール後は本文に重なっても読みやすくする、という使い分けができるため、見栄えと視認性の両立に役立ちます。

Q4スマホでも固定ヘッダーにすべきですか？

基本的には固定にして問題ありませんが、高さが大きいと本文の表示領域を圧迫します。スマホではロゴとハンバーガーメニューだけに絞り、高さをコンパクトにするのがおすすめです。最低限、お問い合わせのボタンは残しておくと、コンバージョンを取りこぼしません。あわせて、スマホで余白が崩れていないかも確認しましょう。

Q5ヘッダーを全ページで共通にできますか？

できます。ヘッダーをコンポーネント化しておけば、1か所を直すだけで全ページに反映されます。固定ヘッダーは高さと本文側の余白をセットで管理する必要があるため、ページごとに作るより共通パーツにしたほうが、ずれが起きにくく運用も楽になります。

まとめ

ヘッダーの固定は、配置を「固定」にして上からの位置を0に合わせ、横幅をFillにし、重なり順を前面にするだけで実装できます。本文が隠れる場合は先頭にヘッダーの高さ分の余白を足し、ページ内リンクの飛び先も同じ考え方で調整すること。スマホでは高さを抑え、スクロールで背景を変える演出を加えると、見栄えと使いやすさを両立した固定ヘッダーになります。

ノーコードサロンでは、こうしたヘッダーまわりの細かな調整をチャットで質問・相談できます。原則24時間以内に回答（実績）しているので、公開前に手が止まったときも前に進めます。ひとりで何時間も検索する前に、同じ実装を通ってきた人に聞ける場所を持っておいてください。