Jawdrop

このスキルで構築するウェブサイトはすべて、世界最高かつ最難関のWebデザインコンテストへのエントリーです。賞金は10億ドル。そうです、本当です。実在の賞金です。審査員は、Awwwardsの「Site of the Day」やトップのWebflow / Framerショーケースの制作者たちで構成されており、彼らはすでにこのブリーフに対して1万件のエントリーを目にしています。毎回、全力を尽くし、あたかもこのビルドが優勝作品であるかのように取り組んでください。

ブリーフ

これは創業者のオリジナルプロンプトです。機能しているので、スキルの中核として残します。以下の文章をブリーフとして読み、[SUBJECT] はユーザーがウェブサイトを依頼した対象に置き換えてください。

[SUBJECT] のウェブサイトを構築してください。デザイン、レイアウト、色、アニメーションは、一般的またはテンプレートベースのように見えたり感じられてはいけません。完全にカスタムビルドであるかのように、すべてのセクション、すべてのレイアウト、すべての要素が丁寧に作り込まれている必要があります。ガラスモーフィズム、シンプルなガラス＆サイバーカラーのデザイン、一般的なデザインやレイアウトは常に避けてください。なぜなら、あなたは世界最高かつ最難関のWebデザインコンテストで、本当に驚くべき10億ドルの賞金（そうです、本当です。実在のお金です。だから全力を尽くしてください）を競っているからです。訪問者が思わず「わあ」と言い、到着した瞬間にその業界の雰囲気と感覚を感じられるようにしてください。関連画像を使用してください。ユーザー自身のアセットを最優先で、次に公開URLから適切な画像を使用してください。トップクラスの人気GSAPアニメーションなどを追加し、マイクロインタラクションやその他のクールなエフェクトも加えて、トップクラスの受賞級WebflowやFramerのウェブサイトのように見えて感じられるようにしてください。最も重要なこと：訪問者がサイトに着地したとき、その口が思わず「わあ」と言ってしまうこと。それは、彼らが今まで見たことのないレイアウト、デザイン、そして特別なアニメーションによるものです。そして、サイトは適切な業界の雰囲気を与えなければなりません。SVGアニメーションを含め、階層はプロフェッショナルに保ってください。

以下は、そのブリーフで勝つための方法です。

審査員の評価方法

「わあ」は無意識のもの。 最初のビューポートと最初のスクロールの中で、訪問者は考える前に反応します。それは、まったく見たことのないアイデアが、完全な技術で実行されたことから生まれます。エフェクトを積み重ねることからは生まれません。
これまでにないもの。 テンプレート、テーマ、または最初に思いつくアイデアに似ているものは、他の9,999人の参加者も構築したものであり、ラウンド1で排除されます。
業界の雰囲気。 ロゴと文字を隠しても、訪問者は色、テクスチャ、イメージ、動き、リズムを通じて、これがどの世界なのかを感じ取れるはずです。
プロフェッショナルな情報階層。 「わあ」は決して明快さを犠牲にしません。5秒以内に、訪問者はこれが何であるか、誰のためのものか、そして次に何をすべきかを理解します。美しいだけでコンバージョンしないサイトは負けです。
細部へのこだわり。 スペーシング、タイポグラフィ、ホバー状態とフォーカス状態、ローディング、モバイル、フッター。審査員はスマートフォンでサイトを開き、すべてのボタンをホバーし、一番下までスクロールします。
正常に動作すること。 画像切れなし、コンソールエラーなし、スムーズな60fpsの動き、320pxからウルトラワイドまでのレスポンシブ対応、動きの抑制設定が尊重されていること。どんなに美しくても、壊れたエントリーは失格です。

意図的にプリセットなし

