プロダクトサイトは「製品の価値を最短で伝える」ための構成が命
プロダクトサイトは、ユーザーが最初に訪れる“製品の顔”です。 そのため、構成はシンプルでありながら、製品の魅力・機能・信頼性を一気に伝える必要があります。 ここでは、実務で使われる王道構成を、初心者でも迷わないように丁寧に解説します。 HTML構造の説明をしつつ、CSSとSCSSのテンプレートを提示します。
プロダクトサイトの基本構成
プロダクトサイトは大きく分けて ヘッダー ヒーロー（製品の第一印象） 特徴セクション CTA（購入・問い合わせ） フッター という流れで構成されます。 この流れは「ユーザーが知りたい順番」に沿っているため、どの業界でもほぼ共通です。
ヘッダー（ナビゲーション）
役割
ヘッダーはサイト全体の案内役です。 ロゴ・メニュー・CTAボタンを配置し、ユーザーが迷わないようにします。 特にプロダクトサイトでは「無料トライアル」「購入」などのボタンを右上に置くのが定番です。
CSS例
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 2rem;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
}
header .logo {
font-size: 1.4rem;
font-weight: bold;
}
header nav a {
margin-left: 1.5rem;
text-decoration: none;
color: #374151;
font-size: 0.95rem;
}
header .cta {
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border-radius: 8px;
}
SCSS例
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 2rem;
background: #fff;
border-bottom: 1px solid #e5e7eb;
.logo {
font-size: 1.4rem;
font-weight: bold;
}
nav {
a {
margin-left: 1.5rem;
text-decoration: none;
color: #374151;
font-size: 0.95rem;
}
}
.cta {
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border-radius: 8px;
}
}
深掘り
ヘッダーは「サイトの信頼性」を左右します。 余白を広めに取り、文字サイズを小さくしすぎないことで、落ち着いた印象を作れます。
ヒーローセクション（製品の魅力を一瞬で伝える）
役割
ヒーローはプロダクトサイトの“主役”。 キャッチコピー・製品画像・CTAをまとめて配置し、ユーザーに「この製品は何か」を瞬時に理解させます。
CSS例
.hero {
padding: 4rem 2rem;
text-align: center;
background: #f9fafb;
}
.hero h1 {
font-size: 2.4rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.1rem;
color: #4b5563;
margin-bottom: 2rem;
}
.hero .cta {
padding: 0.8rem 1.6rem;
background: #2563eb;
color: #fff;
border-radius: 10px;
font-size: 1rem;
}
SCSS例
.hero {
padding: 4rem 2rem;
text-align: center;
background: #f9fafb;
h1 {
font-size: 2.4rem;
margin-bottom: 1rem;
}
p {
font-size: 1.1rem;
color: #4b5563;
margin-bottom: 2rem;
}
.cta {
padding: 0.8rem 1.6rem;
background: #2563eb;
color: #fff;
border-radius: 10px;
font-size: 1rem;
}
}
深掘り
ヒーローは「余白」が命です。 情報を詰め込みすぎると魅力が伝わらないため、 キャッチコピー＋短い説明＋CTAの3点に絞るのが実務の鉄則です。
特徴セクション（製品の価値を具体的に伝える）
役割
製品の強みを3〜4つに分けて説明します。 アイコンや画像を使うと視覚的に理解しやすくなります。
CSS例
.features {
padding: 3rem 2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.features .item {
background: #ffffff;
padding: 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.features .item h3 {
font-size: 1.3rem;
margin-bottom: 0.8rem;
}
.features .item p {
color: #4b5563;
}
SCSS例
.features {
padding: 3rem 2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
.item {
background: #fff;
padding: 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
h3 {
font-size: 1.3rem;
margin-bottom: 0.8rem;
}
p {
color: #4b5563;
}
}
}
深掘り
特徴セクションは「読みやすさ」が最優先。 グリッドで整列させることで、視線の流れが安定し、製品の価値が伝わりやすくなります。
CTAセクション（行動を促す）
役割
ユーザーに「購入」「問い合わせ」「無料トライアル」などの行動を促します。 ヒーローよりも少し強めのデザインにするのがポイントです。
CSS例
.cta-section {
padding: 3rem 2rem;
text-align: center;
background: #2563eb;
color: #fff;
}
.cta-section .cta {
margin-top: 1rem;
padding: 0.8rem 1.6rem;
background: #fff;
color: #2563eb;
border-radius: 10px;
font-weight: bold;
}
SCSS例
scss
.cta-section {
padding: 3rem 2rem;
text-align: center;
background: #2563eb;
color: #fff;
.cta {
margin-top: 1rem;
padding: 0.8rem 1.6rem;
background: #fff;
color: #2563eb;
border-radius: 10px;
font-weight: bold;
}
}
深掘り
CTAは「色のコントラスト」が重要です。 背景とボタンの色を反転させると、自然に目が向きます。
フッター（サイトの締め）
役割
会社情報・リンク・コピーライトなどをまとめます。 落ち着いた色で、サイト全体を締める役割があります。
CSS例
footer {
padding: 2rem;
background: #1f2937;
color: #e5e7eb;
text-align: center;
font-size: 0.9rem;
}
SCSS例
footer {
padding: 2rem;
background: #1f2937;
color: #e5e7eb;
text-align: center;
font-size: 0.9rem;
}
深掘り
フッターは「静けさ」を作る場所。 濃い背景色＋薄い文字色で、サイト全体の印象を落ち着かせます。
まとめ
プロダクトサイトは ヘッダーで案内 ヒーローで魅力を伝える 特徴で価値を説明 CTAで行動を促す フッターで締める という流れが鉄板です。
CSSとSCSSで構造を分かりやすく整理することで、 初心者でも迷わずに実務レベルのサイトを作れるようになります。
