オーバーラップ写真ヒーロー
左にコピー、右に2枚の写真を重ねて配置したスプリット型のヒーローです。右カラムは position:relative の枠の中で、背面の縦長写真（ --back ）と前面の小さめ写真（ --front ）を position:absolute で重ね、前面写真に白い6px枠を付けて奥行きを出しています。
このパーツの使いどころと実装ポイント
左にコピー、右に2枚の写真を重ねて配置したスプリット型のヒーローです。右カラムは position:relative の枠の中で、背面の縦長写真（--back）と前面の小さめ写真（--front）を position:absolute で重ね、前面写真に白い6px枠を付けて奥行きを出しています。左カラムには見出し・リード文・主従2つのボタン・実績数値（dl による定義リスト）を縦に積んでいます。
向いている場面
支援実績やチームの雰囲気を前面に出したい制作会社・コンサル・人材系のトップに向きます。数値カウンター部分は「支援した事業」「継続率」のように、信頼につながる指標を2つ見せる設計です。サービス紹介の冒頭や、採用サイトのファーストビューにも応用できます。
カスタマイズと注意
- 重ね写真は親要素の高さ（
height:480px）を基準に割合配置しているので、写真を差し替えても比率が崩れにくいです。高さを変えると2枚の重なり位置も連動して動きます。 - 768px以下で1カラムに畳まれ中央寄せになります。写真エリアも高さが下がり最大幅が制限されるため、スマホで縦に伸びすぎません。
- 実績数値は本物のデータに置き換えてください。根拠のない数字は信頼を損ないます。
- 見出しは
h1です。1ページに1つだけ使い、下層の見出しはh2以降にしてください。
よくある質問
写真2枚の重なり位置はどう調整しますか。
右カラムの親枠の高さと、背面・前面それぞれの幅と高さの割合で決まっています。背面は右上に大きく、前面は左下に小さく配置されているので、割合を変えれば重なりの深さや位置を動かせます。親枠の高さを変更すると両方の写真サイズも連動して変わるため、まず高さから決めると調整しやすいです。
数値の「120+」「98%」は変えてよいですか。
必ず自社の実態に合わせて変えてください。これはデモ用のサンプル値です。実績や継続率などの数字は信頼に直結するため、根拠のある正確な値を入れるべきです。指標自体も、支援数や継続率に限らず、自社が強みを示せる2つの数字に置き換えられます。