awwwards

これから、卓越したものを作ります。目指す基準は Awwwards 級の完成度 です。ただ動くだけのページではなく、誰かがスクリーンショットを撮って共有したくなるページを作ります。このスキルは、Switchyard のフロントエンドスタック全体を、規律ある一連のパイプラインとして統括します。

これを、急いでこなすチェックリストとして扱わないでください。各フェーズは後続を支える重要な工程です。ブリーフを省けば凡庸になり、配色の工程を省けばパレットが適切でなくなり、検証を省けば「自分の環境では動く」ものを料金を支払うクライアントに納品することになります。

---

このスキルが起動したとき

起動条件はスキルの説明に記載されています。このスキル内での役割は、基準を守り、パイプラインを実行することです。

依頼が本当に実用一辺倒なもの（社内管理画面、CRUD フォーム、バグ修正）の場合は、作業を止めて、このスキルは過剰だとユーザーに伝え、代わりに frontend-design または impeccable を案内してください。設定ページに最高水準のパイプラインを使う必要はありません。

---

スタック（および実行順）

フェーズ	スキル／ツール	生成するもの
1. ブリーフ	（このスキル）	美的方向性、表現の調子、成功基準
2. パレット	color-palette-extractor OR color-expert	OKLCH トークン、役割名、確定度
3. インスピレーション	ui-ux-pro-max:ui-ux-pro-max + mcp__magic__21st_magic_component_inspiration	参考コンポーネント、パターン、アンチパターン
4. 構成	frontend-design	明確なコンセプトに基づく、大胆で一貫したレイアウト
5. モーション調整	design-motion-principles	抑制／洗練／遊び心の3つの観点による判断
6. 実装	（このスキル、「アーキテクチャ」参照）	Framer Motion + anime.js + Three.js + 21st.dev の要素を使った動作するコード
7. 動画（該当する場合）	remotion-best-practices	Remotion のコンポジション、キャプション、ヒーロー動画のループ
8. 仕上げと監査	impeccable	抑制の確認、階層、エッジケース、アクセシビリティ
9. 検証	agent-browser	実ブラウザーのスクリーンショット、ビューポート確認、インタラクションテスト

必須ルール： 最高水準の制作では、フェーズ 1、2、4、6、8、9 は必須です。フェーズ 3 は、すでに有力な参考イメージがない場合に必須です。トランジションを1つでも追加する場合、フェーズ 5 は必須です。フェーズ 7 は、動画を納品する場合にのみ実施します。

---

フェーズ 1 — ブリーフ

エディターを開く前に、ブリーフを確定します。ユーザーに尋ねるか、自分で回答を決めて承認を得てください。

• 目的と対象ユーザー — それぞれ1文で記載します。「誰が、なぜこのページのスクリーンショットを撮るのか」を明確にします。
• 表現の調子 — ブランド（デザイン自体がプロダクト：マーケティング、ランディングページ、ヒーロー、ポートフォリオ）か、プロダクト（デザインがプロダクトを支える：ダッシュボード、アプリ、ツール）のどちらかです。以降の制作方針を決めます。
• 美的方向性 — 極端な方向性を1つ選び、貫きます。極限までミニマル、混沌としたマキシマリズム、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリーなエディトリアル、玩具のような遊び心、アールデコ、インダストリアル・ブルータリズム、ソフトパステルなど。無難な中庸が敵です。
• 忘れられない要素 — 見る人が覚えている要素を、1つ決めます。虹色に輝く3Dオブジェクト？ 速度に連動するマーキー？ スクロールに固定された色の変化？ 今ここで決めてください。
• 制約 — フレームワーク（単一 HTML、Next.js、Remotion など）、パフォーマンス予算、アクセシビリティの最低基準、対応ビューポート。

これらを短いブリーフにまとめ、フェーズ 2 に進む前にユーザーの確認を得てください。作業中のプロジェクトに ~/CLAUDE.md またはプロジェクトレベルの PRODUCT.md（例：Switchyard Web の Railyard の美的スタイル）がある場合、ブリーフはその内容を引き継ぎます。新しく考え直す必要はありません。

---

フェーズ 2 — パレット

ブランチ A — 実在するクライアント／既存ブランド向けのデザインの場合：

