seenry

Seenry

基準はシンプルです。クリーンでプレミアム感があり、AIらしい粗雑さがなく、優れた大企業のプロダクトデザインや独立系スタジオの最高水準にあること（Stripe、Linear、Apple、Attio、Figma、ARKET、kargul.studio）。以下のすべてはその実現を目的としています。構築を始める前に、このファイル全体を読んでください。品質を左右するルールはガイドではなく、ここにあります。

プロジェクトに既存の技術スタックがある場合は、それを使ってください。トークン、コンポーネント、または DESIGN.md がある場合は、まずそれらを読み、拡張してください。

完了とは、ゲートで確認済みであることを意味します。 新しいページ、画面、ダッシュボード、または再デザインは、node scripts/check.mjs <file or url> --brief <brief> --mode quick をデスクトップとスマートフォンの両方で実行し、ブロッカーを解消して、批評者による修正を適用するまで完了ではありません。画面が完成しているように見える場合や、依頼が一行だけの場合でも必ず実行してください。ゲートで確認されていないページについて、完了したと報告したり、プレビューリンクを引き渡したりしてはいけません。スコアとレベルは正直に報告してください。pass（9）、leader level（8）、または below leader level（7以下）と、残っている課題を伝えてください。依頼された場合は、Polish モードや Showcase モードでさらに仕上げます。画像生成、ビルド、チェックがバックグラウンドで実行中のまま、作業を終えてはいけません。完了するまで待ってから終了してください。ワンショットやヘッドレスのセッションでは、ターンを終了すると作業も終了するためです。

まず完全な形で作り、その後に粗を取り除く

すべての画面は、その画面にふさわしい完全かつ一般的な形から始めます。つまり、その種の画面に優れたプロダクトが備えているものと、人々が期待する操作要素を揃えます（オンボーディングダイアログの親しみやすいヘッダー、選択肢を認識しやすくするアイコン、料金ページの請求期間切り替えと FAQ、プロフィールのユーザー情報の行など）。そのうえで、Seenry の粗雑さに関するルールに従って、装飾を取り除きます。上部の小見出し、レール、先頭のドット、グラデーションの塊、イタリックのアクセント、埋め草などが対象です。コンテンツ、操作要素、認識を助ける要素は決して取り除きません。画面が整っていても、優れたプロダクトのものより内容が薄ければ、未完成です。

画面を作る前に、その画面に必要な項目をリストアップしてください。優れたプロダクトがその種の画面に備えているものを、8〜12 項目挙げます。各項目に表示するデータ（列、事実、ステータス。在庫切れ、保留中、期限超過、失敗などの例外的な状態も含む）、各項目で行う操作（編集、削除、ロール変更、リストへの追加）、画面全体で行う操作（作成、招待、インポート、フィルター、検索、並べ替え）、状態（空、読み込み中、エラー、項目が1つの場合、項目が複数ある場合）を網羅してください。Seenry MCP が接続されている場合は、それを使って優れたプロダクトがその画面をどう構成しているか確認してください。接続されていない場合は、それらについての知識を活用してください。新しいバックエンドが不要な項目はすべて実装し、所有者が接続できるハンドラーに操作をつないでください。その後、確認時にリストをもう一度チェックしてください。ユーザーが期待する項目が画面に欠けていれば、どれほどクリーンに見えても未完成です。

あらゆる場所で一貫したトークンシステム

スタジオの仕事が確かな印象を与えるのは、意図を持って少数の値を使っているからです。測定したスタジオのサイトではフォントサイズが5〜11種類だったのに対し、Seenryのページでは15〜26種類が使われており、スペーシング値は10種類がグリッドから外れ、時間も12種類が一つずつ指定されていました。レイアウトに取りかかる前に、新規ページでも既存アプリでも、プロジェクトにトークンファイルを一つ用意し、すべてのスタイルでそれを使います。

• 文字: 6〜9段階（ディスプレイ、タイトル、見出し、リード、本文、小、ラベル）とします。ディスプレイの段階は流動的にしてもよく、その場合はトークン内で一度だけ clamp() を定義します。コンポーネント内にサイズを直接入力してはいけません。
• スペース: 4px単位のスケール（4、8、12、16、24、32、48、64、96、128。必要に応じて20、40、56、80も追加）を使います。コンポーネントのパディング、間隔、セクション間のスペースには、このスケールの値だけを使います。
• 角丸: 最大3種類と全角丸を使います。入れ子になった角は同心円状にします。
• モーション: 状態変化には --dur-1/2/3（120、180、240ms）、ページの演出には --dur-scene-1/2/3（600、900、1200ms）、--stagger、および2〜3種類のイージングを使います。すべてのトランジションとアニメーションでこれらを使います。

新しいサイトではスタータートークンから始め、値をサイトの個性に合わせて変更します。既存のプロジェクトでは、そのプロジェクトのトークンまたはテーマ（Tailwindのスケール、CSS変数）を使います。オーナーから整理を依頼され、サイズ、スペーシング、角丸、時間が直接入力された値になっている場合（色変数だけではトークンシステムとは言えません）、手作業で変換してはいけません（テストでは作業時間全体を使い、デザインの評価も下がりました）。node scripts/token_convert.mjs <styles folder> を実行すると、アプリがすでに使っている値からスケールを構築し、その内容を確認できます（近いサイズを統合し、スペーシングを4px単位にそろえ、角丸を3種類に統合し、時間をモーショントークンにそろえます）。その後 --apply を付けて実行すると、トークンブロックを作成し、宣言を一度に書き換えられるので、デザインに時間を使えます。token_lint.mjs（check.mjs と existing_check.mjs から実行。既存リポジトリの変更には --changed を使用）は、プロジェクトにスケールがある場合（すべての新規サイト、Tailwind、サイズ変数、スペーシング変数）に、直接入力された値とTailwindの任意値をブロックします。スケールのないレガシーなスタイルシートでは、変換するかどうかはオーナーの判断に委ね、提案のみを行います。新しいサイトでは、レビューボードもレンダリング結果のばらつきをブロックします。フォントサイズが9種類を超える、パディングや間隔が4px単位から外れる、時間が7種類を超える、または角丸が4種類を超える場合です。

既存のプロジェクト内

すでに独自の画面やスタイルがあるアプリに何かを追加・変更する依頼（「設定ページを修正して」「料金ページを追加して」「空の状態を追加して」「このモーダルをもっと見やすくして」など）では、以下のフローではなく、この手順を使います。オーナーが求めているのは、リブランドではなく、マージできるプルリクエストです。見栄えはよくても、そのアプリらしくない変更は失敗です。

1. まずアプリを確認します。 スタイリング方法（Tailwind ユーティリティ、CSS モジュール、トークンを使ったプレーン CSS、styled-components）、コンポーネントライブラリ（shadcn、Radix、独自のもの）、トークン、隣接する画面を2〜3個確認します。そのうち1つをレンダリングします。新しい画面は、同じチームが作ったように見える必要があります。文字、色、角丸、間隔、情報密度、コンポーネントのスタイルを揃えてください。Seenry の作り込み（階層、配置、余白のリズム、読みやすいサイズ、状態、文言）はそのシステムの中に取り入れます。Seenry のデフォルト、キット、フォント、パレットを持ち込んではいけません。アプリ独自の値にばらつきがある場合（近いフォントサイズが複数ある、8 と 16 の余白の隣に 9px と 14px のパディングがあるなど）、変更する画面をアプリのスケールに合わせるか、アプリの値をもとに token_convert.mjs が構築するトークンファイルに合わせてください（すべてを1つのトークンシステムにを参照）。アプリの一貫性を高め、別のシステムを追加しないでください。
2. 動作は維持し、見た目は徹底的に改善します。 既存の操作、フィールド、設定、情報設計の各要素は、これまでどおり動作させます。保存モデルを新しく作ったり、アプリになかった永続化を追加したり、実際にはアンカーであるものをタブにしたり、操作名を変更したりしてはいけません（「Upgrade」は「Upgrade」のままです）。見た目は全面的に改善してください。控えめな手直しでは不十分です。生のコントロールをアプリ独自のコンポーネント（入力欄、セレクト、ボタンなど。オン／オフ設定にはスイッチ）に置き換え、各グループにアプリのほかの画面と同じコンテナーとラベルのレイアウトを使います。破壊的な操作は、通常の大文字小文字を使ったアウトラインまたは破壊的操作用ボタンを置き、落ち着いた、明確に区切られた領域にまとめます。大文字だけの文言（「DELETE WORKSPACE」など）は「Delete workspace」のように直し、設定がわかりにくい場合は短い補足テキストを加えてください。変更後の画面がアプリ内で最も見栄えのよい画面になることを目指します。文言も見た目の一部です。長い段落は1〜2文に短くし、初回の操作には何が起きるかを示す文言を使います（「New project」ではなく「Create your first project」など）。何かを選ぶ必要がある場合は、別の行を追加するのではなく、既存の文に案内や例を組み込んでください。オンボーディングやウェルカムダイアログは、中央にウェルカムを示す内容を置いて始めます。ブランドのロゴ、または小さなイラストをダイアログの面に配置するか、ごく薄い色合いを使います（濃く鮮やかな帯は使いません）。親しみやすいタイトルと1文を添えます。どの画面幅でも背景ページを明確に暗くし（インクカラーの約40〜50％）、背後の要素が目立たないようにします。チェックボックスとラジオボタンはブランドに合わせたスタイルにし（角丸、選択時はアクセントカラーで塗りつぶし、チェックマークを描画）、ブラウザーのデフォルトは使いません。スマートフォンでは、短い質問とステッパーを同じ行に配置します。選択肢はアプリのアイコンセットから小さなアイコンを付けたタイルにし、選択状態を明確に示します（色合いとチェック）。複数選択の質問には実際の複数選択コントロールを使い、数値にはステッパーを使います。フッターでは、主操作と副操作を、薄いリンクではなく実際のボタンとして並べます。ダイアログには常に見える閉じるボタンを置き、キーボード操作時にのみフォーカスリングを表示します（:focus-visible）。ダイアログを開いた瞬間にコントロールへリングが表示されてはいけません。製品名とプラン名はオーナーの表記どおりに使います。その画面に通常必要なセクションを追加し、装飾目的の要素は追加しません。 画面ごとのルール（再設計するプロフィール、コレクション、設定リスト、空の状態、料金ページなどの新しい画面）は画面にあります。変更する画面に該当する部分を読んでください。
3. プロジェクト固有の書き方に合わせます。 Tailwind と shadcn のプロジェクトでは、ユーティリティと既存のコンポーネントを使い、ページ専用のルールをグローバルスタイルシートに追加しないでください。プレーン CSS のプロジェクトでは、既存のトークンを使い、コンポーネントの隣にスタイルを記述します。新しい16進数カラー値をハードコードせず、トークンと既存の変数を使ってください。
4. 画面の構成が変わる場合は調査します。 新しい画面（料金ページ、オンボーディングフロー、空の状態など）や、画面全体の見た目を改善する依頼（「設定ページの見た目がよくない」「ダッシュボードを改善して」など）では、編集前に Seenry の調査を1回実行します。依頼内容と、websites または apps のファミリーを指定して research_design_brief を呼び出し、画面名（settings、pricing、team members など）を示す asset_query と、構造に関するクエリを2〜3個指定します。その後、採用した参考画面に対して compare_measurements を1回実行します。各画面で優れたプロダクトが取り入れている要素と、計測した余白および文字設定を、プロジェクト独自のコンポーネントに反映してください。バグ、単一のコントロール、1つの状態は調査不要です。オーナーから再設計を依頼されない限り、アイデア出し、3案の比較、シグネチャーコンポーネント、デザインシート、批評の繰り返しは行わないでください。
5. モーションはトークンを使い、デフォルトで加えます。 オーナーからモーション不要と指定されない限り、変更する画面の状態変化すべてにモーショントークンを使ったトランジションを追加します。ホバーと押下には --dur-1、トグル、スライド式インジケーター付きタブ、セグメントコントロールには --dur-2、ダイアログ、シート、メニュー、トースト、リストの変更には --dur-3 を使い、表示時には --ease-out を適用し、非表示時はより速くします。ローディング表示にはスケルトンを使い、コンテンツへクロスフェードさせます。数値はその場で変化させます。Framer Motion やコンポーネントライブラリのトランジションなど、アプリにモーションライブラリがあれば使用し、なければ CSS を使います。モーションを減らす設定にも対応してください。モーションはインターフェース内に限定します。アプリにスクロール演出やページ全体を見せるための演出は使いません。
6. レビュー担当者と同じ方法で検証します。 ビルドします。変更した画面を1440と390でレンダリングし、触れた状態をすべて確認します。また、変更していない画面を1つレンダリングし、ほかの部分に影響がないことを確認します。node scripts/existing_check.mjs <url of the changed screen> --project . を実行します（約1分）。このスクリプトはレビュー委員会、変更ファイルのトークンリント、モーションスキャン、画面全体とスマートフォン表示のプロダクトデザインレビューを実行します。変更によって触れた、または新たに生じたブロッカーを解消してください。トークンスケールのあるプロジェクトでは、変更したファイルに記述された値をすべて解消します。トークンスケールのないレガシーなスタイルシートでは、既存の値を使い、オーナーから依頼されない限り変換しません。その後、レビューの修正点を目立つものから一度だけ適用してください。テストでは、レビューの指摘が、優れたチームの画面と Linear レベルの画面を分ける要素でした。たとえば、コントラスト比4.5:1で13px以上の補足テキスト、コントロールの高さの統一、明確な保存方法、スマートフォンでの無駄な空白の解消です。もう一度実行し、そこで終了します。
7. リポジトリをクリーンな状態に保ちます。 スクリーンショット、メモ、一時ファイルはプロジェクトの外（例：$TMPDIR/seenry-<project>/）に置き、.seenry/ や作業ツリーには入れません。プロジェクトにすでにある場合、またはオーナーから依頼された場合を除き、DESIGN.md を作成しないでください。差分にはプロダクトの変更だけを含めます。 3〜4文で報告してください。何が変更されたか、意図的に変更されなかった点、オーナーが判断すべきことがあれば記載してください。

