ニューモーフィックカード

凹凸のパネルや進捗バーを組み合わせたニューモーフィズムのプロフィールカード。やわらかなダッシュボードUIに最適です。

#css#neumorphism#card#javascript

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk 料金プラン：ニューモーフィックカード -->
<section class="fd-pricing">
  <p class="fd-pricing__eyebrow">PRICING</p>
  <h2 class="fd-pricing__head">チームに合わせて選べる料金</h2>

  <div class="fd-cards">
    <!-- 通常プラン -->
    <article class="fd-card">
      <span class="fd-card__icon">◐</span>
      <h3 class="fd-card__name">Starter</h3>
      <p class="fd-card__price"><b>¥980</b><span>/ ユーザー / 月</span></p>
      <ul class="fd-card__feats">
        <li>タスク管理 無制限</li>
        <li>5GB ストレージ</li>
        <li>メールサポート</li>
      </ul>
      <button class="fd-card__btn" type="button">無料で始める</button>
    </article>

    <!-- 人気プラン（凹みで強調） -->
    <article class="fd-card fd-card--pop" id="fdPop">
      <span class="fd-card__tag">人気</span>
      <span class="fd-card__icon fd-card__icon--accent">●</span>
      <h3 class="fd-card__name">Business</h3>
      <p class="fd-card__price"><b>¥2,480</b><span>/ ユーザー / 月</span></p>
      <ul class="fd-card__feats">
        <li>Starterの全機能</li>
        <li>自動化ワークフロー</li>
        <li>ダッシュボード分析</li>
      </ul>
      <button class="fd-card__btn fd-card__btn--accent" type="button">14日間 無料体験</button>
    </article>
  </div>
</section>

CSS

/* FlowDesk：ニューモーフィックな料金カード */
:root {
  --bg: #e6ebf5;
  --dark: #c3cad9;
  --light: #ffffff;
  --navy: #0f1b34;
  --blue: #4f7cff;
  --text: #46506b;
}

* { box-sizing: border-box; }

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

.fd-pricing {
  width: min(560px, 92vw);
  text-align: center;
  padding: 8px;
}
.fd-pricing__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--blue);
  font-weight: 700;
}
.fd-pricing__head {
  margin: 4px 0 18px;
  font-size: 19px;
  color: var(--navy);
  font-weight: 800;
}

.fd-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* 凸カード：背景と同色＋二方向シャドウ */
.fd-card {
  position: relative;
  padding: 22px 20px 20px;
  border-radius: 22px;
  background: var(--bg);
  box-shadow: 8px 8px 16px var(--dark), -8px -8px 16px var(--light);
  text-align: left;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 人気プラン：押し込まれたような凹み＋アクセント */
.fd-card--pop {
  box-shadow: inset 6px 6px 12px var(--dark), inset -6px -6px 12px var(--light);
}
.fd-card--pop:hover {
  box-shadow: 8px 8px 16px var(--dark), -8px -8px 16px var(--light);
  transform: translateY(-2px);
}
.fd-card:not(.fd-card--pop):hover {
  box-shadow: 10px 10px 20px var(--dark), -10px -10px 20px var(--light);
  transform: translateY(-2px);
}

.fd-card__tag {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  padding: 3px 9px;
  border-radius: 999px;
}

/* アイコン：小さな凹みパネル */
.fd-card__icon {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);
  font-size: 16px;
  color: #97a0b8;
  margin-bottom: 12px;
}
.fd-card__icon--accent { color: var(--blue); }

.fd-card__name { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--navy); }
.fd-card__price { margin: 0 0 14px; display: flex; align-items: baseline; gap: 5px; }
.fd-card__price b { font-size: 24px; color: var(--navy); }
.fd-card__price span { font-size: 11px; color: #8a93ab; }

.fd-card__feats { list-style: none; margin: 0 0 16px; padding: 0; }
.fd-card__feats li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 2;
  color: #5a6480;
}
.fd-card__feats li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--blue);
  font-weight: 700;
}

/* CTAボタン：凸ボタン */
.fd-card__btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  padding: 11px 0;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: var(--navy);
  background: var(--bg);
  box-shadow: 4px 4px 8px var(--dark), -4px -4px 8px var(--light);
  transition: box-shadow 0.18s ease;
}
.fd-card__btn:active { box-shadow: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light); }
.fd-card__btn--accent {
  color: #fff;
  background: linear-gradient(135deg, #5f8bff, #4f7cff);
  box-shadow: 4px 4px 10px rgba(79,124,255,0.4), -4px -4px 8px var(--light);
}
.fd-card__btn--accent:active { box-shadow: inset 3px 3px 7px rgba(35,70,170,0.5); }

@media (prefers-reduced-motion: reduce) {
  .fd-card { transition: none; }
}

JavaScript

// 人気プランのCTAクリックで軽いフィードバック
const popBtn = document.querySelector("#fdPop .fd-card__btn--accent");

if (popBtn) {
  popBtn.addEventListener("click", () => {
    const label = popBtn.textContent;
    popBtn.textContent = "ご登録ありがとうございます";
    setTimeout(() => { popBtn.textContent = label; }, 1500);
  });
}

// すべてのプランボタンに押下アニメ用クラスを付与（凹みは主にCSS:active で表現）
const allBtns = document.querySelectorAll(".fd-card__btn");
allBtns.forEach((btn) => {
  btn.addEventListener("pointerdown", () => btn.classList.add("is-pressed"));
  btn.addEventListener("pointerup", () => btn.classList.remove("is-pressed"));
  btn.addEventListener("pointerleave", () => btn.classList.remove("is-pressed"));
});

実装ガイド

使いどころ

プロフィールカード、SaaSダッシュボードのウィジェット、進捗・統計を見せるパネルなど、やわらかく落ち着いたトーンでまとめたい情報カードに向きます。凸カード＋凹みパネルの対比でセクションを区切れます。

実装時の注意点

カード本体は外向き box-shadow で凸に、アバター枠・統計行・進捗トラックは inset シャドウで凹ませ、同じ手法を入れ子で使い分けるのがコツです。要素ごとに影のオフセット/ぼかしを小さくすると小さなパーツでも破綻しません。進捗バーの fill は width のトランジションで動かし、cubic-bezier でなめらかに伸ばします。

対応ブラウザ

ガラス効果（backdrop-filter）は使わず box-shadow・inset・linear-gradient・transition のみで構成されるため、全モダンブラウザで問題なく表示されます。特別なプレフィックスやバージョン要件はありません。

よくある失敗

凹凸の手がかりが淡い影だけなので、統計値や役職テキストが背景に埋もれてコントラスト不足になりやすい点に注意します。影を全パーツで同じ強さにすると平板に見え、逆にカード内のオフセットを大きくしすぎると要素同士が衝突して濁ります。グラデの進捗色とトラックの明度差が小さいと進捗量が読み取りにくくなります。

応用例

進捗バーに role="progressbar" と aria-valuenow を付与してスクリーンリーダー対応にする、ホバーで影を強める/弱めて触れる感を出す、ガラス（backdrop-filter）カードと並べてニューモーフィズムを情報パネル側に限定するハイブリッド構成、ダークテーマ用に影色を再定義する、などへ発展できます。

コード