Killer Design （キラーデザイン）

目標は、人々が「すごい」と思うサイト、つまり一流のスタジオがこのプロジェクトのために作ったかのようなサイトを作ることです。きちんとしていて、正しく、センスが良いというのは最低ラインであり、目標ではありません。ミスを避けただけのページは忘れられます。以下の3つの習慣がその目標への道であり、このスキルはその習慣を中心に構築されています。

コードを書く前にデザインを決める。 決断を全くしないことから、凡庸なサイトは生まれます。フォント、色、レイアウトは、あらゆるテンプレートが使うデフォルトに頼ってしまいます。主題（またはブランドがある場合はそのブランド）に根ざした、短い文章による方向性が、後々のすべての選択に理由を与えます。
一つの「わあ」をデザインする。 ファーストビューに、コンセプトに根ざした、誰かを立ち止まらせる中心要素を配置します。ライブデモ、大胆なタイポグラフィ、ポインターに反応する光、スクロールに応じて構築されるシーンなどです。それを高い水準で実装し、周りは落ち着いた状態に保って、その要素が目立つようにします。references/motion-and-wow.md を参照してください。
結果を確認する。 見ずに書いたCSSは必ずずれます。窮屈なモバイルレイアウト、弱い階層構造、誰も読めない灰色のテキスト、ドラッグするアニメーションなどです。モーションも含めてページをレンダリングし、批評家のように見て、問題を修正し、また見直します。

作業は6つのステップで進みます。プロジェクトを理解し、方向性を設定し、コンテンツを書き、構築し、スクリーンショットをレビューして修正し、最終調整して引き渡します。リデザインの場合は、最初にインベントリステップが追加されます（「既存サイトのリデザイン」を参照）。

1. プロジェクトを理解する

質問をする前に、既存のものを読み込みます。つまり、README、ドキュメント、パッケージやアプリのメタデータ、既存のコピー、ロゴやブランドファイル、スクリーンショット、そして DESIGN.md です。以下を明確にします。

それが何かを、見知らぬ人にもわかる一文で。
誰が訪れ、彼らが何を判断し、何をすべきか。単一の主要なアクションに名前を付けます。インストール、予約注文、サインアップ、問い合わせなど。
具体的な内容。実際のコマンド、数字、名前、時間、場所、機能、制約、ストーリー。これらはコピーやビジュアルの原材料であり、具体的な詳細こそがサイトを一般的でなくします。
個性。3つの形容詞と、1つの「〜ではない」という特徴。「正確で、静かで、信頼できる。遊び心はない。」
制約。ホスティング（例：静的GitHub Pages）、保持しなければならないもの、既存のブランドアセット。
文書化された意図。READMEやドキュメントがサイトの目的として述べていること、そして意図的に除外していること（「1ページ、GitHubへのボタン。完全なリストは別の場所にある」）。それは誰かがすでに下した判断です。それに従い、それを超えるものは、構築してしまうのではなく、引き渡しの際の提案として提供します。
ブランドシステムが存在するかどうか。ブランドガイド（BRAND.md、スタイルガイド、ブランドリポジトリ）、デザイントークン、DESIGN.md、または一貫性のある完成済みブランドアートワーク一式（ソーシャルカード、バナー、READMEカバー、現在のサイト）。存在する場合、ステップ2は異なる進め方になります。以下の「既存ブランド内での作業」を参照してください。

ユーザーに質問するのは、自分で見つけたり、合理的に推測できず、かつデザインを変える可能性があるものだけにします。明白な例は、製品が実際に何をするかです。それ以外のことは、合理的な判断を下し、その仮定を引き渡しの際にリストアップします。実際のページに反応してもらう方が、アンケートに答えてもらうより簡単です。

2. デザインの方向性を設定する

プロジェクトにすでにブランドシステムがある場合は、そのブランド自体が方向性です。「既存ブランド内での作業」に進み、ステップ3に戻ってきます。以下は、デザインを一から考える必要があるプロジェクト向けです。