• ヘッドレスブラウザーのスクリーンショットを使い、クライアントの公開中のサイトに対して color-palette-extractor を実行します。対価を支払うクライアントの色を「センスのよい推測」で決めてはいけません。
• 公開中のサイトがない場合は、ブランドアセットまたは参考 URL を Sam に尋ねます。

ブランチ B — オリジナルのクリエイティブ作品の場合：

• color-expert を使ってパレットを考案します。コミットメントレベルを明示的に選びます（非の打ちどころのない分類）：
  • 控えめ — 色味を加えたニュートラルカラー＋10% 以下のアクセント。プロダクトのデフォルトです。
  • 大胆 — 1 色の高彩度カラーが表面の 30～60% を占めます。
  • フルパレット — 3～4 個の役割を明確に定め、それぞれを意図的に使います。
  • 全面的 — 表面そのものが色です。

両方のブランチ： hex ではなく、OKLCH の値を出力します。#000 や #fff は使わず、すべてのニュートラルカラーにブランドカラーの色相を加えます（クロマ 0.005～0.01）。明度が 0 または 100 に近づくほど、クロマを下げます。

生成したトークンを CSS 変数（--bg、--ink、--accent など）として保存し、すべての箇所で再利用します。ハードコードした値を重複させないでください。

---

フェーズ 3 — インスピレーション

コンポーネントのパターンを探すときは、次の手順に従います。

1. ui-ux-pro-max:ui-ux-pro-max — デザインインテリジェンスライブラリを読み込みます。該当するスタイル（グラスモーフィズム／ブルータリズム／弁当箱レイアウトなど）、それに合うフォントの組み合わせ、コンポーネントの種類に応じた UX ガイドライン、およびデータ可視化に関わる場合はチャートスタックを取り入れます。
2. mcp__magic__21st_magic_component_inspiration — 具体的なコンポーネントの種類（「3D オブジェクトを配置したヒーロー」「速度感のあるマーキー」「弁当箱グリッド」「監査ピンのツールチップ」など）を検索します。参考例を 2～4 件取り入れます。
3. mcp__magic__21st_magic_component_builder — ぴったり合う 21st.dev のパターンが見つかったら、ゼロから書き直すのではなく、Magic を使ってコンポーネントコードを生成します。
4. mcp__magic__logo_search — 実在するブランドロゴが必要な場合（推薦コメント、インテグレーショングリッドなど）は、適切な方法で取得します。ロゴを偽造してはいけません。

インスピレーションは出発点であり、到達点ではありません。必ずアレンジし、1 対 1 でコピーしてはいけません。

---

フェーズ 4 — 構成

全体の構成には frontend-design の原則を取り入れます。

• タイポグラフィ： 個性的なディスプレイフォントと、洗練された本文用フォントを組み合わせます。Inter、Roboto、Arial、システムフォントは絶対に使いません。Space Grotesk も、反射的に選んではいけません（AI 生成らしい出力の定番です）。
• 色： フェーズ 2 のパレットを、選んだコミットメントレベルに沿って適用します。控えめに均等配分するより、支配的な色と鋭いアクセントの組み合わせが効果的です。
• レイアウト： 意外性を持たせます。非対称、重なり、斜めの流れ、グリッドからの逸脱を取り入れます。広々としたネガティブスペースか、制御された密度かを選び、一貫して貫きます。
• 背景： グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透明レイヤー、ドラマチックな影、カスタムカーソル、粒子のオーバーレイを使います。美的意図から明確に求められる場合を除き、単色の背景をデフォルトにしてはいけません。

AI らしい凡庸な出力を絶対に作らないでください。白地に紫のグラデーション、ありきたりなフォント、予測可能なレイアウト、画一的なコンポーネントは避けます。

---

フェーズ 5 — モーションの調整

design-motion-principles を取り入れ、次の視点から 1 つ選びます。

• 抑制（Emil） — 即時で、ほとんど気づかない程度のモーション。スプリングのオーバーシュートは最小限にします。モーションがタスクの流れを妨げてはならないツールやプロダクト UI に適しています。
• 洗練（Krehel） — 振り付けるように、緩急を測り、意図的なイージングカーブを使います。高級感のあるブランドやランディングページのデフォルトです。
• 遊び心（Jhey） — 弾むような、表現力豊かで、キャラクター性のあるモーションです。ポートフォリオ、クリエイティブ作品、速度より個性が大切なものに適しています。

