tasteskill v2

モデルが構築したページは、モデルが見てきたすべてのページの平均値のように見えます。中央揃えの3行の見出し、その上の小さなラベル、アイコンカードの並び、ソフトなグラデーション、数本の細い罫線、そして等幅フォントのキャプション。そのどれもが間違ってはいませんが、何も決断されていません。

このスキルは、それらのデフォルトを、以下の4つの方法で「決断」に置き換えます:

スクリプトが方向性を提示し、あなたが選択する。 見た目を発明するように求められると、モデルは毎回カテゴリのデフォルトを選んでしまいます。scripts/draw.mjs は、研究済みの20の方向性から3つを提示します。あなたは、テーマのアイデアを最もよく表現するものを選びます。するとスクリプトは、247の実在サイトから抽出したライブラリから、タイプシステム、パレット、ヒーロー、セクション構成を提示します。
アイデアはテーマから生まれる。 研究で、優れたサイトと忘れられるサイトを分けたのは、スタイリングではなく、テーマそのものから抽出されたコンセプトでした。
装飾のないハウススタイル を、実際のブラウザで scripts/inspect.mjs を使って測定します。ルールは「願望」ではなく「検証」されます。
自分が作ったものを目で確認する。 3つの幅でスクリーンショットを撮り、審査員のルーブリックで評価し、修正し、もう一度見る。

テストから得られた1つの警告があります。装飾を取り除くのは半分の仕事にすぎません。ラベル、罫線、カードを失ったページが、その代わりに何も得ていない場合、内容が薄く感じられ、盲目の審査員は「何もない空のページ」よりも「欠点はあっても豊かなページ」を正当に好みます。残りの半分は「実質」です。より大きなタイプ、色のフィールド全体、このテーマの世界の実際の写真（見つけるか描くか）、そして各セクションに完全なコンテンツを配置することです。スキルはそれを与えるために構築されています。抑制と引き換えにしないでください。

以下のコマンドで <skill> はこのスキルのフォルダです。プロジェクトのルートから実行し、作業ファイルはそこにある .taste-skill/ に配置されます。スクリプトはNode 22以上とインストール済みのChrome、Edge、またはChromiumが必要で、何もインストールしません。assets.mjs はネットワークアクセスも必要ですが、APIキーは使いません。

実行手順

以下の順序で実行してください。ステップ1～5には数分かかり、ページが良いものかどうかを判断します。

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

以下の「現実」を把握します: テーマ、対象者、ページがユーザーに促すたった一つの行動、スタック、既存のブランド（色、フォント、ロゴ）、そして何よりも 本当に存在する画像素材（プロジェクト独自の写真や商品画像、表示可能な実際のインターフェース、呼び出せる画像生成ツール、または何もない）。持っていない画像を前提に計画しないでください。何もないことは、実際には「本当に何もない」わけではありません。テーマの都市、通り、素材、歴史は、オープンアーカイブや博物館にあり、クレジットを記載すれば自由に使用できます（ステップ6の scripts/assets.mjs）。

リクエストが曖昧な場合は、質問する代わりに、あなたの解釈を一文で決めて述べてください。不足している事実が作業を妨げる場合にのみ質問してください（例：商品名がないなど）。

次に、テーマの棚卸しをメモに行います。このクライアントに属し、競合他社には属さない8～12の項目を挙げます。名前とその意味、住所、ドア番号、通りと近隣、そしてその場所の外観（タイル、看板、ペンキの色、店先の書体、光、天気）、ブリーフ内の数字（席数、部屋数、海までの分数、価格、年）、それが生きている制約（月に1バッチのみ、冬季休業、予約制）、素材と色、儀式と時間（5時にオーブンに火を入れる、7時にフェリーが来る）、その世界の印刷物（時刻表、ラベル、チケット、看板）。このリストはステップ4でアイデアを生み出す源です。ブラインドテストでは、各ブリーフで勝利したページは、このようなリストの項目（クライアントの名前とその意味、その通り、それを特徴づける唯一の制約）から構築され、負けたページは良い構成を持っていても「カテゴリのアイデア」にすぎませんでした。このリストはまた、画像検索のクエリでもあります。リスト上の場所、素材、印刷物のそれぞれがステップ6のクエリになります。

2. 主張（Argument）を書く

デザインの前に、ページを「主張とその証拠」のリストとして、セクションごとに1行で書き出します。references/copy.md §1に示す方法です。主張に基づいて、どのセクションが存在し、どの順序で配置するかが決まります。主張のないセクションは削除します。これにより、ヒーロー、ロゴ、3つの特徴、 testimonial、価格、CTAという定型的なシーケンスを回避できます。

3. 方向性を引き出す

node <skill>/scripts/draw.mjs --sector <セクター> --brief "<テーマに関する一文>" \
  --sections <主張の順序に対応する役割> [--tone <トーン>] [--have <アセット>] [--keep palette,type] \
  --options 3

