代表メッセージ（縦写真）
左に縦長のポートレート、右にメッセージ本文を置いた代表挨拶のセクションです。 display:grid で「写真280px ＋ テキスト」の2カラムに分け、写真枠は aspect-ratio:3/4 で縦長の比率を保っています。
このパーツの使いどころと実装ポイント
左に縦長のポートレート、右にメッセージ本文を置いた代表挨拶のセクションです。display:gridで「写真280px ＋ テキスト」の2カラムに分け、写真枠はaspect-ratio:3/4で縦長の比率を保っています。英字ラベル・見出し・本文・署名という、企業サイトの代表メッセージで定番の並びになっており、写真と文章のバランスで誠実な印象を作るのが狙いです。
向いている場面
- 会社概要や採用サイトの「代表メッセージ」「トップ挨拶」
- 士業・医療・教育など、人柄や理念を前面に出したい業種
- 創業ストーリーやビジョンを語るブランドページ
カスタマイズの勘所
写真枠は今はグラデーションのプレースホルダなので、実際の人物写真に差し替えてください。その際はobject-fit:coverで顔が中央に来るようにクロップし、altに氏名と役職を入れます。署名の氏名・役職は実在情報に合わせ、本文は1〜2段落の落ち着いた長さにすると読みやすくなります。aspect-ratioを変えれば正方形や横長の写真にも対応できます。
レスポンシブの注意
2カラムは狭い画面で窮屈になりがちです。スマートフォンでは写真を上、本文を下にした1カラムへ切り替えると、写真が小さくなりすぎず読みやすくなります。
よくある質問
写真の縦横比は変えられますか？
写真枠はaspect-ratioで3対4の縦長に指定しているので、この値を1対1にすれば正方形、16対9にすれば横長になります。実写を入れる際は被写体の顔が枠の中央に来るようにクロップすると印象が安定します。
スマートフォンでは写真と文章はどう並びますか？
標準は横2カラムですが、狭い画面ではメディアクエリで写真を上、文章を下にした縦1カラムへ切り替えるのが一般的です。こうすると写真が小さくなりすぎず、本文の行幅も適切に保てます。