シンプルヘッダーは「迷わせない・軽い・読みやすい」を満たす最も基本的なヘッダーです
シンプルヘッダーは、ロゴと少数のメニューだけで構成される、最も軽量で使いやすいヘッダーです。 企業サイト・ブログ・ポートフォリオ・LPなど、あらゆるジャンルで使われる“万能デザイン”であり、初心者が最初に覚えるべきヘッダーでもあります。
余白・文字サイズ・配置のバランスが整っているだけで、サイト全体の印象が大きく向上します。 ここでは、実務で使われるシンプルヘッダーの構成を、CSSとSCSSの両方で丁寧に解説します。
シンプルヘッダーの基本構成
シンプルヘッダーは ロゴ 少数のナビゲーション 必要ならCTA（お問い合わせなど） という最小構成で作られます。
情報を詰め込まないことで、ユーザーが迷わず目的のページへ進めるようになります。
ロゴとナビゲーション（視線の起点と案内役）
ロゴの役割
ロゴは視線の起点です。 左上に配置することで、ユーザーが自然にブランドを認識できます。
ナビゲーションの役割
ナビゲーションは、サイト全体の案内役です。 メニュー数は 3〜5 個が最も読みやすく、シンプルヘッダーに向いています。
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;
}
}
}
}
深掘り
シンプルヘッダーは「余白」が命です。 余白が狭いと窮屈に見え、広すぎると情報が散らばって見えます。 実務では 左右 2rem、上下 1rem が最もバランスが良いとされています。
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例（簡易版）
.menu-toggle {
display: none;
}
.hamburger {
display: none;
cursor: pointer;
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
nav {
display: none;
}
.menu-toggle:checked + nav {
display: flex;
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: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
}
}
深掘り
スマホでは「開閉のアニメーション」があると使いやすくなります。 opacity や transform を使って、ふわっと開く演出を加えると実務レベルになります。
シンプルヘッダーの実務テンプレート（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で構造を整理することで、 初心者でも迷わずに実務レベルのシンプルヘッダーを作れるようになります。
