magholmes/cool-style

cool-style は何をしますか？

何百もの独立したウェブサイト（個人サイト、ネットアート、タイプファウンドリー、アーカイブ、スタジオ、小さなツール、ジャーナル）を綿密に調査した結果から抽出されたものです。これらのサイトは、ウェブの最高の部分を収集する人々によって保存されています（references/method.md）。ここにあるのはトレンドレポートではありません。これらのサイトが実際にやっていることを、数えたものです。

テンプレートは「ウェブサイトってどんな見た目？」に答えます。一方、ここにあるサイトはすべて「このサイトは何についてのサイト？」に答え、その答えがレイアウト、タイプ、色、そして動く唯一のものを決めさせています。

カノン（規範）は粗いものから厳密なものまで多岐にわたります。タイル状のGIF背景を持つNeocitiesの神社も、ピクセル単位で設計されたタイプファウンドリーも、どちらもその中に含まれます。どちらもクールです。欠けているのは、その中間、つまり何についてでもあり得るようなサイトです。

始める前に

1. 最初にアイデアを見つけてください（次のセクション）。アイデアを一文で言えるようになるまで、レイアウトも、パレットも、フォントも決めないでください。
2. 以下の表からアーキタイプを選び、新しいビルドの場合は、そのスターターから始めてください：node ${CLAUDE_SKILL_DIR}/scripts/new.mjs <archetype> <dir>。
3. 実際の例を見てください。 node ${CLAUDE_SKILL_DIR}/scripts/examples.mjs <tag or word> を実行すると、研究対象となったサイトの中から、優れたムーブ（仕掛け）を持つものを、良い順に表示します（--tags でボキャブラリー一覧表示、--random 5 でランダム表示）。
4. もし別のハウススタイル（例：magnus-style）が適用されている場合、それはトークン（フェイス、色、タイミング）に関して優先されます。このスキルは、アイデア、構造、ムーブのために使用してください。

アイデアを見つける

（自分自身、または相手に、一度に一つずつ質問してください）：

1. それは何ですか？平易な一文で。 それが何のためかではありません。「街灯に設置されたマイクが拾ったすべての曲の記録」「ソーラー電源の雑誌からのメモ」。
2. それは何に似ていますか？ すでに似ている物体、場所、システム：カレンダー、営業時間のある店、スプレッドシート、庭、ラジオ、蔵書票、指輪、机。これがコンテナ（法則1）になります。
3. テンプレートが隠してしまうような、それについての真実は何ですか？ その重さ、年齢、時間、データ、作られた場所の天気、そこにあるものの数、誰が作ったか。
4. 動いたり変化したりするものは何ですか？ 一つだけ選んでください。時間、読了数、訪問者のポインター、偶然、他の訪問者。
5. 誰かにリンクを送りたくなる理由は何ですか？ それがシグネチャームーブです。他のものはすべて、それが目立つように控えめにします。

答えをプロジェクトの先頭に書いてください（index.html のコメントで構いません）。答えが「何もない」場合、そのサイトはデザインの準備ができていません。コンテンツが必要です。

十二の法則

