top-design

受賞に値するデジタル体験を実現するTop-Design

世界クラスのデジタルエージェンシーに匹敵するレベルで、ウェブサイトやアプリケーションを制作しましょう。このスキルは、FWA、Awwwards、CSS Design Awards、Webby Awardsを継続的に受賞するスタジオの技を体現しています。

基本原則

すべてのピクセルに意図があります――デフォルトのままのものも、偶然にできたものもありません。 目指すべきエージェンシーであるLocomotive、Studio Freight、AREA 17、Active Theory、Hello Mondayには、共通するDNAがあります。タイポグラフィこそがデザインであり、動きが感情を生み、余白は強力な武器であり、パフォーマンスには一切妥協しません（60fps、それ以外はあり得ません）。

基盤： 8/10と10/10の差は、スキルではなく意図です。8/10は優れたタイポグラフィと滑らかなアニメーションを備えています。10/10は、息をのむようなタイポグラフィと、物語を語るアニメーションを備えています。すべての判断で、次の問いに答えなければなりません。「これは体験に役立っているのか、それとも単に空間を埋めているだけなのか？」

スコアリング

目標：10/10。 以下の基準を使って、あらゆるデジタル体験を0〜10で評価してください。10/10ならAwwwardsで紹介されるレベルです。現在のスコアと、10/10に到達するために必要な具体的な改善点を必ず示してください。

スコアリング基準

スコア	レベル	説明
0-2	アマチュア	デフォルトのフォント、階層なし、ありきたりなレイアウト、テンプレートのような印象
3-4	基礎レベル	まずまずのタイポグラフィ、ある程度の階層はあるものの、印象に残らない
5-6	十分なレベル	基本がしっかりしていて、仕上がりもクリーンだが、個性に欠ける
7-8	プロフェッショナル	力強いタイポグラフィ、意図的な動き、明確な視点
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	フォーカス状態、読み込み中、空の状態、スクロールインジケーターなど、あらゆる細部まで考慮

簡易スコア計算式

Total = (Typography x 0.25) + (Composition x 0.25) + (Motion x 0.20) + (Color x 0.15) + (Details x 0.15)

10/10デザインを支える7つの柱

1. タイポグラフィを設計の骨格にする

核となる考え方： タイポグラフィはデザインに後から加える装飾ではなく、それ自体がデザインです。書体、スケール、トラッキングによって、色の雰囲気、アニメーションのスタイル、余白のリズム、全体の個性が決まります。

効果がある理由： スケールに大きなコントラストをつけると、ぼかして見たときや部屋の反対側から見たときでも伝わる階層が生まれます。巨大なディスプレイ書体と親しみやすい本文の緊張感が、スクロールする手を止めさせます。

重要なポイント：

• 大きなスケールのコントラストは必須です。ディスプレイと本文の比率は最低でも 10:1（例：180px / 14px）とし、極端な場合はビューポートを埋め尽くすサイズにします
• 大きな文字では負のトラッキング（-0.02em to -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 のヒーロー）；ホバー時にウェイトがアニメーションする可変フォント（Studio Freight）；極端なスケールのコントラストによるセリフ体とサンセリフ体の組み合わせ（AREA 17 のエディトリアル）。ディスプレイ文字は 1 つのメッセージを 3～7 語で表し、本文は最低 16～18px、1 行あたり 45～75 文字にします。

書体の選定やタイプスケールの構築には、references/typography.md を参照してください。スタイル別のフォントペアリング、流動的な clamp() と段階式のスケール、トラッキングと行送りの基準、フォントサブセット化と FOUT の仕組みを紹介しています。

2. レイアウトと構成

核となる考え方： グリッドを使いこなし、意図を持って崩せるようにします。グリッドからの逸脱はすべて、偶然ではなく意図的に見える必要があります。密度と余白のリズムが、注意を引きつける読書体験を生み出します。

効果がある理由： 余白は緊張感を生み、ペースをコントロールする、能動的なデザイン素材です。非対称は、中央揃えの構成では生み出せない視覚的なエネルギーを生みます。意図的に重ねたり、コンテナーからはみ出させたりした要素は、生き生きと自信に満ちた印象になります。

重要なポイント：

