frangkli/design-rules

デザインルール

以下のルールは、プロジェクトの概要、DESIGN.md、および使用中のデザインスキル（通常はimpeccable）が選択の余地を残している場合に適用します。これらのいずれかが指示している場合は、そちらが優先されます。最初のUI編集の前、および批評や監査を書く前に読んでください。

コピー

• コントロールのラベルはその結果を表し、同じ単語がフロー全体で一貫して使用されます。「公開」ボタンは「公開されました」という確認を生成します。
• エラーテキストは、何が失敗したのか、および修正方法を、製品のトーンで、謝罪なしに示します。
• ナビゲーション、ヒーロー、フッター全体で、意図ごとに1つのラベルを使用します（「営業に問い合わせる」または「お問い合わせ」のどちらかを選択し、両方は使用しません）。プライマリボタンのラベルは、3語以下で1行に収まるようにします。
• 見出しとボタンは、プロジェクトですでに使用されているケースに従います。新しいプロジェクトでは文頭の大文字小文字を使用します。
• 1ページに1つのレジスター：誇張されたコピーと簡潔なプロダクトコピーは同じ画面に表示しません。
• 引用符とアポストロフィはカール引用符を使用し、実際の省略記号（…）を使用し、emダッシュは使用しません（代わりにピリオド、コンマ、コロンを使用）。1行あたりの中点は最大1つまで。
• お客様の声は3行以下で、その人の名前と役職を含めます。
• 引き渡し前に、レンダリングされたページ上のすべての表示文字列を1度読んでください（altテキスト、空の状態、フッターを含む）。また、ハッピートーク（何かがどれだけ良いかを言うだけの文）を削除してください。

軸が自由な場合に含めるべきでない表現

• パレット: #F4F1EAに近い温かみのあるクリーム地に、#D97757に近いテラコッタのアクセント（Claude自身のインターフェースカラー）。プレミアムコンシューマーセット: #F5F1EA, #EFEAE0, #B08947, #B6553A, #9A2436, #1A1714。黒の代わりに着色されたほぼ黒（#0B0B0B、#111）。
• タイプ: イタリック、太さ、または色で区別された見出しの1語。トラッキングされた大文字ラベル。リンクとボタンテキストに追加された「→」。ラベルが「WORD — fragment」として構築されている。
• クローム: ヒーロー内のバージョンタグ（V0.6、BETA）またはバージョンフッター。スクロールダウンキュー。ロケール、時計、天気のストリップ。画像上の装飾的なステータスドットまたはピル。装飾的なフォトクレジット。「BRAND. MOTION. SPATIAL.」のようなスローガンストリップ。「静かに信頼されています」。
• データ: 上下に線が引かれた行として描画された5つ以上のアイテムのリスト。値の比較に使用される塗りつぶし進捗バー。

コンバージョンページ

• ヒーロー: デスクトップ幅で2行以下の見出し、20語以下のサポートテキスト、スクロールせずに表示されるプライマリアクション、4つ以下のテキスト要素、6rem以下の上部パディング、アクションボタンの下に何も配置しない（タグライン、トラストストリップ、価格ティーザーなし）。
• 見出線は、clamp(3rem, 5vw, 5.5rem) 程度の流動的なサイズの広いコンテナに設定し、すべての幅で2～3行を保持できるようにします。
• ナビゲーションは1行に配置し、高さは64～72px、80pxを超えないようにします。
• 1ページあたりのマーキーは最大1つ、交互の画像/テキスト分割は連続して最大2つまで。
• N個のアイテムを持つベントーグリッドは、正確にN個のセルを持ち、空のセルがあってはなりません。密なパッキングの場合は、すべてのブレークポイントでスパンがインターロックしていることを確認します。
• 訪問者が最初に見た後に覚えておくべき1つのことを特定し、それ以降の選択肢をそれに役立たせます。

コンポーネントと詳細