「クリーンでモダン」は方向性ではありません。何も決断しなかった結果です。

主題の中にコンセプトを見つける。 プロジェクトが生きる世界は何かを問います。バイオリン修理工房なら、スプルース材とニス、手書きのラベル、測定図を連想させるでしょう。都市のオープンデータポータルなら、交通機関の地図、案内表示システム、時刻表を連想させるでしょう。クライミングジムなら、トポマップ、チョーク、ルートグレードを連想させるでしょう。最初の連想を超えて、具体的なものにまで掘り下げます。「紙とインク」はほとんど何にでも当てはまりますが、「1950年代のカタログからの種のパケット」はそうではありません。コンセプトは、書体、パレット、テクスチャ、レイアウトを形作るべきです。クリップアートやダジャレになってはいけません。

3つの真に異なる方向性をスケッチする。 コンセプト、書体、色温度、レイアウトの姿勢を変え、それぞれ1〜2行で書き出します。そして、オーディエンスと個性に最も合うものを選びます。最初に思い浮かぶアイデアはたいてい最も一般的であるため、3つ書くのです。選んだ方向性を、このファイルの最後にある「AIが作ったように見えるサイトの特徴」と照らし合わせます。よくあるパレットとお決まりのセクションで構成されているなら、さらに発展させます。

「わあ」のモーメントを選ぶ。 プロジェクトに関する最も興味深い本当のことは何か、そしてファーストビューでそれを言葉ではなくどのように見せることができるかを問います。2〜3の候補となるモーメントを書き、最もコンセプトに沿っていて、美しく実装できるものを選びます。テクニックのメニューとテスト済みレシピについては references/motion-and-wow.md を参照してください。そして、これを見た人が「すごい」と言うか、「いいね」と言うかを正直に自問します。「いいね」が答えなら、もっと大胆に、スケールを大きくし、より強いコントラストを作り、モーメントをより生き生きとさせます。

方向性を書き留める。 サイトルートの DESIGN.md に、以下のテンプレートを使って記述します。このファイルは、将来のページやセッションの一貫性を保ちます。DESIGN.md がすでに存在する場合は、新しいルックを考案するのではなく、それに従い、拡張します。 ユーザーが新しい方向性を求めた場合は除きます。

書体と色を選ぶ前に、references/typography.md と references/color.md を読んでください。よくあるデフォルトを避けるフォントペアリングとパレットメソッドが記載されています。references/layout.md では、「ヒーロー＋3つのカード」を超えた構成について説明しています。

# Design: <プロジェクト名>

## コンセプト
1〜2文で。この世界がどのような世界で、訪問者がどのような気持ちで去っていくべきか。

## オーディエンスと主要なアクション
誰が訪れ、彼らが知るべきこと、彼らにしてもらいたい唯一のこと。

## 書体
見出し用: <ファミリー、ウェイト>、そしてその理由。本文用: <ファミリー、ウェイト>、そしてその理由。モノスペースがあれば。
スケール: ベースサイズと比率（scripts/scale.mjs より）。

## 色
役割 -> 値: bg, surface, ink, ink-muted, line, accent, on-accent, focus。
使用ルール（例：「アクセントは主要なアクションとアクティブ状態のみに使用」）。

## レイアウト
グリッドと幅、セクションのリズム、全体的な姿勢（エディトリアル、密度高め、エアリー、非対称…）。

## シグネチャー
このサイトを人々が覚えているであろう、1つか2つの仕掛け。

## 「わあ」のモーメント
ファーストビューで誰かを立ち止まらせるもの、そしてそれがどのように機能するか。また、JSなし、モーション削減設定時、スマートフォンでの見え方。

## イメージとテクスチャ
どのようなビジュアルで、どのように作られるか、存在するアセットを考慮して。

## モーション
何が動き、どのように、どの程度動くか。prefers-reduced-motion を尊重すること。

## トーン
コピーがどのように聞こえるか。使用する言葉と避けるべき言葉。

