機能紹介のベントグリッド
大小のタイルで機能を紹介するベントグリッド。主役は大タイル1枚だけ、他4枚は脇役。各タイルに CSS だけの小さな動く図を置き、機能の中身を一目で伝えます。
プレビュー
自動再生
操作自動で再生されます。
デザインの要点
- 大タイルは1枚だけ。2枚あると主役が消える。主役に置くのは「一番使われる機能」で、一番新しい機能ではない
- 各タイルの図は「その機能が動いている瞬間」を1つだけ描く。イラストの装飾ではなく状態の説明
- コピーは見出し（機能名）＋一行（結果）。「朝には昨日の明細が届いています」のように、使った後の景色を書く
- タイルの地色は白1色、動く図にだけアクセント。5枚が色で競うと視線が散る
コード（コピーして使えます）
<section class="bfs">
<p class="bfs-eyebrow">Tsumugi の機能</p>
<h2 class="bfs-h">手を動かす仕事を、減らす。</h2>
<div class="bfs-grid">
<article class="bfs-tile bfs-tile--lg">
<div class="bfs-fig bfs-fig--sync" aria-hidden="true">
<div class="bfs-bar"><span>みなと銀行</span><i></i></div>
<div class="bfs-bar"><span>Aoi カード</span><i></i></div>
<div class="bfs-bar"><span>電子マネー</span><i></i></div>
<div class="bfs-ok">✓ 同期完了 · 128 件</div>
</div>
<h3>自動同期</h3>
<p>銀行・カード 2,400 社と自動連携。朝には昨日の明細が届いています。</p>
</article>
<article class="bfs-tile">
<div class="bfs-fig bfs-fig--toggle" aria-hidden="true"><span class="bfs-knob"></span></div>
<h3>ワンタップ承認</h3>
<p>経費申請はスマホで承認。差し戻しも一言添えるだけ。</p>
</article>
<article class="bfs-tile">
<div class="bfs-fig bfs-fig--bell" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M8 19V12a6 6 0 1112 0v7l2 2H6l2-2z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M11 23a3 3 0 006 0" stroke="currentColor" stroke-width="2"/></svg><i></i></div>
<h3>期限リマインド</h3>
<p>申告・納付の 3 日前に通知。忘れる前に、思い出させます。</p>
</article>
<article class="bfs-tile">
<div class="bfs-fig bfs-fig--chart" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></div>
<h3>月次レポート</h3>
<p>売上・経費・利益を毎月 1 日に自動作成。数字を追うだけ。</p>
</article>
<article class="bfs-tile">
<div class="bfs-fig bfs-fig--share" aria-hidden="true"><span class="bfs-av">YS</span><span class="bfs-av bfs-av--2">税</span><i class="bfs-cursor"></i></div>
<h3>税理士と同じ画面</h3>
<p>共有した瞬間から同じ帳簿を見て話せます。書き出しは不要。</p>
</article>
</div>
</section>