• 余白を武器として使います。初心者はすべての隙間を埋めますが、一流のデザイナーは何もない空間を使って緊張感を生み出し、視線をコントロールします
• 非対称なバランスが興味を引きます。要素を中央からずらし、画像をコンテナーからはみ出させます
• 予想外のスケールの変化がリズムを生みます。巨大な要素と小さな要素、密な部分とまばらな部分を交互に配置し、物語のペースを作ります
• グリッドのパラドックス：強固な基盤となるグリッドがあるからこそ、そこからの逸脱が意味を持ちます。グリッドがなければ、逸脱は混沌になります

活用例： 画像をはみ出させたオフセットタイトル（margin-left: 8.33%; margin-right: -5vw）；意図的な非対称性を生む、サイズに変化をつけたカード（Locomotive のショーケース）；奥行きを生み出す要素の重ね合わせ（Active Theory）。画面いっぱいに広がる没入型セクションと、読みやすくコンテンツ幅を抑えたセクションを交互に配置します。

倫理的な境界： レイアウトの実験によって、ナビゲーションのわかりやすさを損なってはいけません。ユーザーが現在地と次の進み方を常に把握できるようにします。

セクションのレイアウトやレスポンシブ対応には、references/layout-systems.md を参照してください。グリッドのフレームワーク、ブレークポイントのシステム、非対称な要素やはみ出す要素のパターンを紹介しています。

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

基本概念： すべてのアニメーションに「なぜ動くのか？」という問いに答えさせます。一流のモーションを支える3つの法則は、装飾よりも目的、カスタムカーブ（線形は使わない）、個別ではなく連動です。

効果がある理由： 振り付けられたモーションは視線を誘導し、階層を伝え、感情的な共鳴を生み出します。カスタムのイージングカーブは、ブラウザー標準のイージングでは実現できない、物理的な動きの質感を与えます。

主なポイント：

• カスタムイージングは必須です。ease、ease-in、ease-out、linearは禁止です。cubic-bezier(0.16, 1, 0.3, 1)（指数関数的な減速）、cubic-bezier(0.25, 1, 0.5, 1)（4次曲線による減速）、cubic-bezier(0.87, 0, 0.13, 1)（指数関数的な加速・減速）を使います。
• ページの読み込みは、厳密な振り付けに従います。構造（0～200ms）、ヒーロータイトルの単語を順に表示（200～600ms）、サブタイトル（400～800ms）、ナビゲーションを連鎖的に表示（600～900ms）、補助要素（800～1200ms）。要素ごとの標準的なスタッガー値はリファレンスを参照してください。
• 個別に動かすのではなく、連動させてアニメーションします。一緒に動く要素は、まとまりがあり、意図的に感じられます。
• 60fpsは譲れない条件です。アニメーションでフレーム落ちが発生する場合は、簡素化するか削除します。

適用例： ページ読み込み時に振り付けられたスタッガー表示（Studio Freight）、スクロールして表示領域に入った際のclip-path／マスクによる画像表示（AREA 17）、ホバー時の重心移動やマグネットボタン（Dogstudio）。テキストの各行は個別にスライドアップし、スタッガー表示します。ブロック単位でフェードインさせてはいけません。ページはカットで切り替えるのではなく、モーフィングさせます。

倫理的な境界： モーションで操作を妨げたり、乗り物酔いのような症状を引き起こしたりしてはいけません。prefers-reduced-motionを尊重し、アニメーションなしですべてのコンテンツにアクセスできるようにし、1.2秒を超えるものには理由を持たせてください。

モーションを実装する際はreferences/animation-patterns.mdを参照してください。スクロール表示、読み込み時のスタッガー演出、ページ遷移、マグネット／ホバーによるマイクロインタラクションを、コードごとコピーして使えます。

4. 色とコントラスト

基本概念： 色はプロジェクトごとに独自に考案されたように感じられるべきです。汎用のパレットジェネレーターから選んではいけません。アプローチは3つあります。モノクロームの緊張感（95％を1色、5％をアクセントカラーにする）、大胆なシグネチャーカラー（独自の組み合わせを確立する）、コンテキストに応じた変化（コンテンツに反応するパレット）です。

