代表事例 詳細プレゼン
1 件の代表事例を、画像・課題・解決策・結果まで含めてじっくり見せる長尺の実績セクションです。レイアウトは display:grid の 2 カラムで、左に画像、右にテキストと KPI を配置しています。
このパーツの使いどころと実装ポイント
1 件の代表事例を、画像・課題・解決策・結果まで含めてじっくり見せる長尺の実績セクションです。レイアウトは display:grid の 2 カラムで、左に画像、右にテキストと KPI を配置しています。画像枠は position:relative + overflow:hidden の中で object-fit:cover を効かせ、縦横比の違う写真でも枠いっぱいに破綻なく収まる作りです。数値は「+184%」「2.8s」のように成果を端的に並べ、説得力を持たせています。
向いている場面
件数より質で見せたい実績に向きます。コーポレートサイトのリニューアル事例、採用支援で応募数が伸びた事例、店舗の集客改善など、ビフォーアフターを語れる案件で力を発揮します。複数事例をカードで一覧にするより、「一番の自信作」を 1 件だけ深掘りしたいときに選ぶとよいでしょう。
カスタマイズの勘所
- KPI は 3 つ程度に絞り、数字（
b）とラベル（span）の役割を分けて視認性を高めます。 - 画像は実写を使い、
altに内容が伝わる説明を入れます。 - 左右の
grid-template-columnsはスマートフォンで 1 カラムに切り替え、画像→テキストの順で縦積みにします。
数値を載せる際は実データに基づくこと。根拠のない誇張は信頼を損ねます。画像は loading="lazy" で遅延読み込みし、表示速度に配慮してください。
よくある質問
複数の事例を見せたい場合もこのパーツが向いていますか。
このパーツは1件を深く見せる長尺型なので、多数を並べるのには向きません。件数で見せたいときはカード一覧型を使い、本パーツは最も自信のある代表事例を1件だけ掘り下げる用途に絞るのが効果的です。
KPIの数字はどう選べばよいですか。
成果が一目で伝わる指標を3つ前後に絞ります。応募増加率や表示速度、制作期間など、その案件の価値を端的に示す数値が適切です。必ず実際の計測値を使い、根拠のない数字は載せないでください。