代表メッセージ（写真 + 文章）

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

このパーツは、代表者の顔写真と長めのメッセージ文を左右 2 カラムで並べる「代表メッセージ」セクションです。CSS Grid の grid-template-columns:1fr 1.4fr で写真側を狭く、文章側を広く取り、align-items:center で高さの異なる両者を中央で揃えています。写真枠は background:url() の center/cover で配置しているため、画像の縦横比が違っても枠いっぱいに表示されるのが特徴です。

向いている場面

会社の人柄や創業の想いを言葉で伝えたい場面に向きます。たとえば、士業事務所や工務店のコーポレートサイト、創業ストーリーを軸にする D2C ブランド、採用ページで経営者の人物像を見せたいときなどです。アイキャッチタグ（MESSAGE）から見出し、本文、署名へと視線が自然に流れる構成になっています。

カスタマイズの勘所

• 写真は .ce-ms__ph の background の URL を差し替えるだけで変更できます。実在の代表写真に置き換えてください。
• 署名部分の <b> に氏名、<span> に役職が入ります。複数名の連名にしたい場合はここを増やします。

実装上は、写真をベタ塗りやサンプル画像のまま公開しないことが大切です。背景画像は <img> ではなく CSS 背景なので、人物を伝える写真には別途 aria-label など代替手段を検討するとアクセシビリティが上がります。スマートフォンでは 1 カラムに切り替わる指定を加えると読みやすくなります。