site-signature

サイトシグネチャー

あなたは誰かの個人サイトのリニューアルを手伝っています。目指す結果：どこにもないファーストビューと、小さなスマートフォン、ノートパソコン、21:9モニター、テレビのいずれでも正しく表示されるページです。

このスキルは判断の方法を記述しています。テンプレートやパレット、既成のシーンは一切提供しません。それらはすべて本人とそのコンテンツから生まれます。

判断の方法

以下の4つの選択をこの順番で行い、それぞれを本人に確認してから次に進みます。

1. コンテンツ第一。既存サイトの内容を読み、他と異なる点（フレーズ、数字、経歴、他サイトにはないセクション）を見つけます。リニューアルではそれらにさらにスペースを与えます。
2. 本人の人生から引き出したシーン。本人が熟知している場所、物体、または現象を、ひとつのグラフィック素材の中で雰囲気（時間、光、奥行き）として表現します。
3. シーン内の真のデータ。見た瞬間に正確な、計算または計測された何か。このディテールが再訪を促します。
4. 固定値ではなくレンジ。すべてのサイズに最小値と最大値を設定し、ページはその形状（狭い、広い、低い）に応じて反応します。

数字が問題を整理します。本人が確認したスクリーンショットが決定打となります。

ファイル

• references/decouverte.md : 技術スタックの特定、既存サイトの計測、保持すべきものの記録。最初に実施します。
• references/scene.md : 本人と一緒にシーンを見つけ、構築します。
• references/responsive.md : すべての画面におけるレイアウトとレンダリングのルール。
• scripts/check-viewports.mjs : 指定されたURLを10種類の画面サイズでチェックし、測定可能な欠陥と各サイズのスクリーンショットを出力します。

スキル ai-patterns-audit がインストールされている場合は、フロントエンドコードを書く前にその references/regles.md を読み、最後にその監査を実行してください。

手順

1. 発見 : 技術スタック、リポジトリ構成、開発・デプロイコマンド、維持すべき既存機能（references/decouverte.md）。
2. 触る前に計測 : オンラインサイトまたはローカルサーバーでスクリプトを実行し、スクリーンショットを出発点として保存します。測定値を示しながら、すでに良い点とサイトを制限している点を本人に要約します。
3. シーンを見つける : references/scene.md の質問をメッセージごとに1つずつ行います。その後、それぞれ2文の3つの提案を行います。本人の選択前にコードは書きません。サイトにすでに独自のシーンがある場合は、それを維持します。同じファイルの4つの条件と描画ルールで精査し、不足している部分（縦長のトリミング、真のデータ、オフスクリーンポーズ）のみ修正します。
4. トップページを構築する : フルスクリーンのシーン、名前、2文のキャッチコピー、リンク。残りのコンテンツはファーストビューの下から始めます。
5. ページの残りをセクションごとに references/responsive.md に従って仕上げます。
6. 検証 : ローカルサーバーでスクリプトを実行し、各スクリーンショットを1枚ずつ確認した後、キーボードのみでのナビゲーション、さらに動作低減設定での確認を行います。スクリーンショットを見せて、本人が目視で判断します。

同意なしに変更しないもの

• 本人のテキスト。移動と階層化は行いますが、書き換えは依頼があった場合のみ。
• 数字：正確に。丸めたり水増ししたりしません。
• すでに機能しているもの：言語、ライト/ダークテーマ、フォーム、アクセス解析とその同意、RSSフィード、APIルート、SEO。
• 現在の技術スタック。本人が依頼した場合のみ変更します。

禁止事項

• 他のサイトのシーンを流用すること（たとえ尊敬していても）。既知のリファレンスに似た提案は却下します。
• プロジェクトや記事のリストに同一のカードグリッドを使用すること。各エントリは組版テキストのように読みます：数字または年を大きく、タイトル、結果の1行。
• 各ブロックの上に大文字スペース入りのラベル。1画面あたり最大1つ、情報を持つ場合のみ。
• すべてのセクションで同じフェードイン、ホバー時の浮き上がりエフェクト、パルスするグロー。
• シーン外での装飾的なグラデーションやグロー。
• シーンへの重い依存関係。2D Canvas または短いシェーダーで十分です。3Dライブラリは、選択した提案が本当に立体を必要とする場合のみ。
• 本人が依頼していない状態でのコミット、プッシュ、デプロイ。

完了条件

• スクリプトが10種類のサイズすべてで水平方向のオーバーフローを報告しないこと。
• 幅2560pxおよび3840pxで、シーンが画面全体を占め、テキストが読みやすい行長を保つこと。
• 幅375pxで、名前とキャッチコピーが（バナー等を開いた状態でも）スクロールなしで読めること。
• prefers-reduced-motion が有効な場合、シーンが完全な静止画像を表示すること。
• JavaScriptなしで、ファーストビューに名前、キャッチコピー、リンクが表示されること。
• テキストなしのシーン単体のスクリーンショットが壁紙として成立すること。
• 本人がスクリーンショットを見て、自分のサイトだと認識すること。