web-design

Webデザイン

ブランドの定義済みビジュアルシステムを実際のウェブサイトに適用し、コードを実装して公開します。カスタムコードを使って、デザインと構築を同時に進めます。これは最初のApplicationスキルです。creative-directionで定めたカラーの役割、タイポグラフィのルール、モチーフ、シグネチャー要素を、実際のコピーを軸にした、コンバージョンにつながるページへと形にします。

まずdesign-principlesを読んでください。このスキルでは、そのルールをブラウザー上で実践します。役割は階層を設計すること、メッセージを守るのは抑制、「競争ではなくコントラスト」、「理由を説明するか、デフォルトのままにする」が基本です。デザインされたサイトと、単に組み立てられたサイトの違いを生む要素の大半は、ここにあります。

手順における位置づけ：creative-direction（システム）とlogo-design（マーク）の後に続く、Applicationスキルの最初の段階です。ブランドアイデンティティを適用しますが、定義はしません。媒体はカスタムコードです。このスキルでは、WebflowやFramerではなく、オーダーメイドのHTML/CSS（およびプロジェクトで使われているフレームワーク）を構築します。

最初の診断 — ブランドは確定済みか、それとも作り直しが必要か？

何よりも先に、ブランドの現状を診断します。.agents/design.md、.agents/brand.md、.agents/product-marketing.mdを開いてください。この段階では、3つすべてが揃っているはずです。 そして、次の質問をします。

確定済みのブランドを適用するのか、それとも一から作り直すのか？

クライアントが使う平易な言葉で、進め方は4つあります。

• 既存の要素を洗練する（「ブランドは気に入っていますが、サイトが弱いだけです」）→ Optimization。このまま進めます。このスキルが担当する範囲です。
• 軽いクリエイティブディレクション（「名前とロゴはそのまま。書体、色、グラフィックを新しく」）→ 軽度のEvolution。design.mdに新しい選択がすでに記録されている場合のみ進めます。記録されていなければ、変更点が未定義です。まず軽い調整を行うため、creative-directionに戻します。
• 全面的なリブランド（「すべて新しく」）→ Revolution → 作業を止めて、creative-directionに戻します。 システムが定義されていない状態でサイトをデザインしてはいけません。
• 大幅なEvolution（中核となるシステムが実際に変わる）→ こちらも前の工程に戻します。

このルールは、ユーザーがすでにロゴを用意している場合にも当てはまります。周囲のシステムを伴わないマークだけでは、一貫したサイトを構築するには不十分です。前の工程に戻ってもらいましょう。判断の目安は、ビジュアルシステムを定義または変更する場合は前の工程に戻し、確定済みの場合にのみ進めることです。

.agents/design.mdがない場合、それが「前の工程に戻る」合図です。まだ適用できるシステムがありません。creative-directionに進んでください。.agents/product-marketing.mdがない場合、またはページにコピーがない場合は、まずマーケティングライブラリのcopywriting／website-copyに進みます。サイトはコピーを軸に作るものであり、その逆ではありません。

まずコピー — システムは舞台であり、主役ではありません

最も重要な入力は、言葉です。.agents/product-marketing.mdにあるコピー（対象読者、トーン、ポジショニング、各ページのコピーそのもの）を読みます。デザイナーの役割は、伝える内容に適切な強調、楽しさ、喜びを加えることです。テンプレートを作って、その空欄にコピーを流し込むことではありません。ワイヤーフレームから考え始めるのは、ページが組み立てにすぎないことの最も分かりやすい兆候です。コピーがまだなければ、まず書きましょう。

サイズはテンプレートではなく、コンテンツに合わせます。 見出しの大きさは、実際のコピーに応じて決まります。たとえば、2行目で完成するフックの文（入力に合わせて続く文や、切り替わるフレーズ）なら、必要なのは巨大な1行見出しではなく、小さめの見出しです。後に続く内容のないフックだけのヒーローは、未完成に見えます。手元にあるコンテンツをデザインし、固定されたヒーローの型に無理に押し込まないでください。