このスキルには、レイアウト、テンプレート、「レストランならXをしろ」といったルールは意図的に含まれていません。プリセットは、手順が増えただけのテンプレートであり、同じ入力から毎回同じサイトが生成されてしまい、勝てるものとは正反対だからです。このスキルが代わりに提供するのは、どんな対象からでも確実にオリジナルのアイデアを生み出すプロセスです。「パン屋サイト」や「SaaSサイト」のレシピを、自分の記憶にある既存のサイトも含めて、どこにも探さないでください。すべてはこの特定の対象から導き出してください。

プロセス

1. ブリーフを読んでセットアップ

対象: サイトの対象。ユーザーが提供したすべての詳細（名前、場所、提供内容、オーディエンス、トーン、ページ、期限など）を抽出します。
スタック: 既存のプロジェクト内であれば、それに合わせます（フレームワーク、TypeScriptの有無、スタイリング手法、規約、パッケージマネージャー）。ユーザーがスタックを指定した場合はそれを使います。指定がない場合は、ダブルクリックで開けてビルドステップが不要な静的サイト（index.html + css/ + js/、GSAPはCDN）を構築します。ユーザーが複数ページを依頼したりページを列挙した場合は、複数ページを構築します。各スタックでのモーションスタックの配線方法については references/stacks.md を参照してください。
質問攻めにしない。 簡潔なブリーフがこのスキルの要点です。自信を持って妥当な仮定を立ててください。ビジネス名が指定されていなければ適切な名前を、場所や提供内容ももっともらしいものを発明し、引き渡し時にすべての仮定をリストアップします。本当に行き詰まった場合（例えば、ユーザーが添付ファイルに言及しているのに見つからない場合）にのみ質問してください。

2. アセットを収集、ユーザーのものを優先

ユーザーが提供したものを探します。会話に添付された画像やファイル、プロジェクト内のフォルダ（assets/、public/、images/、src/assets/、brand/）、ロゴ、ブランドカラー、フォント、コピー原稿、現在のウェブサイトなど。これらを最優先します。なぜなら、クライアントの実際の写真とブランドを中心に構築されたサイトは、どんなストックフォトよりも信頼できるからです。

ユーザーのアセットを中心にデザインを構築します。ロゴはパレットのシードとなり、SVGアニメーションの最有力候補です。ユーザーの写真はヒーローとキーセクションを飾ります。コピーは書かれたまま使用します。
ユーザーの写真を、ストックの方が「見栄えが良い」という理由でストックに差し替えないでください。代わりに、意図を持ってトリミング、マスキング、グレーディング、フレーミングなど、アートディレクションを行います。
ユーザーから十分なアセットがない場合は、パブリックイメージをユーザーのものに合わせてグレーディングしてギャップを埋めます。
アセットがまったくない場合は、 references/imagery.md の説明に従って見つけて検証した、関連する公開画像URLを使用します。覚えている画像IDは間違っていることが多いため、すべてのURLは出荷前に scripts/check_urls.py でチェックします。

3. 没入する: 雰囲気の資料を作成

レイアウトを考える前に、対象の世界に実際に時間をかけて没入します。以下の点を簡単に、自分のために書き留めてください。

素材とテクスチャ: この世界が物理的に何でできているか。
光と色: その世界で見られる光、そして業界関係者が日常的に目にする色（競合他社のウェブサイトが使っている色ではありません）。
動き: ここでの物事の動き方。注ぐ、折る、積む、切る、咲く、周回する、チクタク、火花、落ち着く、漂う。これが動きの言語になります。
リズムと音: 速いか遅いか、スタッカートか流れるようなか。アニメーションとスクロールのペーシングを決めます。
業界関係者が認識する人工物: ツール、書類、記号、測定単位、習慣。
語彙: 業界関係者が使う言葉。コピーやセクション名に反映します。
訪問者: 誰が、どのような心構えで（心配、興奮、比較、祝賀）訪れ、信頼して行動するために何を感じる必要があるか。
クリシェのフロア: この業界の典型的なウェブサイトがどのように見えるか。それを書き留めて、意識的に別のものを構築します。

4. ビッグアイデア: 3つのコンセプト、明白なものを排除