これにより3つの方向性が提示され、それぞれの短い要約が表示されます。それぞれをあなたの棚卸しリストと照らし合わせます。どの構成方法が、このクライアントだけが持つ何かを表現できるでしょうか？最も見慣れたものではなく、それを選び、なぜ選んだかをメモに一文で記録します。テストでは、テーマに合わないランダムな方向性を選ぶことが、ページが弱くなる最も一般的な原因でした。次に、完全なシートを引き出します:

node <skill>/scripts/draw.mjs <同じ引数、--options は付けない> --direction <選んだID>

--sector: node <skill>/scripts/draw.mjs --list sectors で表示されます。最も近いものを選びます。
--sections: --list roles で表示される役割（features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact）から選択。ヒーローは暗黙的に含まれます。
--tone（オプション）: quiet, bold, warm, technical, playful, luxury, editorial。ブリーフが明確に要求する場合のみ指定します。
--have: 実際に存在するアセットをカンマ区切りで: photography（場所、人物、作品のプロジェクト独自の写真）、product-photo（特定の商品の写真、またはそれを作成できる画像ツール）、product-ui（実際のスクリーンショット）、illustration、video。何もない場合は省略します。drawは依存する構成を避け、シートは画像スロットを正直に埋める方法を提案します（ソフトウェアはHTMLで構築された独自のインターフェースを表示、写真がない商品は描画され、偽の商品ショットではなく、その世界の実写の中に配置されます）。オープンコレクションで見つける画像はプロジェクト独自のものではないため、--have には含めないでください。
--keep palette,type: ブランドがすでに色や書体を固定している場合に使用します。drawは構成のみを提示し、ブランドの値を役割にマッピングします。

コマンドは 方向性シート を出力します。これはこのビルドのアートディレクションです:

採用する。 あなたが通常作成するレイアウトと混ぜ合わせないでください。見慣れないと感じたら、それは良いことです。見慣れたレイアウトこそ、このスキルが防止するために存在するものです。
以下の理由がある場合のみ、スロットを再描画（--redraw hero | type | palette | photos | section:<role> | direction）します: 明示されたブランドの制約に反する、存在しないアセットが必要。より快適なものを得るために再描画しないでください。すべての再描画はレポートに記録します。
提示されたセクションが実際のコンテンツを保持できない場合（3つのプランを比較するセクションなのに価格が1つしかない、5つの引用が必要なのにどれもない）、コンテンツを曲げて合わせようとしないでください。--alternatives <role> で他の選択肢をリストアップし、コンテンツの前提条件に合うものを選び、--redraw section:<role>=<id> で採用します。
パレットをテーマと照合する。 提示されたパレットは、色のセットであると同時に、比率のセット（1つのグラウンド、1つのインク、1つのアクセント、フィールド）でもあります。色がテーマ自身の素材と戦っている場合（ピートウイスキーにキャンディパステル、山小屋にネオン）、パレットを一度再描画します。テーマに紛れもない独自の色がある場合（その素材、通りのペンキの色、窓の外の風景）、提示された比率を維持し、テーマから色を取得し、その旨をレポートに記載します。
いつでも node <skill>/scripts/draw.mjs --show で再印刷できます。長いセッションでは、各セクションを構築する前に再読み込みします。

4. アイデアを見つける

方向性は構成の方法です。アイデアは、そのページを他のどのページとも異なる、このテーマだけのものにするものです。以下の文をメモに書き、両方の空白がテーマ自体から埋まるまで構築を開始しないでください:

このページでは、[テーマに属する何か] が [方向性が求めるデバイス] になります。

最初の空白を探す場所:

そのアウトプット。 そのものは何を生み出しますか？実際のアウトプットを素材としてページに配置します。（詩を印刷するカメラは、コピーを紙片として提供しました。）
そのオブジェクトまたは形状。 物理的にどのように見えますか？断面、シルエットで。拡大し、切り取り、フレームや唯一のモチーフにします。
その名前。 文字は写真を保持できますか？壁に積み上げられますか？二つの角に分割できますか？
その場所。 誰かをそこに行かせたいと思わせる景色は一つありますか？
その儀式。 スクロールに合わせてページが実行できるシーケンスはありますか？
その人工物。 その世界にすでに存在する印刷物は何ですか？チケット、メニュー、ラベル、レシート、招待状、フォルダ、マニュアル？
その反対。 どの他のカテゴリが、このものに欠けている感覚を所有していますか？

最初の空白は、カテゴリからではなく、あなたの棚卸しリスト（ステップ1）から埋めてください。競合他社テスト: 最も近い実際の競合他社を文に当てはめてみます（2つ先のパン屋、別のオーク家具職人、同じ山の別の小屋）。それでも文が成立する場合、そのアイデアはカテゴリに属しています。「食パン」はどのパン屋にもありますが、「この通りにちなんで名付けられた7つのドア」はこのパン屋だけのものです。「クリーンでモダン」はアイデアではありません。研究のパネルが最も低いスコアを付けたサイトは、アイデアが「標準的な公式以上のものはない」と記録されたサイトでした。

