Top-Design: 受賞歴のあるデジタル体験

ワールドクラスのデジタルエージェンシーと同等のレベルのウェブサイトとアプリケーションを制作します。このスキルは、FWA、Awwwards、CSS Design Awards、Webby Awardsで常に受賞するスタジオの職人技を具現化しています。

コア原則

すべてのピクセルに意図があります。デフォルトはなく、偶然もありません。 あなたが手本にするエージェンシー -- Locomotive、Studio Freight、AREA 17、Active Theory、Hello Monday -- はすべて共通のDNAを共有しています。タイポグラフィは設計そのもの（装飾ではなく、建築である）、モーションは感情を生む（アニメーションは目新しさではなく物語に奉仕する）、ホワイトスペースは武器（抑制による緊張）、パフォーマンスは譲れない（60fpsか無か）。

基礎： 10/10と8/10の違いは段階的な改善ではなく、質的な飛躍です。8/10のデザインには優れたタイポグラフィ、良い色、滑らかなアニメーションがあります。10/10のデザインには、息を呑むほどのタイポグラフィ、このプロジェクト専用に創作された色、ストーリーを語るアニメーションがあります。その差はスキルではなく、意図です。10/10レベルではすべての決定が「これは体験に奉仕するのか、それとも単にスペースを埋めているだけか？」という質問に答えます。

スコアリング

目標：10/10。 デジタル体験を審査または制作する際は、以下のルーブリックを使用して0～10でスコアを付けます。10/10は、そのデザインがAwwardsで掲載されるべきものを意味します。常に現在のスコアと10/10に到達するために必要な具体的な改善を提供します。

スコアリングルーブリック

スコア	レベル	説明
0-2	アマチュア	デフォルトフォント、ヒエラルキーなし、汎用レイアウト、テンプレート感
3-4	基本	まともなタイポグラフィ、いくつかのヒエラルキー、しかし記憶に残らない
5-6	能力的	優れた基礎、清潔な実行、しかし魂がない
7-8	専門的	強力なタイポグラフィ、意図的なモーション、明確なPOV
9	例外的	シグネチャーモーメント、記憶に残る詳細、ほぼ欠点のない職人技
10	ワールドクラス	Awwwards SOTDで受賞、新しい基準を定義

カテゴリー別スコアリング（各0～10）

タイポグラフィ（重み：25%）

スコア	基準
0-3	システムフォント、均一なスケール、デフォルトトラッキング
4-6	プレミアムフォント、いくつかのスケールコントラスト、基本的なヒエラルキー
7-8	劇的なスケールコントラスト（10:1以上）、完璧なトラッキング、光学調整
9-10	タイポグラフィそのものが設計 -- 息を呑む瞬間、カスタム/可変フォント、建築としてのタイプ

ビジュアル構成（重み：25%）

スコア	基準
0-3	すべて中央配置、均等な間隔、厳密なグリッド、緊張なし
4-6	いくつかの非対称性、まともな間隔リズム、基本的な深度
7-8	意図的なグリッド破壊、層状要素、強力なネガティブスペース
9-10	磁力を持つ構成、予期しないスケール変化、呼吸して驚かす要素

モーション＆インタラクション（重み：20%）

スコア	基準
0-3	アニメーションなし、またはデフォルト/直線的モーション
4-6	基本的なトランジション、いくつかのスクロール効果
7-8	カスタムイージング、オーケストレーションされた表示、意図的なパララックス
9-10	ストーリーを語るモーション、完璧にタイミングを計られた振付、スクロールが創意工夫されたように感じる

色＆雰囲気（重み：15%）

スコア	基準
0-3	ランダムな色、純粋な黒/白、気分なし
4-6	統一されたパレット、いくつかの雰囲気
7-8	所有した色、文脈的なシフト、意図的なコントラスト
9-10	このプロジェクト用に創作された色、感じられる雰囲気

詳細＆職人技（重み：15%）

スコア	基準
0-3	デフォルトカーソル、ホバー状態なし、汎用的な何もかも
4-6	基本的なホバー状態、いくつかのカスタム要素
7-8	磁力を持つボタン、ブランド化された選択色、カスタムカーソル（ユーザー承認時）
9-10	すべてのマイクロディテールが検討されている -- フォーカス状態、ローディング、空の状態、スクロールインジケータ

クイックスコア公式

合計 = (タイポグラフィ × 0.25) + (構成 × 0.25) + (モーション × 0.20) + (色 × 0.15) + (詳細 × 0.15)

10/10デザインの七つの柱

1. 建築としてのタイポグラフィ