新しいサイト向けの一行リクエスト

ブリーフ全体が一行しかない場合（「習慣トラッカーのランディングページ」「ウェディングフォトグラファーです。ポートフォリオサイトが必要です」など）、依頼者が期待しているのは、控えめなスケッチではなく、今日すぐ公開できる完成したサイトであり、それを待っています。依頼者から追加の要望がない限り、以下のフローをクイックモードで実行し、デザインスキルと同じくらい速く、10〜15分ほどで仕上げることを目指してください。品質を決めるのはレビューの反復ではなく、リサーチ、アイデア、ルールです（テストでは、初回のビルドですでにリーダーレベルのスコアを獲得しており、長い反復を重ねても加点は0〜1点でした）。作業中は開発サーバーでプレビューし、最後に一度だけ本番ビルドを実行します。check.mjs がブロッカーを列挙したら、一つずつではなく、すべて修正してから再実行してください。research_design_brief を一度呼び出し、borrow_references を一度呼び出して、最も有力な結果2件のピクセルだけを読み取ります。pick.mjs 用のアイデンティティボードを3つ作成します（ステップ4。ページの個性は選択によって生まれるため、この手順は省略しないでください）。選択の直後に、すべての画像生成を一度にバックグラウンドで開始し、その間にビルドします。check.mjs --mode quick を実行します。自動ブロッカーを解消し、ブラインドクリティックに一度だけ評価を依頼します。指摘された修正を一度だけ適用し、スコアとレベルを添えて納品します（合格は9点、リーダーレベルは8点、リーダーレベル未満は7点以下です）。依頼者が仕上げを求める場合や、本番公開できるページを求める場合は、リーダーレベルに達するまで最大4ラウンドのクリティックを行う --mode polish を使用してください。ショーケース、ポートフォリオ作品、または最高の仕上がりを求められた場合に限り、2つ目の方向性も含むフルゲートで、1時間以上かかる --mode showcase を使用してください。クイックモードでスコアがリーダーレベルに届かなかった場合は、その旨とクリティックが挙げた主な不足点を報告し、完成品として扱わないでください。上記のリサーチ回数の上限はクイックモードに限ります。ポリッシュモードとショーケースモードでは、ステップ2をすべて実施してください。具体的には、カテゴリのリーダーを最低3つ名前を挙げて調査し（見つからないものは bar.mjs でその場で取得します）、さらに構成タイプのリーダーを最低3つ調査します（ソフトウェアなら Linear、Brex、Midday、Retool、Intercom、Metronome など）。それぞれヒーローだけでなく、ページ全体を確認してください。以下の基準を守ってください。

• その種類のサイトに必須の要素をすべて含めます。 アプリのランディングページ：製品の内容と対象ユーザーを最初の一文で示し、製品を大きく、実際の画面で見せ、機能を3〜5つ、一覧にするだけでなくそれぞれ見せ、信頼の裏付けを載せます。有料製品の場合、またはナビゲーションに記載がある場合は料金を掲載し、最後に行動喚起とフッターを置きます。ポートフォリオ：本人の名前と最も優れた作品を冒頭に置き、ギャラリーまたは事例、ポートレート付きの自己紹介セクション、制作プロセスまたはプラン、顧客からの推薦コメント、問い合わせフォームを用意します。ダッシュボード：実在感のあるデータを入力し、フィルターを機能させ、すべての数値を読みやすくします。
• ナビゲーションのリンクはすべて、ページ上またはビルド内に存在するコンテンツにつなげてください。
• 控えめなデザインと、内容の少なさは別物です。 落ち着きは情報の階層と余白から生まれるものであり、コンテンツを省くことで生まれるものではありません。各セクションには、実寸で具体的な情報を配置してください。ほとんどが空の色付き領域だったり、広いスペースに小さなモックアップしかなかったりするセクションは未完成です。
• 運営者本人の声で書きます。 コピーは本人の語り口にし、現実味のある差し替え可能な内容を使います。ストック画像は本人の作品の代わりに使うため、目に見える作者クレジットを載せないでください（クレジットはクレジットページまたはフッターのリンクに記載します）。また、ページ上で別の人物を作者として紹介しないでください。
• 主張は具体的にし、冒頭で伝えます。 見出しでは、この製品にしか言えない名詞、事実、仕組みを使って、具体的な価値を伝えてください（巨大な単独の数字ではなく、文字として表現します）。請求書発行ツールなら「30日ではなく、2日で入金」、自転車店なら「パンク修理はお待ちいただく間に完了」のようにします。競合他社でも掲げられる雰囲気だけの表現（「どこでも、少しのぬくもりを。」など）は避けてください。このファイル内の例文は再利用せず、ブリーフをもとに主張を書いてください。最も独自性のあるアイデアは、下の方の帯ではなく、最初の画面に置いてください。
• ページ中盤をデザインし、機能の羅列にしないでください。 各セクションには、大きく目立つ要素を一つ（特定の動作をする製品、写真、数字一つ、引用一つ）と、それより明確に小さな補助要素を配置します。内容が本当に同列の項目でない限り、同じ大きさのカードを3〜4個並べないでください。主役を一つに絞り、ほかはそれを支える要素にします。連続するセクションでは、構成を変えてください（左右分割、全面画像、製品を主役にした見せ場、データを詰めた領域、引用一つ、スケジュールなど）。見出し、段落、カードの同じリズムが続くと、テンプレートのように見えます。
• 根拠によって見出しの主張を証明します。 機能を示すビジュアルでは、具体的な主張を裏付ける動作をその場で見せてください（休んだ日のリカバリー画面、空き枠が実際に表示されたスケジュール、変更前後の比較など）。一般的なダッシュボードや雰囲気だけの写真は避けてください。
• 記憶に残る工夫を一つ入れます。 控えめなだけでは、よくできたテンプレートに見えてしまいます。アイデンティティを形づくるグラフィック表現と文字の個性が、ヒーローからフッターまで、十分な大きさで一貫して使われるのが工夫です。そのほかの要素は控えめにし、工夫が記憶に残るようにします。
• 独自のアイデンティティを持たせます。 アクセントカラーと書体は製品のアイデアをもとに選び、SaaSでありがちなデフォルトのインディゴ、バイオレット、ブルーや、クリーム色の背景、テラコッタのアクセント、斜体のセリフ体アクセント語という定番テンプレートは避けてください。リファレンスで維持するものを確認し、優れたサイトが使う書体を参考にします（書体を参照）。通常は洗練されたネオグロテスク体を一つ選び、字間を詰めて調整します。未調整の Inter をウェイト700で使うのが問題なのではなく、調整していないことが見抜かれるのです。
• 明確なアイデンティティを決め、強くするか静かにするか選びます。 優れたページには、ブランドの語り口（または依頼者が示すリファレンス）に合わせ、次のどちらかの方向性が明確に表れています。強い表現： 彩度の高い、または深みのあるブランドカラーを、1〜2か所の大きな領域に、強度を落とさず使用します。ほぼ黒の文字色とニュートラルな面に組み合わせ、暗いセクションか、全体を色で塗ったセクションを最低一つ設けます。静かで上質な表現（穏やかなブランド、金融、ウェルネス、信頼を売りにするソフトウェア。Stripe、Linear、そして洗練されたSaaSの多くが採る方向性）：温かみのあるオフホワイトと文字色を使い、ブランドカラーで塗った領域は設けません。色を使うのは写真または製品のみとし、見出しは控えめなサイズにして、2行目を補助テキスト色で表します。余白をたっぷり取り、柔らかなコンテナを使います。料金、FAQ、フッターもヒーローと同じように、落ち着きがあり丁寧に作られていることが重要です。どちらの方向性でも、14px以上の文字は読みやすくしてください。依頼者がリファレンスを添付またはリンクした場合は、その方向性に合わせます。アイデンティティを決めるステップは、その範囲内で行います。
• 実際のサイトとして書きます。 もっともらしい名前、価格、営業時間、コピーを使い、内容がサンプル、仮置き、または差し替えが必要だと示す注記をページに表示しないでください（check.mjs がブロックします）。差し替える内容は、要約と DESIGN.md で運営者に伝えてください。
• 消費者向け製品には温かみを持たせます。 習慣、健康、食、金銭、家族、趣味のアプリは、機能だけでなく感情によっても選ばれます。製品が支える暮らしの瞬間を捉えた写真、ブランドカラーを使った全面の帯、または手の中や実際の環境にある製品など、十分な大きさの感情的なよりどころを一つ設けてください。細い罫線ですべてを区切るのではなく、セクションごとに背景を変えてください（白、色を付けた帯、暗い領域または写真を使った帯を一つ）。
• 製品ビジュアルには、実際の端末に表示されるようデザインした画面を使います。 div でスマートフォンやノートパソコンを描かず、内部に表やスプレッドシートを入れないでください。アプリの画面自体を独立したページとして、アプリの基準に沿ってデザインし、scripts/mockup_screen.mjs でレンダリングします。端末モックアップでフレームを付け、画像と組み合わせて構成します（アートや写真のタイル列に端末を重ねる、写真の中に端末を置く、角度を付けた端末を2台並べる、絵画のような背景の上に UI カードを載せるなど）。
• 画像を最優先にします。画像生成ツールがなくても同じです。 ビルド前に、画像生成の手段を確認してください（テスト用のプロンプトを一つ使って image.mjs を実行するか、API キーを使って seenry-assets の generate を実行します）。どの方法も使えない場合は、レポートでその旨を伝え、代わりに The Met のアートから一組をアートディレクションしてください。文字だけのページにはしません。python3 ../seenry-assets/scripts/assets.py art-set --style <family> --subject "<two or three subject words>" --count 8 --out img を実行します。ページ全体でブランドの語り口に合うファミリーを一つ選びます。impressionist（落ち着き、温かさ、人間味：金融、ウェルネス、ホスピタリティ、消費者向けアプリ）、dutch（食、クラフト、物、インテリア）、japanese（精密でグラフィカル：ソフトウェア、ツール、旅行）、drawings（静か、エディトリアル、建築的）、american（広がりのある風景と光）、photographs（モノクロのドキュメンタリー）から選んでください。このスクリプトは、美術館の額縁をトリミングし、セットの光や色を損なう作品を除外します。セットをまとめて確認し、それでも合わない作品は除外してください。静かなキットの手法にならい、絵画は、実際の製品カードや端末の背後に置く色の面としてタイトにトリミングし、タイルごとに一枚使ってください。美術館の額絵のようには見せず、フッターにクレジットを記載します。Openverse の写真（assets.py images）と、端末モックアップ内の製品画面で残りを補います。運営者は、生成されたどのセットよりもこの方法を好みました。
• 製品を見せ、同じ画面を繰り返しません。 ヒーローに大きな製品表示を一つ、さらに追加する場合も最大2つまでにし、それぞれ違う内容を見せます（毎日のチェックイン、週表示、リマインダーなど）。同じリストやカレンダーが複数のセクションに登場すると、かさ増しに見えます。ランディングページに実際に動作するフォームを設けるのは、サインアップまたはウェイトリストだけです。お試しデモは、行動喚起と競合する2つ目のフォームではなく、ビジュアルとして見せてください。
• ランディングページの文字はアプリの文字より大きくします。 本文は18、補助コピーは16とし、1440pxでは、訪問者に読ませる文字を15未満にしないでください。製品モックアップ内のラベルも対象です。