1. 形式を主題に即したものにする。 最も強力なサイトは、主題自身の形状をコンテナとして使います。波についてのエッセイは無限にスクロールし、各段落が立ち上がっては戻っていきます（#214）。機械学習データセットのガイドはスプレッドシートのように配置されています（#481）。インターフェースの歴史は、再構築された1984年のMacウィンドウの中にあります（#501）。監視音楽ログは、一つの2色LCDです（#76）。日替わりコミックのアーカイブは年間カレンダーです（#21）。テスト：このレイアウトは、別の主題をそのまま保持できますか？できるなら、それはテンプレートです。
2. 一つのアイデアを、あらゆるレイヤーに貫く。 メタファーは、ナビゲーション、見出し、画像、そしてページの重さにまで及びます。Our Networks（#232）はサイトマップを tree コマンドで表示し、ノートパソコンをASCIIアートで描き、39KBの重さです。多くの場合、アイデア全体は一つの安価な仕組みに過ぎず、それに完全にコミットしています。36個のCSSタイルで詩を隠す（#228）、風のデータの一日によって文字間隔を動かす（#669）。
3. ウェブサイトは場所であり、パンフレットではない。 部屋、机、町、庭、本棚、営業時間のあるカフェ（#828）、ラジオ、キオスク。ナビゲーションは家具になります：道標（#197）、指輪（#203）、本棚（#652）、剥く玉ねぎ（#789）。ドメインさえも場所の名前です（約6分の1が表現力豊かなTLD（.world .garden .cafe .town .computer .zone）を使用しています）。
4. 一つのインクを保持する。 一つの地の色に一つのインク。そして作品が他のすべての色を供給します。4分の1のサイトは使用する16進数カラーが3色以下です。グレーを除けば、カノン全体で最も使用されている色は、純粋な #ffff00、#ff0000、#0000ff です。アクセントは主題から取りましょう — アーカイブされている本のカバーの赤（#3）。 → colour.md
5. 理由のあるタイポグラフィを — あるいは、意図してブラウザ標準のままに。 69%がセルフホストのフェイスを使用（Neue Haas、ABC Diatype、Monument Grotesk、Space Monoが主流）。23%はシステムフェイスのみを使用し、9%はまったく宣言していません — Timesとデフォルトの青を姿勢として使用。モノスペースは55%のスタックで出現。テンプレートでよく使われるフェイス（InterやGeist）はほぼ見られません（約4%）。模範例で最も宣言されているフェイスはArial、Times、Helveticaです。サイズはコントラストが重要です。半数は11px以下まで小さくし、4分の1は100px以上まで大きくし、3分の1は4サイズ以下しか使用しません。 → type.md
6. インデックスがホームページである。 リスト、テーブル、カレンダー、カウントは、ヒーローイメージやカードよりも優れています。ボックスではなくルール（極細線、点線）。すべてのアイテムが同じスロットに。実際のメタデータをカラムとして。カテゴリの横にカウント。タイムスタンプ。ファイルサイズ。スプレッドシートとしての建築事務所（#535）、1行ごとに空の一片がある排出データ（#522）、ボックス描画テキストとしてのスコア（#288）。
7. 一文で言い表す。 散文として書かれたインターフェース：説明文がそのままナビゲーションになる（#316、#282、#530）、名前の代わりにロゴが入った経歴（#856）、名詞の代わりに絵が立つレバス（#547）、サインアップが最後の節となる一つの文からなるページ全体（#783）。声は具体的で、人間的で、しばしば小文字で、時には面白く、常に正直です — 取り消し線で消された閉店時間（#828）、ページが遅いと警告する見出し（#504）。 → voice.md
8. 一つのものを生きたものにする。 研究対象のサイトの大半（86%）は何かを行っています — しかし通常は一つのことだけです：時間が地の色を変える、天気がグラデーションを設定する（#832）、ウェブカメラのフレームが楽器のようにスコア化される（#12）、文字が風に漂う（#669）、訪問者が匿名の動物として現れる（#95）、サイトが夜になると閉まる。時計には理由が必要です（誰の時間？何まで？）。 → recipes.md
9. デフォルトと借用したオブジェクトは素材である。 詩のスタンザとしてのネイティブフォームコントロール（#123）、レイアウトとしてのフレームセット（#616）、アルバムのための2000年代のISPポータル（#631）、バンドのための2005年のメディアプレーヤー（#116）、クッキーバナーとしてのClippy（#179）。あるジャンルを引用することで、サイトは無料で声を得られます。粗さは、アイデアが鋭い場合にのみ、意図として読まれます。
10. 好奇心に報いる。 ポインター、忍耐強い人、そしてView-Source（ソース表示）をする人のための何かを：ホバーで現れるもの、触れるまでフェードアウトしている言葉（#360）、ボールピットフィルター（#479）、ドラッグするレンズ（#254）、HTMLコメント内のメモ（#283）、訪れるたびに異なるページ。決して、そこに重要なものを隠さないでください。
11. 小さく、静的に、リンクされ、長持ちするように作る。 保存されたサイトの約3分の1はすでに死んでいるか、リデザインされているか、壁に囲まれています（有料化など）。プレーンな自己完結型ページ（多くの場合GitHub Pages上）は生き残りました。JavaScriptシェル、廃止されたホスト、期限切れのドメインは最初に死にました。ファーストパーティのコンテンツのサイズの中央値は約250KBで、4分の1は50KB未満です。外部にリンクしましょう：4分の1は最初のページに10以上の外部リンク（友人、ウェブリング、ディレクトリ、ソース）を持っています。
12. クールで、そして親切に。 カノンの盲点：わずか17%が動きの抑制設定を尊重、代替テキストのカバレッジ中央値は17%、56%がフォーカスアウトラインを削除、18%がズームをブロック、半数がテキストを11px以下に設定。すべてのムーブは、そのガードレールとともに行ってください（never.md、recipes.md）。人を排除するクールさは、ただ騒がしいだけです。

