フィーチャーセクション
3つの特徴を、アイコンタイル・見出し・短い説明の組で並べる紹介セクション。プロダクトの強みを一目で伝えるLPの定番ブロックです。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 製品の強み 3 つをアイコン付きで紹介する LP
- 見出し＋短い説明で一目で伝えたい特徴
- 縦積みでもタイルでも組める汎用ブロック
- 避ける場面
- 特徴が 6 つ以上あるとき（一覧が長くなる）
- 各特徴に画像や動きが必要な紹介（ベントへ）
- 構成要素
- 特徴カード×3
- アイコンタイル
- 機能名
- 短い説明
- 持っている状態
- 通常
- キーボード
操作要素なし。読み物として読むだけ
- 支援技術
アイコンは aria-hidden で読み上げ対象外。機能名は h3 で見出しジャンプの対象になり、説明は p。色に依存する情報は無い
- 動き
なし
デザインの要点
- アイコンは 44px の淡い藍タイルに 22px の線画。色面の大きさが揃えば、3 つが同じ格に見える
- 機能名 14px 太字＋説明 12px 灰の 2 段だけ。3 つとも同じ行数に揃えると比較の目が迷わない
- 説明は「使うとどうなるか」で書く。「操作に待たされない設計」のように結果を言い、機能名を繰り返さない
コード（コピーして使えます）
<div class="stage">
<div class="feats">
<div class="feat">
<span class="feat-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/></svg>
</span>
<div class="feat-body">
<h3 class="feat-title">とにかく速い</h3>
<p class="feat-desc">操作に待たされない設計。思いついた瞬間に手が動きます。</p>
</div>
</div>
<div class="feat">
<span class="feat-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<div class="feat-body">
<h3 class="feat-title">安心のセキュリティ</h3>
<p class="feat-desc">通信は暗号化し、権限管理と監査ログで守ります。</p>
</div>
</div>
<div class="feat">
<span class="feat-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="8" r="3" stroke="currentColor" stroke-width="1.8"/><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M16 6a3 3 0 010 6M18 19c0-2.4-1-4-2.5-4.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
</span>
<div class="feat-body">
<h3 class="feat-title">チームで一緒に</h3>
<p class="feat-desc">招待して権限を分け、リアルタイムで共同編集できます。</p>
</div>
</div>
</div>
</div>