elite-inspiration

エリートなインスピレーション

Awwwards、FWA、CSS Design Awardsから厳選した参考例です。

クイックリファレンス

パターン	参考ファイル
水平スクロール	horizontal-scroll-sites.md
Bentoグリッド	bento-grid-sites.md
テキストアニメーション	text-animation-sites.md
パララックス	parallax-sites.md
プロダクトコンフィギュレーター	product-configurators.md
エージェンシーのポートフォリオ	agency-portfolios.md
マイクロインタラクション	micro-interactions.md
アーキタイプのケーススタディ	archetype-case-studies.md

---

インスピレーションの調べ方

コピーせず、理解する

受賞サイトを調べるときは、次の点を確認します。

1. 手法を特定する - どのようなアニメーションやレイアウトが使われていますか？
2. 目的を理解する - なぜこの手法が使われていますか？何を伝えていますか？
3. タイミングを分析する - イージング、時間差、段階的な表示のパターンを確認します
4. 実装方法を考える - どのように構築しますか？
5. 状況に合わせて応用する - プロジェクトにどのように適合しますか？

考えるべき質問

• 何がこのサイトに高級感を与えていますか？
• アニメーションはコンテンツをどのように引き立てていますか？
• 動きの優先順位はどうなっていますか？
• モバイルにどのように対応していますか？
• アクセシビリティに関してどのような配慮がありますか？

---

アワードプラットフォーム

Awwwards

URL: https://www.awwwards.com

最適な用途：最先端の手法、デザイントレンド、エージェンシーの作品

主なセクション：

• 今日のサイト
• 佳作
• 開発者賞

FWA（Favourite Website Awards）

URL: https://thefwa.com

最適な用途：実験的な作品、インタラクティブな体験、WebGL

主なセクション：

• 今日のサイト
• 今日のモバイルサイト

CSS Design Awards

URL: https://www.cssdesignawards.com

最適な用途：CSSに重点を置いたデザイン、洗練された実装

Godly

URL: https://godly.website

最適な用途：厳選されたランディングページ、SaaSデザインのインスピレーション

Landbook

URL: https://land-book.com

最適な用途：ランディングページのパターン、コンバージョン重視のデザイン

SaaS Landing Page

URL: https://saaslandingpage.com

最適な用途：B2B SaaSのデザインパターン

---

パターンのカテゴリ

水平スクロール

用途：ポートフォリオ、ケーススタディ、ストーリーテリング

主な手法：

• GSAP ScrollTriggerによるピン留め
• CSS scroll-snap
• 進行状況インジケーター
• モバイルでは縦スクロールに切り替え

参考例を見る → horizontal-scroll-sites.mdを参照

---

Bentoグリッド

用途：機能紹介、製品ページ、ダッシュボード

主な手法：

• スパンを使ったCSS Grid
• レスポンシブな再配置
• カードのホバー効果
• フィルタリング時のFLIPアニメーション

参考例を見る → bento-grid-sites.mdを参照

---

テキストアニメーション

用途：ヒーローセクション、見出し、ストーリーテリング

主な手法：

• SplitTextによる文字・単語単位のアニメーション
• マスクを使った表示
• 段階的な表示のパターン
• スクロールに連動した表示

参考例を見る → text-animation-sites.mdを参照

---

パララックス効果

用途：奥行き、没入感、ストーリーテリング

主な手法：

• 複数レイヤーによる奥行き
• スクロールに基づく変形
• スティッキーセクション
• CSS perspective

参考例を見る → parallax-sites.mdを参照

---

製品コンフィギュレーター

用途：Eコマース、SaaS、カスタマイズ

主な手法：

• 3D モデルの統合
• 色やオプションの切り替え
• リアルタイムプレビュー
• FLIP トランジション

詳しく学ぶ → product-configurators.mdを参照してください

---

エージェンシーのポートフォリオ

用途：クリエイティブスタジオ、フリーランサー

主な手法：

