メンバー詳細（大判写真）

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

このパーツは、1 人の人物を大判の縦長写真と経歴・メッセージで紹介するメンバー詳細レイアウトです。display:grid の grid-template-columns:1fr 1.2fr で左に写真、右にテキストを置き、写真側は aspect-ratio:3/4 でポートレート比率に固定しています。経歴は dl（定義リスト）で「経歴・得意領域・一言」を見出しと内容のペアとして構造化しており、読みやすさと意味の明確さを両立しています。

向いている場面

代表メッセージ、創業メンバーの紹介、士業やコンサルタントなど人物の信頼が受注に直結する業種に向きます。クリニックの院長挨拶、デザイナーやフォトグラファーの自己紹介ページ、採用サイトの社員インタビュー冒頭にも使えます。背景色は温かみのあるクリーム（#FDF8EF）で、誠実で落ち着いた印象を与えます。

カスタマイズの勘所

• mb-dl__ph のグラデーションを実写の人物写真に差し替える
• dl の dt/dd ペアを増やせば資格や受賞歴も追加できる
• 「MEMBER 01」のタグ番号を変えれば連番で複数人ページに展開できる

実装上は、写真にその人物を表す具体的な alt を付けること、見出し階層が h2 から始まるためページ全体の h1 と重複しないことに注意します。レスポンシブでは 2 カラムが狭い画面で窮屈になるため、一定幅以下で写真とテキストを縦積みに切り替える調整を推奨します。