交互画像+テキストのサービス紹介
画像とテキストのブロックを 左右交互に並べたサービス紹介 です。各行は grid-template-columns:1fr 1fr の2分割で、偶数行だけ order を使って画像とテキストの位置を入れ替えています。
このパーツの使いどころと実装ポイント
画像とテキストのブロックを左右交互に並べたサービス紹介です。各行は grid-template-columns:1fr 1fr の2分割で、偶数行だけ order を使って画像とテキストの位置を入れ替えています。画像は object-fit:cover で枠に隙間なく収まり、複数の機能や工程を順番に説明していくのに向いた構成です。
向いている場面
制作会社の「戦略→デザイン→開発」のような工程紹介、SaaS の機能別解説、サービスの特長を1つずつ丁寧に見せたい場面に適します。番号付きの小見出し（01. Strategy など）を添えると、読み手が全体の流れを掴みやすくなります。
カスタマイズと注意点
- 各行に
alt付きの実写を入れ、内容と一致した説明文を書くと検索にも親切です - 行数は増やせますが、左右交互のリズムを保つため画像とテキストの分量を揃えます
- 画像の高さ（
height:300px）は揃えて、ページ全体の縦リズムを統一します
スマートフォンでは2列を縦1列へ畳む必要があります。その際は画像→テキストの順に統一すると、左右交互で生じる順序の入れ替わりによる混乱を防げます。
よくある質問
行を増やしても見やすさを保つコツはありますか？
各行の画像とテキストの分量を近づけ、画像の高さを揃えることがポイントです。番号付きの小見出しで順序を示すと、行が増えても読み手が現在地を把握しやすくなります。3〜5行程度に収めると間延びを防げます。
スマートフォンでは左右交互の配置はどうなりますか？
2列を縦1列に畳む際は、すべての行で画像が上、テキストが下に来るよう order をリセットするのが定番です。PC の交互配置をそのまま縦にすると、行ごとに画像とテキストの上下が入れ替わり読みづらくなるため、順序を統一してください。