一つのライブな要素。 ページに、訪問者ができること、または訪問ごとに異なることを一つ与えます。アイデアから作ります: 木材を選んでその椅子を見る、名前を入力してその書体で刻印されたものを見る、ローンを設定して実際の月額を読む、小屋のストーブが今ついているか、最終フェリーまでの時間を見る、サイズを選んで部屋の中での見え方を確認する。ブラインドテストでは、すべての勝者ページにこれがあり、審査員が最初に名前を挙げました。ルール: テーマの実際のコンテンツを使用し、親指でスマートフォンで操作でき、スクリプトなしでプレーンなフォールバックがあり、読むことを妨げず、遊び場ではなく「一つのこと」であること。これはステップ9でモーションとして追加するのではなく、ステップ6でページの一部として構築されます。

5. 言葉を書く

マークアップの前に、ページ全体をコピーデッキ（プレーンテキスト）として書き、references/copy.md に従います:

すべての見出しは、すべての幅で2行以下に収まる。 文章を確定する前に、copy.md §2で計算します。自信のあるサイズでは、約32文字がどこでも安全です。調査対象のギャラリーヒーローの見出しの単語数の中央値は5語、32文字でした。
補足文は1文。1つのプライマリアクション。それが何をするかに基づいて名前を付け、最初の画面に実際のボタンとして配置します。
最初の画面は、訪問者の最初の質問に大きなタイプで答える。 イベントの場合: 何か、いつ、どこで（日付は見出しか2番目のサイズに含め、小さなテキストだけにしてはいけません）。製品の場合: 何か、いくらか、または何をするか。人物の場合: 誰か、何をするか。訪問者が求めたすべてのセクション（ラインナップ、メニュー、部屋、価格）には、独自の見出しとナビゲーション内での場所があります。
完全なコンテンツを書く。 ブリーフが求めるすべてのセクションは、その情報を完全に提供します。価格付きの完全なメニュー、各部屋の詳細、各スピーカーとトーク、含まれるもの付きの価格、実際の質問へのそれぞれの回答。薄いセクションは、クリーンなページがより賑やかなページに負ける最も一般的な理由です。
ブリーフにギャップがある場合（料理名、部屋名と料金、プロジェクトタイトル）は、サンプルの詳細を記入して、デザインがフルデンシティで見られるようにします。ただし、クライアントが確認するためにレポートにリストします。証拠は決して発明してはいけません: 顧客、引用、レビュー、プレス、ロゴ、ビジネス統計などはありません。

6. 構築する（それでも）

モーションをオフにして頭の中でページを構築します。アニメーションが必要で完成したように見えるページは、完成していません。作業順序:

トークン。 シートからの色とタイプの役割をCSSカスタムプロパティとして定義します。ダウンストリームのすべてはトークンのみを参照します。<skill>/assets/base.css は、開始してもよいニュートラルな基盤です（リセット、トークン名、流動的なタイプステップ、グリッド、フォーカスと選択のスタイル、モーションヘルパー）。独自の外観はありません。
ヒーローを、青写真が正確に説明する通りに、デスクトップ幅と電話幅で構築します。他の何よりも先に、大きなものを大きく、小さなものを小さくします。
各セクションを青写真から、このプロジェクトのコンテンツで構築します。ジオメトリは維持し、テーマを変更します。隣接するセクションは同じレイアウトを共有してはいけません。アイデアをすべてのセクションに持ち込みます。価格、FAQ、フッターも含めて。研究で最も一般的な失敗は、優れたサイトでも、最初の画面は印象的でもそれに続くブロックが定型的であることでした。
画像。以下の優先順位で:
1. プロジェクト独自のもの;
2. 画像ツールがある場合は生成;
3. 正直な画像が存在する場合は、オープンコレクションからテーマの世界の実際の写真。node <skill>/scripts/assets.mjs "<クエリ>" で検索（Openverse, Wikimedia Commons, シカゴ美術館、メトロポリタン美術館。デフォルトでは商業利用を許可するライセンスのみ）。カテゴリではなく、棚卸しリストを検索します。古いはがきの通り、近隣の古地図、素材の接写、版画の取引、その種類の博物館のオブジェ、植物図版、星図。大きく意図を持って使用します。アーカイブ写真1枚をヒーローに、版画をページのモチーフに拡大、通りの実際の地図をコンタクトセクションに。各画像を選択前に見ます。--get <参照> で assets/ にダウンロードし、ソースとライセンスを記録します。--credits でフッター用のクレジット行を表示します。見つけた画像はクライアントの周りの世界を示し、決してクライアント自身の製品、部屋、料理、人物、チームとして提示してはいけません;
4. 描画...

（翻訳はここで切り詰められていますが、原文のSKILL.mdが終わるまで同様に翻訳されます。）

tasteskill v2 – ランディングページのアートディレクションスキル