効果がある理由： 色は、ひとつの言葉が読まれる前から雰囲気を生み出します。純粋な黒と白はデジタル的で生気がありませんが、温かみのあるバリエーションは、物理的でよく考えられた印象を与えます。抑制して使うアクセントカラーは、意図した場所に正確に視線を集めます。

主なポイント：

• 純粋な黒や白は使いません。#0a0a0aや#fafaf9には、#000／#fffにはない物理的な質感があります。
• 機能的な階層を構築します。一貫した奥行きを実現するため、text-primary、text-secondary（不透明度60％）、text-tertiary（40％）、surface、border（10％）を使います。
• 強いアクセントカラーをひとつ、控えめに使う（#ff4d00など）ほうが、複雑な多色パレットより効果的です。
• セクションごとにコンテキストに応じて色を変えると、視覚的な章立てが生まれます。
• 個別のインスタンスではなく、ライトとダーク両方のコンテキストに対応するシステムを設計します。

適用例： シグネチャーアクセントを使ったモノクローム（Locomotive：クリーム色＋黒＋オレンジのアクセント）、ケーススタディごとにコンテキストに応じた変化（AREA 17）、鮮やかなアクセントカラーをひとつ使ったダークモード（Stripe：ネイビー＋紫）。すべてをCSSカスタムプロパティ（--color-dark/-light/-accentと、--color-text-primary/-surfaceなどの機能別プロパティ）で制御します。アクセントカラーはCTA、リンク、そして一点を際立たせる場面だけに使います。

各要素を実例とともに確認したい場合は、references/case-studies.mdを参照してください。実際のカラーシステム、タイポグラフィの扱い、マイクロインタラクションを制作会社ごとに解説しており、リバースエンジニアリングに活用できます。

5. スクロールを活用したデザイン

核となる考え方： スクロールはウェブにおける主要なインタラクションであり、デフォルトのままではなく、意図して設計されたものにする必要があります。スクロールを物語を伝える手段として扱い、ペースを調整し、演出を生み、期待感を高め、印象に残る瞬間を届けます。

効果がある理由： デフォルトのスクロールは機械的で、すべてのコンテンツを同じ重要度で扱います。スクロール位置によって演出やトランジションが生まれると、コンテンツを読み進める体験は受け身ではなく、参加型になります。

主なポイント：

• スムーズスクロールが基盤です。受賞サイトで広く使われる、重みのある物理的な感触を実現するために、Lenis または Locomotive Scroll を導入します
• パララックスは目的を持たせ、控えめに使い、装飾要素のみに適用します。テキストや重要なコンテンツには決して適用しません
• セクションを固定すると、物語の節目を生み出せます。コンテンツがその中で変化する間、セクションを固定します
• 横スクロールのギャラリーには、操作方法が視覚的に明確に伝わる手がかりが必要です
• 演出は段階的に行います。要素が見える位置に入ると表示されるようにし、発見する体験を生み出します
• スクロール速度に応じてアニメーション速度を変化させると、操作に応答する感覚を高められます

活用例： スクロールに応じて変化する固定ヒーローセクション（Apple の詳細解説ページ）、操作方法が明確な横スクロールギャラリー（Studio Freight）、スクロール連動型アニメーションシーケンス（Active Theory）。軽量なクラス切り替えには IntersectionObserver を使い、複雑な複数段階のシーケンスには GSAP ScrollTrigger を使用します。

倫理的な境界： スクロールの乗っ取りはユーザー体験を損ないます。ユーザーが常に自分のペースでスクロールし、すべてのコンテンツにアクセスできるようにしてください。

スムーズスクロールの設定（Lenis／Locomotive のセットアップ、ライブラリのトレードオフ）については、references/technical-stack.md を参照してください。固定表示、横スクロールギャラリー、スクロール速度に応じたシーケンスについては、references/animation-patterns.md を参照してください。

6. パフォーマンスと読み込み

核となる考え方： パフォーマンスは最初から考慮すべきデザイン上の制約であり、後から行う最適化ではありません。フレーム落ちする美しいアニメーションや、レイアウトシフトを引き起こす見事なフォントは、品質の基準を満たしません。