ビジュアルシステムはメッセージを支えます。デザインもメッセージを支えます。サイトは舞台であり、コピーが主役です。

既存のサイトを参考にする場合は、そのサイトに忠実に再現してください

公開中のサイトをリデザインする場合や、参考サイトの「ような」ものを作る場合は、そのサイトで実際に何が起きているかを確認してください。記憶を頼りにおおよそで再現してはいけません。手順の全容はreferences/faithful-replication.mdをご覧ください。

• すべてのセクションを移行してください。 参照元を上から下まで確認し、各セクションを正しいコピー、正しい順序のまま移し替えます。ターミナル登録、機能セクション、軌道を描く製品ビジュアルなどをひそかに省いた「リデザイン」は、リデザインではなく別のサイトです。
• サイトが促しているアクションを再現してください。 サイトが訪問者に「何をしてほしいのか」を読み取り、言葉だけでなく、その仕組みを再現します。ヒーローでURLを入力して無料プランを受け取るよう促しているなら、リデザインのヒーローにもそのURL入力欄とボタンが必要です。ページの中心となるのは、主要なアクションです。
• 実際のアセットを使ってください。 インテグレーションやパートナーのロゴは実在し、利用できます（Relumeやブランドアセットのライブラリ、参照元サイトのマークアップ、simple-iconsのようなブランドSVGのソースなど）。実際のロゴを使ってください。アイコンとテキストで代用してはいけません。また、コントラストの低いロゴ一覧を公開してはいけません。
• ビジュアルが伝えるべき内容を正しく表現してください。 製品のイラストは、製品が「何をするか」を伝える必要があります。たとえば、装飾にとどまらず、執筆、最適化、リリース、調査といった作業がエージェントの「周囲を」巡る様子を描く軌道などです。

誰かが実装するためのカンプを作るのではありません。作りながらデザインします。デザイン上の判断そのものがコードです。実際に使える、本番品質のフロントエンドを出力してください。

• プロジェクトに既存の技術スタックがある場合は、それに合わせてください（リポジトリの規約に従い、Next.js / Tailwind / shadcnを使用）。ない場合は、すっきりとした自己完結型のHTML/CSSを作成してください。原則として、フレームワークに依存しないものにします。
• WebflowもFramerも使わないでください。 このスキルが存在するのは、作業がカスタムコードへ移行したためです。職人技の求める限り作り込める独自のマークアップを使い、ビルダーツールの制約を受けずに実装します。
• 本番環境で固定pxを使わず、余白にはremを使い、clamp()で可変にしてください。 水平方向のパディングはパーセンテージ基準にし、セクションのパディングは流動的にします。references/craft-details.mdをご覧ください。
• ユーザーがプラットフォームでの構築（Webflow/Framer）を明示的に希望した場合に限り、マーケティングライブラリのwebsite-build-*スキルを相互参照してください。これは、このスキルが従来の方法から移行するために作られた中での例外です。

システムを適用する

.agents/design.md からシステムを取り込みます。再解釈したり、独自のものを付け加えたりしないでください。

