---
title: "Webデザイントレンド2026｜注目の10様式とCSS対応状況・取り入れる判断基準"
url: "https://www.issoh.co.jp/column/details/1347/"
published: 2023-09-13
updated: 2026-10-20
categories: ["Webサイト"]
publisher: "株式会社一創"
---

# Webデザイントレンド2026｜注目の10様式とCSS対応状況・取り入れる判断基準

この記事では、2025年に相次いだ2つのOSデザイン刷新――Appleの「Liquid Glass」とGoogleの「Material 3 Expressive」――を起点に、2026年のWebデザイントレンドを整理します。半透明の素材感、弾むような動き、大きく主張する文字と形をWebで扱うときの論点を中心に、注目されている10の様式を挙げたうえで、それぞれをWebで実装するときに使うCSS機能が主要ブラウザでどこまで使えるか（2026年10月時点のBaseline）を示し、アクセシビリティと表示速度の要件を踏まえて「自社サイトに取り入れるべきか」を判断する基準までまとめます。

## まとめ：2026年のWebデザイントレンドの要点

本記事で重点的に扱うのは、半透明のグラスモーフィズム、カードを敷き詰めるBento UI、特大・可変のタイポグラフィ、スクロール連動アニメーション、OS設定に追従するダークモードの5つです。このほか、3D・没入表現、ネオブルータリズム、鮮やかなグラデーション、マイクロインタラクションを取り上げます。

実装面では、カード型レイアウトを支えるコンテナクエリや配色の`color-mix()`は、全主要ブラウザで対応から30か月が経過した段階（Baseline Widely available）に入りました。一方、スクロール連動アニメーションはFirefoxが未対応で、ページをまたぐビュー遷移もFirefoxが未対応です。採用するなら、未対応環境で崩れない書き方が前提になります。

どの様式を選んでも、WCAG 2.2のコントラスト比・ターゲットサイズの適用基準を満たさない場合や、Core Web VitalsのINPが200ミリ秒を超える場合は採用しない――これが判断の軸です。日本では2024年4月から事業者の合理的配慮の提供が義務になり、EUでは2025年6月から欧州アクセシビリティ法が適用されています。

## 2025年に発表された2つのOSデザイン刷新

Webサイトの利用者は、毎日スマートフォンのOSの画面に触れています。2025年は、AppleとGoogleがそろってOSのデザインを大きく刷新した年でした。

### Apple「Liquid Glass」（2025年6月発表）と半透明の素材

Appleは2025年6月9日、新しいソフトウェアデザインを[発表](https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/)しました。中心となるのは「Liquid Glass」と呼ばれる半透明の素材で、背後のコンテンツを映し込みながら、ボタンやナビゲーション、アプリアイコン、ウィジェットを形づくります。iOS 26、iPadOS 26、macOS Tahoe 26、watchOS 26、tvOS 26に共通して適用され、同社は全プラットフォームにまたがる初めてのデザインと位置づけています。スクロールするとタブバーが縮んでコンテンツに場所を譲る挙動も示されました。

グラスモーフィズム（すりガラス風の半透明表現）は、Liquid Glassの素材感をWebのCSS表現と比較する際の参考になります。CSSでの再現方法と、iOSでの対応状況は[Liquid Glassとは？仕組みと対応OS、SwiftUI・CSSでの実装方法【iOS 27の変更点まで】](/tech/details/7296/)で詳しく扱っています。

### Google「Material 3 Expressive」（2025年5月発表）と動き・形の強調