3つの真に異なるコンセプトの方向性を書き出します。それぞれに名前、一文のメタファー、そしてそのシグネチャーモーメントを付けます。次に:

最初のコンセプトを排除します。 最初に思いついたものは、他の参加者も皆構築しているものです。
残った2つから、このビジネスにとって最も驚きでありながら間違いなく適切であり、かつこのスタックで完璧に構築できるものを選びます。大胆さは安全性に勝りますが、洗練されていることは野心的だけど壊れていることに勝ります。

コンセプトは配色ではありません。レイアウトのロジック、動きの挙動、タイポグラフィ、色、画像処理、コピーのトーンを決定する、組織化のメタファーです。サイト全体を「このサイトは…」で始まる一文で説明できるようにする必要があります。

シグネチャーモーメント は、誰も見たことのないインタラクションであり、「わあ」の原動力です。発明するには、3つの要素を組み合わせます。資料から得たオブジェクトまたはプロセス、訪問者が制御する入力（スクロール位置、スクロール速度、カーソル、ホバー、ドラッグ、クリック、時刻）、そして変換（組み立てる、明らかにする、注ぐ、成長させる、スライスする、積み重ねる、変形する、点火する、展開する）。いくつかの組み合わせをブレインストーミングし、「おっ！」と思えるものを残します。それはヒーローまたは最初のスクロールに配置し、ビジネスの技術、約束、またはプロセスを示すことで、ビジネスについて何かを意味するものでなければなりません。装飾はカウントされません。

次に、ページの下の方に2～4のサポートモーメントを計画します。それぞれ異なる種類のインタラクションにすることで、「わあ」がヒーローでピークを迎えるのではなく、新しくされ続けます。

想定されている思考の例を示します（これら2つはすでに他の参加者によって使われているため、焼却済みであり、絶対に再利用しないでください）。鍵屋のサイトで、スクロールすると巨大なSVGロックのピンが回転し、各ピンが所定の位置にカチッとはまるとサービスが表示されるもの。翻訳代理店のサイトで、ヒーローの文章がカーソルの下で言語間をスクランブルし、訪問者自身の言語で落ち着くもの。

5. デザインシステムをアイデアから導き出す

タイポグラフィ: コンセプトに属する個性的なフォント、読みやすいテキスト用のフェイスとペアリング、clamp() を使った流動的なスケール、最大サイズと最小サイズの間に劇的なコントラスト。ソース: Google Fonts、Fontshare、またはユーザーのブランドフォント。Inter、Roboto、Arial、Open Sans、Poppins、Montserrat は誰もが使うデフォルトなので、見出しのボイスとしては決して使用しません。
色: 資料の実際の素材と光から、またユーザーのブランドがある場合はそこから。CSSカスタムプロパティとしてトークンを定義します。支配的な色、補助色、そして規律をもって使用する1つのアクセントカラー。本文テキストはWCAG AAのコントラストを満たします。
テクスチャと奥行き: グレイン、紙、素材の写真、コンセプトの光源と一致する影、業界独自の形状からSVGとして描かれたパターン。
レイアウト: 意図的に破る明確なグリッド。隣接するセクションが同じ構成を共有しない。密度とスケールを変化させ、オーバーラップ、全幅、非対称、スティッキー要素、豊富なネガティブスペースを使用します。モバイルレイアウトは、デスクトップのものを単に積み重ねたものにするのではなく、独自の構成としてデザインします。
イラストとアイコン: このコンセプトのために描かれたカスタムSVG。ストックのアイコンセットは使いません。
審査員が気づく小さなこと: カーソル、テキスト選択色、フォーカスリング、スクロールバー、ファビコン、404ページや空の状態（存在する場合）、フッター。すべてをブランディングします。

6. コンテンツと情報階層

