ガラスか、粒か——2026年9月、受賞サイトに見る質感とマイクロインタラクションの潮流

2026年10月13日

Awwwardsの「Site of the Day」やCSS Design Awardsの「Website of the Day」に並ぶ最新の受賞サイトを見ていくと、今週のUI/UXは「なめらかなガラス」と「ザラついた粒子」という一見正反対の質感が同時に主役になっている。ここでは受賞サイトの実例を手がかりに、2026年9月時点のビジュアルトレンドを整理する。

今週の受賞サイトダイジェスト

Awwwardsの2026年9月25日付Site of the Dayは、フランスのデザイナーMerci Michel氏による「The Tie-break」。一方、CSS Design Awardsの同日Website of the Dayは、three.jsとBullet物理エンジンで作り込まれたUAEのブラウザレーシングゲーム「Awards Racing」だった。ドリフトと車両戦闘をデザインの世界観で表現するなど、単なるLP的サイトを超えてWebGLベースの「遊べるサイト」が上位に食い込む傾向が続いている。

同じ週のマイクロインタラクション部門の受賞ラインナップにも、ポートフォリオ・アートギャラリー・音楽フェスなど幅広いジャンルが並び、単発の派手な演出よりも「触れたときの気持ちよさ」を丁寧に作り込んだサイトが評価されている。

リキッドグラスの逆襲——グラスモーフィズムはまだ終わらない

ThePlus Addonsの2026年トレンド分析は、Appleの「Liquid Glass」がもたらした半透明UIの再流行が今も続いていると指摘する。ポイントは適用範囲を絞ること。ヘッダーの固定ナビや短いラベルの付いたカードのような「情報量が少ない部品」にぼかしと透過を使うと奥行きが出るが、長文の本文に使うとコントラストが崩れて読みにくくなる。ネオブルータリズムがページ全体のスタイルとしては落ち着きつつも、太い枠線やハードシャドウ、ホバー時の「沈み込み」といった要素だけが普通のコンポーネントに吸収されている点も同記事は指摘している。

ノイズ・グレイン×メッシュグラデーション——「デジタルの完璧さ」を崩す質感

Kreativa Groupのグラデーション動向レポートによれば、2026年の主流はメッシュグラデーション、オーロラ的な色の流れ、デュオトーン、そしてノイズを乗せた「深みのある」グラデーションだという。Fireart Studioの分析記事はこれを「タクタイル・ブルータリズム」と呼び、フィルムグレインやCSSノイズで紙や写真フィルムのような手触りを出す一方、重いWebGLではなく軽量なCSSだけで質感を作る「サステナブルな実装」への志向とセットで語っている。

この粒子感はSVGのfeTurbulenceフィルタで作るのが定番で、CSS-Tricksの解説にある通り、グラデーション背景にノイズを重ね、filterで明度とコントラストを調整し、mix-blend-modeで馴染ませるという流れで実装できる。

<svg>
  <filter id="grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/>
  </filter>
</svg>

.hero {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  filter: url(#grain) contrast(220%) brightness(120%);
  mix-blend-mode: overlay;
  opacity: .35;
}

グラデーションの質感を思わせる抽象的な背景写真 — Photo: webtreats / CC BY 2.0, Openverse経由

ネオブルータリズム vs タクタイル・ブルータリズム——二極化する「高級感」の作り方

興味深いのは、同じ「ブルータリズム」という言葉でも方向性が割れていることだ。ThePlus Addonsが言う古典的なネオブルータリズム（黒い太枠・ハードシャドウ・ベタ塗りの原色）はページ全体のスタイルとしては落ち着き、部品単位の演出として残る一方、Fireart Studioが言う「タクタイル・ブルータリズム」は生々しい幾何学と強いコントラストを保ちつつ、グラスの代わりに紙やフィルムのような質感で「人間が作った感」を演出する路線だ。どちらも「AIっぽい無機質さ」へのカウンターとして機能している点は共通している。

系統	特徴	向いている用途
リキッドグラス／グラスモーフィズム	半透明＋ぼかしで奥行きを出す	固定ヘッダー、短いラベルのカード
メッシュグラデーション＋グレイン	色の流れにノイズを重ねて質感を出す	ヒーローセクション、背景全面
ネオブルータリズム	太枠・ハードシャドウ・原色	ボタンやバッジなど部品単位のアクセント
タクタイル・ブルータリズム	紙・フィルムのような粗い質感＋鋭い幾何学	ブランド性の強いランディングページ

カーソルが主役に——マイクロインタラクションとダイナミックカーソル

Aufait UXのUI/UXトレンド解説は「カーソルはもうただのポインターではない」と述べ、ホバー時に形を変えたり、要素に吸着したりする「アドバンスド・カーソル」を2026年の注目トレンドに挙げる。Designmodoの記事も同様に、トリガー・ルール・フィードバック・ループという古典的なマイクロインタラクションの4要素を踏まえつつ、ダイナミックカーソルが来年も引き続き注目されると予測している。ポイントは装飾で終わらせず、状態変化やフィードバックの「意味」を持たせること。Awwwardsの受賞サイト群を見ても、派手なカーソル演出そのものより、それが操作性をどれだけ補強しているかが評価軸になっている。

主な情報源

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。