ベントグリッド
大小のタイルを敷き詰めた今風のBentoレイアウト。ホバー/タップで各タイルが浮き上がり、内容がちらっと変化する。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 数値・特徴を大小のタイルで見せる
- サービス概要のハイライト一覧
- ホバーで補足が出る軽い遊びのある一覧
- 避ける場面
- 補足値を隠したまま重要情報にする
- タイル自体をリンクにせず遷移先が無い
- タイル数が多く格子が崩れる
- 構成要素
- タイル
- ラベル
- 主数値
- 補足値
- アイコン
- 持っている状態
- 通常
- ホバー
- キーボード
マウス・タッチ専用（ホバー／タップで補足値を表示）。タイルは操作ではなく表示なのでフォーカス対象にしない。補足値は DOM に常在し読み上げには乗る
- 支援技術
補足値はホバー時のみ opacity で出るが DOM に常在し読み上げには乗る。浮き上がりは装飾で情報を持たない。reduce 設定では浮き上がりとフェードを止める
- 動き
ホバーで 220ms cubic-bezier(.34,1.56,.64,1) で 4px 浮き・補足値は 180ms でフェードイン。タッチは 400ms 後に戻す。reduce では即時
目的見せる
デザインの要点
- 2列格子で横長タイル（grid-column: 1/3）を上下に1枚ずつ置く。大小の差がないと Bento ではなくただの表になる
- 浮き上がりは translateY(-4px)＋scale 1.025 をオーバーシュートで。4px を超えると隣と重なり影が濁る
- 補足値は opacity 0 のまま DOM に置き、読み上げには常に乗せる。display:none にすると情報が消える
- タッチでは pointerup の 400ms 後に戻す。即戻すと補足値を読む前に消え、戻さないと押しっぱなしに見える
コード（コピーして使えます）
<div class="bg-grid">
<div class="bg-tile bg-t1" data-val="1,284">
<span class="bg-label">月間訪問者</span>
<span class="bg-val">1,284</span>
<span class="bg-alt">▲ 12%</span>
</div>
<div class="bg-tile bg-t2" data-val="98%">
<span class="bg-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="28" height="28"><path d="M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21.02 L12 17.77 L5.82 21.02 L7 14.14 L2 9.27 L8.91 8.26 Z"/></svg>
</span>
<span class="bg-label">満足度</span>
<span class="bg-val">98%</span>
<span class="bg-alt">★ 4.9</span>
</div>
<div class="bg-tile bg-t3" data-val="42">
<span class="bg-label">ツール数</span>
<span class="bg-val">42</span>
<span class="bg-alt">全6カテゴリ</span>
</div>
<div class="bg-tile bg-t4" data-val="0ms">
<span class="bg-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</span>
<span class="bg-label">応答速度</span>
<span class="bg-val">即時</span>
<span class="bg-alt">サーバー不要</span>
</div>
<div class="bg-tile bg-t5" data-val="100%">
<span class="bg-label">プライバシー</span>
<span class="bg-val">100%</span>
<span class="bg-alt">端末内完結</span>
</div>
</div>