グローバルヘッダーは「サイト全体の案内役」であり、ユーザー体験の質を決める最重要パーツです
グローバルヘッダーは、どのページにも共通して表示される“サイトの顔”です。 ロゴ、主要ナビゲーション、検索、CTA（お問い合わせ・資料請求など）をまとめ、ユーザーが迷わず目的のページへ進めるように設計します。 特に実務では、視線の流れ・余白・階層構造・アクセシビリティ を丁寧に整えることが求められます。
ここでは、初心者でも理解しやすいように、実務で使われるグローバルヘッダーの構成とCSS・SCSSテンプレートを詳しく解説します。
グローバルヘッダーの基本構成
グローバルヘッダーは ロゴ グローバルナビ（主要メニュー） 検索（必要なサイトのみ） CTAボタン ハンバーガーメニュー（スマホ） という要素で構成されます。 この構成は、ユーザーが「最初に探す情報」を並べたもので、どの業界でも共通して使われています。
ロゴとナビゲーション（視線の起点と案内役）
ロゴの役割
ロゴは視線の起点です。 左上に配置することで、ユーザーが自然にサイトのブランドを認識できます。
ナビゲーションの役割
ナビゲーションは、サイト全体の案内役です。 主要ページ（サービス、料金、会社情報、ブログなど）を横並びで配置し、ユーザーが迷わないようにします。
CSS例
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
}
header .logo {
font-size: 1.6rem;
font-weight: bold;
}
header nav {
display: flex;
gap: 1.5rem;
}
header nav a {
text-decoration: none;
color: #374151;
font-size: 1rem;
transition: color 0.2s ease;
}
header nav a:hover {
color: #2563eb;
}
SCSS例
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
background: #fff;
border-bottom: 1px solid #e5e7eb;
.logo {
font-size: 1.6rem;
font-weight: bold;
}
nav {
display: flex;
gap: 1.5rem;
a {
text-decoration: none;
color: #374151;
font-size: 1rem;
transition: color 0.2s ease;
&:hover {
color: #2563eb;
}
}
}
}
深掘り
ナビゲーションは「情報の階層」を示すため、 文字サイズを揃え、余白を均等にすることで、視線が迷わず流れるようになります。 実務では gap: 1.2〜2rem が最も読みやすいとされています。
CTAボタン（行動を促す最重要パーツ）
役割
CTAボタンは、ユーザーに行動してもらうためのボタンです。 資料請求、問い合わせ、無料トライアルなど、サイトの目的に応じて配置します。
CSS例
header .cta {
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border-radius: 8px;
font-size: 0.95rem;
text-decoration: none;
}
SCSS例
header {
.cta {
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border-radius: 8px;
font-size: 0.95rem;
text-decoration: none;
}
}
深掘り
CTAは「色のコントラスト」が命です。 背景が白なら青や赤、背景が濃い色なら白など、 周囲と強く対比する色を使うことで、自然に目が向きます。
スマホ用ハンバーガーメニュー（レスポンシブ対応）
役割
スマホでは横並びのナビゲーションが入らないため、ハンバーガーメニューを使います。 実務では、チェックボックス＋CSSだけで開閉できる軽量実装がよく使われます。
CSS例（簡易版）
.menu-toggle {
display: none;
}
.hamburger {
display: none;
cursor: pointer;
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
nav {
display: none;
}
.menu-toggle:checked + nav {
display: block;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
}
}
SCSS例
.menu-toggle {
display: none;
}
.hamburger {
display: none;
cursor: pointer;
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
nav {
display: none;
}
.menu-toggle:checked + nav {
display: block;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
}
}
深掘り
ハンバーガーメニューは「開閉のアニメーション」があると使いやすくなります。 実務では transform や opacity を使って、ふわっと開く演出を加えることが多いです。
グローバルヘッダーの実務テンプレート（CSS版）
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
}
header .logo {
font-size: 1.6rem;
font-weight: bold;
}
header nav {
display: flex;
gap: 1.5rem;
}
header nav a {
text-decoration: none;
color: #374151;
font-size: 1rem;
}
header .cta {
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border-radius: 8px;
}
グローバルヘッダーの実務テンプレート（SCSS版）
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
background: #fff;
border-bottom: 1px solid #e5e7eb;
.logo {
font-size: 1.6rem;
font-weight: bold;
}
nav {
display: flex;
gap: 1.5rem;
a {
text-decoration: none;
color: #374151;
font-size: 1rem;
}
}
.cta {
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border-radius: 8px;
}
}
まとめ
グローバルヘッダーは ロゴでブランドを示し ナビゲーションで案内し CTAで行動を促し スマホで使いやすくし 視線の流れを整える という役割を持っています。
CSSとSCSSで構造を整理することで、 初心者でも迷わずに実務レベルのグローバルヘッダーを作れるようになります。
