デザインの最新トレンドと実践テクニックまとめ
注目キーワード

【コピペ可!】2025年秋Appleが採用!リキッドグラスのCSSソースコード

【コピペ可!】2025年秋Appleが採用!リキッドグラスのCSSソースコード
  1. HOME
  2. Web制作
  3. 【コピペ可!】2025年秋Appleが採用!リキッドグラスのCSSソースコード
目次

はじめに

2025年6月のWWDC25で発表されたAppleの新デザイン言語「Liquid Glass（リキッドグラス）」は、全Apple製OSで統一採用される革新的なUIデザインです。

本記事では、この美しいリキッドグラスエフェクトをWeb上で再現するためのHTMLとCSSコードを、コピペですぐに使える形で提供します。

Liquid Glassとは？Appleの新デザイン革命

Apple Vision Proから始まった新時代

リキッドグラスは、2年前にVision ProのvisionOSで初めて導入されたガラスのような光沢のある半透明なビジュアルスタイルで、iPhoneにとって12年ぶりとなる大規模なインターフェースのオーバーホールとなります。

2025年秋の全OS統一採用

2025年秋にリリースされるiOS 26、iPadOS 26、macOS Tahoe 26、tvOS 26、watchOS 26で導入され、AppleがデザインしているOS全体で統一したビジュアルテーマとして採用されています。

リキッドグラスの特徴とデザイン要素

主な視覚的特徴

  1. 半透明性: 背景が透けて見える美しい透明感
  2. ガラス質感: 光学シミュレーションによる本物のガラスのような質感
  3. 流動性: コンテンツに応じて動的に変化するレスポンシブな表現
  4. 深度感: レイヤーによる奥行きのある立体表現

従来デザインからの進化

2013年、当時のデザイン責任者だったジョニー・アイブは、iOS 7でiPhoneのOSを一新し、スキューモーフィック（現実の質感を模倣した）デザインから、丸みを帯びたシンプルなデザインに移行しました。Liquid Glassは、このフラットデザインの次の進化形として位置づけられています。

【コピペ可能】リキッドグラスCSS実装コード

完成画面（画面いっぱいになります）

Liquid Glass Card

Appleの新デザイン「Liquid Glass」を
再現したカードコンポーネントです。

基本のHTML構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Glass Effect</title>
    <link rel="stylesheet" href="style.css"> <!-- 以下のCSSファイル読み込み -->
</head>
<body>
    <div class="background">
        <div class="liquid-glass-container">
            <div class="liquid-glass-card">
                <h1>Liquid Glass Card</h1>
                <p>Appleの新デザイン「Liquid Glass」を<br>再現したカードコンポーネントです。</p>
                <button class="liquid-glass-button">詳しく見る</button>
            </div>
        </div>
    </div>
</body>
</html>

メインのCSS（style.css）

