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

円が段階的に縮小するファネル

円のサイズを段階的に小さくして絞り込みを表現したファネルです。サービス紹介ページで会員獲得までのステップを丸みのあるやわらかい印象で見せたい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-05-wrap">
          <div class="d05-15-05-row">
            <div class="d05-15-05-c d05-15-05-c1"><span>100%</span></div>
            <div class="d05-15-05-c d05-15-05-c2"><span>68%</span></div>
            <div class="d05-15-05-c d05-15-05-c3"><span>41%</span></div>
            <div class="d05-15-05-c d05-15-05-c4"><span>19%</span></div>
          </div>
          <div class="d05-15-05-labels"><span>訪問</span><span>登録</span><span>体験</span><span>契約</span></div>
        </div>

CSS

.d05-15-05{padding:18px}
        .d05-15-05-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
        .d05-15-05-row{display:flex;align-items:center;justify-content:center;gap:10px}
        .d05-15-05-c{display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:800}
        .d05-15-05-c1{width:76px;height:76px;font-size:12px;background:#f472b6}
        .d05-15-05-c2{width:60px;height:60px;font-size:11px;background:#ec4899}
        .d05-15-05-c3{width:44px;height:44px;font-size:10px;background:#db2777}
        .d05-15-05-c4{width:30px;height:30px;font-size:9px;background:#9d174d}
        .d05-15-05-labels{display:flex;gap:14px;font-size:10px;color:#94a3b8;font-weight:600}

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