コアコンセプト： タイポグラフィは設計に層状に適用される装飾ではなく、それ自体が設計です。選択するフォント、設定するスケール、調整するトラッキングは、すべてを決定します。色パレットの雰囲気、アニメーションスタイル、間隔リズム、全体的なパーソナリティです。ヒーローをスクロール過ぎて誰も一時停止しない場合、あなたのタイポグラフィは機能していません。

それが機能する理由： 劇的なスケールコントラストは即座のビジュアルヒエラルキーを作成し、コンテンツがぼやけていたり部屋の反対側から見られたりしても通信します。大型ディスプレイタイプと厳密なトラッキングは、建築が空を支配するように注目を支配します。一方、親密なボディテキストは読者をコンテンツへと引き込みます。この記念碑的と個人的の間の緊張は、人々がスクロールを停止させるものです。

主要な洞察：

• 劇的なスケールコントラストは不可欠です -- ディスプレイとボディの比率は最低10:1（たとえば、180pxヘッドライン / 14pxボディ）で、ビューポート充填タイプが最大限に機能し、ボディテキストが親密に感じられます
• 大型タイプの負のトラッキング（-0.02em～-0.05em）はディスプレイテキストを統合されたビジュアルユニットに締めます。ボディの寛大なラインハイト（1.5～1.7）は可読性を確保します
• フォント選択がティアを定義します -- ディスプレイフォントはプレミアムファウンドリ（Pangram Pangram、Dinamo、Grilli Type、Klim、Commercial Type）またはGoogle代替品（Space Grotesk、Instrument Serif、Fraunces）から来るべきです。ヒーロー体験には決してInter、Roboto、Arial、またはsystem-uiを使用しないでください
• 可変フォントはホバー状態とトランジションで重みアニメーションを可能にします。レイアウトシフトなしで動性を追加します
• 数学的配置ではなく光学調整 -- 人間の知覚は不完全なので、テキストは数値だけでなく視覚的に調整される必要があります
• ヘッドライン上のすべてのラインブレークを制御します -- 美しく破れるテキストは主要なブレークポイントで手動介入が必要です

製品のアプリケーション：

コンテキスト	アプリケーション	例
ポートフォリオヒーロー	ビューポート充填ディスプレイタイプとボディへの劇的なスケール低下	Locomotive.ca ヒーロータイポグラフィ
ブランドウェブサイト	ホバー時に重みアニメーション付きのカスタム/可変フォント	Studio Freight インタラクティブタイプ
製品ランディング	厳密なディスプレイトラッキングと寛大なボディ間隔	Apple製品ページ
エディトリアルレイアウト	セリフ/サンペアリングと極端なスケールコントラスト	AREA 17 ケーススタディ
文化機関	ビジュアルアイデンティティになる声明タイポグラフィ	Hello Monday 博物館サイト
テックスタートアップ	建築的スケールのプレミアムジオメトリックサンス	Stripe タイポグラフィシステム

コピーパターン：

• ディスプレイ：単一の強力なステートメント、最大3～7語
• サブヘッド：ディスプレイタイプを文脈化する1文
• ボディ：最小16～18px、寛大なラインハイト、適度な計測（45～75文字）
• 「タイポグラフィ睨み競争テスト」：目を細めます -- タイプヒエラルキーはまだ読めますか？すべてがぼやけたときに同じ重要度に見える場合、あなたは失敗しました

倫理的境界： タイポグラフィの選択は可読性とアクセシビリティを向上させるべきであり、美的な新規性のために読みやすさを犠牲にするべきではありません。ボディテキストがWCAGコントラスト要件を満たし、標準的な閲覧距離で読める状態を保つようにしてください。

参照：references/typography.md フォントペアリング戦略、タイプスケールシステム、高度なCSSタイポグラフィ。

2. レイアウト＆構成

コアコンセプト： グリッドをマスターして、意図的に破ることができます。すべての違反は意図的に見えるべきで、偶然ではありません。密度と呼吸スペースのリズム -- フルビューポートヒーロー、親密なテキストセクション、巨大な単一単語、密なグリッド -- 注目を保つ読む体験を作成します。

それが機能する理由： ホワイトスペースは空の空間ではなく、緊張を生み出し、ペースを制御し、閲覧者を身を乗り出させるアクティブな設計素材です。非対称レイアウトは、中心、対称構成が達成できない視覚的エネルギーを生成します。要素が重なったり、出血したり、意図的にコンテナを超えて拡張される場合、設計は制約されるのではなく、生きていて自信を持っているように感じます。

主要な洞察：

