design-trends

デザイントレンド

2026 年第 1 四半期／第 2 四半期時点で、現在受賞しているパターンと新たな手法です。このスキルは定期的な更新を前提に構成されており、各セクションを個別に更新できます。

対象範囲

このスキルは、次の場合に使用します。

• 新しいウェブデザインプロジェクトを始める際に、現在のトレンドを把握したい
• 既存のデザインが現代に通用するか評価したい
• 現行の基準に沿って、ヒーローセクション、アニメーション、レイアウトを設計したい
• 受賞にふさわしい品質（Awwwards、CSSDA、Godly）を目指している

原則

1. 意味を伝えるモーション

アニメーションは装飾ではありません。階層、状態、ストーリーを伝えます。受賞サイト（CSSDA JPANEL 8.0 以上）では、一貫してスクロール駆動型や状態ベースのモーションが活用されています。

2. ヒーローとしてのタイポグラフィ

大きく表現力豊かなタイポグラフィが、ヒーローセクションを支配します。文字そのものがレイアウトであり、レイアウトの中に配置される単なるコンテンツではありません。

3. 奥行きを備えたシンプルさ

ミニマリズムは今も続いていますが、シャドウ、ぼかしレイヤー、微細なテクスチャによって、ほのかな奥行きを加えます。フラットデザインは過去のものですが、ミニマリズムは健在です。

4. デフォルトとしてのダークインターフェース

ダークモードは選択肢ではなく、基本となるデザインの方向性です。ライトバリエーションは派生形です。

5. ストーリーとしてのスクロール

縦スクロールが主要なインタラクションです。スクロールする各セクションがストーリーの一節となります。

6. 機能としてのパフォーマンス

60fps のアニメーションと高速な読み込みは、受賞のための前提条件であり、付加価値ではありません。

ルール

モーションとアニメーション

• 推奨：IntersectionObserver または ScrollTimeline API を使って、スクロールをトリガーとするアニメーションを使用します。
• 推奨：View Transitions API または FLIP アニメーションを使って、ページ状態間の遷移を実装します。
• 推奨：ブランド独自のローディングアニメーションをデザインします。汎用的なスピナーは使いません。
• 非推奨：目的のないアニメーションを使います。すべてのモーションは、注意を引く、状態を示す、または階層を明確にする必要があります。
• 非推奨：400ms を超えるアニメーションを使います（ストーリー性のあるスクロールシーケンスは例外です）。
• 非推奨：パララックスを過剰に使います。控えめなパララックスは効果的ですが、レイヤーを動かしすぎるとユーザーを混乱させます。

タイポグラフィのトレンド

• 推奨：可変フォントを使い、ウェイトの滑らかな変化とレスポンシブなタイポグラフィを実現します。
• 推奨：ヒーローセクションには、大きく（80px 以上）、コントラストの高いディスプレイ書体を使用します。
• 推奨：表現力豊かなディスプレイ書体を 1 種類、ニュートラルなテキスト書体を 1 種類使用します。書体ファミリーは最大 2 種類にします。
• 非推奨：1 ページで 3 種類を超えるフォントウェイトを読み込みます。
• 非推奨：ヒーローセクションでシステムフォントを使います。デザインの意図が感じられない印象を与えます。

色と美的表現

• 推奨：モノクロ、またはアクセントを絞ったパレット（2～3 色）を使用します。
• 推奨：メインテーマには、コントラストの高いダークな背景を使用します。
• 推奨：色を機能的なサインとして使います。アクセントカラーは主要なアクションを示します。
• 非推奨：パレットに 4 色を超える有彩色を使います。
• 非推奨：テクスチャや奥行きのない純白の背景を使います。オフホワイトや控えめなグラデーションを優先します。

レイアウトの新しい手法

• 推奨：非対称グリッドレイアウトを使い、12 カラムグリッドを意図的に崩します。
• 推奨：機能の紹介には、Bento グリッドレイアウトを使います（Apple のパターン）。
• 推奨：全幅セクションと幅を制限したコンテンツを交互に配置し、リズムを生み出します。
• 非推奨：視覚的な緊張感のない、硬直した Bootstrap グリッドを使います。
• 非推奨：主要なナビゲーションに横スクロールを使います（ギャラリーの文脈では例外です）。

インタラクションパターン