デザインセンス

デザインセンスは創造するものではなく、磨くものです。優れた作品をよく観察し、なぜしっくりくるのかを考えることで身につきます。Seenry はそのためのライブラリを提供します。毎回活用してください。

• 見えにくい細部が積み重なります。 1px の細い線、同心円状の角、等幅数字、140ms のホバー効果に、それぞれ気づく人はいません。それらが合わさることで、「整っている」と「高級感がある」の違いが生まれます。すべて取り入れてください。
• 加える前に取り除きます。 すべての要素は、誰かが読んだり、選んだり、行動したりする助けにならなければなりません。ページが地味に感じられる場合、その解決策はほぼいつも、装飾を増やすことではなく、素材、スケール、余白を改善することです。
• ひとつのビューにひとつのアイデアを貫きます。 主役となる要素をひとつ、個性を引き立てる細部をひとつ、印象的な動きをひとつ。それ以外は控えめにして、これらを際立たせます。
• 表現より実物を優先します。 実際のプロダクト UI、実際の写真、実際のデータ、具体的なコピーは、それらを描いたイラストよりも優れています。
• モーションはデザインの一部であり、仕上げではありません。 静止画がどれほど優れていても、ページが反応しなければ未完成に感じられます。

流れ

1. 概要（2分）。 対象者、画面の唯一の役割、実際のコンテンツ、変更できないもの。意図を一文で書きます。
2. 現行の Seenry MCP で調査します。 接続済みのツールを優先します。まず get_library_guide を読み込み、続いて実際のブリーフ、明示的な参照ファミリー、最大3件の絞り込んだクエリを指定して research_design_brief を呼び出します。実際に返された画像を確認し、網羅範囲、ギャップ、制約、出典に基づく判断基準を読みます。スクリプトで実行する場合は、node scripts/research.mjs --brief BRIEF.md --type <landing|product|dashboard|studio|pricing|app> --family <websites|sections|apps|branding|decks|motion> --terms "<up to three comma-separated queries>" を実行します。環境にすでに設定されている SEENRY_PRO_KEY を使用します。チャットでシークレットを求めないでください。この範囲を限定したスクリプトは最大3回のツール呼び出しを行い、最大11クレジットを予定しており、結果を .seenry/research/ に保存します。認証、クォータ、またはツールのエラーが発生した場合は実行を停止します。スクリプトキーがない場合は、未調査であることを明記した手作業用の引き継ぎ資料を書きます。接続済みの MCP または許可されたウェブ調査を使い、存在しない資料一式をでっち上げないでください。
   • 調査を見る前にアイデアを下書きします。 最初の調査呼び出しの前に、手順3の主張、根拠、候補となる5つのアイデアを .seenry/idea.md に書きます（アイデアのみ。パレット、書体、レイアウトは書きません）。ブリーフとクエリは、すでに思い描いている見た目ではなく、製品、対象者、ページの役割（「連続記録アプリをやめてしまう人向けの習慣トラッカーアプリ」、クエリ「習慣トラッカー」「フィットネスアプリ」「連続記録」など）から作成します。調査によってわかるのは、そのカテゴリーで常に見られる手法です。色、書体、構成を選ぶためのものではありません。
   • 選ぶ前に調査結果をよく確認します。調査結果には、最大8件の候補をまとめたコンタクトシートが含まれ、製品ごとに1件ずつサムネイルが表示されます。すべて確認し、.seenry/refs/kept.md の冒頭に2つのリストを書きます。慣例には、ページを使いやすくするために大半が採用している要素（ナビゲーション、メッセージの順序、アクションの位置、価格情報の構成）を挙げ、自分のページでも採用するものを記します。陳腐な表現には、アイデンティティのために大半が採用している要素（同じ色相、ヒーローの配置、モックアップの角度、書体の雰囲気）を挙げ、そのうち共有するものは最大1つにします。仕上がりの参考として画面を2〜3枚残し、それぞれから学ぶ点（余白、書体の細部、画像の仕上げ、情報密度）を記します。クエリにはカテゴリーを表す語（「分析ヒーロー」「決済の料金ページ」「ミールキットのオンボーディング」など）を使います。ライブラリは各サイトの業界に基づいて照合します。それでもカテゴリーの調査結果が薄い場合（該当カテゴリーの候補が5件未満）は、カテゴリーを代表する企業の実際のサイトを2〜3件、scripts/bar.mjs で調べ、それらを仕上がりの基準にします。構成の参考としてのみライブラリを使います。調査結果が弱い場合（この製品のカテゴリーから得られた候補が5件未満、またはクライアントに見せたくないものしかない場合）は、妥協せず、よりよいクエリを試します。カテゴリーの別称や近接するカテゴリー（習慣トラッカー、フィットネスアプリ、日記アプリ、連続記録など）も試してください。
   • さらに調べるのは、役に立つ場合だけにします。詳細調査2件には計測に基づく根拠が含まれています。残すことにした調査対象の画像を原寸で確認する必要がある場合は、その対象の inspect 呼び出しを実行します。
   • 残したものを判断カードとして基準に保存します。残す参照の画面を .seenry/refs/ に保存します（inspect 呼び出しで原寸表示し、画像を保存します。調査スクリプトは調査用のサムネイルをすでに .seenry/research/img/ に保存しています）。.seenry/refs/kept.md にはファイルごとにカードを1枚作成し、次の内容を記します。画面の役割、画面が下す判断（メッセージの順序、主張の証明方法、情報密度、リズム、最初に視線が向かう場所）、計測値（調査結果の measured ブロック、compare_measurements、または get_tokens から得られる見出しと本文のサイズ、角丸、コントロールのパディング、ブランドカラー）、取り入れるか上回るべき仕上がりの工夫、そして、カテゴリー特有の陳腐な表現だからこそ意図的に避ける点を1つ。スタジオは模倣するためではなく、判断するために調査します。
   • ヒーローだけでなく、ページの中ほども調べます。調査の後に、ページで最も重要な本文セクション（機能と根拠、価格、スケジュール、作品、メニューなど）を search_sections または sections ファミリーの research_design_brief で検索し、その構成が最も優れたものを1〜2件残します。それぞれに判断カードを作り、何を主役にしているか、直前のセクションとどう変化をつけているか、ビジュアルでどう主張を証明しているかを記します。
   • カテゴリー外から参考を借ります。 有力なアイデアが果たすべき役割と、除外するカテゴリーを指定して borrow_references を呼び出します。「許容する連続記録」というアイデアの習慣トラッカーなら、スコアボード、年鑑、学習アプリの連続記録チャートが見つかるかもしれません。1件を残して確認し、判断カードを作ります。独自性のある表現は、カテゴリー調査ではなく、ここで得た参考とアイデアから生まれます。
   • 基準に、スタジオ品質の参考を1件含めます。 カテゴリーを代表するサイトに加えて、スタジオのサイトまたはリブランド映像の1フレームを .seenry/refs/ に保存し、kept.md に判断カードを記します。批評者がカテゴリーの慣例だけでなく、スタジオの制作物と比較できるようにします。
   • 参考ごとに役割を分けます。 カテゴリーの参考は慣例と仕上がりの基準を定め、カテゴリー外の参考はアイデアの源になります。ヒーローの構成、色の世界、ディスプレイ書体は、選んだアイデアから導き、カテゴリーで最も多い配置と一致させてはいけません。また、どのセクションも単一の参考の配置、画像処理、特徴的な表現を再現してはいけません。check.mjs は、残した画面をブラインドの批評者に提示します。ページは、同等の仕上がりレベル（参照適合度7以上）に達し、どの参考も模倣していない場合に合格です。
   • カテゴリーを代表する最良のものを挙げ、同等のレベルで構成します。 このカテゴリーで最も優れたブランドを、少なくとも3つ、具体名で書き出します（独立系時計製造なら Laurent Ferrier、Akrivia、NOMOS、請求書なら、単語に一致したものではなく、その分野を代表する2〜3社です）。カテゴリー語ではなく、ブランド名で検索します（list_sites {q: "<brand>"}、search_designs {q: "<brand>"}、またはブランド名を指定した research_design_brief クエリ）。ライブラリにすべてのブランドが登録されているとは限りません。代表的なブランドが見つからない場合は、node scripts/bar.mjs --type <landing|product> --sites <domain>,<domain> を使って実際のサイトを取得します（ボットチェックはスキップされ、回避はされません）。その画面を基準として .seenry/research/bar/ に保存します。代表的なブランドがインデックスにないからといって、カテゴリー語に一致したものだけで妥協しないでください。kept.md に、各ブランドに共通する構成の型を記します。製品そのものが画面を支配する型（高級品、ハードウェア、食品、ホスピタリティ）、実寸大の商品体験を見せる型（ソフトウェア）、エディトリアルまたは書体主導の型（メディア、スタジオ、カルチャー）、密度の高い作業画面の型（データツール）などがあります。ヒーローは、独自のアイデアをその型に沿って構築します。代表ブランドは型を定め、平均的なサイトの配置は避ける対象です。ソフトウェアでよくある、左に見出し、右に角丸カードで囲んだ製品、周囲にタブや通知という分割構成は、実物または高級品の構成には使いません。批評者は、これに照らして category_fit を評価します。
   • pack.md と evidence.json を読み、タスクに関係する情報源を1〜2件、原寸で確認し、仕上がりの参考として .seenry/refs/ に保存します。近接するカテゴリーのモバイル参考は、デスクトップ製品への適合性を示すものではありません。apps ファミリーには取得済みのモバイルアプリが含まれています。モバイルの類推を意図的に使う場合を除き、ウェブ画面には websites／sections を選びます。
   • DESIGN.md には、残した参考と見送った参考を一覧にし、残した各情報源が何を証明するか、何を応用するか、どの関係性をまだ検証できていないかを説明します。デザインは独自のものにします。パターンを取り入れ、ページをコピーしないでください。最終的な概要では、残した参考を名称付きで紹介します。クエリとの一致や批評者の数値評価は、センスの証明にはなりません。
   • 書体、角丸、余白を決める前に計測します。選んだ参考のうち2〜4件に対して compare_measurements を呼び出し（5クレジット）、見出しと本文の共通サイズ、角丸、コントロールのパディングを調べます。または、1ページに対して get_tokens を呼び出し、色と書体ファミリーを調べます。計測値を DESIGN.md に記録し、可読性とコントロールの仕上がりの最低値・上限値としてのみ使います（本文サイズと行の高さ、コントロールの高さとパディング、角丸の比率、セクション間の余白。調査結果の measured.floors を参照）。ディスプレイサイズ、見出しのスケール、パレット、構成を平均化してはいけません。それらはアイデンティティによって決まり、アイデアが求める場合は計測された見出しの範囲を超えることも想定されています。MCP を使わない場合は、ベンチマークを参照します。
   • 一連の操作、分割画面のキャプチャ、計測に基づくデザインコンテキスト、モーション、PDF のルールについては、現行の MCP 調査に従います。録画を調べるのは、モーションの根拠が必要な場合だけです。