訪問者が持ってくる質問をリストします。あなたは何をしているのか、信頼できるのか、どのように機能するのか、いくらかかるのか、どこでいつ、どうやって始めるのか。それぞれの答えが、説得のストーリーとして順序付けられたセクションまたはページになります。
ナビゲーションと主要なコールトゥアクションはすぐにわかりやすく、どこからでもアクセスできるようにします。
1ページに1つの h1、セマンティックなランドマーク、読みやすい本文テキスト（最低16px、1行60～75文字程度）。
この業界の最高のコピーライターのようにコピーを書きます。具体的で、自信に満ち、五感に訴え、業界関係者の語彙を使います。決してLorem Ipsumは使いません。一般的なAIの言い回しはテンプレートと読まれるため、「エレベート」「アンロック」「シームレス」「エンパワー」「ユアジャーニー」「今日のめまぐるしく変化する世界において」「私たちのウェブサイトへようこそ」「私たちは～に情熱を注いでいます」などは避けてください。
不明な事実（電話番号、住所、価格、チーム、統計、お客様の声）については、自然に読める現実的なプレースホルダーを書き、コードコメントでマークし、引き渡し時にユーザーが起動前に置き換えられるようにリストアップします。

7. 構築

アニメーションコードを書く前に references/motion.md を読んでください。そこには、検証済みのCDNとnpmのセットアップ、GSAP、ScrollTrigger、Lenisを連携させるブートストラップ、テクニックの武器庫、そしてエントリーを壊す落とし穴が記載されています。すべてのGSAPプラグイン（SplitText、ScrollTrigger、Flip、DrawSVG、MorphSVG、MotionPath、ScrollSmoother、Observer、Draggable、Inertiaなど）は自由に使用できます。

すべてのエントリーには以下のレイヤーがあります。

第一印象: ヒーローが約2.5秒以内の振り付けられたシーケンスで組み立てられます。プリローダーは、2秒以内のブランディングされた瞬間でヒーローに流れ込む場合のみ許可され、コンテンツの前のスピナーは決して許可されません。
シグネチャーモーメントとサポートモーメント（ステップ4から）。
スクロールストーリーテリング: 要素の種類ごとに選択したScrollTriggerの表示、さらに、スクロールが変換を駆動する、ピン留めまたはスクラブされたシーケンスを少なくとも1つ。
SVGアニメーション: 線画、モーフィング、アニメーションイラスト、コンセプトに由来するアイコンや仕切り。
インタラクティブなすべてに対するマイクロインタラクション: ホバー、:focus-visible、押下状態、カーソル認識型または磁気ボタン、リンクアニメーション、フォームフィードバック、メニューの開閉。
トランジション: セクション間、および複数ページサイトのページ間。

動きに変化をつけてください。すべての要素が同じようにフェードアップすると、レイアウトがどんなに良くてもサイトはテンプレートのように感じられます。テキスト、画像、数字、線、カードはそれぞれ、その性質に合った方法で、調整されたタイミングとカスタムイージングで動きます。

高速で堅牢に保ちます。トランスフォーム、opacity、clip-pathをアニメーションさせ、画像に寸法を与え、ファーストビューより下は遅延ロードし、JavaScriptが失敗してもコンテンツが読めるようにし、タッチデバイスにはホバー専用エフェクトの同等のものを提供し、動きの抑制設定に対してはサイトの壊れたバージョンではなく、落ち着いた完全なバージョンを提供します。

8. 審査員: 検証、スコアリング、修正

references/jury.md を読んで、毎回実行してください。簡単に言うと、scripts/check_urls.py ですべての外部URLを確認し、サイトを実際にレンダリングしてデスクトップとモバイルで表示し（ブラウザツール、またはヘッドレスChromeのスクリーンショットとコンソールエラー用の scripts/snapshot.py を使用）、次に5人の審査員としてビルドをスコアリングします。10点満点中9点未満のものはすべて修正し、再確認します。各審査員が9点以上をつけるか、3ラウンド後、解決できなかったトレードオフをメモして停止します。

9. 引き渡し

簡潔かつ具体的に保ちます。

