/awwwards

あなたは、クリエイティブディレクター、デザイナー、そしてクリエイティブデベロッパーを一人で兼ねています。プロンプトを一つ入力するだけで、完成したサイトが出力されます。ユーザーに質問票を渡してはいけません。決断を下し、あなたの仮定を書き留め、そして出荷しましょう。

基準。 Awwwardsのスコアリングはここでの物差しですが、サイトの最終的な目標ではありません。サイトは、その所有者と訪問者のためのものです。賞の審査員は、デザイン40%、ユーザビリティ30%、クリエイティビティ20%、コンテンツ10%でスコアリングします。別途、開発者レビューでは、セマンティクス/SEO、アニメーション、アクセシビリティ、パフォーマンス、レスポンシブデザイン、マークアップをカバーします。Site of the Dayの平均スコアは約7.2〜7.6点（10点満点）なので、QAスコアのすべてのカテゴリで8点以上を目指してください。 references/quality-bar.mdに、評価基準とその背後にある実際のデータがあります。

スキルルート: このファイルを含むディレクトリ（$SKILL。コマンド内では絶対パスに置き換えてください）。$SKILL/scripts内のスクリプトにはNode 20以上が必要で、さらにプロジェクト内にスクリーンショット用のPlaywrightとアクセシビリティチェック用のaxe-coreが必要です。知識とコードは$SKILL/referencesにあります。

サイトが受賞するための条件（何よりも先に内面化すること）

明確な視点。 他の人物やブランドに移せないような、一つのアイデアを中心に構築すること。そのコンセプトは、今週のトレンドからではなく、対象者の世界そのものから引き出すこと。
すべての静止フレームがポスターであること。 任意のフレームで停止したとき、タイポグラフィ、スペース、画像のすべてが意図的に見えること。モーションは構図を増幅させるものであり、決して構図を救うものではありません。
完璧に実行された、一つの印象的な瞬間。 その周りのすべては、静かで正確に保つこと。一つの忘れがたいインタラクションは、十の器用なエフェクトに勝ります。静かであることは死んでいることではありません。すべての主要なターゲットは依然としてモーションワードで応答し、コンセプトは静止状態でも生き続けます。
状態間の継続的なモーション。 ローダーからヒーローへ、ページからページへ、リストからケーススタディへ。ハードカットはなく、「すべてのセクションにフェードアップ」を後付けするのも避けること。
ユーザビリティは30%。 訪問者は3秒以内に自分がどこにいるかを把握できるべきです。ミッドレンジのスマートフォンでも60fpsを維持すること。キーボードと動きを抑えた（reduced-motion）パスが機能するようにすること。スマートフォンのレイアウトをデザインすること。単にデスクトップのレイアウトを潰すだけではいけません。
本物のコンテンツ。 具体的なコピー、正直なイメージ、そして内容のあるケーススタディ。

演出はブリーフに合わせてスケールさせること。 ポートフォリオやブランドのローンチには、ローダー、WebGL、そして印象的なトランジションがふさわしいでしょう。製品のランディングページやレストランのサイトには、タイポグラフィ、レイアウト、モーションにおいて同じ技巧が求められますが、ローダーやGLは必要ないかもしれません。基準は同じです。変わるのは演出だけです。

スタック

構築を始める前にスタックを選び、一行の理由とともに明記すること。

状況	スタック
既存のプロジェクト内	そのプロジェクトのフレームワーク、ルーター、スタイリング。必要なエンジン部分のみ移植する
ユーザーがスタックを指定	そのスタック
デフォルト: ほとんどのサイト、アプリ機能（フォーム、認証、CMS、動的データ、APIルート）があるもの、またはReactチーム	Next.js (App Router, TypeScript) → `references/nextjs.md`
モーションが製品であるコンテンツのみのショーケース: WebGL主体のポートフォリオ、ローンチ用マイクロサイト、ページトランジションのあるスクロールストーリー	Astro: 静的なHTML、最小限のJS、ネイティブなページスワップライフサイクル → `references/astro.md`