サーフェスごとに視点を 1 つ選び、一貫して貫きます。同じセクション内で視点を混ぜると、迷いが感じられます。

---

フェーズ 6 — 実装（実証済みの手順）

アーキテクチャには 3 つの分岐があります。コードを 1 行書く前に選んでください。

ブランチ A — ビルド工程なしの単一 HTML ファイル

ショーケースページ、デモ、クライアントへの提案、社内向け成果物における Switchyard の定番です。数秒で読み込め、ツールチェーンが不要で、デプロイの手間もありません。リファレンス： reference/architecture-single-html.md。

主なポイント：

• esm.sh から react、react-dom、framer-motion、three、htm、animejs を読み込む ES モジュールのインポートマップ
• Babel を使わず、htm のタグ付きテンプレートで JSX を記述
• フェーズ 2 の OKLCH トークンを使った Vanilla CSS
• ページの大部分は Vanilla のまま、インタラクティブな部分に React のアイランドを配置

ブランチ B — Next.js／本番向けフレームワーク

ビルド成果物を ~/switchyard/web や別のデプロイ済みアプリに組み込む場合に使います。プラットフォーム層には vercel:nextjs、vercel:shadcn、vercel:next-cache-components を使います。コーディング前に、このスキルのフェーズ 1～5 も引き続き適用してください。

ブランチ C — Remotion 動画

モーショングラフィックス、ブランドイントロ、デモリール向けです。まず remotion-best-practices に構成ルールを引き継ぎ、その後 switchyard-video を使った音声と納品の工程のためにここへ戻ります。

モーションライブラリの一覧

ツール	用途
Framer Motion	React コンポーネントのモーション、レイアウトのトランジション、useScroll／useVelocity／useTransform／useSpring／useMotionValue／useAnimationFrame。速度に連動するマーキー。マウスの傾きに反応する 3D カード。レイアウトの演出。
anime.js	個別のエフェクト — 数値カウンター（easing: 'easeOutCubic' によるカウントアップ）、テキストのスクランブル、段階的なパルス、SVG パスのモーフィング。
Three.js	ヒーロー領域の 3D オブジェクト。MeshPhysicalMaterial（虹色効果、クリアコート）を使用します。CanvasTexture のグラデーションに PMREMGenerator を適用し、環境マップをプロシージャルに生成します。CylinderGeometry + CanvasTexture + FrontSide を使い、実際の 3D 軌道テキストを作成します（背面の半分は自動的にカリングされます）。
CSS のみ	静的な装飾、ホバー時のマイクロインタラクション、animation-delay によるページ読み込み時の段階表示。まずはこちらを使ってください。

詳しいパターンは reference/motion-recipes.md を参照してください。

既知の注意点（過去に問題が発生したもの）

1. イタリック体のグラデーション + 文字単位の分割 = テキストが見えなくなります。 子要素は親から color: transparent を継承しますが、背景がありません。対処方法：グラデーションのイタリック体は文字単位に分割せず、単一の motion.span として描画します。
2. ヘルパー関数内のフック = rules-of-hooks 違反。 useMotionValue／useSpring を呼び出すヘルパーは、独立したコンポーネント（例：MagneticCTA）に昇格させます。
3. PowerShell + BOM なし UTF-8 = パーサーの破損。 Sam の環境用に .ps1 ファイルを書く場合は、ASCII のみを使うか、-Encoding utf8 で再保存してください。[[powershell-tool-quirks]] のメモを参照してください。
4. React の style={{}} 内の CSS カスタムプロパティは、型定義で警告が出ても問題なく動作します。 style={{ '--accent': value }} は有効です。

全項目は reference/gotchas.md を参照してください。

---

フェーズ 7 — 動画（該当する場合）

成果物にモーショングラフィックスが含まれる場合：

• 構成の設計には remotion-best-practices
• エンドツーエンドの制作（ブリーフ → レンダリング → SNS 向けカット）には switchyard-video
• 無料のアセットと無料枠のサービスをデフォルトで使ってください。Sam に先に確認せず、fal-ai や有料 TTS に自動で費用をかけないでください。

---

フェーズ 8 — 仕上げと監査

