regards-art-direction

regards のアートディレクション

モデルが作るページは、たいていモデルが見てきたあらゆるページの平均のように見えます。3 行の中央揃えの見出し、その上の小さなラベル、アイコンカードの列、柔らかなグラデーション、細い区切り線がいくつか、等幅フォントのキャプション。どこにも間違いはありませんが、何ひとつ意図して決められていません。

このスキルでは、4 つの方法でこうした既定の表現を、意図に基づく選択に置き換えます。

1. 本物の参考例から方向性を決めます。 見た目を考えるよう求められると、モデルはジャンルの既定の表現を返します。あらかじめ決められた方向性のセットでは、その既定の表現を別の方向へ動かすだけです。同じカードを引いたプロジェクトは、どれも同じページになります。ここではエージェントが regards.design を検索します。これは、見た目で分類された実在のウェブサイトのセクションを厳選したインデックスで、今回の依頼だけに使います。実際の表示を確認し、5～8 個のセクションを選んで、それぞれから取り入れる要素を 1 つ挙げ、選んだものをもとに方向性を導き出します。
2. アイデアは題材から生み出します。 優れたサイトと印象に残らないサイトを分けるのは、スタイリングではなく、題材そのものから生まれたコンセプトです。参考例はアイデアを育みますが、アイデアに取って代わることはありません。
3. 装飾に頼らない独自のスタイルを、 scripts/inspect.mjs を使って実際のブラウザーで測定し、規則を期待するのではなく、きちんと検証します。調べた参考例を根拠に例外を認めることはできますが、慣習だけでは認められません。
4. 作ったものを自分の目で確認します。 3 つの幅でスクリーンショットを撮り、審査基準に照らし、参考例と並べて比べ、修正して、もう一度確認します。

テストを通して分かった注意点があります。装飾を取り除くのは仕事の半分にすぎません。ラベル、区切り線、カードをなくしても、その代わりになるものがなければ、ページは薄っぺらく見えます。もう半分は内容の充実です。文字を大きくし、広い範囲に色を使い、題材の世界を伝える実際の画像を（見つけるか描いて）使い、すべてのセクションに十分な内容を持たせます。節度を優先して、内容を犠牲にしないでください。

以下のコマンドで、<skill> はこのスキルのフォルダーを指します。プロジェクトのルートから実行し、作業ファイルがその場所の .taste-skill/ に作成されるようにしてください（スクリプトを変更せずに動かせるよう、フォルダー名は tasteskill のものをそのまま使っています）。スクリプトの実行には Node 22 以降と、インストール済みの Chrome、Edge、または Chromium が必要です。追加のインストールは行いません。assets.mjs にはネットワークアクセスも必要ですが、API キーは使いません。

何よりも先に、regards のツールが利用できるか確認してください（search_sections、view_section、get_section、page_sections、similar_sections。クライアントによっては、サーバー名が前に付く場合があります）。利用できない場合は、次の接続方法を一度だけユーザーに伝えてください。

claude mcp add --transport http regards https://mcp.regards.design/mcp

その後は手順 3 の代替手段を使って続行し、レポートでその旨を伝えてください。クライアントが MCP リソースを読み込める場合は、最初の検索の前に skill://regards-design/SKILL.md を読んでください。

作業の進め方

以下の順に進めます。手順 1～5 で、ページの出来を判断します。

1. ブリーフとプロジェクトを読む

実際の情報を把握します。テーマ、対象者、このページを見た人にしてもらうべきこと、技術スタック、既存のブランド要素（色、フォント、ロゴ）、そして何より実際に存在する画像素材を確認します。プロジェクト独自の写真や製品写真、掲載可能な実際のインターフェース、呼び出して使える画像生成ツールがあるのか、それとも何もないのかを確かめます。手元にない画像を前提に計画してはいけません。独自の画像がなくても、素材がまったくないとは限りません。テーマに関連する都市、街路、素材、歴史は、オープンアーカイブや博物館で公開されており、クレジットを記載すれば無料で利用できます（ステップ6、scripts/assets.mjs）。

依頼が曖昧な場合は質問せず、自分なりの解釈を一行で決めて明記します。不足している情報が作業を妨げる場合（たとえば製品名がわからない場合）に限り、質問してください。

