ベントグリッド

<!-- FlowDesk 分析：ベントグリッドで大小タイルのダッシュボード -->
<section class="fd-bento">
  <header class="fd-bento__bar">
    <h2 class="fd-bento__title">◆ FlowDesk Analytics</h2>
    <span class="fd-bento__period">2026年5月</span>
  </header>

  <div class="fd-bento__grid" id="fdBento">
    <!-- 主役の大タイル：売上推移 -->
    <article class="fd-tile fd-tile--hero" data-tile>
      <p class="fd-tile__label">月間売上</p>
      <p class="fd-tile__big">¥4.82M</p>
      <span class="fd-tile__delta up">前月比 +18.4%</span>
      <div class="fd-tile__spark" aria-hidden="true">
        <span style="height:38%"></span><span style="height:52%"></span>
        <span style="height:45%"></span><span style="height:68%"></span>
        <span style="height:60%"></span><span style="height:82%"></span>
        <span style="height:74%"></span><span style="height:94%"></span>
      </div>
    </article>

    <article class="fd-tile" data-tile>
      <p class="fd-tile__label">新規契約</p>
      <p class="fd-tile__big">312</p>
      <span class="fd-tile__delta up">+24</span>
    </article>

    <article class="fd-tile" data-tile>
      <p class="fd-tile__label">解約率</p>
      <p class="fd-tile__big">1.9%</p>
      <span class="fd-tile__delta down">-0.3pt</span>
    </article>

    <!-- 横長タイル -->
    <article class="fd-tile fd-tile--wide" data-tile>
      <p class="fd-tile__label">稼働ユーザー</p>
      <div class="fd-tile__row">
        <p class="fd-tile__big">8,940</p>
        <div class="fd-tile__bars" aria-hidden="true">
          <i style="height:50%"></i><i style="height:70%"></i>
          <i style="height:60%"></i><i style="height:85%"></i><i style="height:78%"></i>
        </div>
      </div>
    </article>

    <article class="fd-tile" data-tile>
      <p class="fd-tile__label">NPS</p>
      <p class="fd-tile__big">+62</p>
      <span class="fd-tile__delta up">+5</span>
    </article>
  </div>
</section>

/* FlowDesk：grid-column / grid-row span でベント風ダッシュボード */
:root {
  --navy: #0f1b34;
  --blue: #4f7cff;
  --line: #21345e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 400px;
  display: grid;
  place-items: center;
  font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}

.fd-bento { width: 100%; max-width: 640px; padding: 16px; }
.fd-bento__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.fd-bento__title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
.fd-bento__period { font-size: 11px; color: #8aa0d0; }

/* ベントグリッド：4列×3行のベースに大小タイルを span 配置 */
.fd-bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 78px;
  gap: 10px;
}