0. 固定されたロゴを配置し、決して作り直さないでください。 logo-design スキルが作成した正規ファイルからロゴマークを使います。.agents/assets/logo/logo-lockup.svg（ナビゲーション、フッター）、logo-icon.svg（ファビコン、狭いスペース）、暗い背景や単色背景には -inverse ／モノクロのバリエーションを使用します。ロゴは固定されたひとつの要素です。ワードマークを自分で組んだり、余白を独自に決めたり、アクセントカラーに合わせて色を変えたり、切り抜いたり、ボックスに入れたり、最小サイズ未満に縮小したりしないでください。周囲のクリアスペースも確保してください。必要なバリエーションがフォルダーにない場合は、logo-design に戻ってください。CSS で独自に作らないでください。
1. 役割に応じて色を使います。 背景、テキスト（プライマリ／セカンダリ）、アクション／CTA、サポートです。各色は5段階にとどめ、10段階にはしません。定義済みのトークンを使ってください。
2. CTA の色は意図的にひとつだけ選び、常に統一します。テキストやグラフィックには使いません。 前進を感じさせる単色（経験則では緑または青）を選び、あらゆる場所で主要アクションに使います。見出し、アイコン、装飾に使う色とは色相を明確に分けてください。そうしなければボタンが目立たず、周囲に溶け込んでしまいます。実際の CTA にだけ使ってください。 見出しや装飾的なアクセントには使いません。繰り返しの強調には別のブランドアクセントを使います（こちらも控えめに）。前進を示す色をラベルやグラフィックに使い始めると、「行動する」という意味が失われます。非インタラクティブな要素をボタンのように見せることも避けてください。偽の CTA は、本物の CTA の効果を損ないます。また、CTA には他と区別できる形状を与えます。すべてのカードと同じ角ばった長方形ではなく、ピル型や角丸にして、ひと目でアクションだとわかるようにしてください。
3. 役割に応じてタイポグラフィを使い、競わせるのではなくコントラストをつけます。 ディスプレイ、見出し、本文には、それぞれ明確な役割を持たせます。安易に太字にしないでください。本文はレギュラー／ブックのウェイトとし、より太いウェイトは強調に値する箇所に限って使います。見出しの行高は1.1～1.3、本文は1.5～1.6にします。セカンダリテキストは見出しよりも淡い色または低い不透明度にし、同じ書体の中でも階層をつけます。ページ全体の本文コピーを、セカンダリテキストの色に一括で変更してください。 セクションごとに変更しないでください（references/craft-details.md → 体系的に作業する、を参照）。
4. モチーフでブランドを表現します。ただし、メッセージを優先すべき場所では控えめにします。 シグネチャー要素をテクスチャ、パターン、または繰り返しのディテールとして使います（独自性を実際の適用後も保つべき箇所です。「デザイン原則」を参照）。ヒーローでは控えめにします。 見出しや主要アクションの背後に複雑なモチーフを置くと、ブランドではなくノイズになります。メッセージと CTA を主役にし、後続のセクションではモチーフをより明確に展開します。
5. アイブロウは控えめに使います。 すべてのセクションにモノスペース／大文字のキッカーを付けると雑然とし、階層を築くどころか平坦にしてしまいます。セクションにラベルが本当に必要な場合にだけアイブロウを使います。ほとんどのセクションは見出しから始めてください。
6. システムの意図に沿って、奥行き、光、サーフェスの切り替わりを表現します。 平坦な shadow-md ではなく複数レイヤーのシャドウスタックを使い、背景を徐々に変化させ、くっきり分断された帯状のセクションではなく、流れに応じて暗色と明色を切り替えます。

セクションごとに構築する — それぞれに専用の場を与える

ページ全体をひと続きの流れとして作業し、各セクションを単独で扱わないでください。セクションごとの詳しい手引きはreferences/section-patterns.mdを参照してください。

• 各セクションの役割を1つに定め、その役割を担う要素に専用の場を設け、役割に見合った大きさにします。ポジショニングを示す一文には舞台を、信頼を示す帯にはヒーローの隅ではなく全幅の場を、ヒーローのオブジェクトにはスポットライトを与えます。補足情報は控えめにします。
• リズムを作るのはセクションの「種類」の語彙であり、列数ではありません。 本質的に異なるセクションの種類を、それぞれ異なる「メディア」として切り替え、同じものを二度使わないでください。非対称なヒーロー、画面全幅に広がる人物／動画の見せ場、イラスト／対比のビート、特大の箴言、スクロールに合わせて固定表示されるストーリーテリング（見出しを固定し、その下で巨大なゴースト数字とともに文言を切り替える演出 — motion-designと連携して構成します）、色付きカード、スポットライトを当てたオブジェクトの登場、カルーセルなどがあります。レイアウトだけでなく、メディアを変えてください（UI → 動画 → イラスト → 写真 → カード）。そのうえで、一本の通奏低音となるテクスチャと厳格な配色ルールで多様性を統一し、スケールの対比（ゴースト数字と極小のコピーなど）を使い、大きな見せ場の合間には静けさを残します。失敗のパターンは、一つの楽器だけで曲全体を演奏することです。列数だけを変え、同じカード／パネルの表現を繰り返します。表現の全容はreferences/section-patterns.mdを参照し、テンポの作り方はconversionfactory.coを参考にしてください。
• テキスト主体の各セクションには、ビジュアルを組み合わせます。 画像が必要なテキストのみのセクションは、未完成に見えます。平坦なスクリーンショットや何もない状態ではなく、優れたマーケティングサイトのように、重なり合うレイヤー状のモックアップで製品を見せます。デバイス、カード、少し傾けたステッカーを使い、実際の奥行きを出します。
• 統合します。 中身のあるセクション3つのほうが、薄いセクション5つより効果的です。余白は単なる息継ぎではなく、強調表現です。
• CTA、ロゴ、ホバー状態は装飾ではなくコンテンツです。 プライマリCTAとセカンダリCTAは、ホバー時を含むすべての状態で明確に区別します。パートナー／連携先のロゴには、正規化された信頼を示す専用の領域を設けます。実際のロゴを使い、ピクセル単位ではなく視覚上の大きさを揃え、配色に統一感を持たせ、実際に読み取れるだけのコントラストを確保します。

