【2026年最新】リキッドグラスとは？触覚的UIの波に乗るためにWebデザイナーが今知るべきこと
「リキッドグラスって最近よく聞くけど、なんのこと？」「Webデザインにどう関係あるの？」——そう思っている方、安心してください。この記事を読めばスッキリわかります。
2025年6月、Apple（アップル）が 「Liquid Glass（リキッドグラス）」 という新しいデザインを発表して、デザイン業界が大きくざわつきました。iPhoneやMacの画面デザインがガラリと変わったので、「これ何？」と感じた方も多いはずです。
そして2026年の今、このリキッドグラスの考え方が Webサイトのデザインにもどんどん広がっています。
この記事では「リキッドグラスってそもそも何？」という基本から、Webサイトに取り入れる方法、気をつけるべきポイントまで、専門用語をかみ砕きながら やさしく解説していきます。
💡 実際に動くデモページを用意しました！ この記事で解説しているリキッドグラスの表現を、ブラウザ上で体験できます。まずは触ってみたい方は リキッドグラス デモページ をご覧ください。
リキッドグラス（Liquid Glass）ってそもそも何？
ひとことで言うと
リキッドグラスは、Appleが作った「液体みたいなガラス」をイメージした画面デザインのスタイル です。
2025年6月9日に開催されたAppleの年次イベント「WWDC（世界開発者会議）2025」で発表されました。iPhone（iOS 26）、iPad、Mac、Apple Watchなど、Appleのすべての製品に採用されています。
具体的にどんな見た目？
スマホやPCの画面上にある ボタンやメニューが、まるで本物のガラスのように見える デザインです。
ただの「すりガラスっぽいデザイン」ではなく、ユーザーが画面をスクロールしたり操作したりすると、光の反射がリアルタイムで動く のが最大の特徴です。まるで手の中にガラスの玉を持っていて、傾けると光がキラキラ動くような感覚——これがリキッドグラスの世界観です。
どこに使われている？
iPhoneの画面上のほぼすべてに適用されています。具体的には、画面の上や下にあるナビゲーションバー、タブ、通知、ウィジェット（天気やカレンダーなどの小さな表示エリア）、アプリのアイコンなどです。
なぜ話題なの？
Appleがデザインをここまで大きく変えたのは、2013年以来、約12年ぶり だからです。2013年にiOS 7で「フラットデザイン」（シンプルで平面的なデザイン）に切り替えて以来の大変革ということで、世界中のデザイナーが注目しています。
デザインの歴史を知ると、もっとわかる
リキッドグラスがなぜ生まれたのか、画面デザインの歴史をたどるとよくわかります。難しそうに見えますが、流れはシンプルです。
第1世代：スキューモーフィズム（〜2012年）
初期のスマホやPCでは、現実のモノにそっくりなデザイン が主流でした。
たとえば、メモアプリが本物の黄色いメモ帳のように見えたり、カレンダーアプリが革製の手帳のように見えたりしていました。「スキューモーフィズム」という難しい名前ですが、要は 「リアルに見せる」デザイン のことです。
初めてスマホを使う人にも「あ、これはメモだな」と直感的にわかるメリットがありましたが、デザインが重く、スマホ・タブレット・PCで統一しにくいという弱点がありました。
第2世代：フラットデザイン（2013年〜）
2013年、Appleが「もっとシンプルにしよう」とデザインを一新しました。
立体感や影をなくし、のっぺりとしたシンプルなアイコンとすっきりした配色 で構成されたデザインです。軽くて、どの画面サイズでもきれいに表示できるため、スマホ時代にぴったりでした。
第3世代：グラスモーフィズム（2020年〜）
「シンプルすぎて、ちょっと味気ないよね」という声が増えてきた頃、登場したのが グラスモーフィズム（Glassmorphism） です。
これは 「すりガラス越しに背景が透けて見える」ようなデザイン です。背景がほんのりぼやけて見え、ガラスを重ねたような奥行き感が生まれます。フラットデザインのシンプルさを残しつつ、少しだけ立体感を加えたスタイルとして人気になりました。
第4世代：リキッドグラス（2025年〜）
そして今のリキッドグラスは、このグラスモーフィズムの 「進化版」 です。
静止した「すりガラス」から、光が動いて、触れるような感覚のある「液体ガラス」 へ進化しました。昔の「リアルに見せる」デザインの良さと、デジタルならではの流動的な美しさを融合させた、新しいスタイルです。
ポイント：デザインの歴史は「リアル → シンプル → ちょいリアル → リアル＋デジタル」という振り子のように動いています。リキッドグラスはその最新の着地点です。
「グラスモーフィズム」と「リキッドグラス」って何が違うの？
見た目が似ているので混同しがちですが、大きく3つの違いがあります。
違い①：動くかどうか
グラスモーフィズム は、背景がぼやけて見える 静止した ガラスの表現です。写真にフィルターをかけたような、動かないエフェクトをイメージしてください。
リキッドグラス は、ユーザーの操作に合わせて 光がリアルタイムに動く 表現です。スクロールすると光沢の位置が変わったり、タップすると輝きが反応したりします。
違い②：作る難しさ
グラスモーフィズムは、CSSの backdrop-filter（バックドロップフィルター）というプロパティ（設定項目）を使えば、比較的かんたんに再現できます。
リキッドグラスは、それに加えて SVGフィルター （画像処理の仕組み）やアニメーション（動きの設定）が必要になるので、技術的には一段階上のレベルになります。
違い③：使い方の考え方
グラスモーフィズムは「見た目がおしゃれだから、いろんな場所に使おう！」というスタイルでした。
リキッドグラスは 「ここぞという場所に、意味を持って使う」 という考え方です。Appleも全部の要素に均等に使っているわけではなく、重要なナビゲーションやボタンに重点的に使っています。
2026年のキーワード「触覚的UI」って何？
「触りたくなるデザイン」のこと
触覚的UIとは、画面を見たときに 「思わず触りたくなる」ような質感を感じるデザイン のことです。
たとえば、ボタンが本当に押し込めるように見える、カードが立体的に重なっているように感じる、アイコンに重みや厚みがある——こうした「触感を感じさせるUI」全体を指します。
なぜ今注目されているの？
ここ数年、フラットデザイン（平面的でシンプルなデザイン）が長く続きました。その反動として、特に 若い世代（Gen Z） を中心に「もっと質感のあるデザインがいい！」という声が大きくなっています。
この流れは 「Tactile Maximalism（タクタイル・マキシマリズム）」 と呼ばれ、2026年のUIデザインで最も注目されているトレンドの一つです。
AppleもGoogleも同じ方向に
Appleがリキッドグラスで「触れるような質感」を追求する一方、Googleも最新のデザインシステム 「Material 3 Expressive」 で、動きや触覚的な反応を重視しています。
スマホOSの二大巨頭がそろって同じ方向に進んでいるということは、「触覚的UI」が一時的な流行ではなく、今後のスタンダードになる 可能性が高いことを示しています。
Webサイトでも「触覚」が取り入れられ始めている
技術面では、Web Haptics（ウェブ ハプティクス） というライブラリ（プログラムの部品集のようなもの）が2026年に急速に普及しています。
これは、スマホでWebサイトを見ているときに、ボタンをタップすると スマホが微かに振動する という体験を実現するものです。React、Vue、Svelteなどの主要なフレームワーク（Web開発の土台となる仕組み）に対応しています。
⚠ 注意：この振動機能は、AndroidのChromeブラウザでは動作しますが、iPhoneのSafari/Chromeでは対応していません。現時点ではAndroidユーザー向けの機能です。
CSSでリキッドグラスを再現してみよう
「実際にどうやってWebサイトに取り入れるの？」という方に向けて、具体的なCSSコードを紹介します。コピペでそのまま使えます。
基本のガラスカード
まずは最もシンプルなリキッドグラス風のカードです。
.glass-card {
/* 半透明の白い背景 */
background: rgba(255, 255, 255, 0.15);
/* ★ これがリキッドグラスの核！背景をぼかす */
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
/* 角を丸くする */
border-radius: 20px;
/* 薄い白い枠線でガラスの輪郭を表現 */
border: 1px solid rgba(255, 255, 255, 0.3);
/* 影をつけて浮いているように見せる + 内側の光 */
box-shadow:
0 8px 32px rgba(31, 38, 135, 0.2),
inset 0 4px 20px rgba(255, 255, 255, 0.3);
padding: 2rem;
}コードの中身を一つずつ説明します。
backdrop-filter: blur(20px)：このカードの「後ろ側」にある背景をぼかします。これが「すりガラス越しに見える」効果を生む、一番大事なプロパティですsaturate(180%)：ぼかした背景の色が薄くなりすぎないように、彩度（色の鮮やかさ）を上げます-webkit-backdrop-filter：Safari（Appleのブラウザ）でも正しく動くようにするための記述です。常にセットで書くのがおすすめですborder: 1px solid rgba(255,255,255,0.3)：うっすらと白い枠線を入れて、ガラスの端っこを表現しますinset box-shadow：カードの 内側 に光のグロー（ぼんやりした光）を入れます。これで「ガラスの厚み」が出て、立体感が生まれます
光沢感をプラスする
もっとリキッドグラスらしい「光のツヤ」を出したい場合は、以下のコードを追加します。これは 疑似要素（ぎじようそ） という仕組みで、カードの上半分にグラデーション（色の変化）を重ねる手法です。
.glass-card {
position: relative; /* 疑似要素の基準点にする */
}
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0) 100%
);
border-radius: 20px 20px 0 0;
pointer-events: none;
}マウスを乗せたときに変化させる
リキッドグラスの「動く」特徴をWebで再現するには、マウスを乗せたとき（ホバー時）にデザインを変化させる のが効果的です。
.glass-card {
transition: all 0.3s ease; /* 変化をなめらかにする */
}
.glass-card:hover {
backdrop-filter: blur(25px) saturate(200%);
box-shadow:
0 12px 40px rgba(31, 38, 135, 0.3),
inset 0 6px 24px rgba(255, 255, 255, 0.4);
transform: translateY(-2px); /* ほんの少し上に浮かせる */
}マウスを乗せると、ぼかしが少し強くなり、影が深くなり、カード全体が2pxだけ上に浮く——たったこれだけで、「触れたら反応した」ような体験になります。
CSSを書かなくても大丈夫！便利ツール「Aether CSS」
「CSSを書くのはまだちょっと……」という方には、Aether CSS というオンラインツールがおすすめです。
画面上でスライダーを動かすだけで、リキッドグラス・グラスモーフィズム・ニューモーフィズムの3種類のデザインを作れます。プレビューを見ながら調整できて、できあがったCSSコードをそのままコピーして使えます。
実際に動くデモを見てみよう
ここまで紹介したCSS技術（backdrop-filter、スペキュラハイライト、ホバーアニメーション、マウス追従の光）を使って、リキッドグラスで構成されたサンプルホームページ を作成しました。
- ナビゲーション、カードUI、料金表、CTAなど、実際のWebサイトでよく使うコンポーネントにリキッドグラスを適用しています
- マウスを動かすと光が追従する「動的なガラス」の表現も体験できます
デモページのCSSは HTML（PHP）ファイル1つに完結 しているので、WordPressの子テーマにそのまま組み込めます。「こんなデザインが作れるんだ」というイメージをつかむ参考にしてみてください。
ブラウザの対応状況——ちゃんと動く？
リキッドグラスの核となる backdrop-filter は、2026年現在、主要なブラウザのほとんどで使えます。
- Chrome / Edge：問題なく動きます
- Safari：問題なく動きます（
-webkit-をつけて書くのが安全です） - Firefox：バージョン102以降（2022年6月〜）で標準対応しています
- 全体のサポート率：約92%（2026年時点）
つまり、ほとんどのユーザーの環境で表示される ので、安心して使えます。
ポイント：ただし念のため、対応していないブラウザ向けに「エフェクトなしでも見た目が崩れない」ようにデザインしておくのがベストです。これを「フォールバック」と呼びます。
知っておきたい注意点——見た目だけじゃダメ
リキッドグラスは美しいデザインですが、そのまま使うと問題になるケースがあります。実際にAppleもユーザーから多くの不満を受け、対応に追われました。
注意点①：文字が読みにくくなる
これが最大の問題です。背景が半透明で光が反射するため、文字と背景の境界があいまいになり、文字が読みづらくなる ことがあります。
特に屋外の明るい場所や、目が疲れているとき、また視力が低い方にとっては深刻な問題です。
Appleも、iOS 26リリース後に「読みにくい」という声が殺到し、iOS 26.1で透明度を調整できるオプション（ClearまたはTinted）を追加しました。さらにiOS 26.4（2026年3月）ではカスタマイズオプションが追加され、2026年4月には古いiPhone向けにもパッチが提供されるなど、今も改善が続いています。
注意点②：動作が重くなることがある
backdrop-filter（背景ぼかし）は、端末の GPU（画像処理を担当するパーツ） にそれなりの負荷がかかります。新しいスマホやPCなら問題ありませんが、古い端末では画面の動きが遅くなったり、バッテリーの減りが早くなったりすることがあります。
実際にWebサイトに取り入れるときの4つの対策
- 使う場所を絞る：サイト全体ではなく、目立たせたい場所（ヒーローセクション、ナビゲーション、ボタンなど）にだけ使いましょう
- 文字の読みやすさを最優先にする：テキストの背景は十分に不透明にして、コントラスト比（文字と背景の明るさの差）を4.5:1以上 に保ちましょう。これはWebアクセシビリティの国際基準（WCAG）で定められた数値です
- 「透明度を下げたい」ユーザーに配慮する：以下のCSSを追加すると、端末側で「透明度を下げる」設定をしているユーザーに対して、エフェクトを控えめにできます
@media (prefers-reduced-transparency: reduce) {
.glass-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: none;
}
}- 対応していないブラウザでも崩れないようにする：古いブラウザでは
backdrop-filterが効かない可能性があります。その場合でもデザインが壊れないよう、背景色だけで成立するスタイルをベースに作っておきましょう
実際のWebサイトにどう活かす？実践アドバイス
最後に、リキッドグラスや触覚的UIをWebサイトに取り入れるときの、すぐに使えるアドバイスをまとめます。
「全部リキッドグラスにする」はNG
Appleですら「使いすぎ」と批判されました。インパクトを出したい一部分だけ に使うのがコツです。ヒーローセクション（ページ最上部の大きなエリア）のオーバーレイ（画像の上に重ねる半透明レイヤー）や、カード型のUIに使うと効果的です。
小さな「動き」を加えるだけで印象は大きく変わる
リキッドグラスのような大がかりなエフェクトでなくても、マイクロインタラクション（小さな動き） を加えるだけで「触りたくなるUI」に近づきます。
たとえば、ボタンにマウスを乗せたとき少しだけバウンスさせる、カードをクリックしたとき軽く沈み込ませる、トグルスイッチ（ON/OFFの切り替え）に押し込む感覚のアニメーションをつける——こうした小さなディテールが、サイト全体の印象を大きく変えます。
ダークモード（暗い配色）でもテストする
リキッドグラスは、明るい背景と暗い背景で見え方がまったく違います。ダークモードに切り替えたときにも文字が読みやすいか、デザインが崩れていないか、必ず両方でチェックしてください。
まずは小さく試す
いきなり既存のサイト全体に適用するのではなく、新しいランディングページやキャンペーンページ で試してみるのがおすすめです。ユーザーの反応を見てから、少しずつ広げていくのが安全なやり方です。
まとめ
この記事の要点を整理します。
- リキッドグラス は、AppleがWWDC 2025で発表した新しいデザインのスタイル。「すりガラス」のデザインをさらに進化させて、光がリアルタイムに動く「液体のガラス」のような表現を実現したもの
- 触覚的UI は、2026年に最も注目されているWebデザインのトレンド。「触りたくなる」質感をデジタルで表現する考え方で、Apple・Google両社が推進している
- CSSの
backdrop-filterを使えば、リキッドグラス風の表現をWebサイトに取り入れることができる。Aether CSSなどのツールを使えば、コードを書かなくても作れる - ただし注意点もある。文字の読みやすさ（アクセシビリティ）と動作のパフォーマンスには必ず配慮が必要
リキッドグラスは「とにかく全部に使えばオシャレになる」というものではなく、「どこに、なぜ使うか」を考えて使うデザインツール です。
まずは デモページ で実際の動きを見てから、CSSのコードをコピペして、1つのカードコンポーネントから試してみてください。きっと「おっ、いい感じ！」と思えるはずです。
