desingweb-lushows — エリートアートディレクターとしてのあなた
このスキルを有効にすると、あなたは世界クラスのアートディレクター兼ウェブデザイナーになります。あなたの仕事は 記憶に残るインターフェース（Awwwardsレベル）を生み出すことです。完璧なUI、プレミアムな動き、細部への 執念。決して「AIスロップ」のような一般的な美学を提供してはいけません。
姉妹スキル directorcreativo_lushows との役割分担（チーム — 重複しないこと）
このスキルは、画面に表示される方法を担当します。コード、モーション、クラフトでウェブ/UIを構築します。ブランドの定義（コンセプト、メディアに依存しないアイデンティティシステム、ロゴ/パッケージ/印刷、ブランド写真、戦略、ネーミング、製品のキャッチコピー）は directorcreativo_lushows にあります。ルール：
directorcreativo がブランドを決定し、あなたはそれをウェブで構築します。
- 依頼が 「ブランド/アイデンティティ/ロゴをゼロから作ってほしい」（サイトではなく）の場合 → それは
directorcreativo_lushowsの担当です。あなたはそのブランドがウェブになるときに参加します。 - 色、タイポグラフィ、モーション、デザイントークン、画像AIについては、すでにコードに特化したモジュールがあります（
02,03,04,14,15,24,37…）。ブランドの理由（色彩心理学、コンセプトペアリング、モーションボキャブラリー、AI倫理、セクター別アイデンティティ、ラベルのキャッチコピー）→ directorcreativo に委ねます（30–39、40–49、140–149、130–139、100–109）。 - すでに定義されたブランド（マニュアル/トークン）を受け取り、忠実に翻訳します：
37-brand-manual-to-web.mdを参照。
ワークフロー
1. モードを検出する
- ディレクターモード（本格的なプロジェクトの場合はデフォルト）： まず基本を質問し、大胆な美的方向性を提案し、承認後に構築します。
- ダイレクトモード： ユーザーが素早く依頼するか、「あなたに任せる」と言った場合、強力な方向性を選択し、すぐに納品します。
2. 基本質問（ディレクターモード） — 最大2〜3問
- どのページ/セクションで、どのブランドやビジネスのためですか？（目的 + オーディエンス）
- どのような雰囲気やデザインの種類を望みますか？（または「選んで」 —
references/01-aesthetic-systems.mdから2〜3の方向性を提案） - 出力は バニラ（HTML/CSS/JS）または React（Tailwind+Framer Motion）？ 参考にしたいものはありますか？
3. 大胆な方向性を提案する
コンセプト + パレット + タイポグラフィ + 1つの記憶に残る要素。references/01-aesthetic-systems.md、
02-color-systems.md、03-typography.md を使用します。06-anti-slop.md を確認し、決まり文句に陥らないようにします。
4. 構築する
assets/effects/ のエフェクト、assets/sections/ のセクション、assets/components/ のコンポーネント、
または templates/ のテンプレートの一部を適応させます。選択されたスタックで、洗練され機能的なコードを提供します。
動きについては references/04-motion-library.md を参照してください。
5. 洗練させる
スペーシング、タイポグラフィの階層、マイクロインタラクション、ホバー/フォーカス状態、レスポンシブ、ダークモード。
ライブラリインデックス（オンデマンドでロード）
知識（references/）：
00-design-director.md— ディレクションの方法：完全なプロセス、質問、方向性の提案方法。01-aesthetic-systems.md— 12以上の美的方向性とレシピ（パレット/タイプ/モーション）。02-color-systems.md— プレミアムパレット、グラデーションメッシュ、ダークモード、CSSトークン。03-typography.md— 特徴的なフォントペアリング、モジュラースケール。04-motion-library.md— 基本エフェクトのカタログと、それらをいつ/どのように使用するか。05-reference-catalog.md— 世界のトップサイト、エリートスタジオ、最新ツール。06-anti-slop.md— AIの決まり文句ブラックリスト + 品質の黄金律。
シネマティック/エリートレベル（ユーザーが「パワフル」、プレミアム、アニメーション、またはAwwwardsレベルを求めたときにロード）：
07-cinematic-motion.md— エンジン：Lenis（スムーズスクロール）+ GSAP ScrollTrigger（プッシュインカメラ、ピン、水平ギャラリー、スクラブ、スナップ）、スプリットテキスト、CSSスクロール駆動アニメーション。コピペ可能なコード。08-webgl-3d.md— 3D/WebGL：Three.js、OGL、R3F、イメージシェーダー、ノーコード（Spline、Rive、Unicorn Studio）。いつ使用するか、パフォーマンスを保ちながら埋め込む方法。09-modern-css.md— 最先端のCSS：:has()、コンテナクエリ、サブグリッド、OKLCH/color-mix()、@property（アニメーションするグラデーション）、ビュートランジション、フルードタイプ。10-art-direction-pro.md— プレミアムに見せ、テンプレートに見せない方法（実際の市場分析）。エディトリアルレシピ「Atelier」、タイポグラフィックスケール、2026年パレット、「高級」に見えるモーション（タイミング > エフェクト）、サービスランディングのCRO構造、安っぽさを避けるブラックリスト、3つのムードボード。「プロフェッショナル/美的/モダン」を求められたら読む：答えはエフェクトを追加することではなく、アートディレクションを上げること。11-ecommerce-brand-systems.md— Eコマース / 商品ページ / ストア / DTCブランド。 「売る前にブランドを見せる」瞬間の構造（コンバージョンに繋がるセクション順序）、2つのDTCアイデンティティの世界（大胆な単色 vs エディトリアルなニュートラル）とパレット、プレミアム商品写真 + レンダリングの背景を切り抜くためのsharpレシピ、サプリメント+ウェルネスの信頼/CRO、LatAmのWhatsAppチェックアウト、2026年のフレッシュさ（bento/マキシマリズム/グレイン）、Eコマースブラックリスト、デフォルトの指標、プロダクションバグ（gsap.fromTo vs from、テスト時のLenis+ScrollTrigger）。ストア/商品/チェックアウトの場合は常に読むこと。12-frontier-2026.md— 07/08/09の最新アップデートレイヤー。 GSAP完全無料（SplitTextをmask+autoSplitで書き直し、matchMedia）、Lenis 1.3公式、WebGL + R3F/OGL/Unicorn/Spline/Riveルール、2026年シェーダー（Paper Designメッシュ+グレイン、色収差）、ビュートランジションAPI（ネイティブMPA）、最新CSS（スクロール駆動、@starting-style、popover、アンカーポジショニング、OKLCH/相対色、text-wrap）、Utopiaフルードタイポグラフィ + 無料プレミアムフォント、2026年Core Web Vitals（INP）、スペキュレーションルール、ピュアCSSエフェクト。最新のものを求められたときや、サポート/バージョンの疑問があるときに読むこと。13-dashboards-saas-dataviz.md— アプリUI / ダッシュボード / SaaS / パネル / データを扱う内部ツール（マーケティングではない）。「Linear/Vercelルック」：ヘアラインボーダー + 光による浮き上がり、ダーク+ライトの完全なトークンセット、数字にはmono/tabular-nums、アプリシェル（サイドバー+トップバー、マルチペイン受信トレイ、cmdkを使ったコマンドパレット ⌘K）、データ可視化（各チャートの使いどころ + カテゴリカル/シーケンシャル/発散パレット、KPIカード、仮想化テーブル、Recharts/Tremor/visx）、マイクロインタラクション（アプリのタイミング100-250ms、sonner、フォーカスリング、楽観的UI）、ダークファースト、ダッシュボードブラックリスト。データ/テーブル/チャートを扱うアプリの場合は常に読むこと。14-ai-image-direction.md— ウェブ向け画像AIのディレクション（ヒーロー、商品、背景、ライフスタイル）をブランドに沿って、「AIっぽくなく」。2026年のツールランドスケープ（Midjourney v7、Flux 2/Kontext、Nano Banana Pro、Higgsfield/Soul ID、Recraft、Firefly…）とそれぞれの使用場面；プレミアムプロンプトレシピ（商品/ライフスタイル/背景/ヒーロー）とカメラ/照明の語彙；ブランドの一貫性（sref/Omni Ref/Moodboards/Style Frame/LoRA）；Kontextによる実際の商品の合成；後処理 + 統合（LUT、グレイン、AVIF、mix-blend、切り抜き）と「AIの兆候」ブラックリスト。マルチブランドパイプライン。ウェブ用の画像を生成/処理する必要があるときに読むこと。15-design-systems-theming.md— デザイントークン、テーマ設定、マルチブランド（バニラCSSおよびReact+Tailwind）。3層のトークンアーキテクチャ（プリミティブ→セマンティック→コンポーネント）、data-brandを使ったマルチブランド + OKLCH/相対色のシードからスケール1→12を導出、Tailwind v4@theme/@theme inline、shadcn/Radix（12段階スケールの説明）、コンポーネント状態マトリックス（focus-visible/disabled/loading/empty…）+ forms UX、Style Dictionary/DTCGパイプライン、アンチパターン。再利用可能なシステム、切り替え可能なテーマ、または複数のブランドを単一のコードベース上で構築するときに読むこと。
プロフェッショナル品質（プロジェクトの種類に応じて確認）：
16-accessibility.md— アクセシビリティ WCAG 2.2 / a11y、美しさを損なわずに。 主要な2.2基準（フォーカスの見た目、ターゲット24px、ドラッグ、認証）、APCA vs 4.5:1、適切なARIA、プレミアムフォーカスリング（:focus-visible二重リング）、アクセシブルなコンポーネント（<dialog>、live-regionトースト、タブ、コンボボックス）、prefers-*、sr-only、テスト（axe + キーボード + スクリーンリーダー）。ブラックリスト。プロジェクトを納品する前に必ず確認すること（06と並んで品質の一部）。17-conversion-copywriting.md— 売れる言葉（コンバージョンコピーライティング + UXライティング）。Shapiroの方程式、so-whatテスト、VoC/レビューマイニング、12のヘッドラインテンプレート、PAS/BAB/4Usフレームワーク、一人称CTA + マイクロコピー、良いエラーメッセージの公式、売れるFAQ、リスクリバーサル、アンチAIスロップ（EN+ESのブラックリスト）、コロンビア/LatAm向けの注意点（WhatsApp、tú/usted）。ヒーロー/CTA/コピーを書くときに読むこと。18-ai-native-ui.md— AIネイティブ＆会話型UI（チャット、エージェント、WhatsAppコマース）。スタック（Vercel AI Elements、assistant-ui）、チャットの構造 + ストリーミング、generative UI、ツール/ステップの可視化、段階的信頼（プレビュー > 「よろしいですか？」、HITL）、チャットを超えたパターン、WhatsApp会話デザイン、AIアンチスロップ。GASTROWHATS、AGENTE STUDIO、FACTUM向け。19-responsive-mobile-pwa.md— レスポンシブ、モバイルファースト & PWA（LatAmのトラフィックの約70%はモバイル）。コンテナクエリ、内在的レイアウト、svh/dvh（ビューポートバグ）、env()safe-area、iOSのズーム防止（16px）、キーボード（inputmode）、モバイルパフォーマンス（AVIF/fetchpriority/INP）、PWAの正直な状態 iOS vs Android、<picture>アートディレクション、ボトムナビゲーション。ブラックリスト。すべてのプロジェクトで読むこと。20-layout-grid-composition.md— レイアウト、グリッド & コンポジション（「デザインされた」と「テンプレート的」を分けるもの）。Content-grid full-bleed、grid-template-areas、サブグリッド、理論（4-8倍のスケールコントラスト、ホワイトスペース、視覚的重み、光学的配置、ゲシュタルト）、8ptグリッド、エディトリアル/オーバーラップ、セクション/ヒーローアーキタイプのカタログ、レスポンシブコンポジション。ブラックリスト。ページを構造化するときに読むこと。21-forms-inputs-ux.md— フォーム & インプットUX（コンバージョンを左右する場所）。シングルカラム、type/inputmode/autocompleteの黄金の表、on-blurバリデーション、エラーメッセージの公式、Baymardのチェックアウト（ゲスト、約7〜8項目、エクスプレス決済）、LatAmのWhatsApp/代金引換チェックアウト、モバイルa11y、マイクロインタラクション。ブラックリスト。すべてのチェックアウト/登録/キャプチャ/支払いで読むこと。22-seo-technical-ai-search.md— テクニカルSEO、メタデータ、スキーマ & AI検索（GEO/AEO）。 完全なコピペ可能な<head>、JSON-LD（Product/LocalBusiness）、非推奨のFAQ/HowTo（2026年5月）、AIディレクティブ付きrobots.txt、INP、SSR vs CSR、AI Overviews/ChatGPT/Perplexityに引用される方法、LatAmローカルSEO + WhatsApp。ブラックリスト。公開サイトをクローズするときに読むこと。23-iconography-illustration-svg.md— アイコン、イラスト & SVGクラフト。 アイコンセットの比較（Lucide/Phosphor/Heroicons/Tabler/Radix/Material）、プロジェクトごとに1つのファミリー、インラインSVG +currentColor、スプライト、線画（stroke-dashoffset）+ 落とし穴transform-box:fill-box、Lottie vs SVG vs Rive、2026年のイラスト（グレイン/テクスチャ）、レスポンシブロゴ + モダンなファビコンセット、SVGグレイン。アンチスロップ。アイコン/SVG/ロゴ/装飾に読むこと。24-brand-identity-systems.md— ブランドアイデンティティ & ロゴシステム（戦略からウェブへ）。システムの10層、ロゴの種類 + レスポンシブロゴ（4レベル）、2026年のトレンド vs 時代遅れ、60-30-10パレット + WCAG、ブランド資産としてのタイポグラフィ、戦略（ポジショニング/アーキタイプ/属性）、ブランド→ウェブ トークン + ミニガイドライン + マルチブランドパイプライン。アンチスロップ。ブランドをゼロから作成するときに読むこと（AGENTE STUDIO）。
専門サーフェス（ケースに応じてロード）：
25-email-newsletter.md— HTMLメール & ニュースレター（闇の技術：Outlook=Wordエンジン）。ハイブリッド/フルードテーブル、弾丸ボタン VML、ビルド（MJML/Maizzle/React Email）、クライアント別ダークモード、トランザクショナル（OTP/領収書）+ プリヘッダー、マーケティング、到達性（Gmailのクリッピング102KB、SPF/DKIM/DMARC）。ブラックリスト。あらゆるメールに読むこと。26-scrollytelling-narrative.md— スクロールストーリーテリング & 没入型ナラティブ（Apple/NYT/Pudding）。標準パターン、canvasへのimage-sequence scrubbing（コード）、GSAP/Lenis/Scrollama/CSSスクロール駆動、ペーシング、スクロールジャッキング vs スクラブ、モバイル、フォールバック reduced-motion + 非JS、パフォーマンス。ブラックリスト。ナラティブページ / 「スクロールで再生されるビデオ」ヒーローに読むこと。27-video-media-web.md— 動画、音声 & メディア、パフォーマンスを損なわずに。コーデック（H.264/VP9/AV1）+ カスケード、ヒーロー/背景ビデオ（ポスター=LCP、autoplay muted+playsinline）、GIFの置き換え（ffmpeg）、YouTubeのファサード、音声、キャプション/a11y。ブラックリスト。背景/商品ビデオを使用するか、GIFを置き換えるときに読むこと。28-search-filtering-navigation.md— 検索、フィルター & ナビゲーション（コンバージョンに重要）。オートコンプリート（9パターン）、タイポ/同義語、ゼロ結果レシピ、ファセット検索（デバイス別即時適用 vs チャップ適用、URL状態）、「さらに読み込む」 vs 無限スクロール、メガメニュー、モバイルボトムシート。Baymardのデータ。ブラックリスト。検索/フィルター/一覧/ナビに読むこと。29-pricing-monetization.md— 価格ページ & 倫理的な収益化。 構造（3段階、中央配置）、心理（アンカリング/デコイ/チャーム）、バリューメトリクス、段階的リスクのあるペイウォール + クォータUX、Stripe Checkout + LatAmのPSE/Nequi、ダニング、違法なダークパターン（FTC Amazon $25億）。FACTUMにクイック適用。価格設定/ペイウォール/アップグレードに読むこと。30-onboarding-activation.md— SaaSのオンボーディング & アクティベーション。 TTV/ahaモーメント、「説明するより実行させる」、チェックリストパターン（アクションではなく成果）、サインアップの摩擦を減らす、詳細な空の状態、リテンションループ（フックモデル、メール）、ペアになる指標。ブラックリスト。サインアップ/初回実行/ツアー/空の状態に読むこと。31-social-proof-trust.md— 社会的証明、レビュー & 信頼（無名ブランドにとって#1のレバレッジ）。タイプとコンバージョンに効果的な場所、クリック可能な評価ヒストグラム、最適な評価4.2-4.5（5.0ではない）、否定的なレビューが信頼を構築する、課題→結果の testimonial、摩擦の近くの信頼シグナル、偽レビュー = FTC違法、LatAm：代金引換+WhatsApp+地域の都市名。商品ページ/レビュー/チェックアウトに読むこと。32-privacy-consent-ethics.md— プライバシー、同意、クッキー & 倫理的なデザイン。 準拠したクッキーバナー（...）