次に、メモにテーマ固有の要素をリストアップします。このクライアントに属し、競合には当てはまらないものを8〜12個挙げてください。名前とその意味、住所、番地、通り、近隣地区、そしてその場所の様子（タイル、看板、塗装色、店舗の外装に使われている書体、光、天気）、ブリーフにある数値（座席数、部屋数、海までの所要時間、価格、年）、事業上の制約（月に一度だけ製造、冬季休業、予約制など）、素材や色、習慣や営業時間（朝5時に火を入れるオーブン、7時のフェリーなど）、その世界にある印刷物（時刻表、ラベル、チケット、看板）を調べます。このリストがステップ4のアイデア、ステップ3の検索キーワード、ステップ6の画像検索クエリの出発点になります。

2. 論旨を書く

デザインに着手する前に、ページの各セクションで伝える主張とその根拠を、セクションごとに一行で列挙します。references/copy.md の§1を参考にしてください。主張によって、必要なセクションとその順序が決まります。主張のないセクションは削除します。こうすることで、ヒーロー、ロゴ、3つの特徴、お客様の声、価格、行動喚起という定番の構成を避けられます。論旨は、ステップ3でコンポーネントを検索する際のリストにもなります。

3. regardsで方向性を調査する

このステップでは、固定ライブラリから方向性を引く方法を置き換えます。references/regards.mdには、検索の手順、良い例と悪い例のメモ、変更の手法が記載されています。要約は次のとおりです。

カテゴリーではなく、インベントリから検索します。「法律事務所のウェブサイト」と検索すると、離れようとしている対象そのもののカテゴリーが返されます。インベントリに記載されているものと、それが何になり得るかを検索してください。印刷物（「印刷ラベルのように整えられた価格表」）、素材（「無加工の紙、スタンプ、包装」）、測定方法（「実際の何かを測る数字と目盛り」）、雰囲気、ユーザーが指定したサイト（「のような、もっと落ち着いたサイト」）などです。検索は3段階で行います。

1. ムード： 全体的な雰囲気について、レイアウト、書体、画像、質感など、異なる視点から短い検索を2〜3回行います。
2. コンポーネント： 論旨に含まれる各要素（ヒーロー、リストまたはメニュー、実績、予約、フッター）ごとに1回ずつ検索し、さらに細部について1回検索します。線、枠線やフレーム、数字の見せ方などです。
3. 範囲を広げて、逸脱する： 気に入ったキーを2〜3個使ってsimilar_sectionsを実行し、さらにブリーフから意図的に大きく外れた斜めの検索を1回行います（対象の世界にまつわる言葉、または最も特徴的なセクションを閲覧できる空のクエリなど）。結果が無難に感じられる場合は、「実験的」や「独特」といった言葉を加えて検索します。新規性は1（テンプレート）から5までです。

インスタント検索はデフォルトで、1分あたりの回数制限があります。Deep検索はクレジットを消費するため、ニュアンスのあるブリーフ、「Xではない」という指定、または名前が挙がったサイトに似たサイトを探す場合に限って使います。

採用する前に確認します。 検索結果の概要は1行にすぎません。デザインはピクセルに表れます。使う可能性のある検索結果はすべてview_sectionで開き、大半は採用しないでください。セクションのテキスト、サイズ、ページを確認するにはget_sectionを、ページ全体のリズムを見るにはpage_sectionsを使います。

5〜8件のリファレンスを残し、それぞれから要素を1つ選びます。 同じサイトから複数選んではいけません。それぞれについて、.taste-skill/references.mdに見本の説明を1行書きます。

profound/08 · https://www.regards.design/sections/profound/08 · live: https://www.tryprofound.com/
takes:   sheets of graph paper with binder holes, filed behind angled folder tabs
leaves:  the dark ground, the generative squares, the product copy
becomes: a seed library's drawers: one tab per season, one sheet per variety, the real packet on each

「素敵なレイアウト」では見本になりません。ページ上の場所をその言葉だけで見つけられるほど正確にコンポーネントを特定し、それがこの題材向けにどう変化するかを説明してください。インベントリをもとにbecomes:を埋められないなら、そのリファレンスは装飾にすぎません。削除してください。