• 事例紹介のナビゲーション
• プロジェクトのホバープレビュー
• カスタムカーソル
• ページトランジション

詳しく学ぶ → agency-portfolios.mdを参照してください

---

マイクロインタラクション

用途：ボタン、フォーム、ナビゲーション、フィードバック

主な手法：

• 状態のトランジション
• 読み込み状態
• ホバー時のフィードバック
• 成功／エラー状態

詳しく学ぶ → micro-interactions.mdを参照してください

---

主要なスタジオ

これらのスタジオは、一貫して受賞歴のある作品を制作しています。

開発に重点を置くスタジオ

スタジオ	得意分野	所在地
Active Theory	WebGL、インタラクティブ	LA、USA
Build in Amsterdam	滑らかなアニメーション	Amsterdam
Locomotive	スクロール体験	Montreal
Resn	実験的な表現	Wellington
Studio Freight	モーションデザイン	Brooklyn
Basement Studio	最先端テクノロジー	Buenos Aires

デザインに重点を置くスタジオ

スタジオ	得意分野	所在地
Basic/Dept	クリーンでミニマル	San Diego
Huge	エンタープライズ規模	Brooklyn
Fantasy	プロダクトデザイン	SF
Ueno	ブランド体験	Reykjavik
Rally	スタートアップ	SF

---

技術パターン

GSAP の使用

受賞歴のあるサイトの多くは、次の用途で GSAP を使用しています。

• スクロール駆動アニメーション（ScrollTrigger）
• テキストの表示（SplitText）
• レイアウトの変更（Flip）
• タイムラインのオーケストレーション

WebGL／Three.js

次の用途でよく使われます。

• 3D 製品のショーケース
• インタラクティブな背景
• パーティクルエフェクト
• シェーダーベースのビジュアル

フレームワーク

一般的な構成：

• Next.js - React SSR、パフォーマンス
• Nuxt - Vue SSR
• SvelteKit - Svelte SSR
• Astro - 静的サイト優先、部分的なハイドレーション

---

評価基準

サイトの審査で評価される点：

Awwwards の評価基準

カテゴリ	配点	評価対象
デザイン	40%	視覚的なインパクト、創造性、トレンド
使いやすさ	30%	ナビゲーション、アクセシビリティ、モバイル対応
創造性	15%	革新性、独自性
コンテンツ	15%	品質、関連性

「SOTD」（Site of the Day）に選ばれる条件

1. 優れたビジュアル - 印象的な第一印象
2. 技術革新 - 独創的な手法
3. 意図のある動き - アニメーションがコンテンツを支えている
4. デバイスを問わない対応 - モバイルでも動作する
5. パフォーマンス - 読み込みが速く、スクロールが滑らか
6. 細部へのこだわり - マイクロインタラクション、仕上がりの美しさ

---

リサーチのワークフロー

プロジェクトを始めるとき

1. パターンを定義する - どのような種類のサイトか？（ポートフォリオ、SaaS、Eコマース）
2. Awwwards で検索する - カテゴリ、色、技術で絞り込む
3. 5～10 件の参考例を集める - 重要な場面をスクリーンショットに収める
4. 手法を分析する - それぞれの例を特別なものにしている要素を記録する
5. 共通点を見つける - 優れた例に共通するものは何か？
6. プロジェクトに応用する - これらを自分のアプローチにどう生かせるか？

ブックマークの整理方法

次の項目別にインスピレーションを整理します。

• パターンの種類（横スクロール、弁当箱型レイアウトなど）
• 手法（スクロールアニメーション、3D、テキストエフェクト）
• 業界（SaaS、ファッション、エージェンシー）
• 複雑さ（シンプル、中級、上級）

---

最新情報の把握

フォローする

• Twitter/X で @awwwards
• Twitter/X で @thefwa
• Reddit で r/web_design
• GSAP のフォーラムとショーケース

Events

• Awwwards Conferences
• OFFF Festival
• Beyond Tellerrand

Newsletters

• Awwwards weekly digest
• Codrops Collective
• Web Design Weekly