受賞サイトに共通する「絞り込み」：2026年10月のAwwwards SOTDとUIトレンドをAIへの指示に変える

2026年10月29日

10月のAwwwards「Site of the Day」や2026年のUIトレンド記事を並べると、受賞サイトの共通点は「派手さ」より「絞り込み」にありました。今回は、配色・タイポ・モーションの3点で潮流を整理し、AIで作るときの指示に落とし込みます。

10月のSite of the Dayに見る共通点

Awwwardsの10月のSOTDから、公開ページで確認できた事例を拾います。

サイト（選出日）	確認できた特徴
Odyssée（10/8）	配色はネイビー(#1E305E)とオフホワイト(#F6F4F2)の2色。タグはLuxury、Minimal、Microinteractions。技術はGSAP、Next.js、Sanity
Nick Ho（10/11）	ページロードとヒーロー、引用、メニュー遷移がハイライト項目として挙がっている
Heron AI（10/12）	プリローダー、ストーリーテリング、ヒーローの操作感が評価項目。横スクロール系コレクションにも掲載

共通するのは、ロード、ヒーロー、メニュー遷移といった「入口と移動」に演出を集中させている点です。全ページを動かさず、体験の要所に絞っています。

2026年のUIトレンド：3つの軸

1. 配色：少数精鋭＋アクセント

Odysséeのように2色で成立させる例がある一方、Krumziは暗い背景にネオンのアクセントを置く手法や、質感のある「触れそうな」表現も挙げています。方向は二極化していますが、どちらも色数は少なめです。

2. タイポグラフィ：文字そのものを表現にする

同記事は実験的なタイポグラフィを主要トレンドとしています。大きな見出しで主張し、本文は読みやすさを守る、という役割分担が基本です。

3. モーション：装飾より「伝達」

SM Technologyの記事は、動きを変化の理解や操作の確認、視線の誘導に使う流れを指摘し、「動きが多いほど良いわけではない」と釘を刺しています。

Web Design Trendsと書かれた写真 — Photo: Digital Markketing / CC BY 2.0（Flickr、Openverse経由）

ギャラリーの使い分け

Colorlibのまとめでは、用途別に次の使い分けが勧められています。

目的	向いているギャラリー
UXの調査（実在プロダクト）	Mobbin、Refero
ビジュアルの着想	Awwwards、Godly
LPの参考	Lapa Ninja
幅広いクリエイティブ	Dribbble、Behance

AIに作らせるときの指示に落とす

受賞サイトの傾向は、そのままプロンプトの制約になります。たとえば次のように書きます。

配色は2色（ネイビーとオフホワイト）＋アクセント1色まで。
見出しは大きく、本文は16px以上で行間を広く。
アニメーションはロード・ヒーロー・メニュー遷移の3か所だけ。
他は200ms程度のフェードに留める。
prefers-reduced-motion では動きを止める。

デザイン系のスキルを使う手もあります。AgenticSkillsのデザインカテゴリには、汎用的なAI見た目を避けるAnthropicのFrontend Designや、Taste Skillなどが掲載されています（10月13日時点の索引）。制約を先に決めてから任せると、仕上がりがぶれにくくなります。