• 武器としてのホワイトスペース -- アマチュアはすべてのギャップをコンテンツで埋め、プロは自由にパディングを使用し、10/10のデザイナーはホワイトスペースを使用して読者の目を制御する緊張を生み出します
• 非対称バランスは関心を生み出します -- 中心からオフセット要素（たとえば、12列グリッドで1列オフセット）、画像にコンテナを超えて拡張させます
• 予期しないスケール変化はリズムを生み出します -- 大規模と親密、密と疎の交換は、単調性を防ぎ、物語のペースを作成します
• 要素は意図的に重なったり、出血したり、拡張するべきです -- コンテナを破ることは自信と職人技を通知します
• グリッドパラドックス -- 強力な基本グリッドは、それを有意義に破ることができるため、まさに必要です。グリッドがなければ、破裂は単なるカオスです
• スクリーンショットテスト -- 誰かがセクションをスクリーンショットして共有しない場合、あなたはシグネチャーモーメントが足りません

製品のアプリケーション：

コンテキスト	アプリケーション	例
ヒーローセクション	画像流出を伴うオフセットタイトル	margin-left: 8.33%; margin-right: -5vw
ポートフォリオグリッド	意図的な非対称性を持つ多様なカードサイズ	Locomotive プロジェクトショーケース
セクショントランジション	密なセクションと呼吸スペース間のスケール変化	Studio Freight スクロール構成
画像ギャラリー	フル流出と保持画像の混合	AREA 17 エディトリアルレイアウト
フィーチャーショーケース	深度を作成するオーバーラッピング要素	Active Theory 層状構成
ナビゲーション	劇的なスケールを持つ非対称メガメニュー	Hello Monday ナビゲーションシステム

コピーパターン：

• ヒーロー：テキストをグリッドへの意図的な配置でオフセンター配置
• セクション：完全幅没入と拘束読み取り間を交換
• カード：グリッド内でサイズを変える -- すべてが同じ寸法である必要はありません
• 画像：フル流出、拘束、オーバーラッピング処理を混ぜます

倫理的境界： レイアウト実験はナビゲーションの明確性やコンテンツのアクセシビリティを損なわないようにしてください。ユーザーは常にどこにいるのか、どのように前に進むのか、構成的選択に関わらず重要な情報にどのようにアクセスするかを理解するべきです。

参照：references/layout-systems.md グリッドフレームワーク、ブレークポイント、レスポンシブパターン。

3. モーション＆アニメーション

コアコンセプト： すべてのアニメーションは「なぜこれが動くのか？」と答える必要があります。モーションは終了時に適用されるポーリッシュではなく、設計のコアで、早期にプロトタイプされ、ビジュアル設計と一緒に開発されます。エリートモーションの三つの法則は：装飾より目的、カスタムカーブ（決して直線）、分離より調整です。

それが機能する理由： 振付モーションはシネマティック体験を作成し、注目を導き、ヒエラルキーを通信し、感情的共鳴を作成します。要素が独立してではなく互いの関係でアニメーションする場合、結果は統一されていて意図的に感じられます。カスタムイージングカーブ（指数関数、四次関数）は、デフォルトブラウザーイージングが達成できないモーションに物理的品質を与えます。

主要な洞察：

• カスタムイージングは必須です -- ease、ease-in、ease-out、linearは禁止されています。cubic-bezier(0.16, 1, 0.3, 1)（expo out）、cubic-bezier(0.25, 1, 0.5, 1)（quart out）、cubic-bezier(0.87, 0, 0.13, 1)（expo in-out）を使用します
• ページロード振付は厳密なタイムラインに従います -- 背景/構造（0～200ms）、ヒーロータイトル単語がずれ（200～600ms、80msずれ）、サブタイトル（400～800ms）、ナビゲーション階段（600～900ms）、サポート要素（800～1200ms）
• スクロールがトリガーされたシーケンスはビューポートに入った要素を表示します -- すべてが一度ではなく。パララックスはまばらに使用され、必須でない要素にのみ使用されます
• ピン留めされたセクションはストーリーテリングモーメント用で、ギャラリーの水平スクロール（明確な手がかりを含む）は没入読む体験を作成します
• デフォルトブラウザースクロールは受け入れられません -- Lenisまたはocomotive Scrollを使用してスムーズでカスタムスクロール動作をします
• 60fpsは譲れません -- アニメーションがフレームを落とす場合、簡略化または削除します

製品のアプリケーション：

コンテキスト	アプリケーション	例
ページロード	振付されたずれた表示シーケンス	Studio Freight 入力アニメーション
スクロールセクション	ピン留めストーリーテリングと漸進的表示	Locomotive スクロール体験
ナビゲーション	カスタムカーソルを持つ磁力ホバー効果	Active Theory インタラクティブナビゲーション
画像表示	スクロール入力でのクリップパスまたはマスクアニメーション	AREA 17 ケーススタディ表示
ページトランジション	シームレスなクロスページアニメーション継続性	Hello Monday ページモーフ
マイクロインタラクション	ホバー重みシフト、ボタン磁力効果	Dogstudio インタラクティブ詳細