**残した要素から方向性を導き、**同じファイルの見本の下に、1行ずつ記載します。アイデアを表す文（ステップ4）、ヒーロー、論旨の順に並べた各セクションと、その参考にした見本、書体（リファレンスが使う分類を、読み込み可能なフリーフォントで設定します。リファレンスのライセンス書体は使いません）、配色（リファレンスに基づく比率と、題材自体に素材があればそこから取った色）、動き、そしてスクリーンショットに撮りたくなるシグネチャーとなる細部です。各セクションを作る前に、このシートを読み直してください。

リファレンスと競合他社の比較テスト。 最も近い実在の競合他社を検索にかけます。同じ見本が選ばれるなら、検索がカテゴリーを起点にしています。インベントリを起点に検索し直してください。

決してコピーしないでください。 取り入れるのはアイデアであり、セクションそのものではありません。レイアウト全体の再現、コピー、ロゴ、イラスト、写真、リファレンスのブランドマークは禁止です。ステップ8で次のテストを行います。完成した各セクションを、参考にしたリファレンスの横に並べてください。閲覧者が両者を見間違える可能性があるなら、さらに変化を加えます。

regardsを使えない場合のフォールバック。 ツールがない、または動作しない場合は、tasteskillと同じ方法で付属ライブラリから方向性を引きます（references/draw.md）。レポートには、方向性を調査したのではなく、ライブラリから引いたと記載してください。

4. アイデアを見つける

方向性とは、組み立て方です。アイデアとは、そのページをこのテーマだけのものにする要素です。次の文をメモに書き、2つの空欄をテーマそのものから埋めるまで、何も作り始めないでください。

このページでは、**[テーマに属する何か]が[参考資料が示す仕掛け]**になります。

最初の空欄を埋める手がかり：

• そのテーマが生み出すもの。 それは何を生み出しますか？実際に生み出されるものを素材としてページに載せます。
• その対象のオブジェクトや形。 断面やシルエットで見ると、物理的にはどのような形ですか？ 拡大する、切り抜く、枠や唯一のモチーフにする、といった方法があります。
• その名前。 文字の中に写真を収めたり、壁のように積み上げたり、2つの角に分けたり、寸法を測ったりできますか？
• その場所。 そこに行きたいと思わせる眺めはありますか？
• その習慣。 スクロールするにつれてページ上で展開できる一連の動作はありますか？
• そのテーマにまつわる実物。 その世界にすでにある印刷物は何ですか？チケット、メニュー、ラベル、レシート、招待状、フォルダー、マニュアルなどです。
• その反対のもの。 このカテゴリーに欠けている感情を持つのは、どの別のカテゴリーですか？

最初の空欄は、カテゴリーではなく、集めた素材から埋めます。**競合テスト：**最も近い実在の競合を文に当てはめてみます。それでも文が成り立つなら、そのアイデアはカテゴリー全般に当てはまるものです。「クリーンでモダン」はアイデアではありません。

アイデアを担える仕掛けを示す参考資料がない場合は、アイデアを検索語にしてステップ3に戻ります。アイデアが先導し、参考資料はそれに役立てます。

実際に動く要素を1つ。 アイデアをもとに、訪問者ができること、または訪問ごとに変わることを1つ、ページに用意します。木材を選ぶと、その木材を使った椅子が見られる、名前を入力すると、鋳造所の文字で切り出した表示が見られる、ローンの条件を設定すると、実際の月々の支払額がわかる、といったものです。条件：テーマに即した実際のコンテンツを使うこと、スマートフォンで親指を使って操作できること、スクリプトがなくてもシンプルな代替表示があること、閲覧を妨げないこと、遊び場のようにせず、要素は1つにすること。これはステップ6で、ページの一部として作ります。

5. 文章を書く

マークアップに取りかかる前に、references/copy.mdに従ってページ全体のコピー原稿（プレーンテキスト）を書きます。