効果がある理由： ユーザーはパフォーマンスを品質として感じ取ります。視覚的な複雑さにかかわらず、瞬時に読み込まれ、スクロールが滑らかなサイトは高品質に感じられます。一方、見事なサイトでも動作がぎこちなければ、壊れているように感じられます。

主なポイント：

• フォントのサブセット化とプリロードを行います。必要なグリフのみを使用し、font-display: swap または optional を設定し、重要なファイルをプリロードします
• 画像を最適化します。フォールバック付きの WebP／AVIF、レスポンシブな srcset を使い、スクロールせずに見える範囲より下の画像は遅延読み込みします
• アニメーションを GPU で高速化します。アニメーションさせるのは transform と opacity のみとし、width、height、top、left、margin は決してアニメーションさせません
• CLS をほぼゼロにします。画像、フォント、動的コンテンツのための領域を確保します（コンテナーに aspect-ratio を設定します）
• LCP を 2.5 秒未満にします。ヒーローのクリティカルレンダリングパスを最適化します
• 読み込み状態もデザインされた要素です。後付けではなく、カスタムスケルトンや進捗インジケーターを用意します

活用例： フォントをサブセット化し、プリロードして、置き換えます（<link rel="preload" as="font" crossorigin>）。レスポンシブな srcset とフォールバック付きの AVIF／WebP を使います（<picture>）。GPU のみを使ったアニメーションを実装します（transform: translate3d() + opacity）。Lighthouse で 90 以上を目標に監査し、コード分割を行って、重要でない JS は遅延させます。

倫理的な境界： 高速でもアクセシビリティに欠ける状態は、許容できるトレードオフではありません。速度のためにアクセシビリティ機能やセマンティック HTML を削除してはいけません。

ライブラリを選ぶときやパフォーマンス予算に達したときは、references/technical-stack.md を参照してください。推奨スタックに加え、フォント、画像、アニメーションを最適化する具体的な手法が記載されています。

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

中核となる考え方： 多くのデザイナーが見過ごす、わずか1％の部分にこそクラフトが宿ります。ブランドカラーの選択色、磁石のように反応するボタン、工夫されたフォーカス状態、配慮の行き届いた読み込み状態、作り込まれたエラーページ、正確なマイクロタイポグラフィがそれにあたります。

重要：カスタムカーソルは明示的なオプトイン制です。 ユーザーが明確にリクエストするか、使用を承諾しない限り、ネイティブカーソルを置き換えてはいけません。不適切なカスタムカーソルは使いやすさを損ない、奇をてらった印象を与えます。必ず事前に確認してください。

効果がある理由： マイクロインタラクションは、すべてのピクセルに配慮が行き届いていることを伝えます。一つひとつは控えめでも、組み合わさることで体験を大きく変え、ユーザーはその体験に込められた心配りを感じ取ります。

主なポイント：

• カスタムカーソルはブランドの個性を反映します。インタラクティブな要素にはバリエーションを設定できます（上記のオプトインルールに従ってください）
• どの背景色でも見やすい、ブランドカラーの ::selection 色を設定する
• すべてのリンクとカードに、拡大、オーバーレイ、意味のある変形など、考え抜かれたホバー状態を設定する
• フォーカス状態は視認性が高く、見た目も美しくする。ブランドに沿ったインジケーターを用い、キーボードユーザーがはっきり確認できるようにする
• 読み込み中、空、404、エラーの状態を、役立つ瞬間としてデザインする
• マイクロタイポグラフィを正しく整える。スマートクォート、enダッシュ／emダッシュ、見出しの孤立行を避ける工夫、重要なテキストへの text-wrap: balance など

倫理上の境界： フォーカス状態は、ブランドに合わせてスタイリングする場合でも、キーボードで視認できる要件を満たす必要があります。また、エラー、空、404の状態は、単なる装飾ではなく、本当に役立つものでなければなりません。

コピーして使える磁石のように反応するボタン、カーソル、::selection／ホバーのマイクロインタラクションコードについては、references/animation-patterns.md を参照してください。

デザインプロセス

この順序で進めてください。この手順自体が規律となります。

1. コードを書く前にコンセプトを固める。 まず、次の4つを定義します。

