導入事例カード
写真の代わりのグラデーション・引用・成果の数字（問い合わせ対応時間 −42%）・担当者名を1枚にまとめた事例カード3枚。ホバーで少し持ち上がります。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- B2B の導入事例を 3 社並べる LP
- 成果を差分の数字 1 つで語れるとき
- 担当者の一言と肩書きを出せる場合
- 避ける場面
- 成果の数字が出せない事例
- 写真素材で嘘っぽく見える場面（色面で代える）
- 構成要素
- セクション見出し
- カード（リンク）
- カバー（社名／業種）
- 成果の数字
- 引用
- 担当者
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で 3 枚のカード（a 要素）を順に移動し Enter で遷移
- 支援技術
カード全体がリンク。社名→業種→成果→引用→担当者の順に読まれ、引用は blockquote で構造化。reduced-motion で持ち上がりを無効化
- 動き
ホバーで 4px 浮き上がり影が濃くなる 200ms（緩急付き）
デザインの要点
- 成果は「−42%」のように差分の数字1つに絞る。3つ並べると読み手はどれが本題か分からない
- 引用は担当者の言葉を1文だけ。長い体験談はリンク先に置き、カードでは「結果と一言」で止める
- 写真が無いときは色面で代える。人物写真を無理に使うと、素材感で嘘っぽくなる
- 担当者は名前と肩書きを添える（架空でも形式は本番と同じに）。名前のない声は証言にならない
コード（コピーして使えます）
<section class="csc">
<h2 class="csc-h">導入事例</h2>
<p class="csc-lead">業種も規模も違う 3 社が、同じ道具でどう変わったか。</p>
<div class="csc-grid">
<a class="csc-card" href="#">
<div class="csc-cover csc-cover--a"><span class="csc-co">ミナト工房</span><span class="csc-ind">製造業 · 従業員 48 名</span></div>
<div class="csc-body">
<p class="csc-result"><b>−42%</b><span>問い合わせ対応時間</span></p>
<blockquote class="csc-quote">「電話で聞かれていたことが、画面を見れば分かるようになりました」</blockquote>
<p class="csc-who"><span class="csc-av">田</span>田村 沙織 <small>総務部 マネージャー</small></p>
</div>
</a>
<a class="csc-card" href="#">
<div class="csc-cover csc-cover--b"><span class="csc-co">Aoi Analytics</span><span class="csc-ind">SaaS · 従業員 120 名</span></div>
<div class="csc-body">
<p class="csc-result"><b>3.5日 → 半日</b><span>月次締めにかかる時間</span></p>
<blockquote class="csc-quote">「締め作業の待ち時間が消えて、分析に使える日が増えました」</blockquote>
<p class="csc-who"><span class="csc-av">高</span>高橋 悠 <small>経理責任者</small></p>
</div>
</a>
<a class="csc-card" href="#">
<div class="csc-cover csc-cover--c"><span class="csc-co">つむぎ商事</span><span class="csc-ind">卸売 · 従業員 310 名</span></div>
<div class="csc-body">
<p class="csc-result"><b>+18%</b><span>請求書の期日内回収率</span></p>
<blockquote class="csc-quote">「催促の連絡が自動になった分、営業が営業に戻れました」</blockquote>
<p class="csc-who"><span class="csc-av">中</span>中野 健 <small>営業企画部</small></p>
</div>
</a>
</div>
</section>