コピーパターン：

• 表示：テキスト行は個別にずれてスライドアップします（ブロックとしてフェードインではなく）
• ホバー：要素はカスタムカーソル、スケール変化、または色トランジションで応答します
• スクロール：コンテンツは段階的に表示されます、決してすべてが一度ではなく
• トランジション：ページは切ったり、フェードしたりするのではなくモーフします

倫理的境界： モーションはインタラクションをブロックしたり、動き酔いを引き起こしたり、ユーザーがコンテンツにアクセスするのを防いだりしてはいけません。常に prefers-reduced-motion を尊重し、すべてのコンテンツがアニメーションなしでアクセス可能であることを確認してください。1.2秒以上のアニメーションは明確な正当化が必要です。

参照：references/animation-patterns.md スクロールアニメーション、ページトランジション、コード付きマイクロインタラクション。

4. 色＆コントラスト

コアコンセプト： 色は、各特定プロジェクト用に創作されたように感じるべき -- 汎用パレットジェネレータから引き出されるのではなく。3つのアプローチは、単色緊張（95%1つの支配的な色、5%ポップするアクセント）、太字シグネチャー（色組み合わせを所有し、それを区別できないようにする）、コンテキスト変化（色はコンテンツに応答し、セクションが異なるパレットを持つ）です。

それが機能する理由： 色は単一の単語が読む前に雰囲気を作成します。色が特定プロジェクトで所有されている場合、それらはブランドのアイデンティティの一部になります。純粋な黒（#000000）と純粋な白（#ffffff）はデジタルで無生命です。わずかに温かい変種（#0a0a0a、#fafaf9）は物理的で考慮されたように感じます。単一のアクセント色の抑制された使用は、目を正確に意図した場所に引く驚きの瞬間を作成します。

主要な洞察：

• 純粋な黒または白を決して使用しないでください -- 暖かい変種は、純粋なデジタル色が欠けることができない物理的品質を作成します
• 機能的色ヒエラルキー -- text-primary、text-secondary（60%不透明度）、text-tertiary（40%不透明度）、surface、border（10%不透明度） -- すべてのコンポーネント間で一貫した深度を作成します
• アクセント色は驚きの瞬間を作成します -- 単一の強いアクセント（#ff4d00など）が控えめに使用されると、複雑なマルチカラーパレットよりもインパクトがあります
• セクション間のコンテキスト色シフトはコンテンツの変化を信号し、ビジュアルチャプターを作成します
• 目を細めテスト -- あなたの設計を目を細めます。コントラストだけで重要な要素が目立たない場合、色ヒエラルキーは失敗しています
• 色は明るいとダークコンテキストの両方で機能する必要があります -- インスタンスではなくシステムを設計します

製品のアプリケーション：

コンテキスト	アプリケーション	例
エージェンシーポートフォリオ	シグネチャーアクセント付き単色	Locomotive：クリーム+黒+オレンジスパーク
ブランドアイデンティティ	太字所有色組み合わせ	Studio Freight：黒+クリーム+さび
クライアントショーケース	ケーススタディごとのコンテキスト変化	AREA 17：各クライアントにパレットを適応させます
製品ランディング	ダークモードで単一の活気のあるアクセント	Stripe：濃紺+シグネチャー紫
文化サイト	ソース素材からの豊かなトーンパレット	Hello Monday：アート/コンテンツから引き出したパレット
テック製品	ミニマル中立で機能アクセント	Linear：グレースケール+シグネチャー青

コピーパターン：

• CSSカスタムプロパティで完全な色システムを定義します：--color-dark、--color-light、--color-accent
• 上部に機能トークンを構築します：--color-text-primary、--color-text-secondary、--color-surface
• 一貫した二次/三次テキストのためにopacity-basedバリアント（rgba(10, 10, 10, 0.6)）を使用します
• アクセント色はCTA、リンク、単一詳細モーメントに表示されます -- 決してどこでも

倫理的境界： 色の選択は最低でもWCAG 2.1 AAコントラスト要件を満たす必要があります。大気設計は視覚障害のあるユーザーの読みやすさの費用で来ることはできません。すべての色組み合わせをコントラストチェッカーでテストしてください。

参照：references/case-studies.md エージェンシー技術の内訳色システムの分析を含む。

5. スクロールベース設計

コアコンセプト： スクロールはウェブ上の主要なインタラクションで、設計されているべきで、デフォルトではありません。最高のデジタル体験はスクロールを物語デバイスとして扱い、ペースを制御し、表示を作成し、緊張を構築し、スクロール位置に結び付けられたシグネチャーモーメントを配信します。