.fd-tile {
  background: #16264a;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.fd-tile:hover { transform: translateY(-2px); border-color: var(--blue); }

/* 発光パルス（JSで付与） */
.fd-tile.is-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--blue) inset, 0 0 22px rgba(79, 124, 255, 0.5);
  animation: fdPulse 0.6s ease;
}
@keyframes fdPulse {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 主役の大タイル：2列×2行 */
.fd-tile--hero { grid-column: span 2; grid-row: span 2; }
/* 横長タイル：3列 */
.fd-tile--wide { grid-column: span 3; }

.fd-tile__label { margin: 0 0 4px; font-size: 10.5px; color: #9fb2dc; }
.fd-tile__big { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; }
.fd-tile--hero .fd-tile__big { font-size: 34px; }
.fd-tile__delta { font-size: 10px; font-weight: 700; }
.fd-tile__delta.up { color: #5ee0a0; }
.fd-tile__delta.down { color: #ff8d86; }

/* 大タイルのスパークライン */
.fd-tile__spark {
  position: absolute;
  inset: auto 14px 12px 14px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px;
}
.fd-tile__spark span {
  flex: 1;
  background: linear-gradient(180deg, var(--blue), #2e4fb8);
  border-radius: 3px 3px 0 0;
  opacity: 0.9;
}

/* 横長タイルのバー */
.fd-tile__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fd-tile__bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; flex: 1; max-width: 120px; }
.fd-tile__bars i { flex: 1; background: var(--blue); border-radius: 2px 2px 0 0; opacity: 0.85; }

// ベントタイルをクリックで発光パルス（アニメ終了後にクラスを外して再発火可能に）
const grid = document.getElementById("fdBento");

grid?.addEventListener("click", (e) => {
  const tile = e.target.closest("[data-tile]");
  if (!tile) return;
  tile.classList.remove("is-pulse");
  // リフローを挟んでアニメーションを確実に再生
  void tile.offsetWidth;
  tile.classList.add("is-pulse");
});

// アニメーション完了でクラス除去
grid?.addEventListener("animationend", (e) => {
  e.target.closest("[data-tile]")?.classList.remove("is-pulse");
});

<!-- ベントグリッド：大小のタイルを grid-column/row span で組む流行のベント風レイアウト -->
<div class="bento">
  <h1 class="bento__head">Bento <span>Grid</span></h1>
  <div class="bento__grid">
    <div class="bt bt--feature" data-tile>
      <span class="bt__k">FEATURED</span>
      <h2>大きな主役タイル</h2>
      <p>span で2×2を占有し、視線の起点になります。</p>
      <div class="bt__orb"></div>
    </div>
    <div class="bt bt--wide" data-tile><span class="bt__k">STATS</span><b>+128%</b><p>成長率</p></div>
    <div class="bt bt--tall" data-tile><span class="bt__k">MEDIA</span><div class="bt__bars"><i></i><i></i><i></i><i></i></div></div>
    <div class="bt" data-tile><span class="bt__k">A</span><b>24</b></div>
    <div class="bt" data-tile><span class="bt__k">B</span><b>7.5k</b></div>
    <div class="bt bt--wide bt--cta" data-tile><span class="bt__k">CTA</span><b>はじめる →</b></div>
  </div>
</div>

/* 全体：ダーク地に発光タイル */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Hiragino Sans", system-ui, sans-serif;
  background: radial-gradient(120% 120% at 50% -10%, #161b2e, #0a0c14 70%);
  color: #eef2ff; min-height: 100vh; padding: 18px 16px;
  display: grid; place-items: center;
}
.bento { width: min(820px, 100%); }
.bento__head { text-align: center; font-size: clamp(18px, 3.4vw, 26px); font-weight: 800; margin-bottom: 14px; }
.bento__head span {
  background: linear-gradient(90deg, #818cf8, #22d3ee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ベントの土台：4列の等幅グリッド */
.bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 78px;
  gap: 12px;
}
@media (max-width: 560px) { .bento__grid { grid-template-columns: repeat(2, 1fr); } }

/* タイル共通 */
.bt {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 14px;
  background: #141a30; border: 1px solid #232b47;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .25s ease, border-color .25s ease;
}
.bt:hover { transform: translateY(-4px); border-color: #3b4a78; }
.bt__k { font-size: 9px; letter-spacing: .2em; font-weight: 800; color: #7c8bb8; }
.bt b { font-size: 22px; font-weight: 800; }
.bt p { font-size: 11px; color: #9aa6c9; }

/* スパン指定で大小を作る */
.bt--feature { grid-column: span 2; grid-row: span 2;
  background: linear-gradient(150deg, #4338ca, #6d28d9 55%, #0e7490);
}
.bt--feature h2 { font-size: 18px; font-weight: 800; line-height: 1.3; }
.bt--feature p { color: #d7d9ff; }
.bt--wide { grid-column: span 2; }
.bt--tall { grid-row: span 2; }
.bt--cta {
  background: linear-gradient(90deg, #22d3ee, #818cf8); color: #07111f;
  cursor: pointer; align-items: flex-start; justify-content: space-between;
}
.bt--cta .bt__k { color: rgba(7,17,31,.6); }

/* 装飾：発光する球 */
.bt__orb {
  position: absolute; right: -30px; bottom: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 60%);
  filter: blur(2px);
}
/* バー演出 */
.bt__bars { display: flex; gap: 6px; align-items: flex-end; height: 60%; }
.bt__bars i {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #22d3ee, #818cf8);
  animation: rise 1.6s ease-in-out infinite alternate;
}
.bt__bars i:nth-child(1) { height: 40%; animation-delay: 0s; }
.bt__bars i:nth-child(2) { height: 70%; animation-delay: .2s; }
.bt__bars i:nth-child(3) { height: 55%; animation-delay: .4s; }
.bt__bars i:nth-child(4) { height: 85%; animation-delay: .6s; }

@keyframes rise { from { transform: scaleY(.7); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .bt { transition: none; }
  .bt__bars i { animation: none; }
}

// タイルのクリックで一時的に発光（パルス）。CSSアニメをJSから付与
(() => {
  const tiles = document.querySelectorAll('[data-tile]');
  if (!tiles.length) return;
  tiles.forEach((tile) => {
    tile.addEventListener('click', () => {
      tile.animate(
        [
          { boxShadow: '0 0 0 0 rgba(129,140,248,.6)' },
          { boxShadow: '0 0 0 14px rgba(129,140,248,0)' },
        ],
        { duration: 600, easing: 'ease-out' }
      );
    });
  });
})();