モーション — ブランドの動きの個性を受け継ぎ、適切に引き継ぐ

モーションはシステムの一部であり、最後に添える飾りではありません。 色や書体と同じく、その個性はブランドに由来します。.agents/design.mdと目指す感情からモーションの個性を読み取ります。遊び心があり風変わりなブランドには、弾むようで寛大、頻繁なモーションがふさわしく、真面目で高級感のあるブランドには、控えめで制御された、まばらなモーションがふさわしいです。「洗練」は普遍的な目標ではありません。 遊び心のあるブランドのモーションを、上品さを意識して最小限に抑えると、ありきたりなものになってしまいます。ブランド独自の感覚を、既定のスタイルで置き換えてはいけません。

次に、それぞれのアニメーションが担う役割に応じて作業を分けます。ここで対応するものと、motion-designに引き継ぐものの境界は次のとおりです。

• 機能的／UIモーション — ここで実装します。 ホバーとフォーカスの状態、押下フィードバック、CTAの各状態、開閉やメニューの遷移、セクションの表示演出などです。このモーションには、フィードバック、方向づけ、因果関係を伝える役割があります。ブランドにどれだけ遊び心があっても、実用性を重視します。素早く、目立たず、邪魔にならないようにします。
• 表現的／ストーリーテリングのモーション — motion-designに引き継ぎます。 ページ読み込み時の振り付けられたシーケンス、スクロールに合わせて固定表示されるストーリーテリングのビート、製品ビジュアルならではの動き、ヒーローの見せ場、そして目的そのものが感情を生み出すことにある、コンテンツ固有のアイデアなどです。ブランドの個性を発揮できるのはここであり、12の原則が効果を発揮するのもここです。

ここまでに築く基準

マーケティングサイトで特に重要な motion-design のルールは次のとおりです。サイトに直接適用してください。適切に仕上げるために、スキル全体を読む必要はありません。

• 名前付きのイージングセットを用意し、基本は ease-out にします。 生の linear（最も目立つ素人っぽさの表れ）や、何にでも同じ ease を使うのではなく、カスタムカーブを使います。入場も退場も、減速しながら静止する動きのほうが自然に見えます。
• UI のトランジションは約 300ms 未満にします。 ホバーや押下は 100〜200ms 程度にし、それより遅くするなら、待つ価値がある動きにします。移動する要素の質量に合わせて時間を調整します。小さいものは速く、大きいものは遅くします。
• 押下時のフィードバックを加えます。 :active でわずかに縮小（約 0.97）させると、インターフェースが操作に反応していると感じられます。
• 入場アニメーションは重ねて、段階的に表示します。順番待ちにはしません。 グループ化した要素はタイミングを共有し、先の要素が終わるまで待つのではなく、短い遅延（約 40〜80ms）でずらします。このひと工夫だけで、「まあまあ」から「高級感のある仕上がり」へ大きく近づきます。
• アニメーションには transform と opacity のみを使います。 width／height／top／left／box-shadow のアニメーションはレイアウトや描画を発生させ、動作がぎこちなくなります。そのぎこちなさは、安っぽい実装に見えてしまいます。
• 表示アニメーションには階層をつけ、すべてを同じように扱わないようにします。 すべての要素を同じフェードアップにするのは、よくある手抜きの定番です（references/web-slop.md）。問題は量ではなく、一様であることです。メッセージを伝える要素を表示し、ほかは動かさずに残します。
• prefers-reduced-motion には必ず対応します。 重要なアニメーションにはすべて、（不透明度のみ、または即時表示の）軽減版を用意し、この設定が有効な場合は環境的な動きや視差効果を完全に止めます。

