ブランドサイトで差をつける！CSSガラスモーフィズムの実装テクニック

おはようございます！株式会社ファストコーディングの働くおかんです。

最近、上の子がiPadで天気アプリを見ていたんですよね。画面をのぞき込んだら、背景の空の写真の上にすりガラスみたいなカードがふわっと浮かんでいて、なんだかすごくおしゃれだったんです。「きれいだね〜」なんて子どもと一緒に見ていたんですが、ふと「これ、Webサイトでもやりたいな」って思ったんですよね。

この「すりガラスっぽい半透明の演出」、ガラスモーフィズム（Glassmorphism）っていうデザイン手法なんです。AppleのiOSやmacOS、MicrosoftのFluent Designでも使われていて、最近はWebサイトでもよく見かけるようになりました。

少し前に、ブランドサイトのリニューアル案件でこのガラスモーフィズムを提案したところ、クライアントから「高級感があっていいですね」と好評でした。今回はその実装方法を紹介します。

ガラスモーフィズムのメリット

ガラスモーフィズムの特徴は、背景がうっすら透けて見えることです。これには3つのメリットがあります。

• 奥行きが出る ─ 要素が「浮いている」ように見えて、画面に立体感が生まれます
• 高級感が出る ─ すりガラスの質感は、リアルな世界でも「上品」なイメージがあります
• 背景を活かせる ─ 写真やグラデーションの上に載せても、背景の雰囲気が伝わります

特にブランドサイトやコーポレートサイトで使うと、「ちゃんとデザインにお金をかけている感」が出るんですよね。ディレクターさんがクライアントに提案するときにも、ビジュアルのインパクトがあるので説明しやすいかなと思います。

基本のCSS ─ backdrop-filterを使う

ガラスモーフィズムの核になるのは、CSSのbackdrop-filterプロパティです。これは「要素の背景にあるもの」にぼかしや色調整をかけるプロパティです。

まずシンプルな例から見てみます。

/* ガラスモーフィズムの基本 */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

これだけで、すりガラスっぽいカードが作れます。ポイントは以下のとおりです。

• background: rgba(255, 255, 255, 0.15) ─ 白の半透明背景。透明度は0.1〜0.25くらいが適切です
• backdrop-filter: blur(12px) ─ 背景をぼかす。これが「すりガラス感」の正体です
• border: 1px solid rgba(255, 255, 255, 0.3) ─ うっすら白い枠線で、カードの境界をはっきりさせます
• box-shadow ─ ふんわりした影で浮遊感をプラス

-webkit-backdrop-filterはSafari用のプレフィックスです。これを忘れるとiPhoneで効かないので、必ず付けてください。

実践例① ─ ヒーローセクションのカード

ブランドサイトで一番使いやすいのは、ヒーロー画像の上にガラスカードを載せるパターンです。

<!-- HTML -->
<section class="hero">
  <div class="hero-content glass-card">
    <h1>Beauty in Every Detail</h1>
    <p>私たちは、細部にまでこだわった
    デザインをお届けします。</p>
    <a href="/contact" class="cta-button">
      お問い合わせ
    </a>
  </div>
</section>

/* CSS */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('/images/hero-bg.jpg') center / cover;
}

.hero-content {
  max-width: 560px;
  text-align: center;
  color: #fff;
}

.hero-content h1 {
  font-size: 2rem;
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-content p {
  margin-bottom: 24px;
  line-height: 1.8;
}

.cta-button {
  display: inline-block;
  padding: 12px 32px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: rgba(255, 255, 255, 0.4);
}

背景写真がうっすら透けて見えるので、写真の雰囲気を活かしつつ、テキストもちゃんと読めます。CTAボタンにもガラス効果をかけると統一感が出ます。

実践例② ─ ナビゲーションバー

スクロールしたときにナビゲーションがガラスっぽくなる演出も、最近よく見かけるようになりました。これもbackdrop-filterで実装できます。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 24px;
  z-index: 100;
  transition: background 0.3s ease;
}

/* スクロール後にガラス効果を付ける */
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

