← 静的パーツギャラリーへ戻る

パーツ番号 05-15-11 ・ CSSのみ

AARRRモデル風5段階ファネル

Acquisition〜Revenueの5指標を色分けバッジと横棒で並べたグロースモデル図です。スタートアップのサービス紹介資料でKPI構造を説明するページに使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d05-15-11-list">
          <li><span class="d05-15-11-badge d05-15-11-b1">A</span><span class="d05-15-11-label">Acquisition</span><span class="d05-15-11-track"><span class="d05-15-11-bar d05-15-11-w1"></span></span><span class="d05-15-11-pct">100%</span></li>
          <li><span class="d05-15-11-badge d05-15-11-b2">A</span><span class="d05-15-11-label">Activation</span><span class="d05-15-11-track"><span class="d05-15-11-bar d05-15-11-w2"></span></span><span class="d05-15-11-pct">72%</span></li>
          <li><span class="d05-15-11-badge d05-15-11-b3">R</span><span class="d05-15-11-label">Retention</span><span class="d05-15-11-track"><span class="d05-15-11-bar d05-15-11-w3"></span></span><span class="d05-15-11-pct">48%</span></li>
          <li><span class="d05-15-11-badge d05-15-11-b4">R</span><span class="d05-15-11-label">Referral</span><span class="d05-15-11-track"><span class="d05-15-11-bar d05-15-11-w4"></span></span><span class="d05-15-11-pct">22%</span></li>
          <li><span class="d05-15-11-badge d05-15-11-b5">R</span><span class="d05-15-11-label">Revenue</span><span class="d05-15-11-track"><span class="d05-15-11-bar d05-15-11-w5"></span></span><span class="d05-15-11-pct">14%</span></li>
        </ul>

CSS

.d05-15-11{padding:20px;align-items:stretch}
        .d05-15-11-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:9px}
        .d05-15-11-list li{display:grid;grid-template-columns:20px 68px 1fr 32px;align-items:center;gap:7px}
        .d05-15-11-badge{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:800}
        .d05-15-11-b1{background:#ef4444}
        .d05-15-11-b2{background:#f97316}
        .d05-15-11-b3{background:#eab308}
        .d05-15-11-b4{background:#22c55e}
        .d05-15-11-b5{background:#3b82f6}
        .d05-15-11-label{font-size:9.5px;color:#475569;font-weight:600;white-space:nowrap}
        .d05-15-11-track{height:8px;border-radius:4px;background:#f1f5f9;overflow:hidden}
        .d05-15-11-bar{display:block;height:100%;border-radius:4px;background:#6366f1}
        .d05-15-11-w1{width:100%}
        .d05-15-11-w2{width:72%}
        .d05-15-11-w3{width:48%}
        .d05-15-11-w4{width:22%}
        .d05-15-11-w5{width:14%}
        .d05-15-11-pct{font-size:10px;font-weight:700;color:#1e293b;text-align:right}

クラス名 .d05-15-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。