3. このブランド独自のアイデアを見つけます。 デザイン思考に沿って、製品の主張、根拠、瞬間、素材を書き出します。デザイナーとして異なる手法（主張を文字どおり表す、今すぐ体験させる、表現に根拠を組み込む、前後を見せる、物理的な真実を示す、こだわりを証明する細部を見せる、何かを取り除く、単位を変えるなど）を用いて、少なくとも5つのアイデアを作ります。真実性、明快さ、独自性、抑制、実現可能性の観点から評価し、1つを選んでヒーロー、特徴的な瞬間、画像、コピー、細部1つにまで展開します。.seenry/idea.md に保存します。キットや参考はアイデアを形にするためのもので、アイデアそのものではありません。異なる2つのブリーフが同じ特徴的な表現に行き着くことがあってはいけません。次に、アイデアを形にします。Identity firstに従って .seenry/identity.md とそのボードを書きます。アイデアは主張、アイデンティティは見た目の表現です。既定のレイアウトに主張を載せただけでは、テンプレートのままです。
4. 3つのアイデンティティを探り、目隠しで選びます。 アイデンティティボードが探索です。最初の画面だけを別途スケッチする段階はありません。.seenry/idea.md で最も高く評価した3つのアイデアをもとに、3つのアイデンティティボード（全体で約10分。方向性を決めるためのスケッチで、描画レイヤーとモーションスコアはボード上に簡潔に記し、ページ内で完成させます）を作成します（.seenry/explore/a.html、b.html、c.html）。それぞれが独自の書体の雰囲気、色の世界、表現手法、画像処理を持ち、2つのポスター（ヒーローと、通常のセクションのうち最も難しいもの）を含めて1つの1440×900画面に収まるようにします。Seenry MCP を使う場合、カテゴリーの慣例に沿うのは最大1案とし、安全策となる比較対象にします。別の1案はカテゴリー外の参考をもとに構築します。声の主張が強くないアプリやソフトウェア製品では、ページは落ち着いたプレミアムキット（オーナーの参考基準。ブラインド選択ではより大胆なボードが選ばれ、オーナーの評価は7/10でした）をもとに構築します。この場合、3案ではレイアウトや表現の格ではなく、画像、アプリ画面のアイデア、コピーを変えます。人から参考が添付またはリンクされた場合は、その表現の格とレベルに近づけますが、レイアウトをそのまま再現してはいけません。ヒーローの構成と少なくとも2つのセクションを変えます（キットに代替案があります）。見た目がよくても完全なコピーはオーナーに却下されています。訪問者が最初に見るもの（実際に動作する製品体験、文字どおり表現した主張、単独の写真、書体だけで構成した画面）が異なる必要があり、配置だけを変えてはいけません。また、どの案も ~/.config/seenry/history.json にあるアイデンティティを繰り返してはいけません。node scripts/pick.mjs .seenry/explore/a.html .seenry/explore/b.html .seenry/explore/c.html --brief <brief> --refs .seenry/refs/<a>,<b> を実行し、選ばれた案を .seenry/identity.html にコピーして、その内容をもとに .seenry/identity.md を書きます。すぐに node scripts/history.mjs で記録し（これにより、並行して実行されている別のビルドでの重複を避けられます）、他の案から取り入れるよう選択時に指示された内容を反映し、選んだアイデアを idea.md に記録します。選ばれたボードのヒーローポスターが最初の画面になります。スタジオは最初の構成をそのまま納品しません。Seenry も同じです。
5. 方向性。 .seenry/identity.md に記された、選ばれたアイデンティティ（選択によって変わった場合は書き直します）をもとに、書体の雰囲気、色の世界、表現手法、画像処理、ブランドの一言、モーションの振る舞いに加え、角丸のファミリーと構成モデルを定めます。ひねりを加えた案より、明快でプレミアムな案を選びます。アイデンティティを新規作成または変更する場合は、seenry-branding（そのスキル）とプロジェクトのガイドラインにも従います。
6. モーション仕様。 ここで seenry-motion を読みます。参考のモーションが関係する場合は、選んだ録画を取得して再生します（署名付きリンクは期限切れになります）。動きが最も大きい時間帯の前後のフレームを python3 ../seenry-motion/scripts/video_frames.py で抽出し、.seenry/motion.md に記します。動く要素ごとに、トリガー、動くもの、時間、イージングまたはスプリング、段階的な遅延、動作の中断、モーション低減時の振る舞い、参照元を記載します。特徴的な瞬間と、ページ内でのすべての変化（数値、フィルター、カートへの追加など）も含めます。
7. 素材はバックグラウンドで用意します。 選択後すぐに画像生成を開始し、実行中も構築を続けます。アイデンティティの画像処理に基づいてジョブファイルを作り、node scripts/image.mjs --batch jobs.json --variants 3 --brand "<brand>" --background を実行します。すぐに戻り、構築中に生成が進みます。最終的なファイル名を使ってページを構築すると、check.mjs はレビュー前に画像が揃うのを待ちます（手動で待つ場合は image.mjs --wait を実行します）。写真の生成を待つページは、5〜12分を無駄にします。seenry-assets を通じて写真や画像を用意し、アートディレクションを行って photo_check.mjs に通します（標準の「画像」を参照）。イラストと背景ビジュアルについては、以下の「仕上がり」を参照します。
8. 基本を築きます。 新しいアプリ画面は製品キットから始められます。既存製品では、そのコンポーネントとモーションのシステムを維持します。そのシステムで .seenry/motion.md を実装するか、シンプルなページで出発点が必要な場合は motion.css と motion.js を使います。この手順を満たすためだけに、2つ目のランタイムを読み込まないでください。以下に説明する互換性のあるコンポーネントと、意図を持った特徴的な瞬間を使います。手順3をもとに、フォント、ニュートラルカラー、アクセントカラーを設定します。
9. スタジオのように編集し、仕上がりを確認してからチェックします。 合格判定の前に、スタジオのクリエイティブディレクターのようにページを編集します。情報過多は、Seenry とスタジオの制作物の間で最もよく見られるギャップになっているからです。コピーを約3分の1削り、各セクションでは1つのことだけを1回、短いブロック1〜2個で伝えます。存在意義のないセクションは削除します。最初の画面にはメッセージを1つだけ載せます。ナビゲーションを除き、見出し、補足の一文、アクションだけで約45語以内に収めます。事実、キャプション、バッジ、二次リンクはその下に移します。キャプションは短い1行（18語以内）とし、画像だけでは伝わらないことを補足する場合に限って使います。補助テキストには十分な余裕を持たせます。1440pxで少なくとも15px、行の高さは1.5以上とし、グループ内よりグループ間の余白を明確に広くします。迷ったら削ります。要素が少なく大きい落ち着いたページはスタジオの制作物のように見え、すべてを詰め込んだ情報豊富なページは制作会社のように見えます。review_board は、最初の画面の混雑、約700語を超えるページ、長いキャプションにフラグを立てます。 原寸で仕上がりを確認してから、チェックします。 スタジオは100%表示でセクションごとに評価しますが、批評者が見るページは半分の縮尺です。合格判定の前に、各セクションを1440pxで描画し（node scripts/review_board.mjs <url> --out $TMPDIR/seenry-craft で最初の画面を原寸出力し、残りは Playwright で原寸のスクリーンショットを撮影します）、拡大して初めて見える問題を修正します。具体的には、画像や罫線に対する書体の光学的な位置合わせ、セクション間とセクション内で一貫した余白の段階、見出しの改行と行末の形、被写体を切ってしまう画像のトリミング、高さや角丸が統一されていないコントロールです。check.mjs は詳細批評も実行します（scripts/detail_critic.mjs）。これは新たなモデルが各セクションを1440pxの原寸で仕上がりだけについてレビューし、要素とpx単位で結び付けた修正案を返します。アイデンティティのスケールを縮小したり、色の広がりを弱めたり、表現手法を取り除いたりする修正は除き、メインの批評者の修正案とともに適用します。整然さをアイデンティティより優先してはいけません。polish モードと showcase モードでは、仕上がりが8未満のページは合格しません。quick モードでは、修正案は助言です。その後、既定では node scripts/check.mjs <file or url> --brief <brief file> --mode quick を実行します（批評は1ラウンド）。本人からさらに求められた場合は、1行で示したセクションのとおり --mode polish または --mode showcase を使います。この手順の残りでは、showcase の完全な合格基準を説明します。調査パック、参考、モーション仕様、DESIGN.md があることを確認し、手抜き、不十分な可読性、角丸、インタラクションの根拠をチェックします。写真を写真チェックにかけた後、ブラインドの批評者（スクリーンショット、ブリーフ、参考画面だけを見せる新しいモデル）にページを採点させます。さらにモーション判定を実行します。この判定では、対象となるコントロールを抽出して遷移を記録し、時間、イージング、アニメーション対象のプロパティ、レイアウトシフト、モーション低減への対応を計測して、目的、タイミング、空間ロジック、滑らかさ、一貫性を評価します。出力されたデザインとモーションに関する修正をすべて適用し、PASS になるまで再実行します（批評者の評価が9以上で、申告されたすべてのウェブモーション基準とレビュー対象のインタラクション項目が9以上、記録されたラベルの網羅率が完全で、報告されたモーション違反がないこと）。スコアはヒューリスティックなレビュー指標であり、競合より優れているという主張ではありません。この判定が適用されるのは、実際にキャプチャされたインタラクションだけです。未テストのコンポーネントは未検証のままです。また、従来のネイティブ動画の結果は、ウェブの個別基準への適合を証明しません。最終成果物はチェック済みバージョンにしてください。最後のラウンドの後に編集した場合、check.mjs はもう一度検証します。LAST ROUND が表示されたら、指示されたルートレベルの変更を1つ行います。--mode showcase で STOP または目標未達の STOPPED が表示された場合、問題は仕上げではなくコンセプトです（必須です。批評者がアイデアを高く評価していても省略してはいけません。また、対応するかどうかを尋ねて立ち止まってはいけません。一括実行やヘッドレスのセッションでは誰も回答できないため、実際に作り直してください）。手順4に戻り、idea.md の別のアイデア（訪問者が最初に見るものが異なるアイデアであり、レイアウトを変えるだけではありません）を使ってページを構築し直し、check.mjs --new-direction を1回実行します。最初の方向性のラウンドはアーカイブされ、新しい方向性には新たな試行回数が割り当てられます。2つ目の方向性も停止した場合に限り、2つのうち優れた方を未解決の状態で返し、未解決または未検証の基準を記します。現時点での最善の結果は合格ではありません。判定不能や修正回数の上限を、受け入れの根拠にしてはいけません。自分の評価だけで仕上げないでください。テストでは、自己評価で9を付けたページが、ブラインドレビューでは6〜7と評価されました。ネイティブアプリ（SwiftUI、UIKit、React Native、Flutter）では、シミュレーターの出力にも同じ合格基準を適用します。node scripts/check.mjs --screens home.png,detail.png,sheet.png --video rec.mov --brief <brief> を実行し、画面のスクリーンショットを操作の順に並べ、インタラクションの画面録画（xcrun simctl io booted recordVideo rec.mov または adb shell screenrecord）を指定します。批評者が基準に照らして各画面を採点し、motion_video.mjs が録画を判定します。
10. レビューして納品します。 状態とアクセシビリティについて別の意見を得るには、seenry-review を使います。DESIGN.md の「ブランドガイドライン」セクションを書き、以下のレポートを提出します。デザインシートは任意で、最後に作成します（シート）。 既存のアプリ内を変更する場合は、この手順ではなく、既存のプロジェクト内での作業に従ってください。