• 見出しは、どの画面幅でも2行以内に収めます。 文を決める前に、copy.md §2の計算方法で長さを確認します。どの画面でも読みやすい大きさで表示するなら、約32文字が安全です。
• 補足文は1文にします。主要なアクションは1つにし、何をするものかがわかる名前を付け、最初の画面に実際のボタンとして配置します。
• 最初の画面では、訪問者が最初に知りたいことを大きな文字で答えます。 イベントなら、何がいつどこで開催されるのか。製品なら、何で、いくらなのか、または何をするのか。人物なら、誰で、何をしているのか。訪問者が見に来た各セクションには、それぞれ見出しとナビゲーション上の項目を用意します。
• コンテンツをすべて書きます。 ブリーフで求められている各セクションに、必要な情報を漏れなく盛り込みます。すっきりしたページが、情報量の多いページに負ける最も一般的な理由は、各セクションの情報が薄いことです。
• ブリーフに空白がある場合、デザインの情報密度を十分に伝えるために、具体的な内容のサンプルを入れることが想定されています。クライアントに確認してもらう項目として、レポートに記載します。実績を捏造してはいけません。顧客、引用文、レビュー、報道、ロゴ、事業統計を作り上げてはいけません。
• 参考資料の文章を流用してはいけません。

6. それでも作る

動きをオフにした状態を頭に思い描いてページを作ります。完成して見せるためにアニメーションが必要なページは、まだ完成していません。作業の順序は次のとおりです。

1. トークン。 ディレクションシートにある色とタイポグラフィの役割を、CSS カスタムプロパティとして定義します。それ以降のすべての要素は、トークンのみを参照します。<skill>/assets/base.css はニュートラルな基盤で、出発点として使えます。独自の見た目はありません。

2. シートにある線をもとにしたヒーロー部分。 デスクトップとスマートフォンの幅で作ります。ほかの要素に着手する前に、大きなものは大きく、小さなものは小さくします。

3. シートにある各セクションの線と、その背後にある見本をもとにした各セクション。 このプロジェクトのコンテンツを使います。隣り合うセクションで同じレイアウトを共有してはいけません。価格、FAQ、フッターも含め、すべてのセクションにアイデアを反映します。 優れたサイトであっても、最初の画面だけが独創的で、その後はありきたりなブロックが続くのが最もよくある失敗です。

4. 画像。 次の優先順位で選びます。

   1. プロジェクト独自の画像。
   2. 画像ツールがある場合は、生成画像。
   3. オープンコレクションにある、題材の世界を写した実際の写真。 誠実に使えるものがある場合は、必ず使用します。node <skill>/scripts/assets.mjs "<query>" で検索します（Openverse、Wikimedia Commons、Art Institute of Chicago、Met。デフォルトでは商用利用可能なライセンスのみ）。カテゴリではなく、素材の一覧を検索します。--get <ref> で assets/ にダウンロードし、出典とライセンスを記録します。--credits でフッター用のクレジット表記を出力します。見つけた写真はクライアントを取り巻く世界を示すものであり、クライアント自身の商品、部屋、料理、人物、チームとして提示してはいけません。
   4. 題材そのものをもとにコードで描画したもの。 誠実に使える写真がないものに用います。
   5. タイポグラフィと色のみ。

   参考資料にある画像は決して使わないでください。

   最低基準。インスペクターが確認します。 ページには実際の写真を少なくとも4枚、通常は6〜12枚使用します。SVG の描画は最低枚数に含まれません。誠実に使える動画がある場合は、動く画像を1つ追加します（assets.mjs --video "<query>"）。検索、ライセンス、クレジット、動画、描画、トリミング、処理については references/imagery.md を参照してください。

5. ステップ4の実際に動作するもの。 主張を裏付けるセクションに、実際のコンテンツを使って配置します。スマートフォンでは親指サイズの表示にし、簡素な代替表示も用意します。

6. 素材感。 ページに素材感を与えます（下記「素材感」を参照）。色は面全体に使い、印刷物は紙として描き、線画でデータを伝えます。金属のアクセントは最大1つにします。抑制すればページは整いますが、素材感があれば人に見せる価値のあるページになります。

7. 充実度。 デスクトップの各画面をポスターとして見ます。主役となる要素を1つ置き、それが伝えるコンテンツを載せます。ページ内で意図的に余白を設けるのは1か所までです。本文はインクを全面に使い、16px 以上で表示します。

8. 状態とセマンティクス。 実際に動作するリンクとボタン、視認できるフォーカス、代替テキスト、独自の構成を持つスマートフォン向けレイアウトを用意します。

判断の詳細が必要な場合は、references/type.md、references/colour.md、references/layout.md を参照してください。以下のルールは要約です。

