About 2カラム（画像＋文）
左に画像、右に文章を置いた 2 カラムの会社紹介セクションです。 display:grid の grid-template-columns:1fr 1fr で左右を等分し、 align-items:center で高さの違う画像とテキストの中心を揃えています。
このパーツの使いどころと実装ポイント
左に画像、右に文章を置いた 2 カラムの会社紹介セクションです。display:grid の grid-template-columns:1fr 1fr で左右を等分し、align-items:center で高さの違う画像とテキストの中心を揃えています。画像枠は aspect-ratio:4/3 で比率を固定したプレースホルダ、テキスト側は小さな英字ラベル・見出し・本文という王道の縦構成です。
向いている場面
コーポレートサイトの「私たちについて」、サービスの世界観紹介、ブランドストーリーの導入などに向きます。たとえば工房やアトリエの紹介、コンサルティング会社の理念提示、飲食店のこだわり紹介など、写真 1 枚と短い文章でトーンを伝えたい場面に合います。左右を入れ替えるだけで複数並べてもリズムが生まれます。
カスタマイズの勘所
- 画像枠は
aspect-ratio:4/3なので、本番写真もこの比率に合わせて切り出すとレイアウトが安定します。 - 画像とテキストの左右を逆にしたい場合は、グリッドの並び順を入れ替えるだけで対応できます。
- 英字ラベル（ABOUT US）は装飾なので、日本語の補足を併記すると読み手に親切です。
SP では 2 カラムが窮屈になるため、メディアクエリで縦積みにし、画像を上・テキストを下に並べる構成へ切り替えるのが定番です。実写を入れる際は alt を必ず記述してください。
よくある質問
画像とテキストの左右を入れ替えることはできますか？
できます。2カラムのグリッドなので、画像とテキストの並び順を入れ替えるか、CSS の order を使えば左右が逆になります。同じ型を複数並べるときは交互に入れ替えると、上から下へリズムが生まれて単調になりません。
プレースホルダの画像枠に実写を入れるとき注意点は？
枠は縦横比4対3で固定されているため、写真も同じ比率にトリミングすると余白なくきれいに収まります。WebP 形式での書き出しと、内容を説明する alt テキストの記述を忘れないでください。画面幅が狭いときは縦積みになるよう調整します。