• 推奨：カスタムカーソル、ホバー時の表示、マグネットボタンなど、カーソルを使ったインタラクションを取り入れます。
• 推奨：すべてのインタラクティブ要素にマイクロインタラクションを加えます（ホバー／フォーカス／アクティブ状態）。
• 推奨：Lenis またはネイティブの CSS scroll-behavior を使って、スムーズスクロールを実装します。
• 非推奨：明確な付加価値がないまま、自然なスクロール動作を妨げます。
• 非推奨：クリック対象を 44x44px より小さくします。

パターン

パターンの詳細な説明：references/patterns.mdを参照してください

パターン	用途	参考例
没入型ヒーロー	ランディングページ、ポートフォリオ、ブランドサイト	SOM CSSDA 8.56、Detroit Paris 8.41
スクロールストーリーテリング	製品のローンチ、事例紹介	スクロール位置に応じたアニメーション
Bento Grid ダッシュボード	機能概要、SaaS ランディングページ	Vercel Ship、Notion
ダークキャンバス	テック製品、開発者向けツール	背景色 #0a0a0a～#1a1a1a
キネティックタイポグラフィ	ブランドサイト、イベントページ	Darknode CSSDA 8.38
AI ネイティブインターフェース	AI を活用した SaaS、エージェントアプリケーション	AI の起点として Cmd+K を使用
マイクロアニメーションシステム	あらゆるプロフェッショナルな Web アプリ	モーショントークンシステム

アンチパターン

1. アニメーションの詰め込みすぎ -- すべてが動くと、何も目立たなくなります。優先順位は、ヒーローの表示 > スクロール時の表示 > ホバー状態 > 装飾的な動きです。
2. ありきたりなグラデーション背景 -- 紫から青へのグラデーションは使われすぎています。トレンドを模倣するのではなく、ブランドに合わせた色使いにしましょう。
3. 目的のない偽の 3D -- 実質的な価値のない WebGL シーンは、読み込み時間とバッテリーを浪費します。
4. Awwwards 受賞作のコピー＆ペースト -- トレンドを取り入れ、模倣は避けましょう。
5. アクセシビリティの軽視 -- キーボード操作とスクリーンリーダーへの対応がなければ、受賞に値するサイトとは言えません。
6. モバイル対応を後回しにする -- レスポンシブ対応は必須です。デスクトップでしか魅力を発揮しないサイトは、UX 評価で失敗します。
7. 音声付きの自動再生動画 -- 音声をミュートした背景動画にするか、ユーザーが再生を開始する方式にしましょう。
8. スクロール操作の過剰な乗っ取り -- 自然なスクロール動作を完全に上書きすると、ユーザーは方向感覚と操作性を失います。

チェックリスト

• ヒーローセクションに、ストーリー上の目的が明確なアニメーションがある
• タイポグラフィ：書体は最大 2 ファミリーとし、そのうち 1 つは表現力豊かなディスプレイ書体にする
• カラーパレット：有彩色は最大 4 色とし、無彩色を組み合わせる
• ダークモードを実装するか、メインテーマとして意図的に選択している
• スクロールアニメーションに IntersectionObserver または ScrollTimeline を使用している
• すべてのインタラクティブ要素にホバー／フォーカス／アクティブ状態がある
• アニメーションが prefers-reduced-motion を尊重している
• 視覚的な緊張感を生むため、意図的にグリッドを崩したレイアウトにしている
• モバイル版を独立して設計しており、単にレスポンシブで縮小しただけではない
• ヒーローセクションにストック写真を使用していない
• すべてのアニメーションが 60fps で動作する（レイアウトの頻繁な再計算がない）
• 非同期読み込み状態にスケルトンスクリーンを用意している
• 3G シミュレーションでの読み込み時間が 3 秒未満である

関連項目

• ui-patterns -- これらのトレンドを実現する具体的な UI パターン
• visual-direction -- カラーパレット、フォントの組み合わせ、構成の詳細
• component-patterns -- 技術的なコンポーネント構造（21st.dev SDK）
• agent-ui-design -- AI インターフェースのトレンドとエージェント UX
• web-typography -- タイポグラフィシステムとスケーリング
• color-theory -- カラーシステムの基本とトークン構造
• accessibility -- 受賞に値するための前提条件としてのアクセシビリティ
• responsive-design -- モバイル戦略とブレークポイントシステム