演出・リッチ
ベントグリッド
大小のタイルを敷き詰めた今風のBentoレイアウト。ホバー/タップで各タイルが浮き上がり、内容がちらっと変化する。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
コード（コピーして使えます）
<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>