それが機能する理由： デフォルトブラウザースクロールは機械的で均一で、すべてのコンテンツを同等に重要と扱います。カスタムスクロール動作（Lenisまたはocomotive Scrollを介して）は、物理的なオブジェクトを鏡にする滑らかで重い感覚を作成します。スクロール位置がアニメーション、表示、トランジションを駆動する場合、ユーザーのコンテンツを通した移動は受動的な消費ではなく、アクティブな参加体験になります。

主要な洞察：

• スムーズなスクロールが基盤です -- すべての受賞サイトが使用する重い物理的スクロール感のためにLenisまたはocomotive Scrollを実装します
• パララックスは目的的である必要があります -- 控えめに使用され、必須でない装飾要素にのみ使用されます。決してテキストまたは重要なコンテンツでは
• ピン留めセクションはストーリーテリングビートを作成します -- セクションを原位置にロックしながら、コンテンツがその中で変換し、シネマティックモーメントを作成します
• ギャラリーの水平スクロールは明確なビジュアル手がかりが必要で、ユーザーは横にスクロールしたいことを知ります
• スクロールがトリガーされた表示は段階的であるべき -- 要素は見えるようになったときに入り、発見感を作成します
• スクロール速度はアニメーション速度を変調できます -- 高速スクロールはアニメーションを圧縮し、低速スクロールはそれらを拡張し、反応的な感覚を作成します

製品のアプリケーション：

コンテキスト	アプリケーション	例
製品ストーリー	ピン留めヒーロースクロール駆動コンテンツ変換	Apple製品深掘り
ポートフォリオ	スクロール位置に結び付けられた段階的画像表示	Locomotive プロジェクトショーケース
エディトリアル	装飾要素のみのパララックス深度	AREA 17 エディトリアルレイアウト
ランディングページ	明確な手がかりを持つ水平スクロールギャラリー	Studio Freight 作業ギャラリー
ブランド物語	スクロール駆動アニメーションシーケンス	Active Theory 没入ストーリー
フィーチャーツアー	スクロール進行にピン留めされたステップバイステップ表示	Stripe フィーチャープレゼンテーション

コピーパターン：

• 宣言的スクロール動作のために data-scroll、data-scroll-speed、data-scroll-direction 属性を使用します
• 軽量スクロール トリガー クラス トグルのために Intersection Observer を実装します
• 複雑な複数ステップのスクロール駆動アニメーション用に GSAP ScrollTrigger を予約します
• 常にアクセシビリティのための非スクロールフォールバックを提供します

倫理的境界： ユーザーが自分のペースでスクロールするのを防ぐスクロール乗っ取りは、敵対的なUXです。カスタムスクロールは体験を向上させるべき、ユーザーをトラップしません。常にユーザーが自由にコンテンツをスクロールできるようにし、スクロール駆動アニメーションを情報にアクセスするために必須にしないでください。

参照：references/animation-patterns.md スクロールアニメーション実装パターン。

6. パフォーマンス＆ロード

コアコンセプト： パフォーマンスは最適化ステップではなく、初日から設計制約です。フレームを落とすが美しいアニメーション、レイアウトシフトを引き起こすが見事なフォント、または読み込みに3秒かかる見事な画像はすべて職人技テストに失敗します。60fpsが床です、天井ではありません。

それが機能する理由： ユーザーはパフォーマンスを品質として認識します。即座にロードしスムーズにスクロールするサイトは、ビジュアル複雑性に関わらずプレミアムのように感じます。逆に、見た目が見事なサイトが吃音または遅延すると、壊れているように感じます。最高のエージェンシーはビジュアルな野心と技術的パフォーマンスの両方を実現します。GPU加速プロパティを選択し、フォントをサブセット化し、画像を最適化し、実際のデバイスでテストすることで。

主要な洞察：

• フォントはサブセット化と事前ロードされなければなりません -- あなたが必要なグリフのみを含め、font-display: swap または optional を使用し、重要なフォントファイルを事前ロードします
• 画像は最適化されなければなりません -- WebP/AVIFをフォールバックで使用し、レスポンシブ srcset を実装し、折り目の下の画像を遅延ロードします
• アニメーションはGPU加速されなければなりません -- transform と opacity のみをアニメーション化します。決して width、height、top、left、または margin をアニメーション化しません
• レイアウトシフトなし -- Cumulative Layout Shift（CLS）はほぼゼロである必要があります。画像、フォント、動的コンテンツのためのスペースを予約します
• LCP 2.5秒未満 -- Largest Contentful Paint がキーメトリックです。ヒーロー用の重要なレンダリングパスを最適化します
• 最初のコンテンツペイントはインスタントのように感じるべき -- カスタムスケルトン/ロードアニメーションを事後的ではなく、設計要素として使用します

製品のアプリケーション：