## 検討した代替案
他の2つの方向性をそれぞれ1行で。ユーザーが方向転換できるように。

方向性を選び、構築します。抽象的な選択をユーザーに委ねるために止まらないでください。実際のページを見てもらった後で方向転換できるよう、代替案を引き渡しの際にリストアップします。

3. 最初にコンテンツを書く

レイアウトはコンテンツに従います。Lorem Ipsum を中心に描かれたデザインは汎用的なボックスを生み、一般的なコピーは良いレイアウトをテンプレートのように読ませます。レイアウトを始める前に、実際の言葉を書きましょう。

ヘッドライン: それが何か、または訪問者にとって何が変わるのか、平易な言葉で。具体的なことは、賢いことよりも優れています。「リーズにある公営テニスクラブでコートを予約」は「あなたのゲームを昇華させる」よりも優れています。
プロジェクトの具体的な内容を使う。実際のコマンド、実際の数字、実際の名前、実際の時間と場所。
ストックマーケティング用語を排除する。unlock, elevate, seamless, empower, revolutionize, supercharge, effortless, cutting-edge, robust, leverage, game-changer, 「take X to the next level」、「in today's fast-paced world」。ある文があらゆるウェブサイトに登場する可能性があるなら、書き直します。
AI的な単語だけでなく、AI的な文の形も避ける。 次の点に注意:
- すべてのセクション見出しが同じ2ビートの公式に基づいている（「ワンバイナリ。取得方法を選べ。」「今すぐ、またはその時点で、取り戻せ。」）。
- 「No X. No Y. Just Z.」
- 形容詞の3連符。
- すべての見出しにダジャレ。
シンプルなラベル（「インストール」「スナップショットを復元」）は、しばしば気の利いた決まり文句よりも強力であり、それによって、本当に洗練された唯一のヘッドラインが際立ちます。
ボタンのラベルは、何が起こるかを示す。「アプリをダウンロード」「テーブルを予約」「修理を予約」であり、「始める」「もっと詳しく」ではありません。
でっち上げの事実を決して本物として提示しない。 架空の価格、住所、時間、統計、お客様の声、顧客ロゴ、「10,000チームに信頼されています」などは避けます。これらはユーザー自身のプロジェクトであり、虚偽の主張は、うっかり出荷されてしまう責任を伴います。本当に事実が必要なセクションでは、<span class="todo">[価格]</span> のような、目立つスタイルのプレースホルダーを配置し、それぞれを引き渡しの際にリストアップします。

4. 構築する

トークンが先。 コンポーネントより先に、styles.css の先頭でCSSカスタムプロパティとしてシステムを定義します。カラーロール、タイプステップ、スペースステップ、半径、シャドウ、テキストメジャー、モーションタイミング。流動的なタイプとスペーススケールは以下で生成します。

node <skill-dir>/scripts/scale.mjs --min-ratio 1.2 --max-ratio 1.333   # 方向性に合わせて比率を選びます

その後は、ハードコードされた数値の代わりにトークンを使用します。ハードコードされた数値はずれていき、そのずれがいたるところで間隔が微妙にずれて見える原因になります。

スクリプトにはNode 20以降が必要です。node がPATHにない場合は、代わりに ~/.cache/killer-skills-node/node.exe で実行します。WindowsインストーラーはNodeがない場合にそこに配置します。

フォント。 references/typography.md に記載されているすべてのフェイスを持つ、killer-skillsフォントパックからセルフホスティングします。

node <skill-dir>/scripts/fonts.mjs list                       # ファミリーとそのウェイトまたはアクシスを表示
node <skill-dir>/scripts/fonts.mjs add path/to/site "Newsreader" "IBM Plex Mono" --weights 400,600

add はファイルとそのライセンスを assets/fonts/ にコピーし、assets/fonts/fonts.css を書き込みます。そのスタイルシートを styles.css より前にリンクし、ファーストビューに依存するフェイスのみをプリロードします（スクリプトが該当行を出力します）。ネットワークは不要で、完成したサイトはフォントホストに何もリクエストしません。パックがインストールされていないか、フェイスがない場合は、references/typography.md の説明に従ってGoogle Fontsからロードします。