動きが本格的になったら GSAP を使いましょう。 ホバー、フォーカス、押下、シンプルな表示アニメーションには CSS トランジションと @keyframes が適しています。プラットフォームに標準で備わっている機能に、わざわざライブラリを追加する必要はありません。ただし、滑らかで複雑な振り付けのある動きには、GSAP が利用できる最良の選択肢です。Webflow が引き継いで以来、すべてのプラグインを含めて完全に無料になっています。スクロールに連動するシーケンスやピン留めには ScrollTrigger（上記のピン留めされたスクロールストーリーテリングに最適です）、単語や行を段階的に表示するには SplitText、共有要素やレイアウトのトランジションには Flip が使えます。タイムラインを使うと、手作業で CSS の遅延を調整するより、重なり合う段階的な動きをはるかに簡単に制御できます。また、負荷の高いシーケンスでは、補間が目に見えて滑らかになります。

十二の原則、テクニックのツールキット、イージング／時間のトークン、そして動きの手抜きを見分けるチェックリストをまとめた制作ガイドは motion-design にあります。標準的な仕上がりにとどまらず、表現力のある動きをサイトに取り入れたいときは、いつでも参照してください。

ツールと参考資料 — 接続されているものを使い、使えない場合は適切に切り替える

実際のツールを活用すると、ビルドが速くなり、リズムも豊かになります。ただし、ツールが見つからなくても作業を止めず、次の選択肢へ切り替えてください。 まず .agents/brand.md → Toolkit を確認し、オペレーターが利用できるもの（ページのリッチメディアを支える画像生成ツールも含む）を把握してください。新たに接続されているものを見つけたら、内容を書き戻してください。画像素材は art-direction ライブラリ（.agents/assets/imagery/approved/）から使用してください。そこにある素材を配置し、新しい素材が必要な場合は、場当たり的に探すのではなく art-direction に依頼してください。

• Relume MCP (接続されている場合に優先する高速化ツール) — サイトマップ（トップレベルページと親子ページ）、コンポーネントライブラリを使ったワイヤーフレーム（レイアウトに変化をつけ、リズムを生み出します）、基本色から5段階の色合いを自動展開し、CTA専用の常時使用色を設定するスタイルガイドを生成します。これらはすべてビルドに取り込めます。共通の形式を持つページはグループ化してください（すべてのソリューションページを同じ構造にし、内容に変化をつけます）。
• frontend-design スキル — Relume が利用できない場合に、独自性があり、本番環境に対応したフロントエンドを作るために使用します。
• Claude Design — 公開済みのシステムを使ったキャンバス上での検討に任意で使用し、Claude Code に引き継ぎます。この引き継ぎはカスタムビルドの出発点であり、ビルドそのものではありません。
• web-design-guidelines — UX/UI とアクセシビリティの適合性チェックに使用します。
• Mobbin / Refero MCP — パターンの取り入れに使用します。実装に着手する前に、優れたサイトが各セクションをどう解決しているかを調べます。
• 参考サイトの取り込み — クライアントが気に入っている人気サイトを取り入れ、参考にする点と避ける点を明確にします。
• GSAP (実際のモーションには優先して使用。無料で全プラグインを利用可能) — タイムラインベースの演出、ScrollTrigger（スクロールに連動する演出とピン留め）、SplitText（テキストをずらして表示する演出）、Flip（共有要素のトランジション）に使用します。単純な状態には CSS を使い、複雑なシーケンスや真に滑らかな動きが必要な場合は GSAP を使います。上記の Motion セクションと motion-design を参照してください。
• three.js / WebGL — ブランドに本当にふさわしい、意欲的な3D表現やインタラクティブな奥行きが必要な場合に使用します（装飾目的では使いません）。