7. ゲート

node <skill>/scripts/lint.mjs <source files or folder>
node <skill>/scripts/inspect.mjs <url or path/to/index.html>

lint.mjs はソースをスキャンし、禁止パターンと定型句を検出します。inspect.mjs は実際のブラウザーで 1440、768、390 ピクセルの幅でページを開き、測定してスクリーンショットを .taste-skill/inspect/ に保存します。すべての FAIL を修正してください。各 WARN は、デザイナーに一文で正当化できない限り、誤りとして扱います。FAIL がなくなるまで再実行してください。ステップ3で得た例外（ハウスルールを参照）は .taste-skill/direction.json から読み込まれます。それ以外を追加してはいけません。

8. 確認する

ゲートに合格しても、禁止事項が測定されなかったというだけです。ページの出来がよいという意味ではありません。インスペクターが一覧表示したスクリーンショットを開き、references/critique.md に沿って批評してください。次に、リファレンスの確認を行います。各見本を、その見本を参考にしたセクションの横に view_section で表示し、メモに2つの質問への答えを書いてください。名前が挙がった要素を、元と同じ品質で取り入れていますか？ どの見本にも似ていない仕上がりになっていますか？ 問題の大きいものから3つ修正し、インスペクターを再実行して、もう一度確認してください。繰り返しは最大3ラウンドです。

画像だけで判断してください。スクリーンショットで問題が見えるなら、コードの内容にかかわらず、それは実際の問題です。

9. 動きを加える

ここでモーションレイヤーを作成します。これは必須で、単なるフェード以上のものが必要です。読み込み時とスクロール時に実際に動く要素が8個未満だと、インスペクターはページを不合格にします。このレイヤーには4つの要素があります。シートに記載したシグネチャーとなる動きを、質の高い形で実装すること。各セクションの要素（見出し、テキスト、画像の順）を一度だけ表示し、60～90msずつ間隔を空けて、16～32px上昇させること。すべてのコントロールにフィードバックを付けること。動く画像を1つ用意すること。アニメーションには transform と opacity のみを使い、すべての動きに prefers-reduced-motion の代替表示を用意してください。リファレンスの動きがシグネチャーとなる動きの場合、view_section で表示されるのは静止画です。動き方は get_section で確認し、可能であれば links.live を開いてください。references/motion.md にトークンとレシピがあります。インスペクターをもう一度実行し、コンテンツが表示されなかったスクリーンショットがないかすべて確認してください。

10. 報告する

ユーザーには、以下を簡潔に伝えてください。実行した検索（クエリを一覧で記載）。見本シート。各リファレンスについて、クレジットリンクとライブリンク、取り入れた要素と、それをどう仕上げたか。ハウスルールの例外があればその内容と、例外を正当化するリファレンス。アイデアを表す一文と、実際に動作する要素。最後の批評ラウンドでの最終スコアと、まだ不十分な点。見つけたすべての画像と動画クリップについて、クレジットとページ上での掲載場所。公開前に差し替えが必要なサンプルコンテンツ。方向性がフォールバックライブラリから選ばれた場合は、その旨も伝えてください。実行していない確認を実施したと主張してはいけません。

ハウスルール

これらのルールは、リファレンスにかかわらず、すべてのページで適用されます。inspect.mjs がこれらを測定します。