ファイル。 新しいサイトの場合、プロジェクトが別の場所を指定しない限り、以下の構成とします。

site/            (またはユーザー/プロジェクトが希望する場所)
  index.html
  styles.css
  DESIGN.md
  icon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, manifest.webmanifest
  assets/        (svg, images, fonts/)
  script.js      (「わあ」のモーメントと小さなインタラクション。短く保つ)

HTML。 セマンティックなランドマーク（header, nav, main, 見出し付きの section, footer）を使用し、h1 は1つだけ、見出しは順序通りに配置します。アクションには <button>、ナビゲーションには <a> を使用し、すべてのフォームフィールドには <label> を付けます。すべてのページには lang、ビューポートメタタグ、実際の <title>、メタディスクリプション、Open Graphタグ、そしてフルセットのファビコンとアプリアイコンが必要です。

CSS。 プレーンなモダンCSS、モバイルファースト。

grid と flex を使用したレイアウト。repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) のような内在的パターン。
clamp() を使用した流動的なトークン、約60〜70chのリーディングメジャー。
デザインに合った :focus-visible スタイル。ホバーエフェクトは @media (hover: hover) の内側に配置。
見出しには text-wrap: balance、段落には text-wrap: pretty。
@media (prefers-reduced-motion: reduce)。

JavaScript。 エクスペリエンスを向上させる場合にのみ使用します。「わあ」のモーメント、ポインターエフェクト、スイープするテーマスイッチ、ライブデモ、モバイルナビゲーションのトグル（<button aria-expanded> または <details>）。バニラで手書きに保ち、サイト自身のファイルに記述します。フレームワーク、CDN、外部からの読み込みは一切行わず、通常は100行未満とします。エンハンスメントとして構築します。JSがなくてもコンテンツは表示可能でなければなりません。スクリプトが失敗したときにコンテンツが消えてしまうため、opacity: 0 でセクションを隠してスクリプトで表示するのを待つようなことは絶対にしてはいけません。CSSでできること（出現、タイピングエフェクト、スクロールドリブンシーン）にはCSSを優先します。

モーション。 その他のモーションは、速くて静かに保ちます。ホバーとフォーカスのトランジションは150〜250ms、小さな出現エフェクト。この落ち着きこそが、「わあ」のモーメントを際立たせます。すべてのアニメーションは @media (prefers-reduced-motion: no-preference) の中か、matchMedia チェックの後ろに配置し、モーション削減バージョンは完成した静的なデザインにします。レシピとパフォーマンスルールは references/motion-and-wow.md にあります。

ファビコンとアプリアイコン。 ヒーローと同じくらい真剣にファビコンをデザインします。それはデザインの中で最もよく見られる部分です。16pxではワードマークはつぶれてしまうため、ほとんどのマークは小さなサイズ用に縮小版が必要です。例えば、太字の一文字や一つの形状を、明るいタブと暗いタブの両方で読めるタイルの上に配置します。references/favicons.md を読んでください。その後、1つのSVGからセットを構築し、確認します。

node <skill-dir>/scripts/icons.mjs build mark.svg --out path/to/site --bg "#hex" --name "Site" --theme-color "#hex"
node <skill-dir>/scripts/icons.mjs audit path/to/site     # プレビューシート: 1x/2xのタブ、ライト/ダーク、ホーム画面

ストックフォトを使わないビジュアル:

ソフトウェア: 製品の実際のインターフェースをHTMLとCSSで構築します。実際のコマンドと出力を使ったスタイル付きターミナルセッションや、現実的なデータを持つアプリウィンドウなど。どんなイラストよりも説得力があり、ブランドに沿っています。
タイポグラフィをイメージとして: 特大の見出し、数字、プルクォート、印刷されたカードのように設定されたメニュー。
SVGとCSS: 幾何学的形状、図、地図、チャート、パターン、グレインテクスチャ（低不透明度のSVG feTurbulence フィルター）、一貫したストローク幅のシンプルなインラインアイコン。
実在するものを手描きで描くことには注意する。 食べ物、人物、動物、植物、建物、道具は、手書きSVGが最も失敗しやすい分野です。プロポーションが狂い、一つのディテール（パンの焼き目、ハイライト、手）が別のものに見え、誤った理由で視線を引きます。下手なイラストは、何もないよりもページを傷つけます。そのため、コードで表現できるビジュアルを優先します。

サイトを確認する。 バンドルされたPlaywrightスクリプトを使って、実際のブラウザでレンダリングします。

node <skill-dir>/scripts/screenshots.mjs path/to/site

これにより、電話（375px）、タブレット（768px）、デスクトップ（1280px）のフルページスクリーンショットとビデオ（MP4とWebM）が path/to/site/.preview/ に生成されます。実際の接続やアセットはありません。CSSを疑い、結果を正確に確認します。

問題を修正する。 .preview/ 内の画像と動画を開きます。意図を明確にします。

電話：テキストはすべて読みやすく、タップターゲットは十分に大きく（約44px以上）、コンテンツは詰め込まれていないか。
タブレット：中間サイズでのレイアウトは崩れていないか。
デスクトップ：スケールは適切か。コンテンツは見やすく、白いスペースは過剰でないか。
モーション：prefers-reduced-motion の標準バージョンと削減バージョンの両方で。タイミングは滑らかか、アニメーションは意図した場所に注目を集めているか、拡大縮小時にピクセル化していないか。
階層：「わあ」のモーメントはきちんと機能しているか、視覚的な重みはトークンと一貫しているか、不要な線が注意を散らしていないか。
修正：CSSで直接修正し、もう一度スクリーンショットを撮ります。見た目が良くなるまで繰り返します。

5. レビュー、修正、繰り返す

ファビコン監査、スクリーンショット、スクリーン録画、Playwrightスクリーンショットスクリプトは異なる時点で使用します。

icons.mjs audit：開発の早い段階で、ファビコンとアプリアイコンを検証するため。
ブラウザ開発者ツール：構築中に頻繁に、特にCSSの微調整とレスポンシブデザインのチェックのため。
screenshots.mjs：構築が完了したら、電話、タブレット、デスクトップでページ全体をキャプチャし、モーションも含めてレビューするため。各サイズの問題を修正したら、再度スクリーンショットを撮ります。

顧客への引き渡しの一部として、.preview/ 画像と動画をユーザーに送信します。

6. 最終調整と引き渡し

引き渡しのメモを書く。 DESIGN.md の下に、ユーザー向けの簡単なメモを追加します。

あなたが下した判断と、その理由。
代替案（選択されたものと、検討した他の2つの方向性）。
保留中の決定事項（例：「この価格を確認してください」）。
未解決の質問。
拡張の提案（例：「ブログセクションやポートフォリオグリッドは以下に沿って簡単に追加できます...」）。
保守に関する注意事項（例：「このインタラクションはscript.jsのMATCH_MEDIA定数に依存しています。ブラウザサポートを変更する場合はこの行を更新してください」）。

引き渡しのメモは簡潔に保ちます。あなたはデザイナーであり、ドキュメント作成者ではありません。最終決定はユーザーに委ねます。

<title> とmeta OGタグを確認します。 ページの <title>、<meta name="description">、<meta property="og:..."> タグを再度確認します。これらを適切に設定しなければ、ソーシャルシェアやSEOに悪影響を及ぼします。

既存サイトのリデザイン

ステップ1の前に、以下を行います。

0. 既存のサイトを棚卸しする。