// スクロールでクラスを切り替え
window.addEventListener('scroll', function() {
  var navbar = document.querySelector('.navbar');
  if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

スクロールすると、透明だったナビゲーションがふわっとガラスっぽくなります。ページの中身が透けて見えるので、「固定ヘッダーが画面を圧迫する」という問題も軽減できます。

実践例③ ─ カードグリッド

サービス紹介や特徴を並べるカードにも使えます。グラデーション背景との組み合わせがきれいなんですよね。

<section class="features">
  <div class="feature-grid">
    <div class="feature-card glass-card">
      <h3>デザイン</h3>
      <p>ブランドの世界観を大切にした
      デザインを作ります。</p>
    </div>
    <div class="feature-card glass-card">
      <h3>コーディング</h3>
      <p>高品質なフロントエンド実装を
      お届けします。</p>
    </div>
    <div class="feature-card glass-card">
      <h3>パフォーマンス</h3>
      <p>表示速度にこだわった
      軽量なサイトを構築します。</p>
    </div>
  </div>
</section>

.features {
  padding: 80px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.feature-card {
  text-align: center;
  color: #fff;
}

.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-4px);
  transition: all 0.3s ease;
}

紫〜青のグラデーション背景に、白い半透明のカードが並ぶと、一気に「今っぽい」デザインになります。ホバーで少し浮き上がるアニメーションを付けると、操作のフィードバックにもなります。

ダークモードにも対応させる

夜、子どもが寝た後にスマホでサイトを見ることって多いですよね。ダークモードのときは白ベースだとまぶしいので、色を反転させます。

/* ライトモード（デフォルト） */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  .glass-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
  }
}

ダークモードではrgba(0, 0, 0, 0.3)のように黒ベースの半透明にするだけです。ぼかし具合はそのままで問題ありません。

気をつけたいポイント

ガラスモーフィズムはおしゃれなんですが、いくつか注意点があります。実際のプロジェクトでハマったところも含めてまとめました。

テキストの可読性

背景が透けるということは、背景の色や柄によってテキストが読みにくくなることがあります。私も最初に実装したとき、写真の明るい部分で白文字が見えなくなって困りました。対策はtext-shadowを少しかけるか、背景の透明度を調整して、コントラスト比4.5:1以上を確保することです。WCAGの基準なので、ここは意識しておきたいところです。

backdrop-filterの対応ブラウザ

Can I use（caniuse.com）によると、backdrop-filterのブラウザ対応率は約95%以上です（2025年時点）。Chrome、Safari、Edge、Firefoxの最新版はすべて対応しています。ただ、古いブラウザ向けにフォールバックを用意しておくと安心です。

/* フォールバック */
@supports not (backdrop-filter: blur(12px)) {
  .glass-card {
    background: rgba(30, 30, 60, 0.85);
  }
}

@supportsを使って、backdrop-filterが使えないブラウザでは少し濃い背景にします。これなら透けなくても、デザインが崩れることはありません。

パフォーマンスに注意

backdrop-filterはGPUを使うので、要素が多すぎるとスマホで描画が重くなることがあります。ガラス効果は「ここぞ」というポイントに絞って使うのがおすすめです。ページ全体にガラスカードが20枚もあると、さすがにカクつきます。

実際のプロジェクトでの効果

冒頭で触れたブランドサイトのリニューアルでは、ヒーローセクションとナビゲーションにガラスモーフィズムを使いました。

リリース後に得られた数値がこちらです。

もちろん、ガラスモーフィズムだけの効果ではなくて、コピーやレイアウトの見直しも同時にやっています。ただ、クライアントからは「見た目の第一印象がガラッと変わった」「ブランドの世界観が伝わるようになった」という声をいただきました。

※ガラスモーフィズムはあくまでビジュアルの演出です。コンテンツの質や導線設計がしっかりしていないと、いくら見た目をおしゃれにしても効果は出にくいと思います。

まとめ

今回は、CSSのガラスモーフィズムについて紹介しました。backdrop-filter: blur()と半透明の背景を組み合わせるだけで、サイトの印象がぐっと変わります。

押さえておきたいポイントはこの3つです。

• backdrop-filter: blur()とrgbaの半透明背景で、すりガラス効果が作れる
• ヒーロー、ナビゲーション、カードグリッドなど、使いどころを絞ると効果的
• テキストの読みやすさとパフォーマンスには気をつける

実際のプロジェクトでは、ファーストビューの直帰率が13ポイント改善しました。「ちょっとおしゃれにしたいけど、動画を入れるほどの予算はない」というときに、ガラスモーフィズムはちょうどいい選択肢だと思います。

株式会社ファストコーディングでは、こうしたCSSの最新手法を使ったフロントエンド実装をお手伝いしています。「ブランドサイトの印象を変えたい」「提案に使えるデザイン手法を知りたい」という方は、ぜひお問い合わせフォームからご相談ください。