• ネストされた角丸: 内側の半径 = 外側の半径 - それらの間のギャップ。
• カードの行では、各カードのアクションを下端に固定してボタンが揃うようにします。価格設定の機能リストは、すべての列で同じ高さから始めます。
• ディセンダーを持つイタリックのディスプレイタイプは、line-height 1.1以上に加えて、下部に少しパディングを追加し、テキストがクリップされないようにします。
• 本文段落は text-wrap: pretty を使用し、段落が1語だけで終わらないようにします。
• 訪問者がコンテンツに戻る場所（ドキュメント、記事一覧）では、訪問済みリンクを異なる見た目にします。href="#" プレースホルダーは本番環境に出荷しません。
• 折りたたみ可能なサイドバーレールは、幅56～72px、ラベルをDOMに保持し、44×44pxのターゲットを持ち、トグルに aria-expanded、非表示コンテンツに inert を設定します。
• 全高セクションは dvh または svh を使用し、100vh は使用しません。
• どの幅でも水平スクロールを禁止します。アニメーション化またはオフセットされた要素からのオーバーフローは overflow-x: clip でクリップします。hidden はスティッキーポジショニングを壊します。
• スクロールに連動するエフェクトは、CSSスクロールドリブンアニメーションまたはIntersectionObserverで実行し、スクロールイベントまたはフレームごとに記述されるフレームワーク状態では実行しません。
• ビューポートメタはズームを許可します（user-scalable=no や maximum-scale=1 は使用しない）。トランジションは transition: all ではなくプロパティを指定します。
• 公開サイトには、スキップリンク、カスタム404ページ、ファビコン、タイトル、メタディスクリプション、Open Graphタグ、フッターの法的リンクが必要です。
• CSSの詳細度をフラットに保ち、セクションレベルのルール（.section）とコンポーネントルール（.cta）が互いのパディングやマージンを打ち消さないように確認します。

ダークモード

• ルート要素に color-scheme: dark を設定し、フォームコントロールとスクロールバーがテーマに従うようにします。
• 本文テキストはオフホワイト（パレットから着色された #E0E0E0 程度）で、純白は使用しません。
• アクセントカラーはライトテーマの値から彩度を10～20%下げます。

批評と監査

以下の項目は、デザインスキル独自の批評または監査構造内の所見として報告します。新しいレポートセクションは追加しません。

• トランクテスト（ページごと）：初めての訪問者が、このサイトが何か、どのページにいるか、主要セクションは何か、ここでの選択肢は何か、構造上のどこにいるか、検索方法を言えるかどうか。明確な回答が3つ以下の場合は、重大度の高い所見とします。
• グッドウィル: 70から開始。価格や連絡先が隠されている、または強制ツアーの場合は15減点。入力形式が厳しい（カード番号のスペースを拒否するなど）またはタスクに不要な情報を要求する場合は10減点。あいまいな選択肢ごとに5減点。各減点とともにスコアを報告します。
• 最初の印象: 目が最初に留まる3つのものを挙げ、それらが重要な3つかどうかを示します。
• ハッピートーク: ページの単語数と、そのうちハッピートークが占める割合を報告します。

リデザイン

ライブサイトの外観を置き換える前に、SEOベースライン（タイトル、メタディスクリプション、見出し、インデックスされたURL）を記録します。URLスラグ、ナビゲーションラベル、フォームフィールド名と順序、ロゴ、法的および同意コピー、アナリティクスIDは、ユーザーが変更を承認しない限り保持します。

バリアント、モックアップ、フォント

• 2つのバリアントの見出しを入れ替えても誰も気づかない場合は、それらは近すぎます。どちらかをさらに変更します。
• 生成されたモックアップの詳細を読むには、ボードをトリミングするのではなく、そのセクションをより大きく再生成します。
• バッチスクリーンショットラウンドでは、375、768、1440pxの幅をカバーします。
• 構築されたページは、失敗した部分を対象とした編集で修正します。ファイル全体の再生成はリビルドの場合のみ行います。
• すべてのフォントを公式リスト（Google Fonts、Fontshare、またはフォントファウンドリー）で確認し、そこからURLを取得します。確認されていないフォントは、名前やURLを推測するのではなく、「保留中」としてマークします。