アーキタイプを選ぶ

コンテナが最初の決断です。詳細な説明、特徴的なムーブ、模範例、落とし穴：references/archetypes.md。

アーキタイプ	ウェブサイトは…	対象	スターター	参照例
notebook（ノート）	公開されたノート	エッセイ、日記、研究ログ、Zine	notebook	#34 #124 #214 #362
index（索引）	カタログ、元帳、データベース	ポートフォリオ、アーカイブ、コレクション	index	#3 #522 #535 #288
sentence（文）	クリックできる一文	スタジオ、経歴、マニフェスト、小規模組織	sentence	#316 #282 #530 #783 #856
poster（ポスター）	一画面、一言、一インク	スタジオ、レーベル、イベント、リリース	poster	#7 #776 #201 #599
room（部屋）	物のある場所	個人サイト、ショップ、コレクション	room	#9 #277 #92 #793
almanac（暦）	カレンダー、時計、季節	日記、スケジュール、日付のある作品	almanac	#21 #128 #243 #718
atlas（地図帳）	地図、庭、ネットワーク	リンクページ、ディレクトリ、研究	atlas	#81 #139 #578 #284
instrument（楽器）	演奏できるもの	タイプ見本、おもちゃ、ツール、ジェネレーター	poster + recipes	#254 #615 #622 #353
broadcast（放送）	世界のライブフィード	ウェブカメラ、ラジオ、データ、センサー	almanac + recipes	#12 #76 #51 #832
costume（衣装）	別の時代から借用したインターフェース	音楽、アーカイブ、パロディ、ローンチ	—	#501 #116 #631 #61
exhibition（展示）	号、ショー、回すオブジェクト	ジャーナル、学位展、カタログ	index	#263 #838 #677 #865
specimen（見本）	タイプフェイスがインターフェース	ファウンドリー、レタリング、タイププロジェクト	poster	#776 #195 #254 #352
commons（共有地）	訪問者によって作られる	ゲストブック、アンソロジー、コミュニティ	notebook	#654 #423 #92 #249
shrine（神社）	古きウェブへのラブレター	ファンサイト、コラージュ、個人ページ	room	#586 #265 #441 #751

アーキタイプは組み合わせることもできますが（例えば、暦であり同時に共有地でもある）、一つが主導します。

ムーブ（仕掛け）を作るのであって、装飾ではない

ムーブとは、名前を付けられる決定です（「ナビは文である」、「地の色は時間に従う」）。装飾とは、名前を付けられないものです。references/moves.md には、70以上のムーブが、アイデア、構造、タイポグラフィ、色、画像、インタラクション、時間、声、ディテールという次元ごとにリストされており、それぞれにそれを実践しているサイトが示されています。

• 一つのシグネチャームーブを、とことん貫く（法則2）。二つか三つのサポートムーブは、より控えめに。残りはすべてプレーンに。 研究対象のサイトが複数のムーブを重ねることはほとんどありません。
• ライブラリから来るムーブよりも、コンテンツから来るムーブ（あなたがいる場所の天気、物の数、主題の形状）を優先してください。
• どのサイトでも同じように機能するムーブは、装飾です。