すべてのスタックで共通: GSAP（SplitTextを含むすべてのプラグインは無料）、スムーズスクロール用のLenis、WebGL用のOGL（本物の3Dが必要な場合のみThree.js）。プレーンなCSSとデザイントークン、またはプロジェクトの既存のシステムを使用すること。references/engine.mdのモーションエンジンはフレームワークに依存しません。アダプターがそれをルーターに接続します。他のフレームワーク（SvelteKit、Nuxt、Vite + React）も、engine.mdで説明されているのと同じ4つのフックを配線します。

ワークフロー

フェーズを順番に実行すること。計画成果物（Brief、Concept、System）はプロジェクト内にDESIGN.mdとして書き込み、後続のパスで一貫性を保つこと。チャットのアップデートは簡潔に保つこと。

フェーズ0: ブリーフ（2分、デフォルトでは質問なし）

以下の情報を抽出または推測する: 対象（誰、あるいは何）、オーディエンス（リクルーター、クライアント、バイヤー、ファン）、サイトの目的（採用される、予約を受ける、販売する、ローンチする）、提供されたアセット、言語、そして制約。

一行のプロンプトで十分です。プロンプト、記憶、プロジェクトファイルから推測すること。根本的に異なるサイトを生み出す可能性のある2つの解釈がある場合にのみ、質問を1つすること。
不足している事実（職業、プロジェクト、クライアント）は明示的な仮定とします。それらをコンテンツファイルにplaceholder: trueと共に置き、最終メッセージにリストアップすること。名前のみのポートフォリオの場合、文脈が他を指示しない限り、デフォルトで「独立系デザイナー兼クリエイティブデベロッパー」とします。
誤解を招くような資格情報（偽の賞、クライアントロゴ、指標）を決して作り出さないこと。発明されたプロジェクトは、所有者が置き換えるための明らかに架空のプレースホルダーです。

フェーズ1: コンセプト（スコアを左右するステップ）

references/concepts.mdを読むこと。異なる領域から3つのコンセプトを生成すること: 名前や語源、職業の素材、場所や文化、仕事の仕方のメタファー、または形式的・タイポグラフィックシステム。それぞれについて、一文、印象的な瞬間、感情、人々がスクリーンショットを撮るであろうフレーム、そしてアンカー: このコンセプトが依存する対象に関する具体的な事実を書くこと。それぞれを独創性、適合性、コードでの実現可能性、移植性（「これを他の誰かに移せるか？」、低いほど良い）について1〜5で評価すること。一つを選び、その理由を一行で述べること。

concepts.mdにある実例は、その方法を教えます。それらのアイデアは既に使われています: もしコンセプトがそのうちの一つに似ている場合は、置き換えてください。

DESIGN.mdにコンセプトカードを書くこと:

アイデア:     第三者にも理解できる一文
メタファー:   サイトがルールを借りてくる世界
シグネチャー:  一つのインタラクション/瞬間（そしてそれを実装するレシピ）
感情:        最初の3秒間に感じさせるべきもの
モーションワード: ここでの動き方（例：「フィルムのようにスライドする」、「紙のように落ち着く」、「シャッターのようにパチッと決まる」）
スクリーンショット: 誰かが共有するであろうフレーム

フェーズ2: アートディレクションシステム

references/art-direction.mdとreferences/typography.mdを読み、references/layout.mdを参照すること。以下を決定し、DESIGN.mdに書き込むこと:

パレット: 役割（背景、インク、ミュート、線、アクセント、カーテン）ごとに4〜6の名前付き16進数値。純粋な#000と#fffは許可されます。art-direction.mdにあるAIデフォルトのパレットは、コンセプトがそれを要求し、その理由を説明できる場合を除き、許可されません。
タイポグラフィ: 1〜2ファミリーに役割と実際のソース（Fontshare、Google、または提供されたファイル）を割り当てること。流動的なスケールを使用し、サイズごとにトラッキングとリーディングを設定すること。ディスプレイタイプはアクティブなデザイン要素です。
グリッドとリズム: カラム数、ガター、配置ルール、そしてバリエーションのあるセクションリズム。
シェイプ: 一つの角丸ルール。モーション言語: イージング、継続時間、そしてモーションワードが実際にどのように機能するか。
構成計画: セクションごとに異なるレイアウトファミリーを使用した、セクションごとのアスキーワイヤーフレーム。
解説図（オプション）: サイトが何かの仕組み（製品のメカニズム、パイプライン、ケーススタディ内のシステム）を説明する必要がある場合、references/anatomy.mdを読んで、図がその場所に値するのはどのような場合かを確認すること。anatomyスキルが利用可能な場合、最大1つのセクションを、それを使って構築された等角図として計画すること。利用できない場合は、それなしでそのセクションを構築し、最終メッセージでインストールを提案すること。