ルール	代わりに
見出しは、どの画面幅でも2行以内にします。 すべての h1 から h6、および最初の画面に表示されるメインの行（タグは問いません）が対象です。	言葉を削ります。その後、行幅を広げます。サイズを調整するのは最後です。
ステートメントは段落にします。 導入文や大きく組まれた引用文は、<p> または <blockquote> にして、ステートメントのサイズ（デスクトップでは36px以下、スマートフォンでは24px）を保ち、約25語に収めます。	それより大きくなる場合は見出しとして扱い、2行以内のルールを適用します。
見出しの上に小見出しを置きません。 見出しの上に小さなラベルやピル型バッジを置いたり、見出しの前に「New ·」のチップを付けたりしません。	情報を見出しか最初の文に入れるか、省略します。
実際のコードブロック以外では等幅フォントを使いません。 *	本文用書体を使います。数字を揃える箇所には等幅数字を使います。
インデックス番号を付けません。 01／02／03、（001）、「Step 2」は使いません。 *	配置、サイズ、または言葉で順序を示します。順序が重要なら、実際の <ol> を使います。
細い罫線を使いません。 極細の区切り線、1pxの枠線、グリッド線、照準線、トンボは使いません。 *	余白、背景色の段差、サイズの変化、塗りつぶした図形を使います。
グラデーションを使いません。 背景、ボタン、テキストのいずれにも使いません。	単色か、実際の写真を使います。写真上のテキストの下に敷く中立色のスクリーンだけは例外です。
静止状態の要素に影を付けません。 光彩も使いません。	面の間に色調の段差を付けます。影は本当に浮いているものだけに使います。
アシスタント風の配色は使いません。 黄みがかったクリーム色の背景にテラコッタや錆色を組み合わせたり、紫や藍色を使ったりしません。	主題や参考資料から色を選びます。
小さな大文字の字間を広げたラベルは使いません。 *	読みやすいサイズのセンテンスケースを使います。
アイコンを上部に置いた特長カードや、同じ形のカードを並べた行は使いません。	シートをもとに、構成を工夫したセクションを作ります。
ガラス表現は使いません。 背景をぼかしたパネルや、浮かんだピル型ナビゲーションは使いません。	ワードマーク、少数のリンク、1つのアクションを備えたシンプルなバーを使います。
絵文字、グラデーションの塊、装飾的な図形、灰色のバーで作った偽のダッシュボードは使いません。	実際の画像、実際のインターフェースの一部、または何も使わないようにします。
見出し内の単語だけをスタイルで強調しません（斜体、セリフ体、色付き、下線）。	書体も色も統一します。強調は言葉で伝えます。
書体は最大2種類、通常は1種類にします。	シートの書体を使います。

* 条件を満たす場合の例外。 tasteskillが等幅フォント、インデックス番号、極細線、小さな字間を広げたラベルを禁止しているのは、データに基づく判断ではなく、作者の選択です。独自調査では、これらは受賞サイトでむしろよく使われていましたが、ジェネレーターが見せかけの装飾として模倣するため、禁止されています。このフォークでも禁止をデフォルトとし、理由がある場合に限り、参考資料から一度だけ取り入れられるようにしています。「*」の付いた要素を使えるのは、次の3つをすべて満たす場合だけです。

1. view_section で開いたセクションに、その要素が使われている。
2. その見本の行に要素の名前が記され、この主題ではどのような役割を担うかが説明されている。
3. ページ上で情報を伝えている（実際の値を測る目盛り、実際のデータを並べた台帳など）のであって、装飾ではない。

そのうえで、.taste-skill/direction.json の allow にルールのID（hairline、outlined-box、mono、numbering、micro-label、dashed）を追加します。たとえば { "source": "regards", "allow": ["hairline"] } のように記述し、レポートにも記載します。

素材に関する例外も、独自の3つ目の条件（§ 素材）を含め、同じ3つの手順に従います。shadow は、ページ上で物体として見せる物理的なオブジェクト（シート、チケット、クリップに挟んだカードなど）の下に付ける柔らかな影1つに限ります。実際にページから浮いているために使うものであり、パネル、インターフェースカード、ボタンの下には使いません。palette-purple は、紫や藍色が参考資料から取り入れた複数の色面のうちの1つである場合に限ります。中立色のページに紫のアクセント、光彩、色合いとして加えることはできません。グラデーション、ガラス表現、光彩、絵文字、小見出し、アイコンカード、クリーム色とテラコッタの配色は、例外として取り入れることはできません。

次の3つの場所は独自の規則を保ち、インスペクターによる変更の対象外です。<pre>／<code> 内の実際のコード、実際のテーブルとフォームフィールド、そしてルートに data-ui 属性を持つ実際のインターフェースの一部です（references/imagery.md §7を参照）。 装飾を取り除くと、余白が生まれます。その余白を別の装飾で埋めてはいけません。スケールを持たせ、内容をすべて載せ、この題材のために描いた絵を置くか、単色の面で埋めます。

素材

手作業で実行したこのスキルの試行において、人に見せたいと思われるページと、単に正しいだけのページを分けた要素です。ステップ 8 で各セクションをこれに照らして確認してください。