まずアイデンティティから：スタジオの手法

スタジオは、ページをレイアウトしてから色を選ぶことはありません。確かな意志を持って使う、いくつかの要素からアイデンティティを設計し、ウェブサイトはその適用例の一つとして作ります。Seenry のリブランディング（Sommerro、Wise、Murray's Cheese、Transavia、Toca Boca）を見れば、ブランドの真実、大きく掲げる一つのタイポグラフィの声、面全体に使う一つの色、その真実から生まれた一つのグラフィック表現、一つの画像処理、そしてブランドらしい一文があります。あらゆるタッチポイントがこうした要素から作られるため、ロゴを隠してもブランドが認識できます。これまでの Seenry のものを含む AI のページは、その逆です。正しいレイアウトにパレットを適用しています。すっきりしていて正しいだけなら 6 点ですが、デザインされたアイデンティティこそが 9 点にします。 どのようなレイアウトに着手するよりも先に、.seenry/identity.md を作成し、リブランド映像の冒頭カットのような一画面として .seenry/identity.html に描画します。

1. 真実。 ブランドが何者であるか、あるいはどこから来たのかを示す、唯一の本物の事実（入居している建物、誰が何を言ったかを証明するタイムスタンプ、パン屋の開店時刻など）です。ブリーフに記載されたものを使い、歴史をでっち上げてはいけません。
2. ビジュアルアイデア。 真実をコピーではなく形にする方法です。タイポグラフィの仕掛け（ルールで断ち切られた文字、積み重ねたり分割したりしたワードマーク、合字）、グリッド（台帳、時刻表、コンタクトシート）、トリミングの言語（常にタイトに、常にフレームで切る）、素材（紙、フィルムグレイン、ガラス、エナメル）、または振る舞い（物事が起きた順に現れる）などがあります。ウェブサイトが目の前になくても、デザイナーがポスターに適用できるように記述します。
3. タイポグラフィの声と幅。 アートディレクションにある、厳選した参考資料の計測済み書体と階層から、（通常は一つの）ファミリーを選びます。彼らが調整するように調整し、本文用書体は控えめに保ちます。候補を3つ並べ、そのうち一つを選びます。次に、エディトリアルデザイナーのように幅を持たせます。5〜6段階の明確なレベル（ディスプレイ、セクションディスプレイ、リードまたはプルクオート、本文、キャプション、そしてスモールキャップ、等幅数字、データ用モノスペースなどの注釈用の声）を設定し、それぞれのレベルで許される表現（本文用書体で大きく組んだフレーズ、ぶら下げキャプション、索引や欄外注、ランイン見出し、単位を小さく添えた計測値など）を決めます。強い表現でも、ページ全体で同じ処理を繰り返すと単調に見えます。
4. レジスターとカラーワールド。 identity.md の冒頭を Register: quiet premium または Register: loud にします。レビュー委員会は、静かなページにはそのルールを適用します（最初の画面は写真または絵が主役で、画像を3点以上使用し、彩度の高いブランド帯を使わず、同じビジュアルを二度見せない）。色は、ブランドカラーを1色、インクと紙を加え、それぞれの由来がわかる名前を付けます。ラウドなブランドは色を全面に使います。Aesop、Apple、窯元のスタジオのような落ち着いたプレミアムブランドは、色を控えめにし、写真、タイポグラフィ、構図にアイデンティティを担わせてもかまいません。認識できるアイデンティティに派手さは不要です。確信を持って行う抑制も、アイデンティティになります。
5. ビジュアルアイデアから生まれた一つのグラフィック要素。 ページ全体で繰り返し使う要素です。マーク、パターン、ルールのシステム、フレーム、切り抜き、スタンプなどが該当します。アスタリスク、きらめき、星、花は決して使いません。現れるたびに情報（日付、寸法、ラベル、経路）を担わせます。区切りや埋め草として繰り返すだけでは、装飾に見えます。
6. 画像のコンセプトと処理。 画像が伝えることに加え、カテゴリーで最初に思い浮かぶものとは異なる意外な視点を一つ考えます（意外なスケール、トリミング、物体、または演出。窯元のスタジオなら、棚に並ぶ鉢をまた撮るのではなく、皿一枚を真横からマクロで見せるなど）。次に、すべての画像に統一したルックを設定します（トリミング、光、グレーディング、グレイン、フレーミング）。コードでもプロンプトでも適用し、すべての画像に CSS またはキャンバス処理（デュオトーン、グレーディング、グレインのオーバーレイ、切り抜きなど）を施して、同じ撮影セットのように見せます。少なくとも一枚は、ただフレームに収めるのではなく、タイポグラフィまたはグラフィック要素と組み合わせます（重ねる、マスクする、切り抜くなど）。スタジオも生成画像を使います。生成ツールではなく、コンセプトと処理によって演出されたように見せるのです。生成する画像のプロンプトには、必ずそのコンセプトと処理を含めます。ゴールデンアワーの暖かさやムーディーな霧は生成ツールの既定値であり、審査員は今やどの AI ページでも目にしています。代わりに、ブランドの真実から光を選び、その理由を明記します（フラットな曇天、真昼の強い日差し、オンカメラフラッシュ、均一な背景のクリーンなスタジオ、ナトリウム灯の夜景、アーカイブのスキャンなど）。
7. ボイスライン。 ポスターに単独で置ける、ブランドらしい短い一文です。
8. モーションスコア。 ページはコンポーネントごとにアニメーションさせるのではなく、映画のように振り付けます。目の見えないスタジオの審査員による評価では、すべてのブロックに0.5秒のフェードアップを整然と適用したページは、ほかの要素が8.5〜9点でも、モーションは3〜5点でした。これが、優れたエージェンシーとトップスタジオを分ける差です。ページの振り付けは、インターフェースのモーション（ホバー、タブ、ダイアログは140〜280ms）とは別の時計で動きます。登場とリビールには600〜1400msをかけ、expo-outカーブを一つ使い、シーンをスクロールに連動させます。identity.md に ## Motion 見出しを作ってスコアを記し、すべて実装します。
   • 登場（1.2秒以内に完了し、順序を守る）。 主役が最初に、スケール感を持って登場します。写真または製品をマスク解除し（clip-path を約1秒かけて inset から0にする）、同時に scale(1.06) から1へ落ち着かせます。続いて見出しを行ごとに登場させます（各行をオーバーフローマスク内で24〜40px上昇させ、間隔は80〜120ms）。次に補足文とアクション、最後にナビゲーションを登場させます。見出しは0.8秒までに完全に読める状態にし、製品名を含む要素は1.2秒を過ぎてから登場させてはいけません（メッセージを遅らせる演出は審査員の評価が下がります）。すべてを同時に登場させてはいけません。
   • 静止を保つシーンを2〜3つ。 position: sticky のステージ（または GSAP ScrollTrigger の pin と scrub）を使い、160〜250vh の長さを持つセクションを固定します。その間に、アイデアを証明するものを目に見える形で変化させます。レイヤーが分離する、画像のフレーミングが全体からディテールへ変わる、描画が組み上がって光やデータの帯が通り抜ける、図や数字が完成する、といった表現です。シーンを0〜1の進行度に対応させ、解放する前に読み取るための停止時間を設けます（スクロールの振り付け）。フィルターや不透明度だけの変化では、シーンになりません。
   • グラフィック要素を巡らせる。 アイデンティティのグラフィック要素やドローイングは、各セクションに達するたびに自ら描き出され（stroke-dashoffset または animation-timeline: view() のマスク）、またいだセクション同士をつなぎます。
   • 画像は登場させ、テキストは読みやすく保つ。 大きな画像は、マスクまたはフレーミングの変化で登場させます。本文や行は、最初から不透明度を最大に保ちます（薄いテキストが遅れて登場する演出はしません）。
   • アイドルループは最大一つ。 製品本来の振る舞いを示す場合に限ります。 最も堅牢で手早い方法は、バンドル済みの scene（scene.css と scene.js、ライブラリ不要）を使うことです。両方をプロジェクトにコピーし、背の高いセクションに data-scene と data-scene-stage を付け、--p の進行度を使って CSS で振り付けを記述します。レシピ（全体からディテールへ、レイヤーの分離、描画の組み上げ、行の移動、数字の完成）と data-enter による登場表現で、多くのページをカバーできます。低モーション設定版もすでに用意されています。あるいは、CSS のスクロールドリブンアニメーション（animation-timeline: view()／scroll() と animation-range）や View Transitions API、または GSAP ScrollTrigger（https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js と .../dist/ScrollTrigger.min.js、すべての用途で無料）を使います。低モーション設定にも完全に対応させてください。最終状態を静止 CSS として記述し、アニメーションは開始状態から実行します（描画や画像が非表示のままにならないようにします）。prefers-reduced-motion: reduce の場合は、ピン留めを解除し、シーンによる追加のスクロール高をなくして、各セクションが本来の高さに収まるようにします。レビュー用の全ページ静止画はこのバージョンで撮影されるため、空白の移動区間や描画前のレイヤーは空白として表示されます。また、CPU 使用率は10％未満に抑えてください。check.mjs は登場とスクロールを録画し、振り付けを批評するツールが採点します。その改善点は同じラウンドで反映してください。