/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 背景設定 */
.background {
    min-height: 100vh;
    background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 25%, 
        #f093fb 50%, 
        #f5576c 75%, 
        #4facfe 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 背景グラデーションアニメーション */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* リキッドグラスコンテナ */
.liquid-glass-container {
    perspective: 1000px;
}

/* メインのリキッドグラスカード */
.liquid-glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 40px;
    max-width: 400px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

/* ホバーエフェクト */
.liquid-glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.liquid-glass-card:hover::before {
    opacity: 1;
}

.liquid-glass-card:hover {
    transform: translateY(-8px) rotateX(5deg);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* タイトルスタイル */
.liquid-glass-card h1 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 16px;
    background: linear-gradient(45deg, #fff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* テキストスタイル */
.liquid-glass-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
    opacity: 0.9;
}

/* リキッドグラスボタン */
.liquid-glass-button {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 12px 24px;
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.liquid-glass-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.5s ease;
}

.liquid-glass-button:hover::before {
    left: 100%;
}

.liquid-glass-button:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.liquid-glass-button:active {
    transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .liquid-glass-card {
        padding: 24px;
        margin: 20px;
        max-width: calc(100vw - 40px);
    }
    
    .liquid-glass-card h1 {
        font-size: 1.5rem;
    }
    
    .liquid-glass-card p {
        font-size: 0.9rem;
    }
}

/* Safari対応の追加設定 */
@supports (-webkit-backdrop-filter: blur(20px)) {
    .liquid-glass-card {
        -webkit-backdrop-filter: blur(20px) saturate(1.8);
    }
}

拡張版：メニューボタン追加

　　　　　 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Glass Effect</title>
    <link rel="stylesheet" href="style.css"> <!-- 以下のCSSファイル読み込み -->
</head>
<body>
    <div class="background">

        <!-- 以下のHTMLを追記 ↓ -->
        <div class="liquid-glass-navigation">
            <nav class="liquid-nav">
                <a href="#" class="nav-item">ホーム</a>
                <a href="#" class="nav-item">サービス</a>
                <a href="#" class="nav-item">会社情報</a>
                <a href="#" class="nav-item">お問い合わせ</a>
            </nav>
        </div>
        <!-- ここまで ↑ -->
         
        <div class="liquid-glass-container">
            <div class="liquid-glass-card">
                <h1>Liquid Glass Card</h1>
                <p>Appleの新デザイン「Liquid Glass」を<br>再現したカードコンポーネントです。</p>
                <button class="liquid-glass-button">詳しく見る</button>
            </div>
        </div>
    </div>
</body>
</html>


/* 以下のメニューボタン用CSSをstyle.cssに追記する */
.liquid-glass-navigation {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.liquid-nav {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 8px;
    display: flex;
    gap: 4px;
    width: max-content;
}

.nav-item {
    padding: 8px 16px;
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-item:hover::before {
    opacity: 1;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .nav-item {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

リキッドグラスエフェクトの実装ポイント

重要なCSSプロパティ解説

  1. backdrop-filter: ガラス質感の核となるプロパティ
    • blur(): 背景のぼかし効果
    • saturate(): 色の彩度を高めて鮮やかさを演出
  2. rgba(): 透明度を持つ色指定で半透明効果を実現
  3. border-radius: 角丸で現代的な印象を作成
  4. transition: なめらかなアニメーション効果

ブラウザ対応について

  • Chrome, Safari: フル対応
  • Firefox: 部分対応（backdrop-filterのサポートが限定的）
  • Edge: フル対応

AppleのLiquid GlassをCSSなどで模倣してWebのUIを実装するのは非常に難しく、デザインツールやブラウザの技術レベルでは実現できない部分もありますが、上記のコードで可能な限り忠実に再現しています。

パフォーマンス最適化のコツ

GPU加速の活用

.liquid-glass-card {
    transform: translateZ(0); /* GPU加速を有効化 */
    will-change: transform; /* ブラウザに変更予定を通知 */
}

アニメーションの最適化

@keyframes optimizedHover {
    0% { transform: translateY(0) translateZ(0); }
    100% { transform: translateY(-8px) translateZ(0); }
}

実際の活用事例とカスタマイズ

カラーバリエーション

/* ダークテーマ版 */
.liquid-glass-card.dark {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

/* カラフル版 */
.liquid-glass-card.colorful {
    background: rgba(147, 51, 234, 0.2);
    border: 1px solid rgba(147, 51, 234, 0.3);
}

モーションの追加

@keyframes liquidFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

.liquid-glass-card.floating {
    animation: liquidFloat 6s ease-in-out infinite;
}

アクセシビリティ対応

視覚的配慮

/* 透明度を下げる設定対応 */
@media (prefers-reduced-transparency: reduce) {
    .liquid-glass-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: none;
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .liquid-glass-card {
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
}

SEO対策とパフォーマンス

Core Web Vitalsへの配慮

  1. LCP (Largest Contentful Paint): 画像よりもCSSで表現することで高速化
  2. FID (First Input Delay): 軽量なCSS実装でスムーズな操作性
  3. CLS (Cumulative Layout Shift): 固定サイズでレイアウトシフトを防止

メタタグ最適化

<meta name="description" content="2025年秋Appleが採用したLiquid Glassデザインを完全再現。コピペで使えるHTML/CSSコード付き。">
<meta name="keywords" content="Liquid Glass, Apple, CSS, HTML, リキッドグラス, UI デザイン, 2025">
<meta property="og:title" content="【コピペ可】Apple Liquid Glass完全再現コード">
<meta property="og:description" content="Appleの新デザインLiquid Glassを忠実に再現したソースコードを無料公開">

まとめ

2025年秋にリリースされるiOS 26に採用される新しいUI「Liquid Glass」は、ガラスの光学的特性と流動性を組み合わせ、コンテンツやコンテキストに応じて変化する美しくて優雅なデザインです。

本記事で提供したコードを使用することで、Webサイトにも同様の美しいエフェクトを実装できます。ただし、リキッドグラスデザインが好みでない場合や、読みやすさに問題がある場合でも、透明度を調整する方法も用意されているため、ユーザビリティを考慮した実装を心がけましょう。

今後のWebデザインのトレンドとして、Liquid Glassは重要な位置を占めることが予想されます。早めにマスターして、競合との差別化を図りましょう。

売れるデザイン【実績多数】Nextageへのお問い合わせはこちら

CTA-IMAGE 実際に売上を上げているデザイン、お見せします。
企業の集客アップから芸能・音楽・アニメ業界での知名度向上まで、結果にこだわったWeb制作・デザイン制作を提供。「きれい」だけでなく「売れる」デザインを体験してください。
お問い合わせはこちら

当サイトはAdobeパートナーサイトです

【キャンペーン】
以下バナーから、Creative Cloudコンプリートプラン購入で、Adobe Stock30日間無料体験の特典を追加可能。

Web制作カテゴリの最新記事