精密ヘッダーのヒーロー
64px の細いヘッダー（ロゴ・ナビ・仕切り線・pill CTA）と、字間を詰めた大型見出し＋一行リード＋製品画面の枠。狭幅ではナビがメニューに畳まれます。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
デザインの要点
- ヘッダーは 64px・1px の仕切り線・pill CTA の3点で「精密さ」を作る。装飾ではなく寸法の正確さが品位になる
- ディスプレイ見出しは letter-spacing −0.035em・line-height 1.02。大きく組むほど字間は詰める
- 色は背景の墨・文字の白・CTA の1色だけ。製品画面の枠は本文より暗い面で「奥」に置き、見出しを前に出す
- リードは1行で言い切る。2行目が要る主張は見出しが曖昧な証拠
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
実装メモ
ヘッダーの 64px と仕切り線 1px は固定値のまま使う（可変にすると精密さが消える）。製品画面の枠は実スクリーンショットに差し替える。
コード（コピーして使えます）
<div class="hph">
<header class="hph-head">
<a class="hph-logo" href="#" aria-label="Kestrel ホーム">
<svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true"><rect x="2" y="2" width="18" height="18" rx="5" fill="#e6e6ea"/><path d="M7 15V7l8 8V7" stroke="#0d0e12" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
<span>Kestrel</span>
</a>
<nav class="hph-nav" id="hph-nav" aria-label="主要ナビゲーション">
<a href="#">製品</a><a href="#">料金</a><a href="#">導入事例</a><a href="#">ドキュメント</a>
</nav>
<div class="hph-right">
<a class="hph-login" href="#">ログイン</a>
<a class="hph-cta" href="#">無料で始める</a>
<button class="hph-menu" type="button" aria-expanded="false" aria-controls="hph-nav" aria-label="メニューを開く">
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 6h14M3 10h14M3 14h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
</button>
</div>
</header>
<section class="hph-hero">
<p class="hph-eyebrow"><span class="hph-dot" aria-hidden="true"></span>v3.2 — 監査ログと SSO を追加</p>
<h1 class="hph-title">課題管理を、<br>もう一段速く。</h1>
<p class="hph-lead">Kestrel は開発チームのための課題トラッカー。キーボードだけで一日が終わります。</p>
<div class="hph-actions">
<a class="hph-cta hph-cta--lg" href="#">無料で始める</a>
<a class="hph-ghost" href="#">3分のデモを見る →</a>
</div>
<div class="hph-shot" aria-hidden="true">
<div class="hph-shot-bar"><i></i><i></i><i></i><span>KES · 今週のスプリント</span></div>
<div class="hph-shot-body">
<div class="hph-shot-side"><i class="is-on"></i><i></i><i></i><i></i><i></i></div>
<div class="hph-shot-main">
<div class="hph-row"><b>KES-412</b><em>検索インデックスの再構築が遅い</em><u class="u-prog">進行中</u></div>
<div class="hph-row"><b>KES-409</b><em>通知メールの件名を短くする</em><u class="u-todo">未着手</u></div>
<div class="hph-row"><b>KES-401</b><em>SSO ログインの監査ログ</em><u class="u-done">完了</u></div>
<div class="hph-row"><b>KES-398</b><em>キーボードショートカット一覧</em><u class="u-done">完了</u></div>
<div class="hph-row"><b>KES-390</b><em>モバイルのドラッグ改善</em><u class="u-prog">進行中</u></div>
</div>
</div>
</div>
</section>
</div>