完成した成果物を impeccable に渡し、最終チェックを行います。

• impeccable audit — 過剰な装飾がないか、階層、コントラスト、エッジケースを確認
• impeccable shape — セクションの構造を見直す必要がある場合
• impeccable live — 特定の要素をブラウザー上でリアルタイムに反復調整する場合

監査では、視覚的な階層、認知負荷、アクセシビリティ（コントラスト比、44px 以上のタッチターゲット、フォーカスリング、モーションの意味づけ）、すべてのビューポートでのレスポンシブ動作、エラー状態、エッジケース、コピーの精度を確認します。

---

フェーズ 9 — 検証

agent-browser を使って、以下を実施します。

1. 実際のブラウザーでビルド済みアーティファクトを開きます
2. 320／768／1280／1920 のビューポートでスクリーンショットを撮影します
3. Tab キーで移動し、フォーカス順序とキーボードアクセシビリティを確認します
4. すべてのインタラクティブ要素にホバー／クリックして、モーションが発生することを確認します
5. ネットワーク／CPU を制限し、ハードウェアの性能が低い場合でもモーションに意図が感じられることを確認します

型チェックとテストスイートで検証できるのはコードの正しさであり、機能の正しさではありません。 ブラウザーで開けない場合は、成功したと主張せず、その旨を明示してください。

---

アンチパターン（自動却下）

• Inter／Roboto／Arial／汎用システムフォント
• 白い背景に紫色のグラデーション
• 反射的に Space Grotesk を使うこと
• 見出し 1 つ＋サブ見出し 1 つ＋ボタン 1 つを、中央揃えで等間隔に配置したヒーロー（「AI スロップのランディングページ」）
• 均一で控えめすぎる色の配分
• 美的表現に奥行きを持たせられるのに、単色のフラットな背景を使うこと
• 意味を補強しないアニメーション（ui-ux-pro-max のモーションと意味のルール）
• 偽の推薦文、偽のロゴ、偽の指標
• Switchyard 向けのコピーにおける納期の約束（~/CLAUDE.md に定められた厳守ルール）
• 「他のエージェンシーより安い」という価格表現。代わりに 「エージェンシーの諸経費なし — オフィス代やアカウントマネージャー料金なしで、同じ仕事を提供」 を使います

---

出力チェックリスト（完了を宣言する前に）

• ブリーフを作成し、確認済み
• OKLCH のパレットを CSS 変数としてトークン化し、16 進数カラーの重複なし
• タイポグラフィに独自性がある（Inter／Roboto／Arial ではない）
• 忘れられない要素が 1 つあり、機能している
• モーションの方向性（抑制／洗練／遊び心）が各サーフェス内で一貫している
• Framer Motion／anime.js／Three.js の使用がすべて上記のマトリクスに適合している
• すべての落とし穴を確認済み（イタリック体のグラデーション、ヘルパー内のフック、CSS 変数）
• impeccable audit の確認が完了
• 4 つのビューポートでの agent-browser による検証が完了
• AI スロップのアンチパターンがない
• トークン化すべき値がハードコードされていない
• クライアントの案件の場合：実際のクライアントサイトからパレットを抽出（創作したものではない）
• Switchyard の案件の場合：Railyard のルールを遵守（シグナルとしてのソジウムアンバー。塗りつぶしには使わない。ヒーローの h1 は固定。納期の約束なし。「クライアントがコードを所有する」という表現なし）

---

クイックリファレンス — 標準リファレンスビルド

Sam の ~/skills-showcase/index.html（2026-05-16 ビルド）は、このスタックで「まさに最高峰」が何を意味するのかを示す標準リファレンスです。迷ったら、その選択を参考にしてください。

• ヒーロー：虹色に輝く Three.js の二十面体＋周回するテキストリング 2 つ＋磁力で引き寄せられる CTA＋anime.js の数値カウンター
• セクション間のベロシティ・マーキー（Framer Motion の useVelocity＋useSpring＋useTransform）
• 3D マウスチルトカードを配した弁当グリッド
• 抑制／洗練／遊び心を並べて紹介するレンズラボ
• ui-ux-pro-max の具体的なルールを引用したホバーツールチップ付きピンによる UI 監査シアター

このファイルが標準です。新しいビルドが少なくとも同等に洗練されていなければ、完成ではありません。