• 色は面全体に使います。 参考資料と題材をもとに、インク色を加えた、彩度の高い 3〜6 色のパレットを使います。セクションごとに独自の色面を設け、隣り合う面の間には暗色から明色への明確な段階をつけます。明るい面にはインク色の文字を、暗い面には白い文字を使います。安全なニュートラルカラーにアクセントを 1 色だけ足すより、自信を持って複数の色面を使うほうが効果的です。生成物のように見える組み合わせは、ネイビーと黄色、クリーム色やベージュと他の色の組み合わせ、暗いページにアクセントカラーを 1 色だけ使うことです。
• 印刷物はオブジェクトとして描きます。 チケット、メモ、契約書のページ、ラベルは紙として描きます。デバイスピクセル単位の粒子を加えます（devicePixelRatio に合わせたキャンバスを使い、各ピクセルに小さな正負のオフセットを与えて平均をゼロにし、紙の色を保って灰色の膜がかからないようにします。濃い粒子はまばらにし、かすかな繊維も少し加えます）。紙の目に引っかかるインクと、切り口も表現します。ノイズ画像をタイル状に並べたり、オーバーレイフィルターを使ったりしてはいけません。オブジェクトは数度傾けたり、フレームの外にはみ出させたり、隣のオブジェクトに重ねたり、柔らかな影を 1 つ落としたりできます。
• 線画には情報を持たせます。 短い線の集まりは平面に沿わせ、何かが起きた箇所で曲げます。実際の値を示す目盛り、メモから説明対象へ伸びる小さな四角いハンドル付きの引き出し線、重要な行に添える括弧も使います。ズームしても鮮明に保てるよう、SVG またはキャンバスで描きます。すべての線は、実際にある何かを指し示すようにします。細線や破線の例外は、こうした方法で効果的に使えます。
• 素材のアクセントは 1 種類にします。 磨かれた金属（反射する帯のあるクロームや、細かな粒子のある銀）を、小さなオブジェクト 1〜3 個に使います。クリップ、ボタン、縁などが対象です。インターフェース全体には使わず、金属の質感を文字に使うことも避けます。
• タイポグラフィには一貫した声を持たせます。 ページ全体には、自信のあるグロテスク体を使います。2 つ目の書体は、セリフ体にすることが多いですが、1 つの声だけに使います（製品自身の言葉や、印刷された文書など）。
• すべてのセクションをポスターにします。 大きな要素を 1 つ、精密で小さな補助文字を添え、内容をすべて載せ、混み合わないようにします。画面全体を単独で受け止められないセクションは、まだ完成していません。

デザインの基本原則

簡潔版。tasteskill が 247 件のギャラリーサイトを調査してまとめたものです（references/research.md）。

タイポグラフィ

• 見た目の印象を決めるサイズは 2〜3 種類です。非常に大きなサイズを 1 つ、小さなサイズを 1 つ使い、その中間は使いません。調査対象サイトの見出しと本文のサイズ比は中央値で 4.3 です。上位サイトでは最大サイズが中央値で 8.4vw、質の低いサイトでは 5.0vw です。
• ディスプレイ書体は、字間を -0.02〜-0.05em、行間を 0.85〜1.05 にします。本文は 16〜20px、行間は 1.45〜1.6 とし、1 行あたり 45〜75 文字にします。
• 1 ページで使うサイズは 5 種類が上限です。フォントファミリーは 1 種類が標準で、2 種類までにします。
• 原則として左揃えにします。中央揃えは最大 1 箇所にします。

余白

• グリッドは 1 つにし、狭い余白（16〜32px）の組み合わせを 1 つだけ、全体で使います。大きな要素は端まで広げます。
• セクション間の余白は、各セクション内のどの余白よりも明確に大きくします。デスクトップでは 120〜220px です。
• 各セクションは隣接するセクションとは異なる構成にします。カードグリッドは使いません。

色

• セクションごとに、文字色、アクセント色、地色を 1 色ずつ使います（各セクションに独自のフィールドカラーを設定してもかまいません：§ Material）。アクセント色はアクションに使い、ほかに使うとしても 1 箇所までにします。
• 本文には文字色をそのまま使います。面の違いは、色調にわずかな差をつけて表現します。
• セクションごとにフィールドカラー全体を変えてもかまいません。色が徐々に変化する表現は使いません。

