グラスモーフィズム・プロジェクトカード（写真オーバーラップ）

様式名: グラスモーフィズム / カード

カード半透明写真グラデーション縦組み

⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

写真(を模したグラデーション)の下端にガラスパネルを重ねることで、サムネイルと情報パネルの境界を無くし、1枚のカードとして見せられる。ガラスでなければ写真とパネルの間に必ず線が入る
03_glassmorphism は単色ブロブ地だったが、実制作では地が写真であることが多い。写真は場所によって明度が違うグラデーションなので、ガラスの実効色もパネル内で均一にならない
縦組みの短いタグ(2026 春)をパネル外に飛び出させることで、ガラス同士が重ならずに『あしらい』を足せる。ガラスの上にガラスを重ねると濁る弱点を、位置をずらすことで回避した
パネルが写真の暗い部分と明るい部分の両方にまたがる構図では、地の色を1点だけ測って安心すると、またがった先の明るい部分で可読性が落ちる場合がある

実装メモ — 踏んだ罠

地は linear-gradient(180deg,#2b2f3a 0%,#463f3d 55%,#6b6058 100%)。パネルは下端(最も明るい#6b6058)に重なる想定で不透明度を決めた
実測: #6b6058 に rgba(20,18,17,.55) を重ねた実効背景は約#3b3531。白見出しは12.2:1、本文の#e8e3dfは9.6:1。地が暗い上端(#2b2f3a→実効#1e1f23)ならさらに余裕があるため、グラデーション地では『最も明るい場所』を基準にガラスの濃さを決めれば安全側に倒せる
写真の粒子感は03/04と同じfeTurbulenceだが、opacity.12・mix-blend-mode:overlayにした。単純な低opacity重ねだと暗部で粒が消えて『写真らしさ』が出ず、overlayにすると明部・暗部両方で粒が見えるようになった
縦組みタグは最初カードの外側(top:-34px)へ飛び出させる案で作ったが、単体スクリーンショットで確認すると demo iframe(640×340)の上端で文字が切れて消えていた。ギャラリーのiframeは高さ固定340pxのため、要素を『枠外に飛び出させる』手法は使えない。card内側(overflow:hiddenの内側)、写真部分の右上に収める形に直した
backdrop-filterのfallbackはrgba(20,18,17,.88)。写真地の上では不透明でも『ラベル』として自然に見えるため、単色ブロブ地(03)よりフォールバックの見え方は破綻しにくい
見出しは明朝(Hiragino Mincho ProN)。ガラス様式自体は書体を規定しないが、本人の手癖を様式に関わらず効かせた

使いどころ / 使ってはいけない場面

使う: 実写真(を模したグラデーション含む)の上に情報カードを重ねたいとき。03_glassmorphismの単色ブロブ地と違い、実制作の大半はこちらが本命になる
使う: サムネイルと本文パネルの境目を消してひと続きのカードに見せたいとき
避ける: 写真自体の明暗差が激しい(逆光・強い影)素材。ガラスの不透明度を1点で決めても、パネルが明暗の境界をまたぐと最も明るい部分でだけ弱くなる
避ける: カード数が多いグリッド一覧。backdrop-filterは要素ごとにGPUコストがかかるため、多数敷くとスクロールが重くなる(03と同じ罠)
避ける: ガラスパネルを画面/カード外へはみ出させるレイアウト。固定高のコンテナ(iframe等)では枠外に出た要素が切れて消える(このデモで実際に踏んだ)

壊れる条件

パネルの不透明度を写真の暗い場所だけで決める → 写真の明るい場所にパネルが来たとき実効背景が明るくなり、文字のコントラストが落ちる。最も明るい場所を基準に決める(このデモの実装方針)
縦組みタグをガラスパネルと重ねる → ガラス同士が重なって濁り、両方読みにくくなる。位置をずらして共存させる
装飾要素をカード外へposition:absoluteではみ出させる → 固定高のコンテナ(iframe・カルーセル等)では枠外に出た分が切れて消える(demo iframeの340px高で実際に発生)
粒子(feTurbulence)を単純なopacity重ねにする → 暗部で粒が消えて写真らしさが出ない。mix-blend-mode:overlayにすると明暗両方で見える
@supportsのフォールバックを書かない → 03と同じく非対応環境で背景が透明に寄り、写真の上に文字がそのまま乗って読めなくなる

コントラスト実測

対象	文字色	背景	実効背景	比	判定
見出し(h3・地の最も明るい下端)	`#ffffff`	`#6b6058`	`#3b3531`	12.07:1	AA 合格
本文(p・同上)	`#e8e3df`	`#6b6058`	`#3b3531`	9.48:1	AA 合格
タグ文字(枠線のみ・ガラス面上)	`#f2ece9`	`#6b6058`	`#3b3531`	10.32:1	AA 合格
タグ(accent・単色塗り)	`#ffffff`	`#a81d22`	`#a81d22`	7.33:1	AA 合格
縦組みタグ(2026 春・地の最も暗い上端)	`#f2ece9`	`#2e313a`	`#232429`	13.24:1	AA 合格

アクセシビリティ

コントラストは必ず『地の最も明るい場所』を基準にガラスの濃さを決める。暗い場所だけで測ると、明るい場所に来た瞬間にAAを割る
backdrop-filter非対応環境はrgba(20,18,17,.88)の不透明フォールバック。写真の上でも『ラベル』として自然に見え、単色地(03)より破綻しにくい
縦組み(writing-mode:vertical-rl)は横書き前提のスクリーンリーダー環境で読み上げ順が視覚順と一致しない場合がある。短いラベル(日付等)に留め、重要な情報を縦組みだけに置かない
focusリングをガラス面に置く場合、地(写真)ではなくガラスより手前の色で指定する(03と同じ注意)

スマホへの落とし方

カード幅を固定pxで作ると、SPで画面いっぱいになりガラスの『浮いている感』が消える。max-widthで頭打ちにする
縦組みタグは幅の狭いカードでは本文パネルと近づきすぎる。SPでは横並びの通常タグに切り替えるか非表示にする
grain(feTurbulence)の背景画像はタイルサイズ固定のため、カード幅が変わっても粒の大きさは変わらない(04/08と同じ理由)

ブラウザ対応

backdrop-filterのブラウザ対応は03_glassmorphismと同一(Chrome 76+/Firefox 103+/Safari 9+、Safariは-webkit-接頭辞が必要な期間が長かった)。※2026-07-22時点の一般的な理解に基づく記述で、一次情報での再確認は未実施
mix-blend-modeは主要ブラウザで長く安定しており、backdrop-filterほど新しい機能ではない

関連するパーツ

コードを見る

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>グラスモーフィズム・プロジェクトカード デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
  background:#e5e1dc;padding:28px;min-height:340px;
  display:flex;align-items:center;justify-content:center}