BRAND ESSENCE: What single word captures the soul?
VISUAL TENSION: What opposing forces create interest?
SIGNATURE MOMENT: What will people screenshot and share?
TECHNICAL AMBITION: What pushes the browser's limits?

2. ヘッダーではなく、印象に残る瞬間からデザインする。 10点満点のプロジェクトには、人々が立ち止まって共有したくなる瞬間が少なくとも一つあります（これまでにないヒーローアニメーション、ビジュアルそのものになるほど大胆なタイポグラフィ、物語を伝えるスクロール演出など）。次の問いを通じて、これを明確にします。人々は何をスクリーンショットに撮り、同僚に説明し、リバースエンジニアリングを試すでしょうか。また、何がこのプロジェクトを紛れもなくこのプロジェクトだと感じさせるでしょうか。
3. 次にディスプレイ書体を選ぶ。 それが残りのデザインを方向づけます（柱1）。
4. ビジュアルデザインと並行してモーションをプロトタイプする。後回しにしない。 モーションは単なる仕上げではありません（柱3）。
5. 節度を持ってリリースする。 完璧なものを3つ作るほうが、中途半端なものを10個作るより優れています。容赦なく削ぎ落としてください。

実装メモ

1. コンセプトはデスクトップファーストで考え、実装はモバイルファーストで進める。 大胆に構想し、段階的に実装してください
2. プロジェクトの規約に従う。 Tailwind 4+ や shadcn/ui を利用できる場合は、それらに逆らうのではなく、デザイントークンとコンポーネントを拡張し、10点満点のクラフトを実現する土台として活用してください

よくある間違い

各修正項目はルールを定めている柱を示しています。ここで値を再導出しないでください。

間違い	うまくいかない理由	修正（参照先）
Inter、Roboto、Arial、または system-ui を主要書体にする	アプリケーションのフォントは、プレミアム感ではなくありきたりな印象を与えます	プレミアムなフォントファウンドリー、または高品質な Google の代替フォント（柱 1）
均一な文字サイズのスケール（すべてが 2 倍以内）	階層がなく、息をのむような瞬間もありません	ディスプレイ文字と本文の比率を満たします（柱 1）
ease、ease-in、ease-out、または linear のイージング	機械的で生気がなく、素人っぽさがすぐに伝わります	使用禁止です。カスタムの cubic-bezier を使います（柱 3）
すべてを同時にアニメーションさせる	視覚的なノイズが生じ、階層も物語性もありません	重要度に応じて順序をつけ、時間差を設けます（柱 3）
すべてを中央揃えにする	無難ですが退屈で、緊張感も躍動感もありません	非対称性、グリッドのずらし、はみ出す要素を取り入れます（柱 2）
どこも同じ間隔にする	単調で、目を休める場所がありません	密度に変化をつけます。密なセクションの後に余白を設けます（柱 2）
純粋な #000000 / #ffffff	生気がなく、きつい印象になります	温かみのあるバリエーションを使います（柱 4）
ブラウザーのデフォルトのスクロール	機械的で、すべてのコンテンツを同等に扱います	スムーズスクロールライブラリーを使います（柱 5）
紫から青へのグラデーションのヒーロー	「AI グラデーション」はありきたりな流行追随です	プロジェクトに特化したシグネチャーカラーのアプローチを採用します（柱 4）
シグネチャーとなる瞬間がない	きちんとできていますが、印象に残りません	スクリーンショットに残したくなる瞬間を最初にデザインします（プロセスのステップ 2）
プロフェッショナルなインターフェースで絵文字を使う	カジュアルで素人っぽい仕上がりだと伝わります	カスタムのアイコン表現、またはタイポグラフィーによる演出を使います
テキストや重要なコンテンツに視差効果を使う	動きによる不快感やアクセシビリティ上の問題が生じます	視差効果は装飾的な背景要素にのみ使います（柱 5）
アニメーションで操作を妨げる	使い心地が悪くなります	すべてのアニメーションを操作の妨げにならないようにします（柱 3）
Font Awesome のアイコンを未変更で使う	テンプレートそのままのデザインになります	カスタムアイコンを使うか、ブランドに合うよう大幅にカスタマイズします
フォームにデフォルトのスタイルを使う	作り込まれた印象がすぐに損なわれます	すべての入力欄、セレクトボックス、チェックボックス、ボタンをデザインします（柱 7）

