特徴 + 画像（横並び 2 段）
テキストと画像を左右に並べ、1 つの強みをじっくり説明する横並び型の特徴セクションです。 display:grid の 2 カラムでテキストブロックと画像ブロックを align-items:center で縦中央に揃え、ラベル（FEATURE 01）→見出し→本文の順で読ませる構成です。
このパーツの使いどころと実装ポイント
テキストと画像を左右に並べ、1 つの強みをじっくり説明する横並び型の特徴セクションです。display:grid の 2 カラムでテキストブロックと画像ブロックを align-items:center で縦中央に揃え、ラベル（FEATURE 01）→見出し→本文の順で読ませる構成です。画像枠は overflow:hidden の中で object-fit:cover を使い、写真の比率に左右されず枠に収まります。同じパーツを上下に積み、左右を入れ替えてジグザグに並べる使い方が定番です。
向いている場面
箇条書きでは伝えきれない機能やこだわりを 1 つずつ深掘りしたいときに向きます。SaaS の主要機能紹介、製造業の技術的な強み、サービスの差別化ポイントなど、説明に文章量が要るテーマが得意です。アイコンを並べた一覧型では浅くなりがちな内容を、画像とともに具体的に語れます。
カスタマイズの勘所
- 複数並べるときは
rowごとに左右を交互に反転させると、単調さが消えてリズムが生まれます。 - 見出しは
h3、ラベルは装飾用のspanにして、見出し階層を乱さないようにします。 - 本文は
line-heightを広めに取り、長文でも読みやすくします。
スマートフォンでは 2 カラムを縦 1 列に切り替えますが、その際は左右反転に関係なく「画像→テキスト」など順序を統一すると読み手が混乱しません。画像には内容の伝わる alt を付け、loading="lazy" で遅延読み込みします。
よくある質問
このパーツを縦に何個も並べてもくどくなりませんか。
左右の配置を交互に反転させると単調さが解消され、自然なリズムが生まれます。画像が左・右・左と入れ替わるジグザグ構成にすれば、3〜4個並べても飽きずに読み進めてもらえます。
アイコン一覧型の特徴紹介とどう使い分けますか。
短く広く見せたいならアイコン一覧型、一つ一つを文章で深く説明したいなら本パーツが向きます。主要な強みは横並び型で丁寧に語り、付随する機能はアイコン一覧でまとめる、という併用も効果的です。