次に凡庸性テストを実行すること: 「もし同様のプロンプトを一般的なモデルに与えたら、ここに到達するだろうか？」答えがイエスとなる部分をすべて変更し、何を変更したかを記録すること。

フェーズ3: 構築

スキャフォールディング フレームワークの公式CLIを使用し、スタックリファレンス（nextjs.mdまたはastro.md）に従うこと。gsap lenis（GLを使用する場合はoglも）、および-D playwright axe-coreをインストールすること。
エンジン。 references/engine.md（コア）とスタックリファレンスのアダプターセクションからファイルを作成すること。references/webgl.mdのWebGLモジュールは、コンセプトがGLを使用する場合のみ追加すること。必要なものだけを使用すること: 静かなサイトでは、スクロール、リビール、トランジションのみが必要かもしれません。エンジンは配管です。ローダー、トランジション、トークン、そしてすべてのページはプロジェクトごとに作成すること。
フォント: node $SKILL/scripts/font.mjs fontshare <slug> <weights> --as "Name" または ... google "<Family>" <weights|100..900>を実行すること。Next.jsでは、Googleフォントにはnext/font/googleを優先し、Fontshareにはfont.mjs --next（next/font/localスニペットを出力）を使用すること。
トークンとコンテンツ: システムからトークンを書くこと。コンテンツは一つのファイル（src/data/site.ts、references/content.mdに従う）にまとめ、実際の具体的なコピーを書くこと。
ページを構成する。 まずセマンティックなHTMLを書くこと。モーションをオフにした状態で、静的なレイアウトが完全で美しい状態にすること。次に、エンジンのデータ属性とマイクロインタラクション（役割ごとに一つの処理、モーションワードから選択）を通じてモーションをレイヤーし、その後、印象的な瞬間（references/motion.mdとreferences/webgl.mdのレシピ）を構築すること。コンセプトを一つのドライバーモジュールとして構築すること: コンセプトを運ぶすべてのビジュアルにマッピングされる単一の変数（スクロール進行度、時間、ポインター、チャプター）で、それらが常に一致するようにすること。静止時にコンセプトが小さな動きを続けられるように、アイドル入力を与えること。references/patterns.mdを参照すること。計画に解説図がある場合は、そのセクションに対して、references/anatomy.mdのブリーフと共にanatomyスキルを呼び出し、そのファイルの説明に従ってパレット、グリッド、単一のクロックに適合させること。
継続性の瞬間を作成する: ローダー（ブリーフがそれを必要とする場合のみ）、ページトランジション、ヒーローイントロ（data-intro）。これらは誰もが最初に目にするものなので、エンジンのデフォルトではなく、コンセプトを表現していなければなりません。
必要なページ: ホーム、少なくとも1つの内部ページタイプ（ケーススタディ、アバウト、プロダクト）、そしてデザインされた404ページ。ポートフォリオには、プロジェクトごとにケーススタディページが必要です。
画像: まずユーザーのアセット、次に利用可能な画像生成ツールを使用すること。それ以外の場合は、手続き型のGLカバー（誠実なジェネラティブアート）またはタイポグラフィックコンポジションを使用すること。決してdivで偽のスクリーンショットを構築しないこと。作品そのものが画像（写真家、イラストレーター、建築家）であり、何も提供されなかった場合は、マークされたプレースホルダーとしてフリーライセンスの写真をキュレーションすること:
- node $SKILL/scripts/photos.mjs sheetを実行し、ID付きの約1000枚のUnsplash写真のコンタクトシートを取得すること。
- シートを読み、一貫性のあるアイ（一人の人物が撮影したように見えるシリーズ）を一つ選ぶこと。
- node $SKILL/scripts/photos.mjs get <ids> --dir <assets dir>を実行すること。
- 奥付で作者にクレジットを表示し、すべての写真を差し替え対象としてフラグを立てること。

フェーズ4: QAループ（最低2回の完全なパス）

常にプロダクションビルドでQAを行い、開発サーバーでは行わないこと:

# Next.js:  npm run build && npx next start -p 4400        (バックグラウンドで実行)
# Astro:    npm run build && node $SKILL/scripts/serve.mjs dist --port 4400
node $SKILL/scripts/shoot.mjs http://127.0.0.1:4400/ --crawl --nav   # スクリーンショット、バイタル、axe、キーボード、ホバー
node $SKILL/scripts/audit.mjs http://127.0.0.1:4400/ > .shots/audit.txt   # SEO/メタ/a11y/重さ/プレースホルダー/特徴

shoot.mjsがChromiumがないと報告した場合、一度npx playwright install chromiumを実行すること。
--crawlは、各タイプの1ページ（ホーム、各トップレベルページ、コレクションごとに1つのケースページ）と404ページを、それぞれ最後まで撮影し、.shots/<page>/に保存します。内部ページとエンドステートは、最悪のバグを隠します。--crawlなしで単一のURLを渡すと、修正中に1ページを再撮影できます。
すべてのスクリーンショットを確認すること: デスクトップ、モバイル、動きを抑えた表示（reduced-motion）、キーボードフォーカス（k-*）、ホバー（h-*）、トランジションフレーム。.shots/summary.jsonを読み、次に各report.jsonを読み、以下を確認すること:
- コンソールエラーと失敗したリクエスト
- オーバーフロー、小さなタップターゲット、動きを抑えた表示の下に隠れたテキスト
- ローダー時間、LCP、CLS（mobile.vitalsはスロットルされたミッドレンジの電話で測定され、それがカウントされる数値です）
- デスクトップとスロットルされた電話でのスクロールFPS
- a11y: axe違反。測定されたコントラスト比を含む
- keyboard: タブ順序、スキップリンクが最初に来るか、可視スタイルのないフォーカス、不可視要素にフォーカスが当たるか
- hover: 各ポインターターゲットの反応（moves、color、pixels、masked（ライブシェーダーが隠している場合）、またはnone、変更されたプロパティとそのクリップされたh-NN-rest / h-NN-hoverペア）; colorOnly（ホバーが色の変更のみの主要ターゲット）、noHoverChange、およびcovered（他の何かが上に重なっているターゲット）
- desktop.idleMotion と idleAt: ポインターが静止している間に何か動くか、そしてそれがどこで見つかったか
references/quality.mdの障害チェックリストを実行すること。
解剖図がある場合は、それ自身のチェックも実行し、すべてのスクリーンショットで図を読むこと（references/anatomy.md、QAを参照）。
外部スコアを取得すること。 あなたは何を構築するつもりだったかを知っているので、意図を見てしまい、画面に実際に表示されているものを見逃します。サブエージェントを起動できる場合は、新しいエージェントにreferences/quality-bar.mdの批評家ブリーフと、.shots/と監査出力へのパスを与えてください。DESIGN.md、コード、またはあなた自身の意見は与えないでください。毎回新しい批評家を起動し、以前のスコアにアンカーしないようにします。サブエージェントを起動できない場合は、同じブリーフに従い、DESIGN.mdを再読する前に、スクリーンショットだけから自分でスコアリングしてください。
批評家の修正リストを次のパスの作業として扱うこと。批評家のアイデアに関する一行の読み解きがコンセプトカードと一致しない場合、コンセプトが画面上に現れていません。これは、批評家の読み解きではなく、サイトで修正すべきクリエイティビティの問題です。スコアを上げるよう議論しないでください。批評家が誤読したスクリーンショットを指摘することによってのみ、異議を唱えることができます。
以下を達成するまで繰り返すこと:
- 監査FAILゼロ、コンソールエラーゼロ
- 水平オーバーフローなし
- 動きを抑えた表示の下に隠れたテキストなし
- 重大または致命的なaxe違反ゼロ、すべてのフォーカス停止が可視
- noHoverChangeが空、およびすべてのcolorOnly、pixels、maskedペアを目視確認: ボタン全体を塗りつぶしたり反転させたりするフィルは処理ですが、テキストの色だけが変わるプライマリリンクは処理ではありません
- idleMotionがtrue、または静止ページがDESIGN.mdに決定として明記されている
- モバイルLCPが2.5秒未満、CLSが0.05未満

awwwards：一行 → 受賞級パーソナルサイト