クイック診断

「はい」と答えた行ごとに 1 点を加算し、合計点をスコアリング基準の範囲に当てはめます：11-12 -> 9-10、8-10 -> 7-8、5-7 -> 5-6、5 未満 -> 0-4。そのスコアを提示してください。

質問	「いいえ」の場合	修正（参照先）
ヒーローのタイポグラフィーを見て、スクロール中に思わず立ち止まりますか？	ディスプレイ文字に存在感がありません	柱 1 — スケール、個性的な書体、ビューポートを埋める大きさ
スクリーンショットに残したくなるセクションがありますか？	シグネチャーとなる瞬間がありません	プロセスのステップ 2 — 1 つのセクションを際立たせます
目を細めてもデザインの構成を把握できますか？	階層が平坦すぎます	見出しを大きくし、余白を増やし、アクセントを強めます
すべてのイージングカーブがカスタムですか（ease／linear は使っていませんか）？	動きがデフォルトのように感じられます	柱 3 — カスタムの cubic-bezier
構成に非対称の緊張感がありますか？	レイアウトが無難に感じられます	柱 2 — ずらし、はみ出し、密度の変化
色はこのプロジェクトのために作られたように感じられますか？	配色がありきたりです	柱 4 — モノクロームの緊張感、シグネチャー、または文脈に即した配色
ページの読み込みは演出されていますか？	要素が一斉に表示されます	柱 3 — 時間差をつけた段階的な表示
スクロールに独自性と適度な重みを感じますか？	ブラウザーのデフォルトのスクロールです	柱 5 — スムーズスクロールライブラリー
細部（選択、フォーカス、カーソル）まで考慮されていますか？	ブラウザーのデフォルトの挙動が残っています	柱 7 — ブランドに合わせた選択表示、デザインされたフォーカス（カーソルは任意）
CLS はほぼゼロで、LCP は 2.5s 未満ですか？	パフォーマンスが品質を損なっています	柱 6 — フォントのサブセット化、WebP/AVIF、transform/opacity のみを使用
すべてのアニメーションに「なぜ動くのか」という理由がありますか？	動きが装飾的です	柱 3 — 物語性やガイダンスのない動きを削除します
フォーカス状態は美しさとアクセシビリティの両方を満たしていますか？	どちらか一方を犠牲にしています	柱 7 — WCAG の視認性要件を満たし、ブランドに合ったインジケーター

さらに読む

• タイポグラフィのデザイン James Craig 著 -- タイポグラフィの原則と階層についての基礎的な書籍です
• グラフィックデザインにおけるグリッドシステム Josef Muller-Brockmann 著 -- グリッドを基盤とした構成に関する決定版です
• タイポグラフィの基本 Robert Bringhurst 著 -- リズム、プロポーション、技術について記した、タイポグラファーのバイブルです
• 色彩の相互作用 Josef Albers 著 -- 色の知覚とコントラストについての必読書です
• レイアウトの基本：グリッドを活用するためのデザイン原則100 Beth Tondreau 著 -- グリッドを活用したレイアウトの実践的な原則です
• Awwwards Annual：世界中のベストウェブサイト365選 -- 10/10の完成度を測る、毎年刊行されるベンチマーク集です

著者について

このスキルは、世界で最も多くの賞を受賞しているデジタルエージェンシーの手法を取り入れています。Locomotive（モントリオール -- Locomotive Scroll の開発元で、モノクロームの緊張感と大胆なタイポグラフィに精通）、Studio Freight（ニューヨーク -- 人を引きつけるインタラクションと独自のカラーパレット）、AREA 17（ニューヨーク／パリ -- コンテキストに応じたデザインシステムとエディトリアルレイアウト）、Active Theory（ロサンゼルス -- WebGL と没入感のある3Dストーリーテリング）、Hello Monday（コペンハーゲン／ニューヨーク -- Spotify、Adidas、Google 向けの遊び心あるインタラクション）の手法が含まれます。さらに、Dogstudio、Tonik、Instrument、Resn、そして Awwwards、FWA、CSS Design Awards、Webby の受賞者を含む幅広いコミュニティからもインスピレーションを得ています。