「〜向け」タグ付きカード
家計／バックオフィス／開発者の3枚のカードに「〜向け」タグを付け、誰向けかを押す前に分からせます。ホバーで矢印が進みます。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 家計／法人／開発者など製品ラインが 3 つある企業
- 入口の対象者を名指ししたい一覧
- 同じ骨組みで比べさせたいカード群
- 避ける場面
- カードごとに構成や情報量が揃わないとき
- 入口が 2 つだけの場面（分岐ヒーローへ）
- 構成要素
- セクション見出し
- リード
- カード（リンク）
- 対象者タグ
- 見出しと一行
- リンク文と矢印
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で 3 枚のカード（a 要素）を順に移動し Enter で遷移。カード内に個別のフォーカス位置は無い
- 支援技術
カード全体が 1 つのリンクで、名前は aria-labelledby で見出し＋リンク文に絞る（中身はタグ→見出し→説明→箇条書きの順に読める）。矢印は aria-hidden。対象者は色ではなくタグ文言で示す
- 動き
ホバーで枠色が墨に変わり影が付く 200ms。矢印が 4px 進む 200ms
デザインの要点
- タグは「個人のお客さま向け」のように相手を名指しする。製品名だけのカードは、自分に関係あるか判断できない
- 3枚の骨組み（タグ→見出し→一行→2項目→リンク）を完全に揃える。比べる目が迷わない
- タグの色は対象者ごとに変えてよいが、カード本体は白のまま。色はラベルだけに置く
- リンク文言は「家計簿アプリを見る」のように行き先の名前で。「詳しく見る」は3枚並ぶと区別がつかない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<section class="act">
<h2 class="act-h">お金の仕事を、ぜんぶ前へ。</h2>
<p class="act-lead">使う人によって、必要なものは違います。あなたに近い入口からどうぞ。</p>
<div class="act-grid">
<a class="act-card" href="#" aria-labelledby="act-t1 act-l1">
<span class="act-tag act-tag--a">個人のお客さま向け</span>
<strong class="act-title" id="act-t1">家計も。</strong>
<p class="act-desc">銀行・カード・電子マネーをまとめて自動で家計簿に。</p>
<ul class="act-list"><li>2,500 以上の金融サービスと連携</li><li>資産の推移をグラフで確認</li></ul>
<span class="act-link" id="act-l1">家計簿アプリを見る<span class="act-arrow" aria-hidden="true">→</span></span>
</a>
<a class="act-card" href="#" aria-labelledby="act-t2 act-l2">
<span class="act-tag act-tag--b">法人・個人事業主向け</span>
<strong class="act-title" id="act-t2">バックオフィスも。</strong>
<p class="act-desc">会計・請求・経費・給与を、ひとつのデータでつなぐ。</p>
<ul class="act-list"><li>会計・請求・経費・給与の 4 製品</li><li>税理士とリアルタイム共有</li></ul>
<span class="act-link" id="act-l2">クラウドシリーズを見る<span class="act-arrow" aria-hidden="true">→</span></span>
</a>
<a class="act-card" href="#" aria-labelledby="act-t3 act-l3">
<span class="act-tag act-tag--c">開発者向け</span>
<strong class="act-title" id="act-t3">つなぐ人も。</strong>
<p class="act-desc">公開 API で、自社のサービスに会計データを組み込む。</p>
<ul class="act-list"><li>REST API とサンプルコード</li><li>サンドボックス環境を無料提供</li></ul>
<span class="act-link" id="act-l3">API ドキュメントを見る<span class="act-arrow" aria-hidden="true">→</span></span>
</a>
</div>
</section>