コンテキスト	アプリケーション	例
フォントロード	サブセット化、事前ロード、スワップ戦略	<link rel="preload" as="font" crossorigin>
画像配信	レスポンシブsrcsetを持つAVIF/WebP	<picture> フォーマットフォールバック付き要素
アニメーションパフォーマンス	GPU専用プロパティとwill-changeヒント	transform: translate3d() + opacity
レイアウト安定性	アスペクト比とmin-heightリザーベーション	画像コンテナの aspect-ratio: 16/9
ロード体験	設計されたスケルトンスクリーンと進捗インジケーター	カスタムブランドロードアニメーション
バンドル最適化	コード分割、ツリーシェイク、非重要JS遅延	折り目の下のインタラクティビティの動的インポート

コピーパターン：

• Lighthouseで監査し、すべてのメトリックで90以上を目指します
• 実際のデバイスでテスト、シミュレータではなく -- シミュレータはパフォーマンスについて嘘をつき、感じます
• 折り目の下のすべての画像に loading="lazy" を実装します
• will-change をまばらに、アニメーション予定の要素でのみ使用します
• Chrome DevTools Performance パネルでアニメーションをプロフィール（4倍CPU スロットル）

倫理的境界： パフォーマンス最適化はアクセシビリティ機能をストリップアウト、セマンティックHTMLをスキップ、または有意なコンテンツを削除してはいけません。高速でも非アクセシブルは有効なトレードオフではありません。

参照：references/technical-stack.md ライブラリ、ツール、パフォーマンス最適化技術。

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

コアコンセプト： 職人技を示す詳細は、ほとんどのデザイナーがスキップした1%に住んでいます：ブランド化された選択色、磁力ボタン効果、設計されたフォーカス状態、考慮されたローディング状態、職人技エラーページ、正確なマイクロタイポグラフィ。これらの詳細は違いを作ります。

重要：カスタムカーソルはオプトインのみです。 ユーザーが明確にリクエストまたは1つを確認しない限り、カスタムカーソルを実装しないでください。カスタムカーソルはユーザビリティを傷つけ、ユーザーを混乱させ、誤って適用されるとぎこちなく感じることができます。カスタムカーソルを追加する前に常にユーザーに尋ねてください。

それが機能する理由： マイクロインタラクションはすべてのピクセルが考慮されたという感覚を作成します。カーソルがホバーで変化するとき、テキスト選択がブランド色を持つとき、ボタンが微妙な磁力引きを持つとき、フォーカス状態が美しく且つアクセス可能なとき、ユーザーは体験に埋め込まれたケアを感じます。これらの詳細は複合します。個々に微妙で、集合的に変革。

主要な洞察：

• カスタムカーソルはブランドパーソナリティを反映します（オプトインのみ -- ユーザーに実装の前に尋ねます） -- インタラクティブ要素でカーソルが変わり、オプションのボタンの磁力効果を含みます
• 選択色はブランド化されます -- すべての背景で機能するカスタム ::selection 色
• すべてのリンクに考慮されたホバー状態があります -- 画像にはスケールまたはオーバーレイ処理があり、カードは意味深く変換します
• フォーカス状態は見える且つ美しいです -- フォーカスインジケーターはキーボードナビゲーション用に見えるまま、ブランド美学と一致します
• ロードと空の状態は設計されています -- カスタムスケルトンアニメーション、ブランド化された進捗バー、設計された404ページ、有用なエラー状態
• マイクロタイポグラフィは正確です -- スマート引用符、正しい アポストロフィ、適切なエン/エムダッシュ、ヘッドライン上の孤立なし、キーテキストで text-wrap: balance

製品のアプリケーション：

コンテキスト	アプリケーション	例
カーソル	インタラクティブ要素バリアント付きカスタムカーソル（オプトイン -- ユーザーに確認の前に）	Dogstudio カスタムカーソルシステム
選択	ブランド化された ::selection 背景色	すべての表面で機能するオンブランドハイライト
ボタン	ホバーで微妙なプルを持つ磁力効果	Studio Freight 磁力ボタン
フォーカス	ブランドと一致するスタイルフォーカス可視リング	アクセス可能+美しいフォーカスインジケータ
ロード	カスタムスケルトンスクリーンと進捗バー	Locomotive ブランド化されたロードシーケンス
エラー状態	設計された404とエラーページ	メモリアブル、オンブランドエラー体験

コピーパターン：

• ::selection { background: var(--color-accent); color: var(--color-light); }
• cursor: none; ボディ上でカスタムカーソルdivがマウス位置に続く（ユーザーがカスタムカーソルを確認した場合のみ）
• 磁力効果：カーソルとボタン中心間の距離を計算、比例トランスフォームを適用（ユーザーがカスタムカーソルを確認した場合のみ）
• スマート引用符：“ と ” を使用またはビルドツールを自動変換に設定