リリース前に検証する

監査と同じ一連のチェックを、自分のビルドにも実施してください。自分の思い込みではなく、ブラウザーでレンダリングしたページを厳しく検証します（design-principles → Judge Your Own Work on the Competitor's Bar を参照）。ページをレンダリングしてスクリーンショットを撮り、次の点を確認してください。

• 確定した競合サイト群を基準に、競合相手と同じ厳しさで監査カテゴリごとに採点します。 クリエイティブディレクション、色、タイポグラフィ、レイアウトの評価は4〜5点になるでしょうか？
• web-slop チェック（references/web-slop.md）を実行し、見つかったものを列挙してください。実際のページにあるお決まりの表現（太字の多用、帯状のセクション、均一なアイコングリッド、CTA色のあらゆる箇所への広がり、目分量で決めた入れ子状の角丸）を挙げます。「ここに web-slop はない」というのは反射的な判断であり、検証結果ではありません。実際に見つかったものを列挙するか、根拠を具体的に示した「なし」を提示してください。
• ロゴを隠してもブランドらしさが伝わるか確認します。 マークを隠した状態でも、構築したページからブランドを認識できますか？ 独自性がロゴだけに宿っているなら、システムを適用後も保てていません。
• レスポンシブ対応とアクセシビリティを確認します。 実際のブレークポイントを確認してください（モバイル向けの修正は追加のオーバーライドとして適用し、デスクトップの基本設定には手を加えません）。インターフェースとアクセシビリティの適合性チェックは web-design-guidelines に引き継いでください。
• モーションを確認します。スクリーンショットではなく、実際に再生して見ます。 静止画ではモーションを監査できません。ページを再生し、タイミングやイージングがブランドの個性に合っているか、それとも汎用的なイージングを使っていないか確認してください。linear になっているもの、重ねずに順番待ちになっているもの、レイアウトプロパティが原因でカクつくものはありませんか？ prefers-reduced-motion を切り替え、ページが落ち着いた動きになり、使いやすさも保たれていることを確認してください。
• コピーを確認します。 レイアウトは言葉に適切な強弱をつけていますか？ それとも、デザインがメッセージを埋もれさせていますか？

成果物

• リリース済みサイト — ユーザーのプロジェクト内にある、本番用のフロントエンドコードです。承認済みのシステムを適用し、共同で設計・構築します。
• .agents/design.md の「Application Notes」セクションに追記します（継続的に更新する記録です。creative-direction → design-doc-template.md を参照してください）。採用したコンポーネントの規約、実際に使ったトークン、システムを柔軟に適用した箇所と、その変更を標準として定着させるかどうかを日付付きで記録します。後続のページや collateral-design で判断をやり直すことなく引き継げるようにします。最初に定めたセクションは重複させず、参照してください。

必須事項