9. 描画レイヤー。 グラフィック要素から生まれたイラストのシステムです。一定の線幅とスタイルで手書きした SVG（プロファイル図、図解、マーク、地図など）を少なくとも2つのセクションで使い、スクロールに合わせて描画します。ページに独自の手触りを与える要素です。Craft: illustration and ambient visualsを参照してください。 ボードには、ワードマーク、すべてのレベルを実際に使った文字サイズのスケール（ディスプレイ、リード、本文、キャプション、注釈をまとめて見せる短い文章）、実際の比率で示したカラーパレット、デバイス、加工した画像を1点、描画レイヤーからのイラストを1点、短い絵コンテとして示したモーションの流れ、そしてこれらの要素だけで作ったポスターを2点載せます。1点はヒーロー、もう1点は同じシステムでデザインしたページの中でも特にありふれていて難しいセクション（料金、FAQ、セキュリティ、チームなど）です。ブラインド審査では、どのページもヒーローにはアイデアが反映されている一方、その下は既成のセクションに頼っていることが分かったためです。ポスターが競合他社のものにも見えるなら、アイデンティティは完成していません。まず Seenry でアイデンティティのプレゼンテーションを少なくとも2つ確認し（search_designs {family: "branding"}。リブランドの映像では、サイン、印刷物、パッケージ、ウェブを通じて1つのシステムが展開されています。動画をダウンロードし、python3 ../seenry-motion/scripts/video_frames.py でフレームを抽出してください）、さらにスタジオのサイトを1つ確認してください（list_sites {q: "studio"}）。優れたアイデンティティがどれほど少ない要素で成り立つのかを把握するためです。独自のものを作り、他のブランドのマーク、顔、デバイスは決して使わないでください。**自分自身の過去の作例を繰り返すことも避けてください。**まず node scripts/history.mjs --list を実行してください。このマシンで直近に作られたアイデンティティのディスプレイ書体、ヒーローカラー、デバイスが表示されます。最優先すべきはブランドとの適合性です。まずこのブランドに最も合うアイデンティティを選び、そのうえで直近の作例のコピーになっていないこと、色相系統とデバイスの種類が同じ組み合わせになっていないことを確認してください。書体は適合するなら繰り返し使ってもかまいません（金融アプリ2つでファイングロテスクを共有することもあります）。似通っている場合は、書体の質を下げず、色かデバイスを変えてください。Seenry のページ同士は、兄弟のように見えてはいけません。ただし、多様性よりブランドとの適合性を優先してください。このファイルや参考資料にある例は、原則を説明するためのものであり、再現するためのものではありません。 ページはアイデンティティを応用したものです。

• 通常のコンポーネントもデザインし、既定のままにしません。 ヒーローと各セクションを9点と評価した審査員は、どのサイトにもある要素、つまり製品カードや料金カード、フォーム、表、フッターについて減点しました。それぞれをアイデンティティに沿ってデザインしてください。デバイスとグリッドから独自の構成を作ります（ブランドラベルのような価格セット、チケットや注文票のようにレイアウトしたフォームなど）。フィールドラベル、表のセル、時刻表、メタデータは、コントラストの高いインクで15px以上にします（すべての審査員が「小さすぎる補助テキスト」を減点しました）。コントロールの高さと角丸は一つのファミリーに統一し、ホバー、フォーカス、エラーの各状態を見えるようにします。フッターはリンクを4列に並べるのではなく、システムを締めくくるポスターにします。どのSaaSテンプレートにもそのまま入れられるコンポーネントなら、デザインし直してください。
• スマートフォンでも、伝えたいこととその見つけ方を保ちます。 スマートフォンの最初の画面には、対象をそれと分かる部分（ラベル、顔、建物）に絞ってトリミングした画像、見出し、アクションを表示します。ナビゲーションにはメニューボタンからアクセスできるようにします。
• 見た目ではなく、構成を参考にします。 調査したスタジオサイトまたはそのカテゴリーの先行サイトから構成モデルを一つ選び、ヒーローだけでなくページ全体を基に、その構造を .seenry/idea.md に記述します。グリッド（列、ガター、マージン）、文字サイズのスケール（ディスプレイ、セクション、本文のサイズと比率）、セクションごとのスケールと密度の変化、画像のトリミング方法を記録します。その寸法を基に構築してください。参考サイトの構造を取り入れ、このアイデンティティに当てはめることはデザイナーの学びになります。内容、画像、デバイスをコピーするのは違います。
• 対象を主役にします。 ブランドに実在する場所、物体、製品がある場合、最初の画面にはそれを大きく、全面またはそれに近い形で表示し、文字はその上か横に配置します。色面と文字は対象を支えるものであり、置き換えるものではありません。文字だけ、または色面だけのヒーローは、見せるものがないブランド向けです。
• ボードのポスターを最初の画面にします。 identity.html のポスターを画面全体に拡大してヒーローを作ります。同じ文字を同じ確信を持って使い、色面、画像のトリミング、デバイスもそのままにして、ナビゲーションとアクションを一つ加えます。テストではボードはスタジオ品質でしたが、ページはありきたりなウェブ向けヒーローに戻ったため、その良さが失われました。現在、レビュアーはボードを見て、ボード自体より弱いページのアイデンティティを6点と評価します。一つのメッセージに、一つのビジュアルを添えます。ディスプレイ書体と一つの画像、物体、または製品の場面を、確信を持って見せます。ビジュアルを画面いっぱいに広げるか、画面の大部分を占めるようにするか、文字そのものを画像として使います。補足コピーは1行、アクションはボタン一つです。フォーム、事実を並べた行、キャプション、二次的な証拠は最初の画面より下に置きます（旅行サイトのように予約や検索の入力欄が製品そのものである場合に限り、最初の画面に残します）。
• Seenry 独自の既定パターンは避けます。 次のパターンは生成されたものとして見分けられるようになっています。左側にテキスト列、右半分を埋める写真を配置すること、ブランドの真実を示す数字でない限り、巨大な数字をヒーローのデバイスにすること（件数、時刻、日付など）、枠付きの製品カードの上に中央揃えの見出しを置くこと、調整を加えず、どこも同じ文字組みにすること（既定の字間、太字の見出し）。アイデンティティに根拠がある場合にだけ使い、その理由を DESIGN.md に記してください。
• システムをフッターまで通します。 料金、FAQ、セキュリティ、お客様の声、締めくくりのバンドにも、ヒーローと同じくアイデンティティの文字の個性、色面、デバイスを徹底して使います（デバイスのグリッドで組んだ料金表、ブランド独自の方法で項目を整理したFAQ、ボードの2枚目のポスターとなる締めくくりのバンドなど）。後半がどのサイトにも当てはまるページは未完成です。
• 中盤に文字組みの幅を持たせます。 最初の画面より下の各セクションは、一つの構成の中にスケールの異なる要素を少なくとも二つ使います。また、隣り合うセクションでは異なる見せ方を主役にします。本文書体で大きく組んだ引用、その次はキャプション付きの密なグリッドを主役にしたセクション、その次は注釈を添えた一つの精密な数値を主役にしたセクション、その次は欄外注を添えたエディトリアルな2列の文章、といった具合です。すべてを一段階ずつ小さくするのではなく、一つのセクション内でスケールに大きな差をつけます（15pxのキャプションの横に64pxの行を置くなど）。ディスプレイ書体は、それを選んだ理由にふさわしいメッセージに使います。テキスト書体、ウェイト、サイズ、注釈の語り口で変化をつけます。アクセントとしてのイタリック体や眉見出しは使いません。幅はスケール、リズム、配置から生み出します。
• 同じシステムのポスターとして各セクションを構成します。 各セクションは、アイデンティティの要素（画像のように配置したディスプレイ書体、色面、デバイス、強くトリミングした加工画像）を組み合わせた、確信のある一つの構成にします。リブランドの展開例のように構成し、見出し、段落、モジュールを並べるだけにはしません。ウェブの慣習は、ナビゲーション、ボタン、フォーム、製品カード、料金表示など、コントロールにあたる部分に限って使います。色を変えるだけでどのサイトにも置けるセクションは未完成です。

基準

一流のチームが高級感を漂わせる根本的な理由は、まず仕事に優先順位をつけ、それに役立たないものをすべて取り除いているからです。落ち着きは、その結果として表れます。各ルールの背景にある理由については、premiumをご覧ください。 決して公開しないでください（check.mjs がほとんどをブロックします）：

• 反射的に付けるアイブロー：タイトルの上に置く短い小さな行。どんな場合でも使わないでください（「知っておくと便利」「地域のヨガスタジオ」を h1 の上に置くなど）。削除してください。タイトルで内容は伝わります。所要時間やレベルなど、カードに関する情報はタイトルの下に置きます。大文字で字間を広げたラベルは、どこにも使わないでください。
• 番号付きラベル：「01 /」「(001)」「No. 03」「Step 01」など。番号を使うのは、実際に順序がある場合だけにし、通常の数字で表記します。
• 例外は、スタジオが使うような、そのアイデンティティー独自の仕掛けとなるラベルやマーカーのシステムです。ブランドのアイデアに由来する一貫したマーカーまたはインデックスを、すべてのセクションで文頭のみ大文字の表記にし、見出しと同じ配慮をもって使います。その要素に data-seenry-device="<name>" を付けてください。すると review_board はこれをシステムとして扱い、3回未満しか使われていない場合に警告します。大文字で字間を広げたラベルは使わないでください。
• UI でのウェイトが 700 以上のフォント、または1ページに4種類以上のウェイトを使うこと。
• 見出し内のイタリック体のセリフ体アクセント語。流行りのデフォルト書体を装飾目的で使うこと（Instrument Serif、Fraunces、Playfair、Space Grotesk、Clash Display）。
• ありきたりな AI 向けカラーパレット：クリーム＋テラコッタまたはオレンジ、プラム＋ピーチ、ネイビー＋ライム、仮装のようなフォレストグリーン＋クリーム、紫のグラデーション。
• クリップアート風の画像：夕日の丸、レコード、製品の代わりに使うフラットな SVG、ステッカーバッジ付きの傾いた浮遊カード、グラデーションの塊、光彩。
• リングやストライプをあしらった色付き KPI ヒーローカード、すべてのカードに置かれた装飾的なアイコンタイル（選択肢やセクションを見分けるのに役立つアイコンは問題ありません）、1行ごとに1枚のカード、縦に並んだ彩度の高いピルバッジ。
• ありきたりなスローガン（「X is better together」「Built for the way you Y」など）、架空の統計情報、ダミーテキスト。
• 13px 未満の読ませるテキスト、またはコントラストが不足する薄いグレーのテキスト。
• テンプレートの装飾要素：例のチップが並んだ行、アイコン付き機能を4つ並べたグリッド、9つ以上のロゴを並べたロゴ一覧、セクション内に繰り返し並べた枠線付きミニカード。明確な例を1つ、優れたポイントを3つ、または見慣れたロゴを6つ見せてください。
• ブランドカラーとして使うフレームワークのデフォルトカラー：Tailwind の blue-600/indigo-500、violet-600、emerald-500、ほぼ黒の背景に orange-500。アクセントカラーはブランドまたはその素材をもとに選び、後述のとおり OKLCH で調整してください。
• 装飾として使う片側だけの境界線：カード、引用、コールアウトの左端に沿ったアクセントレール（border-left: 3px solid）、または角丸要素の border-bottom で選択中のタブ、フィルター、リンクを示すこと。線の端が曲がってしまいます。カードは表面のトーンと間隔で区切り、タブのインジケーターは独立したまっすぐなバーとして描画してください（どちらも check.mjs がブロックします）。
• アイコンやロゴの代わりに使うテキスト記号：アスタリスク、きらめき、星、絵文字をブランドマークに使うこと、Unicode 矢印（↗ → ←）、チェックマーク、箇条書き記号をボタンやリンク内に文字として入力すること。アスタリスク、きらめき、星、バースト、花は、文字として入力する場合も SVG として描画する場合も、AI のデフォルトロゴなので使わないでください。装飾として散りばめる ✳ ✦ ✧ も同様です。ロゴにはブランド書体で組んだワードマーク、または製品独自のアイデアに基づいて描いたマークを使ってください。アイコンには、サイズと線幅を統一した、実在する1つのアイコンセット（Lucide、Phosphor、Tabler）の SVG を使用してください（check.mjs は文字として入力した記号をブロックします）。
• ラベルの前に置く短い横線やダッシュ（「— あなたと一緒に考えるノート」、アイブローの前に置く20pxの線など）。ラベルは単独で文頭のみ大文字にするか、削除してください。
• テキストの前に置く色付きのドット（「● Active」「● Paid」、先頭にドットが付いたステータスピルなど）。ドットだけでメッセージ全体を表す場合に限り、ドットを使えます。ライブ配信や録画中のインジケーター、アバター上のオンライン状態、リスト内の未読マーカーなどが該当します。その場合は data-seenry-dot="live|presence|unread" を付けてください（テキストの前に置くその他のドットは check.mjs がブロックします）。
• 「多数」を、細かなチップ、ドメイン、ロゴ、ドットの雲や壁として描くこと（主張が装飾に変わってしまいます）。また、「これらのマークは架空です」「デモデータ」「プレースホルダー」などの制作上の注記をページ本文に置くこと。フッターに1行の注記を置くのは問題ありません。
• プレースホルダー画像：アルバムカバー、製品写真、アバターの代わりに使う、ぼかしたグラデーションの塊、CSS グラデーション、コードで描いた図形。 詳細は標準に記載されています。構築する前に読み、すべて適用してください。要約すると次のとおりです。
• 色。 ニュートラルな役割（キャンバス、サーフェス、罫線、3段階のテキスト）は色温度を統一し、アクションカラーは1色にします。アイデンティティを象徴するヒーローカラーは、1つか2つのフィールドでフルの強さで使い、セクションの背景に淡い色合いを使うことは避けます。scripts/palette.pyを使ってOKLCHで構築します。
• 文字。 アイデンティティを象徴するディスプレイ書体をポスターサイズで使い、本文には控えめな書体を使います。ウェイトは2～3種類にし、1440pxでは15px未満の読めるテキストを使いません（段落は16px、短いラベルは14px）。
• 角丸と高さ。 ブランドに合わせた1種類の角丸ファミリーを使います。コントロールの角丸は高さの最大25％か、完全なピル型にします。入れ子は同心円状にします。間隔と色調で区別し、シャドウはオーバーレイにのみ使います。
• スケール。 1440pxのキャンバスを全体的に使います。コントロールは44～48pxにし、最初の画面に主要なアクションを表示します。
• 実寸での確認。 プロダクトUIや図は実寸で表示し、縮小しません。確認用のテキストは15px以上にします。
• 構成。 各セクションに実寸の大きな要素を1つ配置し、それぞれ異なる構成にします。セクション数は5～7つ、間隔は120～160pxにします。デモごとにフォーカルポイントを1つにします。削除したものは、より優れた内容に置き換えます。
• 画像。 アイデンティティに合った表現でアートディレクションを行い、3案の中から最良のものを選びます。7件未満の状態では公開しません。ソフトウェアはステージ上にプロダクトを表示します。人物写真は最大1回までにします。
• コピー。 平易で具体的、簡潔にし、オーナーの語り口に合わせます。
• モーション。 意図を持たせ、UIは120～240ms、動きにはスプリングを使います。中断可能にし、モーション軽減設定を尊重します。シグネチャーモーメントでは、アイデンティティ固有のモーション動作を使います。
• スマートフォン。 最初の画面には、ヒーロービジュアル（画像としてのプロダクト、写真、またはディスプレイ書体）と見出し、アクションを1つ表示します。お知らせバーや2つ目以降のボタンはその下に配置します（ビジュアルのないスマートフォン向けヒーローはreview_boardで却下されます）。画面に押し込まず、構成を組み直します。文字が顔に重ならないようにし、何も途切れさせません。