倫理的境界： マイクロインタラクションはユーザビリティを強化する必要があり、阻害しません。カスタムカーソルはユーザーが明確にリクエストまたは承認した場合のみ実装される必要があり、使用時に機能的で見える状態を保つ必要があります。フォーカス状態はアクセシビリティ要件を満たす必要があります -- 美しさは見える状態を置き換えることはできません。設計されたエラー状態は本当に有用である必要があり、単に賢いだけではありません。

参照：references/case-studies.md マイクロインタラクション実装の破っ提のためのエージェンシー技術。

設計プロセス

1. コンセプトファースト、コード二番目

任意のコード前に、定義します：

ブランドエッセンス：何が単一の単語をキャプチャしますか？
ビジュアル緊張：何が対立する力が関心を作成しますか？
シグネチャーモーメント：何が人々がスクリーンショットして共有しますか？
技術的野心：何がブラウザーの限界を押しますか？

2. シグネチャーモーメントをまず設計します

ヘッダーで開始しないでください。体験を定義することから開始します。ヘッダーは後で解決できます。すべての10/10プロジェクトには、人々が停止して共有するようにする少なくとも1つのモーメントがあります。以前見たことのないヒーローアニメーション、それ自体がビジュアルになるほど太字タイポグラフィ、予期しない喜びインタラクション、物語を語るスクロールシーケンス、または魔法のように感じるトランジション。

あなたのシグネチャーを特定する質問：

1. 何が人々がスクリーンショットしますか？
2. 同僚に何を説明しますか？
3. 何が人々が逆エンジニアリングしようとしますか？
4. このプロジェクトをこれさせない理由は何ですか？

3. タイポグラフィがすべてを設定します

最初にディスプレイタイプフェースを選択します。色パレット気分、アニメーションスタイル、間隔リズム、全体的なパーソナリティを指示するようにします。

4. モーションはポーリッシュではありません

アニメーションを早期にプロトタイプします。モーション設計はビジュアル設計と同時に発生し、後ではありません。

5. 抑制で送信します

10個の平凡なもの上の3つの完璧。容赦なく切ります。

実装ノート

1. シグネチャーモーメントから開始します -- 体験を定義することから設計します
2. デスクトップファースト、モバイルファースト構築をコンセプト化します -- 大きく夢見て、段階的に実装します
3. アニメーションを早期にプロトタイプします -- モーションはポーリッシュステップではなく、設計のコアです
4. 実際のデバイスでテストしてください -- シミュレータはパフォーマンスと感じについて嘘をつきます
5. 抑制で送信します -- 10個の平凡な上の3つの完璧
6. マイクロ詳細を汗をかきます -- 職人技は他の人がスキップした1%に住んでいます
7. 状態を設計します -- ホバー、フォーカス、ロード、空、エラーはすべて重要です
8. 制約を所有します -- すべての制限は設計の機会です
9. プロジェクト規則を使用します -- Tailwind 4+および/またはshadcn/uiが利用可能な場合、それらに対して戦うのではなく、その上に構築します。設計トークンを拡張し、コンポーネントをカスタマイズし、それらのパターンを10/10職人技の基礎として使用します

リファレンスファイル

詳細な実装については、これらを参照してください：

• references/typography.md：フォントペアリング戦略、タイプスケールシステム、高度なCSSタイポグラフィ
• references/animation-patterns.md：スクロールアニメーション、ページトランジション、コード付きマイクロインタラクション
• references/layout-systems.md：グリッドフレームワーク、ブレークポイント、レスポンシブパターン
• references/technical-stack.md：ライブラリ、ツール、パフォーマンス最適化
• references/case-studies.md：エージェンシー技術の破ちゃ（Locomotive、Studio Freight、AREA 17、Hello Mondayなど）

一般的なミス