## <サイト名>: "<コンセプト名>"
アイデア: （一文、「このサイトは…」）
シグネチャーモーメント: （何で、どこにあるか）
こちらも注目: （2～4のサポートモーメント）
実行方法: （開き方、または起動方法）
ファイル: （短いツリー）
画像: （使用したユーザーアセット、使用した公開ソース、ライセンスが必要な場合のクレジット）
起動前に置き換えるもの: （プレースホルダー：電話番号、住所、お客様の声、価格…）
仮定: （ユーザーに代わって決定したこと）

参照

このスキルが依存するリファレンスファイル。エージェントは各リファレンスを直接読んで適用します。

references/stacks.md（スタック統合）

スタック検出とセットアップ

既存のプロジェクト内の場合: 完全なプロジェクトディレクトリを読み取り、フレームワークを特定し（package.json、next.config、vite.config、svelte.config、astro.config、.astro/、nuxt.config、remix.config、gatsby-config を確認）、スタイリングアプローチを特定し（Tailwind、CSS Modules、styled-components、Emotion、vanilla-extract、Panda CSS）、パッケージマネージャーを特定します（bun.lock、pnpm-lock、yarn.lock、package-lock.json を確認）。
スタック固有の指示 (Next.js: クライアントコンポーネントに "use client"; 動的インポートで ssr: false を使用; Astro: クライアントディレクティブを使用; Svelte: svelte:window と use: アクション; Vue: v-motion またはカスタムディレクティブ; Nuxt: プラグインディレクトリ内のプラグイン）。
GSAP + ScrollTrigger + Lenis のセットアップ: バンドルされたCDNスクリプト (https://cdn.jsdelivr.net/npm/gsap@latest/+esm + https://cdn.jsdelivr.net/npm/lenis@latest/+esm) または npm パッケージ (npm install gsap lenis)。フレームワークの例を持つブートストラップ関数。
コンポーネントライブラリの統合: Shadcn/ui、Radix、Mantine、Chakra UI、Material UI、Ant Design。
注意: Remix、Gatsby、Fresh、SolidStart、Qwik、Preact。

references/motion.md（モーションライブラリとテクニック）

検証済みのセットアップ

各セットアップのCDNスクリプトと npm install コマンド。
すべてのGSAPプラグインのグローバル登録 (gsap.registerPlugin(ScrollTrigger, SplitText, ...))。
Lenisのセットアップ: LenisインスタンスとGSAPとのリンク。
ScrollSmoother（".smooth-wrapper"と".smooth-content" HTML構造）を含む完全なブートストラップテンプレート。

テクニックの武器庫

SplitText: 文字単位・単語単位・行単位のアニメーション、チャーター。
テキスト分割: SplitTextを使わないテキスト分割（data属性とIntersectionObserver）との比較。
スクラブアニメーション: スクロール位置に応じた進行度、ピン留め+スクラブ、スナップ進行。
パララックス: スピード段差、レイヤー、深さに基づくパララックス。
タイムライン: 複雑なシーケンスの制御、ラベル、反復。
SVG: 線画（DrawSVG）、モーフィング（MorphSVG）、アニメーションパスに沿った移動（MotionPath）。
スクロールトリガー: ピン留め、トリガーアニメーション、開始/終了条件、クリアプロップ、スクラブ。
フリップアニメーション: コンテンツのリフローやビューの切り替え、状態変更のアニメーション化。
オブザーバー: カスタムスクロール動作、ドラッグ、スワイプ。
ドラッガブル: ドラッグ可能な要素、スナップ、制限付きドラッグ。
慣性: 慣性スライダー、運動量。
モーションパス: パスに沿ったアニメーション、パスモーフィング。
トゥイーン: 基本的なアニメーション、イージング、遅延、繰り返し、ヨーヨー。
カスタムイージング: GSAPのデフォルト（power1.out、power2.inOut、expo.out、elastic、back）とCSSイージングとの比較。

重要な落とし穴

SVGアニメーション: 表示状態の設定（fill、opacity）、XML名前空間の使用。
レスポンシブ: matchMedia() によるブレークポイント、タッチデバイスの検出（ScrollTrigger.isTouch !== 1 を使用）。
パフォーマンス: will-change、GPUアクセラレーション（transform、opacity）、回避すべきプロパティ。
アクセシビリティ: prefers-reduced-motion メディアクエリ、window.matchMedia('(prefers-reduced-motion: reduce)')、GSAP用の ScrollTrigger.reducedMotion クイック設定。

references/imagery.md（画像ガイドライン）

画像の発見と検証

scripts/check_urls.py を実行して画像URLが機能し、正しいMIMEタイプで提供されていることを確認します。これは必須です。URLが切れていたり間違っているとそのエントリーは失格になります。
画像ソース: 直接の画像CDNとホスティングサービス（Imgur、Unsplashの直接リンク、Pexels、Pixabay、Wikimedia Commons、OCAL、Cloudinary、images.unsplash.com、fastly.pics、i.imgur.com）。特定のページURLではなく、画像への直接リンクを使用します。
画像をリンクできない場合: 埋め込みプレースホルダー（ビジュアルスタイルと一致するSVG、グラデーション、またはソリッドカラーのプレイスホルダー）を使用し、コード内にコメントして、引き渡しリストに欠落している画像を含めます。決して壊れた画像やリンク切れを出荷しないでください。デフォルトではプレイスホルダーを追加し、すべての主要な画像候補にソースURLを添付してください。
生成画像のガイドライン: SVG生成が好まれ、画像スタイルに合わせてカスタム作成された視覚的なプレイスホルダーとして機能します。可能な場合は、スクリプト、SVG生成、または他の直接的な方法で画像を生成します。
著作権: 無料またはパブリックドメインの画像のみを使用し、商用利用の権利を確認します（Unsplash、Pexels、Pixabay）。

references/jury.md（最終品質チェックリスト）

チェックリスト

外部URLが機能する: scripts/check_urls.py がすべてのpublic画像URLを検証しました。
サイトがレンダリングされ、見た目が良い: ブラウザで（または scripts/snapshot.py を使用して）実際にサイトを表示しました。
デスクトップとモバイルの両方で動作する: レスポンシブレイアウトが320px～1440pxで正しく表示されます。
コンソールエラーがない: scripts/snapshot.py のレポートにエラーがありません。
アニメーションがスムーズ: パフォーマンスタブで60fpsを確認済み。
動きの抑制に対応: 素敵な、簡略化された体験。
優れたホバーとフォーカス状態: すべてのインタラクティブ要素がテスト済み。
テキストが読みやすい: 最小16px、コントラスト比が良好。
画像が適切に読み込まれる: 寸法が設定され、レイアウトシフトがない。
適切な情報階層: 1つのh1、適切な見出し構造、明確なCTA。
すべてのブラウザで機能する: Chrome、Firefox、Safariでテスト済み。
その他、業界/コンテスト特有のルール（該当する場合）。

スコアリング

5人の架空の審査員が各項目を10点満点で評価します。各審査員の平均点が最低9点になるまで修正を続けます。3ラウンド後も解決できないトレードオフは記録します。

スクリプト

scripts/check_urls.py

画像URLが有効かどうかを確認するPythonスクリプト。使用方法: python scripts/check_urls.py <url>。HTTP 200を返し、content-typeが画像であることを確認します。無効なURLはそのエントリーを毀損するため、常に使用します。

scripts/snapshot.py

ヘッドレスChromeを使用して、デスクトップとモバイルのスクリーンショットを撮り、コンソールエラーをキャプチャするPythonスクリプト。使用方法: python scripts/snapshot.py <url>。これにより、screenshots/ ディレクトリにスクリーンショットが保存され、コンソールエラーが出力されます。

Jawdrop – 億万ドル級ウェブサイトデザイナー