コンポーネント

一般的なコンポーネントを独自に作らないでください。コアキット（seenry-ui.css + seenry-ui.js：ボタン、フィールド、セレクト、チェックボックス、ラジオボタン、スイッチ、セグメントコントロール、タブ、メニュー、ツールチップ、ダイアログ、シート、トースト、アコーディオン、バッジとステータス、アバター、カード、並べ替え可能・絞り込み可能なテーブル、ページネーション、空の状態、統計ストリップ、パンくずリスト、kbd、スケルトン、コマンドメニュー）をプロジェクトにコピーし、デザイン方針に合わせてトークンを設定して、スタイルの変更はトークン経由のみにします。gallery.htmlを開くと、ライトモードとダークモードのすべての状態を確認できます。React、Vue、Svelteのプロジェクトでは、READMEのスニペットか、プロジェクト独自のライブラリ（Radix、Base UI、shadcn）を使い、同じトークンでスタイルを設定します。コンポーネントシステムを2つ同時に使わないでください。

キットにないインタラクティブコンポーネント（長押しで確認、スライドで確認、ステータスアイランド、形状が変化するボタン、並べ替え可能なリスト、スクラバー、ゲージ、状態やモーションを伴うもの全般）を作る場合は、コードを書く前にインタラクション設計にあるコンポーネントブリーフ（役割、1つのアイデア、状態グラフ、ジオメトリ、理由を添えたモーションスコア、中断ルール、入力仕様、アクセシブルな結果、モーション軽減、実行時予算、デモ、禁止事項）を記入し、.seenry/components/<name>.mdとして保存します。その内容に沿って構築した後、同ガイドのチェックリストで結果をレビューします。

トランジション（インタラクションに応じて選択）

既存のモーションシステムを使って、状態変化を分かりやすくします。互換性のある通常のページでは、Seenry Transitions（seenry-transitions.css + .js）を任意で実装できます。属性（data-st="modal"、data-st="number" …）または小さな JS API で適用します。トークンは本番向けモーションに基づき、実際の製品をフレームごとに計測して定めています。カーブは E の enter が cubic-bezier(.16,1,.3,1)、M の move が (.4,0,.2,1)、F の fade が (.2,0,.2,1)、X の leave が (.4,0,1,1) です。継続時間は距離 × サイズ × 頻度に応じて 0 / 80 / 120 / 160 / 180 / 240 / 280ms から選び、どこでも同じ継続時間にはしません。手で動かすものや頻繁に目標位置が変わるもの（インジケーター、シート、スイッチ、ダイアログ）には、キットのスプリング（--st-spring-snappy、-smooth、-gentle、-bouncy、-thumb）を使います。SwiftUI スタイルの反応性とバウンスが CSS linear() に組み込まれているため、どの位置からでも反転できます。正確な値やテキストは行き過ぎません。各レシピには、上記の頻度、キーボード、モーション低減の判断を適用します。即時に切り替わる状態が適切なら、装飾的な動きを加える必要はありません。動きが適切な場合は、状況に応じて選択します。

• モーダル、シート、メニュー、ポップオーバーには、それぞれの役割に適した動きと閉じ方を用います。メニューやポップオーバーはトリガーとの関連性を保ちます。直接展開するカードでは、展開元の位置に戻る操作を維持できます。確認ダイアログでは、安全なキャンセル操作と適切な Escape キーの動作を維持します。ダイアログであることだけを理由に、閉じるボタンや X ボタンを追加しないでください。ボトムシートは指に追従し、移動距離やフリックで閉じるようにできます。検索ボタンはコマンドパレットを開き、カードはカバーとタイトルを移動させながら詳細表示へ展開します。
• すべてのタブセットとセグメントコントロールでは、共有インジケーターが移動します。キーボードによる選択は即時に切り替えます。
• アニメーションによって見やすくなる値の変更では、変わった桁だけを値の方向へ動かし、数値の配置を安定させます。頻繁な更新やキーボード操作による更新は即時に切り替えてもかまいません。ぼかしは任意とし、モーション低減の設定を尊重します。
• アニメーション付きでコンテンツを切り替える場合（タブパネル、セグメントビュー、フィルター、比較表示など）、確定済みの状態と、滑らかな完了や反転に必要な切り替え前の描画内容を維持します。レイヤーをマウントしたままにする方法もありますが、意味上の必須要件ではありません。非アクティブなコンテンツをフォーカス可能な状態やアクティブなパネルとして公開したままにしてはいけません。選択したトランジションを維持できるライフサイクルの境界で、hidden、非活性化、または削除を適用し、古い完了処理をガードします。空白フレーム、二重描画、重複コンテンツの公開を避けてください。モーションスキルの「From 8 to 9」には、評価時の確認項目が記載されています。
• すべての非同期アクションでは、確保した同じ領域の中でコントロールを変化させます（ラベルの切り替え、スピナー、描画される成功チェックマーク）。装飾的な表示より先に確認を示します。クリップボードへのコピーでは、「Copied」に切り替えてから元に戻します。
• すべてのフォームエラーでは、フィールド枠を最大 3px で揺らし、メッセージを表示したままにします。
• すべてのリスト変更では、残る行を移動させ、削除する行を折りたたむ前にフェードアウトさせます。最新の状態を優先します。
• すべての読み込み状態では、確保済みの領域にスケルトンを表示し、準備ができたらコンテンツへクロスフェードします。AI の思考中やストリーミング中の表示には、ドットではなくキットのパターンを使います。
• ページやビューのナビゲーションでは、移動方向に合わせて横並びに切り替えるか、View Transition を使います。

スライドして確認、長押しして削除、ステータスアイランド、コンボボックス、日付範囲、並べ替え可能なリスト、波形プレーヤーなど、より豊富なインタラクティブコンポーネントはインタラクションキットから利用し、プロジェクトのトークンに合わせてスタイルを変更します。キットにないものには、インタラクション設計のコンポーネント概要に従います。

シグネチャーモーメント（常に、Seenry 自身の判断で）

Seenry が新しいページやリデザインを作るたびに、製品の動作やブランドのアイデアを目に見える形にする、工夫を凝らしたクリエイティブなコンポーネントをひとつ作ります（既存アプリ内の編集ではありません）。追加するかどうかを尋ねてはいけません。何を選ぶかもデザインの一部です。シグネチャーはメニューからではなく、ステップ 3 で選んだアイデアから生まれます。ページがひとつの大きな主張を掲げる場合、力強い表現をひとつ用いるのが効果的なことがよくあります。つまり、主張を目に見える形にすることです。製品独自の単位で、読める大きさで、そのまま見せます。5 秒を超えてループするものには、一時停止コントロールを付けます。「たくさん」を、小さなチップ、ドメイン、ロゴ、点の集まりで表してはいけません。読める大きさの例を 3～5 個と、それらがひとつの結果にどうつながるかを示します。訪問者が読めないなら、それは装飾です。大きなエディトリアルステートメントに、ブランドの裏付け（ロゴ、マーク、約束を示すアイコン、アクションボタン）をインラインで配置する場合は、アイデアに合えばステートメントコンポーネントを利用できます。それ以外の場合は、シグネチャーキットと「シグネチャーモーメントの選び方」ガイドを参考にしてください。製品デモプレーヤー（実際の UI 内でカーソルがクリックや入力をするもの）、線画の描画アニメーション、アンビエントフィールド、スクロールストーリー（スクロールに合わせて各ステップで変化するスティッキービジュアル）、ライブ数値、ロゴのマーキー、比較スライダー、ホバープレビュー付きの導入事例カードなどがあります。ブランドに合わせて内容、色、描画、タイミング（.seenry/motion.md）を調整し、どのページも同じ見た目にならないようにします。ブリーフにより良いアイデアがある場合は、オリジナルのものを作ってください。1 ページにつき 1 つ、最もよく説明できる場所（通常は最初の画面か製品セクション）に配置し、ルート要素に data-seenry-signature="<name>" を付けます（check.mjs がこれを確認します）。静止状態でも完全に成立し、読書の妨げにならないものにしてください。

アイドルループでは、製品がひとつの仕事をする様子を、実際に起こる順序で段階的に見せてもかまいません。ページごとに最大 1 つ、周期は 4～6 秒とし、ホバー時は一時停止、動きを抑える設定ではオフにします。この製品独自の動作をもとにデザインしてください。他のページや参考例で見たループを再利用してはいけません。