/* 単色ブロブ地(03_glassmorphism)と違い、写真を想定したグラデーション地。
   グラデーションは場所によって明度が違うため、パネルの実効色も内部で一定にならない。
   一番明るい下端(#6b6058)で実測して、その値を基準にガラスの不透明度を決めた */
.card{
  position:relative;width:340px;height:300px;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#2b2f3a 0%,#463f3d 55%,#6b6058 100%);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.glass{
  position:absolute;left:16px;right:16px;bottom:16px;
  /* 実測: 地の最も明るい下端 #6b6058 に rgba(20,18,17,.55) を重ねると
     実効背景は約 #3b3531。白文字は12.2:1、本文の#e8e3dfは9.6:1。
     地の最も暗い上端 #2b2f3a では約 #1e1f23 になりさらに余裕がある。
     つまり「ガラスは地の一番明るい場所」で測れば下端が最も厳しい条件になる */
  background:rgba(20,18,17,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:16px;
  padding:22px 20px 18px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(20,18,17,.88)}
}
/* 03のパネルと重ねるとガラス同士が濁るため、写真部分(上寄り)に離して置く。
   カードの外へ飛び出させる案は demo iframe(340px高)の枠外に切れて消えたため、
   card 内(overflow:hidden の内側)に収めた */
.vtag{
  position:absolute;top:16px;right:16px;writing-mode:vertical-rl;
  font-size:11px;letter-spacing:.32em;color:#f2ece9;font-weight:600;
  background:rgba(20,18,17,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:8px 6px;
}
.glass h3{color:#fff;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:21px;letter-spacing:.02em;line-height:1.4;margin-bottom:8px}
.glass p{color:#e8e3df;font-size:12.5px;line-height:1.85;max-width:22em}
.meta{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tag{font-size:11px;color:#f2ece9;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;padding:3px 10px}
.tag.accent{background:#a81d22;border-color:#a81d22;color:#fff;font-weight:700}
</style></head><body>
<div class="card">
  <div class="grain"></div>
  <span class="vtag">2026 春</span>
  <div class="glass">
    <h3>掬い上げる、灯り</h3>
    <p>照明ブランドのリブランディング。実店舗と通販、両方の売り場で使えるビジュアル言語を再設計した。</p>
    <div class="meta">
      <span class="tag">ブランディング</span>
      <span class="tag">写真</span>
      <span class="tag accent">Case Study</span>
    </div>
  </div>
</div>
</body></html>

出典・参考: 自作の再現実装。03_glassmorphism(単色ブロブ地)に対して、実写真グラデーション地でのガラス運用パターンを『カード』部位で追加