Googleは2025年5月13日、AndroidとWear OS向けのデザイン更新「Material 3 Expressive」を[発表](https://blog.google/products/android/material-3-expressive-android-wearos-launch/)しました。より自然で弾むようなアニメーション、鮮やかな色、新しい形状が特徴です。Googleのデザインチームは、46件の調査と世界18,000人超の参加者による検証を経たと[説明](https://design.google/library/expressive-material-design-google-research)しており、視線計測の調査では重要なUI要素を見つける速さが最大4倍になったとしています。

Webに置き換えると、「動きで操作の結果を伝える」「大きな角丸や変形した図形で要素を目立たせる」という考え方が参考になります。Material 3そのものの変更点と各実装の対応状況は[Material Design 3（Material 3）とは？Expressiveの変更点と各実装の対応状況](/tech/details/6886/)を参照してください。

## 2026年に注目のWebデザイントレンド10選

SERP上位の解説記事やデザインツール各社の予測で繰り返し挙がる様式を、Webサイトの実装に関わるものに絞って10個にまとめました。実装で使う主なCSS機能も併記します。対応状況は次の章で詳しく示します。

| 様式            | 向いている用途     | 主なCSS機能                           |
| ------------- | ----------- | --------------------------------- |
| グラスモーフィズム     | ナビ・カード・モーダル | backdrop-filter                   |
| Bento UI      | 機能紹介・SaaS   | Grid／subgrid／コンテナクエリ              |
| 特大・可変タイポグラフィ  | ヒーロー・ブランド訴求 | clamp()／text-wrap: balance        |
| キネティックタイポグラフィ | キャッチコピー     | スクロール連動アニメーション                    |
| スクロールテリング     | 製品ストーリー・採用  | animation-timeline                |
| ダークモード        | 全般          | prefers-color-scheme／light-dark() |
| 鮮やかなグラデーション   | 背景・ボタン      | oklch()／color-mix()               |
| マイクロインタラクション  | フォーム・ボタン    | @starting-style／ビュー遷移             |
| 3D・没入表現       | 製品紹介・キャンペーン | WebGL／3D変形                        |
| ネオブルータリズム     | 個人・スタートアップ  | 太い境界線・原色（特別な機能は不要）                |

Y2K、ヴェイパーウェイヴ、クレイモーフィズムといったグラフィック寄りの様式の意味と由来は、[デザイントレンド2026｜グラフィック表現の最新動向と採用判断](/column/details/1893/)で整理しています。ここではWebサイトに組み込むときの論点が大きいものを掘り下げます。

### グラスモーフィズム：半透明カードとナビゲーション

背景をぼかした半透明の面を重ね、奥行きを出す表現です。CSSでは`backdrop-filter: blur()`で背後をぼかし、半透明の背景色と組み合わせます。`backdrop-filter`はSafari 18で接頭辞なしに対応し、2024年9月に全主要ブラウザで使える状態になりました。

注意点は文字の読みやすさです。背後の画像や色によってコントラスト比が変わるため、どの背景の上でも4.5:1を割らない不透明度を確保する必要があります。透過を減らす設定の利用者向けに`prefers-reduced-transparency`というメディアクエリもありますが、2026年10月時点で対応しているのはChrome・Edgeだけで、SafariとFirefoxは未対応です。この設定に頼らず、既定の不透明度そのものを読みやすい値にしておくのが確実です。

### Bento UI：大小のカードによる情報整理

大きさの異なるカード（タイル）を非対称に敷き詰め、弁当箱のように情報を区切るレイアウトです。Appleの製品紹介ページなどで仕様を一覧で見せる手法として使われ、SaaSの機能紹介で定番になりました。重要な訴求ほど大きいセルに割り当てると、1画面に多くの要素を並べても視線の優先順位を保てます。

実装はCSS Gridが基本で、カード内の見出しや本文の高さをそろえるには`subgrid`、カードの置き場所の幅に応じて中身を組み替えるにはコンテナクエリを使います。subgridは2026年3月、コンテナクエリは2025年8月にBaseline Widely availableに達しています。ただし、古いブラウザすべてで動く保証ではないため、サイトの対応対象バージョンを確認してください。Gridの書き方は[CSS Gridの使い方｜auto-fitとsubgridの実装とGrid Lanes対応状況](/tech/details/17503/)で解説しています。

### 特大タイポグラフィとキネティックタイポグラフィ

画像の代わりに文字そのものを主役にする流れが続いています。画面幅に合わせて文字サイズを連続的に変える`clamp()`（例：`font-size: clamp(2rem, 6vw, 5rem)`）と、見出しの行末の長さをそろえる`text-wrap: balance`が定番の組み合わせです。`text-wrap: balance`は2024年5月に全主要ブラウザで使えるようになりました。

キネティックタイポグラフィのうち、スクロールに連動するものは次の「スクロールテリング」と同じ仕組みで作れます。ホバーで動かすものは、:hoverとCSSトランジションなどで実装します。動きを付けるのはキャッチコピーの1か所に絞り、本文には付けないのが読みやすさを保つ線です。

### スクロール連動アニメーションとスクロールテリング

スクロール位置に合わせて要素が現れたり、物語のように場面が切り替わったりする表現です。以前はJavaScriptのライブラリが必要でしたが、CSSの`animation-timeline`（スクロール駆動アニメーション）で書けるようになりました。ただし対応はChrome・Edge 115以降とSafari 26以降で、Firefoxは2026年10月時点で未対応です。ブラウザ間の差をなくす取り組み「Interop 2026」の重点分野に選ばれており、今後の改善が見込まれる段階です。

### ダークモードと環境連動の配色

OSの設定に合わせてライト／ダークを切り替えるには、`prefers-color-scheme`で出し分けるほか、`light-dark()`関数を使うと1行で両方の色を指定できます。背景は黒でも濃いグレーでも構いません。文字色との組み合わせでコントラスト比を確認します。たとえば背景#1e1e1eに文字#e6e6e6なら比は約13.4:1で、基準の4.5:1を十分に上回ります。

配色そのものでは、鮮やかなグラデーションが再び増えています。人の目に近い明るさで色を扱える`oklch()`と、2色を混ぜる`color-mix()`は2025年11月にBaseline Widely availableとなり、グラデーションの途中がくすむ問題を避けやすくなりました。

### 3D・没入表現とネオブルータリズム

製品を回転させて見せる3D表示や、スクロールに合わせて空間を進むような没入表現は、WebGLやThree.jsなどのライブラリで作るのが一般的です。表現力は高い一方、読み込むデータ量が増えてスマートフォンでの表示速度を落としやすく、採用するならキャンペーンページなど目的が明確な場面に限るのが現実的です。

対極にあるのが、太い黒の境界線、原色、整えすぎない配置で個性を出すネオブルータリズムです。特別なCSS機能を必要とせず、画像も少なくて済むため軽量に作れます。ただし、装飾をそぎ落とすぶん、ボタンとそうでない要素の区別が付きにくくなりがちで、リンクやボタンの見た目を一貫させる設計が欠かせません。

## トレンドを支えるCSS機能と対応ブラウザ（2026年10月時点）

取り入れるかどうかは、見た目より「利用者のブラウザで動くか」で決まります。ここでは、ブラウザ間の対応状況を示す共通指標「Baseline」で各機能を整理します。

### Baselineの3段階と主要機能の対応状況

[Baseline](https://web.dev/baseline)は、Chrome・Edge・Firefox・Safari（デスクトップとモバイル）のすべてで使えるようになった機能を「Newly available」、そこから30か月が経過した機能を「Widely available」と呼びます。どれか1つでも未対応なら「Limited availability」です。下表は、WebDXコミュニティグループが公開する[web-features](https://github.com/web-platform-dx/web-features)のデータ（3.42.0、2026年10月11日取得）から引いたものです。

| CSS機能                        | Baseline | 達した時期         | 関わる様式        |
| ---------------------------- | -------- | ------------- | ------------ |
| コンテナクエリ（サイズ）                 | Widely   | 2025年8月       | Bento UI     |
| subgrid                      | Widely   | 2026年3月       | Bento UI     |
| :has()                       | Widely   | 2026年6月       | マイクロインタラクション |
| oklch()・color-mix()          | Widely   | 2025年11月      | グラデーション      |
| light-dark()                 | Newly    | 2024年5月       | ダークモード       |
| text-wrap: balance           | Newly    | 2024年5月       | 特大タイポグラフィ    |
| @starting-style              | Newly    | 2024年8月       | マイクロインタラクション |
| backdrop-filter              | Newly    | 2024年9月       | グラスモーフィズム    |
| ビュー遷移（同一ページ内）                | Newly    | 2025年10月      | マイクロインタラクション |
| スクロール駆動アニメーション               | Limited  | Firefox未対応    | スクロールテリング    |
| ビュー遷移（ページ間）                  | Limited  | Firefox未対応    | ページ遷移の演出     |
| アンカー位置指定（基本機能）               | Newly※   | 2026年1月       | ツールチップ・メニュー  |
| prefers-reduced-transparency | Limited  | Chrome・Edgeのみ | グラスモーフィズム    |

※アンカー位置指定は、Firefox 147の対応で基本機能がBaseline Newly availableになったと[web.devが2026年1月に告知](https://web.dev/blog/web-platform-01-2026)しています。web-featuresのデータでは機能全体の判定が一部の構文の対応差で未到達のままのため、使う構文ごとに対応状況を確認してください。

読み方の目安として、Widelyは広く対応が進んでいるものの対象ブラウザの確認が必要な機能、Newlyは古い端末の利用者が多いサイトでは代替表示を用意したい機能、Limitedは「動かなくても困らない飾り」にだけ使う機能です。スクロール駆動アニメーションやビュー遷移、[CSS Anchor Positioningの使い方｜position-area・@position-tryと対応ブラウザ](/tech/details/10692/)で扱うアンカー位置指定は、[Interop 2026](https://web.dev/blog/interop-2026)の重点分野に入っています。ただし、重点分野への選定とBaselineの到達状況は別です。アンカー位置指定の基本機能はNewly availableで、スクロール駆動アニメーションとページ間ビュー遷移はLimitedです。利用する構文と対象ブラウザに応じて代替表示を用意してください。

### 未対応ブラウザと「動きを減らす」設定への備え

Limitedの機能を使うときは、`@supports`で対応ブラウザだけに演出を適用し、さらに`prefers-reduced-motion`で「視差効果を減らす」設定の利用者には動きを止めます。こうしておけば、Firefoxや動きを減らす設定の利用者には静止した完成状態がそのまま表示されます。

```
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

:root { color-scheme: light dark; }
body {
  background: #ffffff;
  color: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #1e1e1e;
    color: #e6e6e6;
  }
}
body {
  background: light-dark(#ffffff, #1e1e1e);
  color: light-dark(#1a1a1a, #e6e6e6);
}
```

後半の`body`の指定は前半の上書きで、`light-dark()`に未対応のブラウザは前半の配色をそのまま使います。アニメーションは`opacity`と`transform`だけで組むのがポイントです。この2つはレイアウトの再計算を起こさないため、後述する応答性の指標を悪化させにくくなります。

## 生成AIで変わるWebデザインの作り方

トレンドは見た目だけでなく作り方にも及んでいます。Figma Make、Google Stitch、v0など、文章の指示から画面の下書きやコンポーネントを生成するツールが増え、ラフ案の作成やバリエーション出しにかかる時間は短くなりました。生成した画面をもとに会話しながら詰めていく進め方は、[Vibe Design（バイブデザイン）とは？Vibe Codingとの違い・進め方・ツール比較【2026年10月】](/tech/details/8924/)で整理しています。

ただし、生成物をそのまま公開できる段階ではありません。生成された画面は、ブランドに合う構成か、コントラスト比を満たすか、キーボードだけで操作できるかを公開前に確認してください。素材や表現の権利の扱いはWebデザインに著作権はある？模倣の線引きと素材・フォント・制作契約の実務を確認したうえで、生成物は下書きとして扱い、受け入れ基準を[デザインシステムとは？構成要素・作り方とデザインガイドラインとの違いを解説](/column/details/1372/)のような形で明文化しておくと、品質が担当者によってぶれにくくなります。

## トレンド採用の前提：アクセシビリティ・応答性・環境負荷

ここからは流行に左右されない層です。どの様式を選んでも、ここを外すと検索評価も使い勝手も崩れます。

### アクセシビリティ：WCAG 2.2と国内外の法的義務

Webアクセシビリティの国際基準[WCAG 2.2](https://www.w3.org/TR/WCAG22/)は、2023年10月5日にW3C勧告となりました。トレンドの採用で特に関わるのは、通常の文字のコントラスト比4.5:1以上（大きな文字は3:1以上）と、2.2で追加された達成基準2.5.8「ターゲットサイズ（最小）」です。後者はボタンやリンクの押せる範囲を原則24×24 CSSピクセル以上にすることを求めており、小さなアイコンだけのボタンを並べるミニマルなデザインと衝突しやすい項目です。

法的な背景も変わりました。日本では改正障害者差別解消法が2024年4月1日に施行され、事業者による合理的配慮の提供が[義務になりました](https://www8.cao.go.jp/shougai/suishin/sabekai%5Fchirashi-r05.html)。EUでは[欧州アクセシビリティ法（指令2019/882）](https://eur-lex.europa.eu/eli/dir/2019/882/oj)が2025年6月28日から加盟国の国内法を通じて適用され、EUの消費者に提供する電子商取引サービスなどが対象です。ただし、サービスを提供する零細企業には免除規定があります。国内法でWebサイトに何が求められるかは[Webアクセシビリティは義務化されたのか？2024年改正法の線引きと企業がやるべきこと](/column/details/15967/)、色の具体的な基準と検証方法は[Webアクセシビリティのコントラスト比：4.5対1と3対1の適用範囲・CSS実装・自動検証の落とし穴](/tech/details/16503/)で解説しています。

### 表示速度と応答性：Core Web Vitalsのしきい値

GoogleのCore Web Vitalsは、表示の速さ（LCP）、操作への応答（INP）、レイアウトのずれ（CLS）の3指標で構成されます。「良好」とされるのは、実際の利用者の計測値（75パーセンタイル）で、LCPが2.5秒以内、[INPが200ミリ秒以内](https://web.dev/articles/inp)、CLSが0.1以下です。INPは2024年3月12日にFIDに代わって正式な指標になりました。

トレンドとの関係で効いてくるのはINPとCLSです。重いJavaScriptがクリック・タップ・キー操作への応答を妨げるとINPが悪化します。スクロール自体はINPの測定対象外ですが、その処理が他の操作を遅らせる場合があります。3D表示や動画は、表示領域を事前に確保しないとレイアウトのずれを生むことがあります。公開前は検証環境で主要な操作の応答性を確認します。段階公開後は実際の利用者の計測値を確認し、基準を超える場合は演出を見直します。INPの計測と改善手順は[INPとは？Core Web Vitalsの応答性指標の基準値と3区間・改善手順](/tech/details/7543/)にまとめています。

### サステナブルWebデザイン：データ量を減らす設計

FigmaやWixのトレンド予測でも挙がるのが、環境負荷を抑えるサステナブルなWebデザインです。W3CのSustainable Web Interest Groupは、その実践項目を[Web Sustainability Guidelines（WSG）](https://www.w3.org/TR/web-sustainability-guidelines/)として公開しており、2026年10月時点の最新版は2026年9月24日付の「Group Note Draft」です。勧告（Recommendation）ではなく、W3Cの承認を受けていない作業中の文書という位置づけです。中身は、画像や動画の容量を絞る、使わないスクリプトを読み込まない、ダークモードを用意するといった、表示速度の改善とほぼ重なる項目です。新しい様式というより、上の2つの土台を別の角度から説明したものと捉えると、優先順位を付けやすくなります。

## トレンドを取り入れない方がよい場面

トレンドの一覧を集めても、それだけでは成果につながりません。操作や更新を妨げる演出は採用しない、という判断基準を先に決めておきます。次のどれかに当てはまる場合は、見送るか範囲を絞ってください。

- 1つの行動（問い合わせ・購入）に集中させたいランディングページで、Bento UIのように視線を分散させる様式を使う場合
- 更新体制が薄いのに、文章や言語の変更で演出のタイミングや配置を再調整する必要があるスクロールテリングや3D表示を入れる場合
- グラスモーフィズムやネオンカラーで、背景によって文字のコントラスト比が4.5:1を割る場合
- スクロール駆動アニメーションのようなLimitedの機能に、情報の表示そのものを依存させる場合（Firefoxで内容が見えなくなる）
- 演出を加えた結果、INPが200ミリ秒を超える場合

業務システムの管理画面も同様で、装飾の新しさより入力の速さと誤操作の少なさが優先されます。業務画面の設計パターンは[業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定](/tech/details/15325/)を参照してください。

逆に、サイトの目的に合い、運用を続けられ、土台要件を壊さないと確認できた様式は、競合との差別化とブランドの印象づくりに素直に効きます。トレンドの取捨選択から画面設計、実装までをまとめて相談したい場合は、[UI/UXデザインの支援](/service/web/ui-ux/)も用意しています。

## よくある質問

### 2026年のWebデザインのトレンドは何ですか？

本記事では、グラスモーフィズム、Bento UI、特大・可変のタイポグラフィ、スクロール連動アニメーション、OS設定に追従するダークモードを重点的に紹介しています。2025年にはAppleがLiquid Glass、GoogleがMaterial 3 Expressiveを発表しており、半透明の素材感や弾むような動きをWebで扱う際の参考になります。

### グラスモーフィズムとLiquid Glassは同じものですか？

同じではありません。グラスモーフィズムは背景をぼかした半透明の面を重ねるWebデザインの様式の呼び名で、Liquid GlassはAppleが2025年6月に発表したOSの素材の名称です。Liquid Glassは周囲を映し込み、状況に応じて形を変える点まで含みます。WebではCSSの`backdrop-filter`で近い見た目を作れます。

### 業務システムの画面にもデザイントレンドを取り入れるべきですか？

見た目の様式はほとんど取り入れる必要がありません。業務画面で効くのは、ダークモード対応、コントラスト比、押しやすいボタンの大きさといった土台側の要件です。入力を待たせたり視線を奪ったりする演出は避け、操作の一貫性を優先してください。保存完了や入力エラーを伝える短いフィードバックは、操作を助ける目的で検討できます。

### 最新のWebデザイントレンドはどこで確認すればよいですか？

見た目の作例はデザインツール各社のブログやギャラリーサイト、実装できるかどうかはweb.devのBaselineやMDNの対応表、OSの方向性はAppleとGoogleの公式発表で確認するのが確実です。ツールの機能や料金は変わりやすいため、導入前に必ず公式の最新情報を見てください。

### トレンドの様式を取り入れるとSEOに有利になりますか？

様式そのものが検索順位を上げることはありません。検索評価に関わるのは表示速度や応答性（Core Web Vitals）と内容の質で、重い演出はむしろINPやLCPを悪化させます。トレンドは読者の使いやすさを上げる手段として選び、計測値で影響を確かめることが前提です。

## 関連記事

- [デザイントレンド2026｜グラフィック表現の最新動向と採用判断](/column/details/1893/)
- [Liquid Glassとは？仕組みと対応OS、SwiftUI・CSSでの実装方法【iOS 27の変更点まで】](/tech/details/7296/)
- [レスポンシブデザインとは？仕組み・メリットとスマホ対応方式の選び方を制作目線で解説](/column/details/15308/)
- [UI/UXとは？UIとUXの違いとUIデザインで使う数値基準](/column/details/6866/)
- [障害者差別解消法とは？合理的配慮の義務化をWeb・システムの要件に翻訳](/column/details/17566/)
- [Webデザインに著作権はある？模倣の線引きと素材・フォント・制作契約の実務](https://www.issoh.co.jp/column/details/2748/)

---

出典: [Webデザイントレンド2026｜注目の10様式とCSS対応状況・取り入れる判断基準](<https://www.issoh.co.jp/column/details/1347/>)（株式会社一創）