画像+テキスト分割型会社概要セクション

このパーツの使いどころと実装ポイント

このパーツは、左に実写画像、右にミッション文・概要・代表者プロフィールを置いた2カラムの会社概要セクションです。レイアウトはdisplay:gridのgrid-template-columns:1fr 1frで組まれ、画像枠はaspect-ratio:4/3で比率を固定し、object-fit:coverで中央を切り抜いて表示します。画像右下には実績件数を示すバッジをposition:absoluteで重ねており、数字で説得力を足せる構成です。

向いている場面

• コーポレートサイトの「私たちについて」セクション
• 店舗・クリニック・工房など、雰囲気を写真で伝えたい事業
• 代表者の顔を見せて安心感を出したい個人事業やスモールビジネス

差し替えとカスタマイズ

画像URLと代表者のポートレート、見出し・本文を自社の内容に置き換えるのが基本作業です。バッジの数字（実績250件など）は事実に合わせて必ず更新してください。誇張した数字は信頼を損ねます。画像と本文の左右を入れ替えたい場合は、grid-template-columnsの順とHTMLの並びを合わせて調整します。

レスポンシブの注意

720px以下では1カラムに切り替わり、画像が上・テキストが下に積まれます。alt属性には「打ち合わせをするチーム」のように内容が伝わる説明を入れ、装飾画像でも空にしないようにすると検索エンジンと読み上げ環境の双方に親切です。