• 最初の診断を実施する。Revolution／大幅な Evolution に該当する場合は、（ロゴがすでにあっても）creative-direction に差し戻す
• .agents/design.md、brand.md、product-marketing.md を読み、システムを再発明せずに適用する
• 確定済みのロゴを .agents/assets/logo/ から配置する — 作り直し、色の変更、トリミング、枠囲み、組み直しはしない。背景に合ったバリアントを使う
• コピーを用意し、レイアウトの基盤とする — ワイヤーフレームを先に作らず、埋め草も使わない
• 既存サイトを参照する場合は、すべてのセクションを移植し、主要なアクションを再現する。実際のロゴを使用し、アイコンとテキストで代用しない
• 実際のカスタムコードを納品する（プロジェクトのスタックに合わせるか、クリーンな HTML/CSS を使う） — モックアップではなく、Webflow／Framer も使わない
• CTA 色は、テキストやグラフィックと区別できる、前進を促す単一の色とし、CTA だけに使う（見出しや装飾には使わない）。ピル型または角丸にし、使用を限定する。見せかけの CTA は作らない。強調には別のブランドアクセントを使う。5 段階の色を用意する。太字を標準にしない
• アイブロウは控えめにする。ヒーローのモチーフは落ち着かせ、メッセージとアクションを主役にする。後続セクションではモチーフを力強く展開する。ロゴを隠しても独自性が保たれるようにする
• 3 列構成だけに頼らず、意外性のあるレイアウトと多様なメディア（ベクター／写真／アイコン／イラスト）を取り入れる。テキスト中心のセクションは、重層的なビジュアルとバランスを取る
• 列の先頭を揃え、コンテンツは原則として左揃えにする（中央揃えは、本当に中央配置するブロックに限る）。各セクションを（見出しと余白で）明確に区切り、左右交互の行が連続して一体化しないようにする
• 見出しのサイズは内容に合わせる。コントラストを確認し、見出しが不自然に一語だけ次行に残らないよう調整する。画像が必要な箇所には実際の写真を使用する
• クラフトの最低基準を満たす（rem/clamp、重層的なシャドウ、視覚的な位置合わせ、入れ子状の角丸、明確に異なる CTA の状態）。グローバルな変更は体系的に行う
• モーションの特性はブランドに合わせる（遊び心のあるブランドと高級感のあるブランドは異なります。決まった既定値はありません）。機能的なモーションは実用的に保ち、表現やストーリーテリングを担うモーションは motion-design に委ねる
• モーションの最低基準を満たす — 名前付きのイージングを使い、基本は ease-out とする（生の linear は使わない）。UI トランジションは約 300ms 未満にする。押下時のフィードバックを加える。要素の出現は順番待ちではなく、重ねたり段階的にずらしたりする。transform／opacity のみを使う。リビールは一律ではなく階層的にする。prefers-reduced-motion に対応する
• レンダリングされたページを対象に、対抗的な視点でセルフ監査する（Web デザインの陳腐な定番を列挙し、「なし」で済ませない）。レスポンシブ対応とアクセシビリティを確認し、スペルと文法、OG 画像もチェックする

関連スキル

• design-principles — このスキルが適用するデザインの基本理念
• creative-direction — ビジュアルシステムを提供します（必須の前提条件）。Revolution／大規模なEvolutionの場合は、こちらに戻ってください
• art-direction — このスキルが配置する写真、イラスト、アイコン、テクスチャを提供します。新たなビジュアル素材が必要な場合は、こちらに依頼してください
• logo-design — ロゴマークを作成し、このスキルで適用します
• brand — このスキルの合格基準となるカテゴリーで監査します
• motion-design — このスキルにモーションレイヤーを重ねます。機能面／UIの土台はこちらで構築し、表現豊かな振り付け、スクロールに連動した演出、特徴的なモーションはそちらに引き継いでください（構造的に堅牢な画面が前提となるため、構築後に実行してください）
• collateral-design — 同じシステムを固定フォーマットの媒体（デッキ、印刷物、広告、ソーシャルメディア、OG画像、メール用グラフィック）に適用します
• design-critique (計画中 — 未リリース) — 公開されたサイトを、感情的な目標と許容範囲に照らして評価します
• frontend-design — ビルド高速化ツールが接続されていない場合に、独自性のある本番品質のフロントエンドを構築します
• マーケティングライブラリ：copywriting / website-copy（コピーを先に作成します）、cro（既存ページを最適化します）、web-design-guidelines（アクセシビリティ）、website-build-*（プラットフォームの構築が明示的に指定されている場合のみ）
• ツール（接続されている場合に使用し、接続されていない場合は適切に代替します）：Relume MCP（サイトマップ・ワイヤーフレーム・スタイルガイド）、Mobbin / Refero MCP（パターンの取り込み）。references/tooling.mdを参照してください