ミス	失敗する理由	修正
Inter、Roboto、Arialまたはsystem-uiを主要タイプフェースとして使用	これらはアプリケーションフォントで、体験フォントではありません -- 汎用ではなくプレミアムを信号します	プレミアムファウンドリから選択してください（Pangram Pangram、Dinamo、Grilli Type、Klim、Commercial Type）またはGoogleの品質代替品（Space Grotesk、Instrument Serif、Fraunces）
均一なタイプスケール（互いに2倍以内のすべて）	ヒエラルキーはなしは、ガスピングモーメントがない -- すべてが同等に重要ではなく感じます	最小10：1比率をディスプレイとボディに押し、ビューポート充填タイプが目標です
ease、ease-in、ease-outまたはlinearイージングを使用	デフォルトイージングは機械的で無生命です -- 即座にアマチュア作業を信号します	カスタム cubic-bezier カーブを使用：expo out（0.16、1、0.3、1）、quart out（0.25、1、0.5、1）
すべてを同時にアニメーション化	同時アニメーションはヒエラルキーまたは物語のない視覚的なノイズを作成します	ずれ（要素間80ms）で振付、重要度の順に順序付け
中央配置のすべて	対称は安全でも退屈です -- 緊張またはビジュアルエネルギーを作成しません	意図的なグリッドオフセットと出血要素を持つ非対称構成を使用します
どこでも均等な間隔	均一な間隔は単調を作成します -- 目が休めたりフォーカスする場所がありません	間隔を変えてリズムを作成：濃いセクションに続く呼吸スペース
純粋な#000000黒と純粋な#ffffff白	純粋なデジタル色は無生命で厳しいです -- 設計考慮なしを信号します	暖かい変種を使用：#0a0a0a（わずかに温かい黒）、#fafaf9（わずかに温かい白）
デフォルトブラウザースクロール	標準スクロールは機械的で、すべてのコンテンツを同等に重要と扱います	Lenisまたはocomotive Scrollを実装し、スムーズで、重い、物理的なスクロール感
紫から青へのグラデーションヒーロー	「AIグラデーション」 -- 即座に汎用、トレンド追従設計を信号します	プロジェクト固有の署名色アプローチを開発します
空の体験全体のシグネチャーモーメント	シグネチャーモーメントなしで、設計は有能でも記憶に残りません	シグネチャーモーメントをまず設計します -- 人々が逆エンジニアリングするもの
プロフェッショナルインターフェースの絵文字	絵文字はカジュアル/アマチュア職人技を信号し、プレミアム位置を低下させます	カスタムアイコンまたは代わりに活字処理を使用します
テキストとコンテンツに対するパララックス	テキスト上のパララックスは動き酔いを引き起こし、アクセシビリティ問題です	パララックスを装飾的な必須でない背景要素のみに予約します
ユーザーインタラクションをブロックアニメーション	スクロール、クリック、または読む防止モーション敵対的なUXです	すべてのアニメーションが非ブロックであることを確認。トランジション中にコンテンツにアクセス可能
Fontヒーロアイコンは修正なしで使用	汎用アイコンセットはテンプレートレベル設計を信号します	カスタムアイコンを作成するか、ブランドパーソナリティに一致するように既存のものを大きくカスタマイズします
デフォルトフォームスタイル	スタイルされていないフォーム要素は即座に職人技の幻想を破ります	すべての入力、選択、チェックボックス、ボタンをブランド体験として設計します

クイック診断

質問	いいえの場合	アクション
ヒーロータイポグラフィは誰かをスクロール中の一時停止を作成しますか？	ディスプレイタイプは十分に支配的ではありません	スケールコントラストを10：1+に押し、より独特のタイプフェースを選択し、ビューポートを埋めます
誰かはセクションをスクリーンショットして共有しますか？	シグネチャーモーメントは存在しません	1つのセクションを見事にする -- アニメーション、スケール変化、またはインタラクション
目を細めたときに設計がまだ読めますか？	ヒエラルキーは平坦です	レベル間のコントラストを増やします -- より大きいヘッドライン、より多くのホワイトスペース、より強いアクセント
すべてのイージングカーブはカスタムですか（easeやlinearはなし）？	モーションはデフォルトで機械的に感じます	expo out（0.16、1、0.3、1）またはquart out（0.25、1、0.5、1）と交換してください
構成に非対称の緊張があります？	レイアウトは安全で対称に感じます	中心からオフセット要素、画像を出血させ、セクション密度を変えます
色はこのプロジェクト専用に創作されたように感じますか？	パレットは任意のブランドに属する可能性があります	署名色アイデンティティを開発：単色緊張、太字シグネチャー、またはコンテキスト変化
ページロード振付されていますか（すべてが一度ではなく）？	要素が同時にポップインします	ずれてたシーケンスを実装：構造ファースト、それからヒーロー、それからサポート要素
スクロールはカスタムで重く感じますか？	デフォルトブラウザースクロールを使用	Lenisまたはocomotive Scrollを実装し、スムーズで物理的なスクロール動作
マイクロ詳細は考慮されていますか（選択、フォーカス、カーソル）？	デフォルトブラウザー動作が残ります	ブランド化された選択色、設計されたフォーカス状態、考慮されたカーソル動作を追加します（カスタムカーソルを追加する前にユーザーに尋ねます）
CLSはほぼゼロで、LCPは2.5秒未満ですか？	パフォーマンスはまたはされた品質を損なう	サブセットフォント、画像を最適化（WebP/AVIF）、アニメーション変換/不透明度のみ
すべてのアニメーションが「なぜこれが移動するのか？」と答えますか？	モーションは装飾的で目的ではありません	物語、ヒエラル