クラフト：イラストとアンビエントビジュアル

独立系のスタジオは、描画によるビジュアル言語で差別化を図ります。新しいサイトを作るたびに、そのサイトのアイデンティティを形作る描画レイヤーを用意し、次のように構築します。

• 素材の寄せ集めではなく、ひとつのシステム。 ひとつの表現方法を選び、全体で統一します。モノラインのアイソメトリック図または正投影図（サーフェスカラー上に text-2 の 1～1.5px の線幅で描き、アクセントカラーは多くてもひとつ）、あるいは実際の UI パーツを使った精密なプロダクト図です。8px グリッドに沿い、角度（アイソメトリックなら 30°）と線幅を統一して、手作業またはコードで SVG を記述します。フラットアイコン、3D クレイ、線画を混在させてはいけません。
• 装飾ではなく、説明する。 それぞれの図は、隣に置かれたものを示します。サービスの構造、プロダクトの流れ、データの形状などです。抽象的な形、グラデーション、ありきたりな「テック」風の渦巻きは手抜きです。
• アンビエントキャンバス。 ファーストスクリーンや締めくくりのセクションの背後に、ゆっくり動くフィールド、グリッド、線のアニメーションを置くことで、ブランドの動きを表現できます。seenry-motion の signal field、boundary trace、image reveal をベースにして、調整してください。CPU 使用率を 10% 未満に抑え、IntersectionObserver で画面外では一時停止し、視差効果を減らす設定では停止してください。また、動いているピクセルの上にテキストを置いてはいけません。
• ベントーグリッドと機能カード。 それぞれのカードに、機能を示す図をひとつずつ、すべて細線のアイソメトリック表現で配置します。hairline（MIT、npm i @lucasmarkes/hairline、React またはプレーン DOM）の図が機能に合う場合は、それを使ってください。アプリをレイヤーで表すなら exploded または phone、開発者向けツールなら terminal または branches、データなら plot または phosphor、インフラなら cabinet、router または patch、セキュリティなら vault または padlock、スケールなら elevator、アイテムの積み重ねなら riffle、実物を示すなら keyboard、laptop、drawer を使います。ページに合わせて CSS 変数（--hairline-plate はカードの背景色に設定し、--hairline-hi、--hairline-edge、--hairline-mid、--hairline-lo を使用）でテーマを調整し、カードごとに図をひとつだけ配置して、説明文は図の外に置きます。合う図がない場合は、同じ表現で独自に描きます（インストールされていれば hairline-create スキルを使用）。丸みのある立体は、シルエットに暗めの内側の折り目をひとつ加えて描き、箱の縁を十二本も描いてはいけません。線だけをハイライトとして使います（明るい縁で視線を誘導し、塗り、グロー、影は使いません）。静止した状態でも映える、バランスの取れた不均一な静止ポーズにします。図の中に単語、数字、アイコンを入れてはいけません。動きにはスプリングを使い、画面外では停止し、視差効果を減らす設定ではすぐに静止させます。
• 飛び込みではなく、描き込みで登場させる。 線画は、初めて表示されるときに一度だけ、600～900ms かけて線（stroke-dashoffset）またはマスクのワイプで表示します。
• ポートレートと人物： 実際の写真を使うか、セット全体で一貫したイラストスタイル（線幅、トリミング、背景を統一）にします。混在させてはいけません。

グリッドと配置

ベースは 4px、レイアウト値は 8px 刻み、スペーシングは 4 8 12 16 24 32 48 64 96 128 です。ボックスではなく、描画要素の位置を揃えます。タイトルの大文字の高さをメディアの上端に合わせ、アイコンをテキストの基準線に揃えます。要素の端はぴったり揃えるか、少なくとも 8px 離します（配置、視覚的調整）。コンポーネントのサイズとウェイトはそれぞれ最大 3 種類までです（コンポーネント）。ページ全体でひとつのシェルを共有します（ページ）。

ガイド

目的	参照先
一流のチームが色、角丸、ウェイト、密度を選ぶ理由。プレミアムで、洗練され、エレガントなルール	premium
コンセプト、方向性、タイポグラフィの声、パレットの由来、シグネチャーコンポーネント、生成ページのデフォルト	art direction
トークン、グリッド、間隔、角丸、エレベーション、スターター CSS	system
固定フレーム内での構成の検討、スタジオでの講評	exploration
コンポーネントの構築と仕様策定、構造	components
ページシェル、セクションのアーキタイプ、ページテンプレート	pages
プロダクトの種類に応じたフォント選び、スケール、字間、数字	typography
パレットの役割、ダークモード、コントラスト	color
キーライン、インクレベルの揃え方、視覚的なインセット、比率	alignment
視覚的な中央揃え、サイズの補正、サイドベアリング、アイコンの微調整	optical
視覚的な補正、アイコン、タップ領域、状態	craft
見出し、ラベル、エラー、空の状態	writing
コンポーネントを自作せずに使うライブラリの選び方	libraries
スマートフォンブラウザーの癖：ビューポート単位、タップ、ズーム、セーフエリア	mobile web
キーボード、セマンティクス、ズーム、モーションの軽減	accessibility
素材の選択、素材の入手と生成	imagery と seenry-assets
Seenry MCP のレシピとオフライン調査	research
デザインシート：根拠、調査、構造、ガイドライン	sheet
一流のプロダクトサイトから得られた測定可能な証拠	benchmarks
デザイン対象別のライブラリとフレームワーク	stack
AI らしさの兆候とその解消方法	anti-slop
提供されたデザインを忠実に再現する	replication

画像、アイコン、フォントには seenry-assets、トランジションとインタラクションには seenry-motion、ネイティブモバイルには seenry-apps、アイデンティティシステムには seenry-branding、監査、差分、ストレステストには seenry-review を使用してください。

ツール

• コアコンポーネント、トランジション、インタラクションコンポーネント、署名コンポーネント、ステートメント：コピー可能で、トークン駆動型、アクセシブル、ライトモードとダークモードに対応し、それぞれギャラリーが付属しています。
• リサーチパック：上限付きのスクリプト化されたリサーチ（クレジット残高、ライブラリーガイド、research_design_briefを1件、最大11クレジット）を実行し、画像とエビデンスとともに.seenry/research/に保存します。
• バー：Seenry MCPを使わずに、カテゴリーのトップ製品の現在のファーストスクリーン（デスクトップ、アプリの場合はスマートフォン）をキャプチャして批評の基準とし、手作業で完成させるパックを開始します。
• スクリーンと動画からのモーション：ネイティブアプリ、およびクリックではなく撮影したあらゆるもののためのレビューボードとモーション評価ツールです。check.mjs --screens … --video …で両方を実行します。
• 選択：デスクトップとスマートフォンで複数のファーストスクリーン構成を横並びに表示し、新しいモデルが参照と照合してブラインドで1つ選びます。
• チェック：仕上げのためのゲートです。レビューボードを実行し、粗雑な仕上がりがあればブロックした後、参照スクリーンと照合するブラインド批評を行います。PASSまたは適用すべき修正を出力します。
• 画像生成：どのホストからでも、Codex CLIの画像モデルを使って写真を生成します。単体またはバッチに対応しています。
• モーション評価ツール：対象となるコントロールをサンプリングし、トランジションと素早いダブルクリックを記録して、アニメーション（プロパティ、継続時間、イージング）、レイアウトシフト、長時間フレーム、モーション低減を測定します。重大な違反をブロックし、モーションをブラインドで評価します。
• 写真チェック：ブラインドのアートディレクターが、各画像を配置先に応じて参照と照合して評価し、スコアが8未満の画像について、より良いプロンプトを作成します。
• ブラインド批評：新しいCodexまたはClaudeのプロセスが、プレミアム基準でページを参照と照合して評価し、優先順位を付けた修正案を返します。
• レビューボード：レビュー時のサイズで、参照と並べたページを表示します。さらに、グリッド監査では見つけられない仕上がりの問題（実寸での読みやすさ、眉見出し、番号、ウェイト、フォントの読み込み、図版の間隔、スマートフォンでのクリッピング、固定オーバーレイ、モーションの網羅性）も確認します。レビューのたびに実行してください。
• プロダクトキットとモーションの最低基準：アプリ画面とインタラクションの品質を確保するための出発点です。
• ページ監査：任意のプロジェクト（URLまたはHTMLファイル）を複数の幅で監査するワンコマンドツールです。システム監査と視覚監査を実行し、修正可能な検出結果を出力します。Playwrightが必要です。
• 視覚監査：アイコンをラスタライズしてインクを測定します。中心がずれたアイコンボタン（非対称な形状を含む）、ラベルのキャップハイト中央から外れたアイコン、コントロール内で中央揃えされていないラベル、アイコン側のパディングの不均衡、見出しのサイドベアリングを検出し、それぞれにCSSでの微調整方法を提示します。
• モーションスキャン：プロジェクトのCSS、HTML、スクリプト、Tailwindクラスを読み取り、すべての継続時間、遅延、イージング、アニメーション対象プロパティをモーショントークンと照合します。さらに、transition: all、レイアウトプロパティのトランジション、スタッガーの間隔、モーション低減用分岐の欠落も、ブラウザーを使わず1秒もかからずにチェックします。check.mjsは毎回これを実行します。モーションを変更した後は、自分でも実行してください。
• システム監査：レンダリングされたフォントサイズ、ウェイト、ファミリー、角丸、シャドウ、カラーを数え、グリッドから外れたパディング、間隔、マージンを一覧表示します。さらに、同心でない角丸、折り返されたコントロールラベル、サイズやウェイトが3種類を超えるコンポーネントを検出します。コンポーネントごとに、インクレベルの配置（キャップトップ、ベースライン、描画されたグリフ、メディアの端）を測定し、わずかにずれた端、メディアのアンカー、視覚的なインセットを検出します。スクリーンショットの確認のたびに実行してください。
• デザインシートとアナトミーキャプチャ：タスクの最終成果物です。seenry.designのスタイルに合わせてあります。
• 探索シート：バリエーションファイルを実際の幅で横並びに表示し、批評できるようにします。
• グリッドオーバーレイ：開発時専用の、カラム、ガター、8pxのチェック機能です。
• パレット：1つのブランドカラーからOKLCHランプを生成し、ライトモードとダークモード用の2段階トークンを作成します。すべての組み合わせをWCAGとAPCAで測定します。1つの組み合わせを確認するには--check FG BGを指定します。
• スタータートークンとDESIGN.mdテンプレート。
• テキストの衝突、コントロールのジオメトリ、ビジュアルインベントリ、トークンのコントラスト、コントラストチェック。

レポート

ユーザーが何も開かずに読めるブランドガイドラインの概要を最初に記載し、その後にパスを記載してください。

Idea:      <the chosen idea in one sentence, the claim and proof it comes from, and where it shows on the page>
Bar:       <the 3 reference screens and the five lines on why they look premium>
Direction: <intent in one sentence>
Type:      <family and weights by role; why>
Palette:   <name hex role> · … ; temperature and why
Radius:    <family by role>; elevation rule
Imagery:   <what the images are and how they were made>
Owned detail: <the one detail this brand owns>
Rules:     3–5 testable do/don't lines for future work
Critic:    <round-by-round blind scores from check.mjs, e.g. 6 → 7 → 8 → 9> and what moved it
Motion:    <motion judge score, durations and curves used, the signature moment>
Verified:  <widths, interactions, contrast>; not verified: <…>

同じガイドラインを DESIGN.md の「ブランドガイドライン」の下に記載してください。自己評価ではなく、批評者の最終スコアを記載してください。