ワークフロー

1. アイデア。 五つの質問に答えてください。index.html の先頭に一文を書いてください。
2. コンテナ。 アーキタイプを選んでください。新しく始める場合は scripts/new.mjs を使用します。最初にプレーンなHTMLで構造を組み立ててください。スターターはマークアップのレベル（実際のリスト、テーブル、<time>、<details>）を示しています。
3. スタイルの前にコンテンツ。 実際の言葉、実際の画像（代替テキストは今すぐ書く）、実際の数や日付を入れてください。クールなサイトは80%がコンテンツです。
4. タイポグラフィとインク。 理由のある一つのフェイス（あるいは、意図してシステム標準）、そして一つの地の色に一つのインクを選んでください。サイズは4つ以下、アーキタイプが望めばそのうちの一つは非常に大きくします。type.md、colour.md。
5. シグネチャームーブ。 recipes.md から適切に構築してください — キーボードパス、タッチパス、動きの抑制バリアントを含めて。
6. ディテール。 ファビコン、タイトル、選択色、コロフォン（奥付）、最終更新日、外部リンク、キャラクターを保つ404ページ。moves.md § details。
7. 監査。 node ${CLAUDE_SKILL_DIR}/scripts/audit.mjs <dir> を実行し、すべてのエラーを修正し、警告は質問として扱ってください。CIでは：cool-check GitHub Action（README参照）。
8. 見てみる。 デスクトップ、390pxのスマートフォン、キーボードのみ、動きの抑制オン、低速ネットワーク。そして重要な質問：誰かがこのリンクを友人に送るだろうか？ それは何だと言うだろうか？

チェックリスト

• アイデアが一文に収まり、そのレイアウトは別の主題をそのまま保持できない。
• 一つのシグネチャームーブが、とことん貫かれている。サポートムーブはより控えめ。名前を付けられない装飾がない。
• 一つの地の色に一つのインク（またはコンテンツが供給するパレット）。色に意味がある。
• タイポグラフィ：理由のあるフェイス、または意図してシステム標準。サイズは4つ以下。小さなテキストでもインクは完全に表示されている。
• 言葉は実際のもので、具体的で、人間の声である。パンフレットのような動詞や、仮のタイトルがない。
• 何かが本当で、生きている（時間、データ、数、場所）— あるいは、静けさが意図的である。
• 外部にリンクしている。独自のファビコンがある。人間のように聞こえるコロフォンまたはアバウトページがある。
• キーボード：すべてのムーブに到達可能で、フォーカスが見える。タッチ：ホバーに依存するものがない。動きの抑制：静止したバリアントが存在する。
• すべての画像に代替テキストがある（または装飾の場合は alt=""）。ズームが機能する。lang が設定されている。
• 軽量：ファーストパーティのHTML+CSS+JSが ~250KB未満（アイデアがそれ以上を必要としない限り）。JavaScriptなしでも機能する（または何かを伝える）。
• audit.mjs がエラーなしでパスする。

リファレンス

ファイル	読むタイミング
references/canon.md	証拠が欲しいとき：サイトに共通する点を、数字で
references/archetypes.md	コンテナを選ぶ、または発展させるとき
references/moves.md	シグネチャームーブとサポートムーブを選ぶとき
references/recipes.md	ムーブを構築するとき — 30のコピーレディなスニペットとそのガードレール
references/type.md	フェイス、サイズ、タイポグラフィの役割を選ぶとき
references/colour.md	インク、地の色、そして色が動くときを選ぶとき
references/voice.md	タイトル、ナビ、経歴、アバウトページ、コロフォン、エラーを書くとき
references/never.md	レビューするとき：テンプレートの兆候、そしてカノン自身の悪い習慣
references/catalogue.md	最も強力なサイトをアーキタイプごとに閲覧するとき
references/method.md	これがどこから来て、どの程度確かなのかを知りたいとき
data/sites.json	すべてのサイトのメモ（scripts/examples.mjs でクエリ可能）