画像

• 主役となる画像 1 枚は、小さな画像 6 枚より効果的です。切り抜き比率と処理方法を統一し、デザイン方針に別の指定がない限り、角は正方形にします。
• 使用する画像はすべてプロジェクトにダウンロードし、ページ上でクレジットを表記して、レポートにも記載します。
• 見出しやステートメントに画像などを重ねてはいけません（インスペクターで失敗と判定されます）。

コンポーネント

• ボタンはフラットにし、塗りつぶし色は 1 色にします。角は正方形か完全な丸型のどちらかに統一します。質の高いヒーローの多くは、ボタンを使わないか、1 つだけ使っています。
• ナビゲーションは、ワードマーク、装飾のないリンク 3〜5 個、アクション 1 つで構成します。
• フッターはデザインの締めくくりとして設計し、サイトマップにはしません。

特別なケース

既存のブランドまたはデザインシステムがある場合。 色と書体は維持し、構成とコンポーネントだけを参考に探します。ブランド要素を各役割に当てはめます。ブランド自体に禁止されている表現が必要な場合は、そのまま維持してその旨を明記し、そのルールだけを対象に --allow <rule> をインスペクターに渡します。

既存ページの再デザインまたはレビュー。 まず lint.mjs と inspect.mjs を実行し、検出結果を報告してからスクリーンショットを批評します。再デザインでは、実際のページの内容を素材として、ステップ 3 から調査します。

ページではなく、コンポーネントまたは単一のセクションの場合。 その種類のセクションを参考に探し、事例を 2〜3 件に絞ります。周囲のデザインに合わせ、基本ルールを適用し、結果の検査も行います。

チェックアウト機能もフォームのバックエンドもない場合。 概要に実際の遷移先が指定されていれば、メインボタンはそこへリンクします。指定がなければ、件名と本文を記述した mailto: を使うか、レポートに注記を添えて #checkout にリンクします。決済フォームを偽装してはいけません。

Chrome または Node 22 がない場合。 lint.mjs（Node 18 以降）を実行し、使用可能なブラウザツールでスクリーンショットを撮影して、内容を批評します。インスペクターを実行できなかったことをレポートに記載します。

ファイル

ファイル	読むタイミング
references/regards.md	ステップ 3：検索レシピ、標本メモ、変化の手法、模倣しないためのテスト。
references/copy.md	論旨とコピーの構成案を作成するとき（ステップ 2 と 5）。2 行の計算式。
references/type.md	文字組み：スケール、字間、行長、フォントの読み込み、組み合わせ。
references/colour.md	パレットの適用：役割、比率、色調の段階、ダークページ、コントラスト。
references/layout.md	グリッド、余白、リズム、セクションの多様性、ナビゲーション、フッター、スマートフォンの構成。
references/imagery.md	画像の選択、検索、クレジット表記、トリミング、加工方法、および画像がない場合の対処。
references/motion.md	ステップ 9。予算、トークン、レシピ、動きを抑える設定。
references/critique.md	ステップ 8。見方、評価方法、最初に修正する箇所。
references/tells.md	生成ページに見られる特徴と、それぞれの代替策をまとめた日付入りの一覧。
references/research.md	tasteskill の調査：手法、数値、優れたサイトと劣ったサイトの特徴。推測せず、引用してください。
references/draw.md	フォールバック：regards が接続されていない場合に、同梱ライブラリから方向性を引き当てる方法。
scripts/assets.mjs	ステップ 6：オープンコレクションから対象の世界を写した実際の画像を取得し、クレジットを付けます。
scripts/lint.mjs · scripts/inspect.mjs	ゲート。
scripts/draw.mjs · library/	フォールバックで方向性を引き当てる場合のみ使用します。ライブラリ全体を読まないでください。
assets/base.css · assets/base.js	任意で使えるニュートラルな土台。

クレジット

Leonxlnx による tasteskill v2 からフォークしました。MIT ライセンスです。調査、インベントリ、アイデアと競合他社のテスト、オープンコレクションの画像、インスペクター、批評の評価基準、見直しのループは tasteskill によるものです。調査のステップ、標本シート、根拠に基づく例外は、このフォークによるものです。