「〜向け」タグ付きカード
家計／バックオフィス／開発者の3枚のカードに「〜向け」タグを付け、誰向けかを押す前に分からせます。ホバーで矢印が進みます。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
デザインの要点
- タグは「個人のお客さま向け」のように相手を名指しする。製品名だけのカードは、自分に関係あるか判断できない
- 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="#">
<span class="act-tag act-tag--a">個人のお客さま向け</span>
<strong class="act-title">家計も。</strong>
<p class="act-desc">銀行・カード・電子マネーをまとめて自動で家計簿に。</p>
<ul class="act-list"><li>2,500 以上の金融サービスと連携</li><li>資産の推移をグラフで確認</li></ul>
<span class="act-link">家計簿アプリを見る<span class="act-arrow" aria-hidden="true">→</span></span>
</a>
<a class="act-card" href="#">
<span class="act-tag act-tag--b">法人・個人事業主向け</span>
<strong class="act-title">バックオフィスも。</strong>
<p class="act-desc">会計・請求・経費・給与を、ひとつのデータでつなぐ。</p>
<ul class="act-list"><li>会計・請求・経費・給与の 4 製品</li><li>税理士とリアルタイム共有</li></ul>
<span class="act-link">クラウドシリーズを見る<span class="act-arrow" aria-hidden="true">→</span></span>
</a>
<a class="act-card" href="#">
<span class="act-tag act-tag--c">開発者向け</span>
<strong class="act-title">つなぐ人も。</strong>
<p class="act-desc">公開 API で、自社のサービスに会計データを組み込む。</p>
<ul class="act-list"><li>REST API とサンプルコード</li><li>サンドボックス環境を無料提供</li></ul>
<span class="act-link">API ドキュメントを見る<span class="act-arrow" aria-hidden="true">→</span></span>
</a>
</div>
</section>