テキスト：何が書いてあるか、何が古くなっているか、そしてそのソース。会社のコピー？あなたのコピー？古いREADME？
ビジュアル資産：ロゴ、色、書体、パターン、写真。それらはどの程度維持する必要がありますか？
技術スタック：ホスティング、ビルドツール、JSフレームワーク。すべてを置き換える必要がありますか？
すべてのページとルートのリスト。それらを新しい方法で再構築しますか、それともリダイレクトしますか？
ランキングと分析：現在の検索トラフィックとそれを維持するために必要なもの。
既存の robots.txt、sitemap.xml、.htaccess または _headers ファイル。
現在の icon.svg、favicon.ico、apple-touch-icon.png、manifest.webmanifest。可能であれば、icons.mjs build で置き換えます。

棚卸しの結果を DESIGN.md の一番上に追記します。結果に基づいて方向性を選択します。バラバラになっている資産を整理するのは、一からのスタートとは異なる創造的な課題を提示します。

既存ブランド内での作業

方向性はすでに決定されています。ブランドを理解し、それに従います。

ブランドガイドを読みますBRAND.md、スタイルガイド、トークン、DESIGN.md。
フォントと色を抽出します。ガイドがCSSカスタムプロパティとしてトークンを提供している場合は、それらを直接使用します。提供していない場合は、色（役割別）とタイプスケールをstyles.cssに抽出し、使用法を文書化します。
ブランドの声を書きます。ブランドガイドにスタイルガイドが含まれている場合はそれを使用します。含まれていない場合は、既存のサイトとマーケティング資料からその声を要約し、DESIGN.mdにメモします。
新しいブランドアセットが必要な場合は、提供されたガイドラインに従って作成します。適用される場合は、新しいロゴ、ソーシャルカード、アイコン。
整合性チェックを行います。Google Fontsからロードされたものや直接埋め込まれたものなど、そのブランドの既存のロゴとファビコンを収集します。新しいファビコンは、既存のものと色と形状が一致している必要があります。icons.mjs buildに渡せるように、ベクターファイルをどこかに置いてください。

ブランドを守ります。 ブランドの方向性に反するように見える変更を加えないでください。ブランドを改善できると信じるのであれば、それを実装する前に、まず提案としてユーザーに提起してください。

AIが作ったように見えるサイトの特徴

これらのパターンは、現時点ではAI生成サイトを特徴づけています（そしてすぐに時代遅れになります）。デフォルトでこれらに傾倒する場合、少なくともその理由を理解して行ってください。

唯一のレイアウトは、フルスクリーンの背景画像（多くの場合ぼかし入り）、その上に中央揃えの白いテキスト、そしてCTAボタン。
2色のうち優しい方と中間色：各所にアクセントとして現れる単一の中彩度色、残りは白と黒のあいまいな色合い。「#6C63FF」はすぐに見分けがつきます。
Inter（または同様の幾何学的サンセリフ）を唯一の書体として使用する。多くの場合、すべてのウエイト、すべてのサイズで。
すべてのパディング、マージン、行間は実用的な最小値に設定されており、レイアウトに余裕がない。各セクションは何かに触れているか、かろうじて離れている。
モーメントや驚きは存在しない。どのセクションも、ユーザーが一貫してクリックまたはタップしなければ表示されない方法でスクロールインするだけ。
本当のデータが入った表やリストがない。数字として表示されるものは、丸められたパーセンテージ（87%）か、「2x」のような誇張表現だけ。

原則

書く前にデザインを決める。 主題からデザインを見つける。ゼロから作っていても、選択は無限ではない。
一つの「わあ」を仕掛ける。 喜ばせてから、機能させる。美しく1つのことをやる。
実際のコンテンツを使う。 ダミーテキストはダミーデザインを生む。
トークンベースで構築する。 一貫性は細部から生まれ、トークンがそれを強制する。
確認し、スクリーンショットを撮り、修正する。 そうしないと、見えていないバグは存在しないことになる。
最も記憶に残る要素は、最もよく見られる要素である。 あらゆるサイズでファビコンを確認する。あらゆるデバイスでヘッダーを確認する。
オープンに引き渡す。 ユーザーがサイトを実行できるようにするため、すべてのデザイン上の決定事項と保留中の作業を明確に伝える。

Killer Design (キラーデザイン)