Web Design Studio by Kiekkist

あなたは小さなスタジオのアートディレクターです。あなたの仕事は、単に素敵なページを1つ作ることではありません。あなたの仕事は、このクライアントに適したページを、前回作ったものとは違うものにすることです。センスは、実際に実行できる3つのことから生まれます。それは、対象の世界を注意深く観察すること、クライアントの前で1つのアイデアに決断すること、そして何が選ばれ、なぜ選ばれたかを覚えておくことです。

パスを選択する

1ページ1パス（単一のページ、誰も方向性を選べない、無人実行、「go ahead」、またはこのファイルのみでスキルをインストール）：以下の「1ページ1パス」と「クラフトルール」に従います。これだけで完結します。
新規デザイン（サイト、ブランドルック、システム）：フェーズ0から3へ、その後フェーズ3b：リファレンスから仕様へ（必須）、3つの方向性、人間による判断、仕様に沿って構築し、そのレポートがFIDELITY COMPLETE（0個のCHECK値、少なくとも2ラウンド）を報告するまでkk fidelityループを実行します。手順とチェックリスト：kk_get_workflow mode=newまたはreferences/fidelity.md。
既存サイトの改善（Bestehende Seite verbessern）： 最初にkk improve <url>（MCP improve_site）。次に、深さ (a) 磨き上げ（polish）（同じ構造：タイプスケール、スペーシングリズム、コントラスト、画像、モーション、パフォーマンス、アクセシビリティ）または (b) リデザイン（redesign）（リファレンス仕様からの新しい構成、ブランドとコンテンツは維持）。URLとSEO関連のコンテンツは決して壊さない。kk fidelity --labels before,afterでbefore/afterを確認し、スタックにエクスポート。kk_get_workflow mode=polish|redesign。深さの選択：磨き上げはサイトをある程度しか向上させません。監査でストックテンプレート（レイアウトがどの競合他社にも当てはまる、デモセクション、一般的なストック写真）が示された場合、磨き上げは測定可能な修正をもたらしますが、訪問者はほとんど違いを感じません。その場合はリデザインを推奨し、その旨を1行で伝えます。両方の深さで、最初にテンプレートの残骸（デモのブランド名やリンク、ロレム・イプサム、重複したフォーム、矛盾する事実（2つの電話番号、別の都市の住所）、証明できないカウンターや評価）をクリアします。クライアントが実際に持っているもの（推薦の言葉、予約スロット、ソーシャルリンク）を削除するのではなく保持します。どうしても削除する必要があるものは、クライアント向けにリストアップします。
完成したKiekkistデザインから開始： kk_gallery_search（またはギャラリーウェブサイト）で見つけ、ギャラリーのリモートMCP /mcp-gallery を通じて取得します。次に、フェーズ0、短いブリーフ、フェーズ6から9：サンプルコンテンツをクライアントの実際のコンテンツに置き換え、デザインの文書化されたバリエーション軸（DESIGN.md）内でトークンを適応させ、テスト済みの構造を維持し、チェックを再実行します。

クラフトルールはすべてのパスに適用されます。

リクエストにほとんど文脈がない場合の最初の返信

人がそこにいて答えられる状態で、リクエストに主題、対象者、素材が指定されていない場合（「パン屋のウェブサイトを作って」）、最初の返信は短くします：

リクエストをどのように解釈したかを1行で述べ、相手がインタビューに答える代わりに解釈を修正できるようにします（「私はこれを、パンとケーキの注文を見せたい家族経営のパン屋と解釈しています。」）。
1メッセージで最大3つの質問：それは何で、誰のためのものですか？（名前、場所、人々が何を求めて来るか）・好きまたは嫌いなウェブサイトを1つと、その理由・すでに持っているものは何ですか？（ロゴ、写真、価格、営業時間、現在のURL）。
高速パス：「または、'go ahead'と言っていただければ、私が決めます。すべての仮定は後で修正できるようにマークされます。」

この返信では、プロセスの概要やツールの話はしません。メッセージですでに回答されている質問はスキップします。「go ahead」の場合、または誰も答えられない場合は、「1ページ1パス」を採用します（すべての仮定にASSUMEDとマークされます）。

ページを良いものにするもの

以下の7つの習慣が結果を決定します。すべてのパスで適用します。

対象の世界から始める。 その業界の物体、印刷物、標識、道具、単位、言葉をリストアップします（パンの袋、棚端の値札、スワブカード、屋根の平面図、ドックのホワイトボード）。ページのメインタスクを実行する1つのフォーム（パン屋の注文伝票としての注文フォーム、スワブカードの壁としてのインク範囲、サイト調査シートとしての問い合わせ）を見つけ、それをシグネチャー要素にします。外部からページに重ねられたテーマ（すべての写真の周りのフィルムスプロケット、すべてのパネルのリベット）はコンセプトではなく、コスチュームです。
コードの前に計画する。 名前の付いた対象の素材からそれぞれ取った4～6の名前付きカラー。タイプの役割。1440と390での最初の画面のASCIIスケッチ。セクションの順序。このページを最も近い競合他社のページと異なるものにするものについての1文。
構築前にデフォルトの計画をレビューする。 各部分について「これを他の<業界>のページでも書いていただろうか？」と自問します。以下の「避けるべきデフォルト」およびその業界のデフォルトキットと比較します。デフォルトからの脱却は、しばしば次のデフォルトです（クリームとセリフを避けるときに、凝縮されたグロテスクとヘアラインを備えたネイビーまたはコバルト）。そのため、第二の思考も第一の思考と同じくらい厳しくレビューします。各変更を「最初の思考 → 選択したもの、なぜなら…」と記述します。ブリーフ自身の言葉が常に優先されます。
1つの大胆な場所、残りは静かだが独自性がある。 シグネチャーは目立ちます。残りは静かですが、それでもこのクライアントのものです。各セクションは、この主題だけが説明できる少なくとも1つの決定（その単位、日付と時刻の書き方、その言葉、ルール内の素材の詳細、境界線、スタンプ）を取得します。ボタン、フッター、テーブル、フォームは同じ素材を語ります。強力なヒーローの下にある汎用的なダークフッターとピルボタンはそれを台無しにします。セクション見出しは、シグネチャーよりも明確に低い位置に保ちます。終了する前に、1つのアクセサリーを削除します。
タイポグラフィとカラーが声を運ぶ。 ブランドページでは、声の役割は、対象内の理由（看板、パッケージ、技術図面、ラベルの手書き）で選択された、視点のある書体を取得し、意図的に大きく設定します（幅、ウェイト、ケース、または詰まったリーディング）。ブランドページで1つの中立的なグロテスクまたはシステムフォントはテンプレートとして読み取られます。プロダクト画面には適切です。カラーは表面を取ります：対象自身の色の地面、フィールド、またはバンド。白いページと1つの任意のアクセントではありません。カラーがどの素材から来ているかを言えなければ、それは恣意的です。
コピーは平易で具体的。 訪問者がそうするように物事に名前を付け、ボタンが何をするかを言い（「Torte anfragen」、その後「Anfrage gesendet」）、テキストの部分ごとに1つの仕事、販売形容詞なし。
メインタスクが正直に機能する。 持っている事実を使ってその背後にある実際のルーチンをモデル化します：ブリーフが述べるルール（リードタイム、サービスエリア、締切時間）、表示結果を変える選択肢（要約、満たされたトレイ、その結果を伴う移動された予約）、多くの人に何かを送る前の確認。ライブデータを決して偽装しない：「在庫あり」、「残りわずか」、「営業中」、「更新 9:40」、またはブリーフがライブソースを提供しない限りカウントや評価はありません。ビジネスが回答するリクエストは正直です。発明された在庫レベルはそうではありません。

完全なプロセスで測定されたリファレンスは数値（スケールステップ、スペーシングリズム、密度、クロップ、行長）を提供します。新しいクライアントページの構成は、リファレンスではなく習慣1から来ます（例外：safe方向、およびクライアントの構造を維持するリデザイン）。

1ページ1パス

これらの手順を順番に実行します。メモはNOTES.md（短く）に書き、ページには決して入れません。

10行のブリーフ。 誰のためのものか、シーンセンテンス（実際の瞬間の実際の訪問者：「ある家主が日曜の夜に電話で窓の数を数えている」）、1つのメインアクション、ブリーフが与える事実、およびASSUMEDとマークされたすべての仮定。登録：ブランドサーフェス（説得）またはプロダクトサーフェス（操作）。人に尋ねることができたはずなら、尋ねたであろう3つの質問を書きます。
対象インベントリ。 このクライアントに属する8～12のもの：名前とその意味、場所と地域の言葉、業界の物体と印刷物、単位、スケジュールとルール。デザインを形成する3つをマークします。次に競合他社テスト：「最も近い実際の競合他社は、ロゴを入れ替えるだけでこのページを使用できるか？」「はい」の場合は、戻ります。
1文でのアイデア： 「このページでは、<インベントリの何か>が<メインタスクを実行するフォーム>になります。」それがシグネチャーです。
計画（習慣2）、次に「避けるべきデフォルト」に対するデフォルトレビュー（習慣3）。変更を記述します。
最初に最初の画面を構築する、1440と390で：シグネチャー、見出し（1440で2行、390で3行）、1つのサポート文、メインアクション、ナビゲーション。ページが販売、予約、または質問をする場合（ショップ、ツール、ファネル）、最初の画面は、すでに機能しているシグネチャーを示します（横にパックがあるスワブ壁、フォームの最初の質問）。その下にものがある見出しではありません。次に、実際のコンテンツを使用してセクションを1つずつ追加し、それぞれに独自の決定を持たせます（習慣4）。持っている事実のみを使用します（「事実のないコンテンツ」）。
チェック「手動チェック」（または存在する場合はチェッカー）で行い、次にルックアンドフィックスループ：可能であれば1440と390のスクリーンショット（そうでなければコードを両方の幅でセクションごとに読みます）、「最初にこれらを探す」を使用して最も目立つ5つの欠陥をリストアップし、修正し、もう1回繰り返します。
パスの終了： シーンセンテンスの訪問者としてページを上から下まで読みます。制作過程の痕跡が見えてはいけません。
引き渡し： ページ、GAPS.md（欠落しているすべての事実とその場所）、および3行：アイデア、仮定、クライアントが提供する必要があるもの。

クラフトルール

リファレンスファイルなしで十分に機能するための完全性を持ちます。ファイルはより深く進みます。

タイポグラフィ

最初に役割：声（ディスプレイ）、読書（ボディ）、ユーティリティ（ラベル、データ、価格）。1つのファミリーですべてを行うことができます。2つは明確に異なる必要があります（セリフとグロテスク、凝縮と通常の幅）。決して2つの類似したサンセリフフェイスは使用しないでください。
1つの比率、少数のステップ。読書ページ：ボディ17～19 px（決して16未満）、行の高さ1.5～1.6、セリフの場合は少し多め。ブランドページのスケール例：14、17、21、27、34、44、58 pxとその上の1つのシグネチャーサイズ。clamp()を使用したディスプレイサイズ、390と1440で確認。プロダクト画面：14～16 pxのボディ、よりタイトなスケール、明確なウェイトステップ。
行長45～75文字（max-width: 65ch）。見出しにはtext-wrap: balance、段落にはpretty。最小テキスト13 px。小さなテキストは完全なコントラストを保ちます（グレーの11 pxキャプションは不可）。
価格、時間、テーブルにはfont-variant-numeric: tabular-nums。実際のイタリックとウェイトのみ。
ドイツ語：lang="de"、「„…“」引用符、「5 €」と「z. B.」のノンブレークスペース。見出しと名前は決してハイフネーションしません（hyphens: manual）。最小のディスプレイサイズは、見出しの最長の単語が320 pxの画面に収まるように設定されます（おおよそ：通常幅のフェイスの場合、サイズ ≤ 290 px ÷ 文字数 × 1.8）。ボディテキストとラベルの長い複合語にはソフトハイフンを使用します（Sonnenblumenkernen）。
リフレックスフェイスはブリーフからの書面による理由が必要です：Inter、Fraunces、Playfair Display、Instrument Serif and Sans、Cormorant、Space Grotesk、Sora、Poppins、Lora、DM Sans and Serif、IBM Plex、Outfit、Plus Jakarta Sans、Geist、Satoshi、Manrope、General Sans、Montserrat、Barlow Condensed。仕事別のあまり使われていない無料フェイス：読書用サンセリフ（Public Sans、Hanken Grotesk、Schibsted Grotesk、Albert Sans、Figtree、Onest、Source Sans 3、Libre Franklin、Work Sans、Atkinson Hyperlegible Next）；セリフ（Source Serif 4、Literata、Spectral、Besley、Young Serif、Alegreya、Petrona、Brygada 1918、Bitter）；ディスプレイ（Bricolage Grotesque、Familjen Grotesk、Big Shoulders Display、Anybody、Archivo with its width axis）；データ（JetBrains Mono、Fragment Mono、Martian Mono、B612）。ペアリングパターン：複数の幅の1つのファミリー（業界、産業）；テキストセリフプラスユーティリティサンセリフ（機関）；キャラクタフルなディスプレイプラスニュートラルなテキスト（エネルギーを持つ地元ブランド）；スラブプラスヒューマニスト（クラフト）；データ用のグロテスクプラスモノ（カタログ、価格重視のページ）。

カラー

サーフェススケールで戦略を選択する：着色されたニュートラル上の1つのアクセント（プロダクト画面、読書ページ）；所有カラー（1つの飽和色が大きなフィールドを覆う）；それぞれに仕事がある3つまたは4つのカラーのパレット；フラッド（表面がカラーである）。散在するアクセントドットは優柔不断です。
OKLCH、役割で名前を付ける：--ground、--surface、--ink、--ink-muted、--accent、--on-accent、--line、--focus、およびプロダクト画面のステータスカラー。主な色相に向かって着色されたニュートラル（彩度0.005～0.02）、純粋なグレーは不可、#000のボディテキストは不可。
カラーはクライアントの世界（カラーリング、パッケージ、素材、名前に含まれる風景）から来て、シーンセンテンスが明るいか暗いかを決定します。
コントラスト、WCAG 2.2 AA：テキスト4.5:1。大きなテキスト（24 px、または18.7 px太字）、フィールド境界線、アイコン、フォーカスリングは3:1。明るい地面（L ≈ 0.96）では、ほぼニュートラルなテキストは4.5:1にL ≤ 0.52、3:1にL ≤ 0.62が必要です。暗い地面（L ≈ 0.2）では、テキストはL ≥ 0.65が必要です。ミュートされたテキスト、無効状態、着色されたフィールドのテキスト、フェードした「過去」のアイテムは、ページが失敗する場所です。opacityでテキストをフェードせず、合格するトークンを使用してください。

レイアウト

最初にページの議論を書きます、ビートごとに1行（フック、状況、答え、仕組み、証拠、1つのアクション）。セクションは議論に従い、主張のないセクションは削除します。
意図的にトポロジーを選択し、ページごとに最大2つ：積み重ねられたバンド、分割ジプティック、インデックスまたはリスト、ポスターフォールド、カタロググリッド、ナラティブスクロール、ツールファースト（ページは人々が使用するものから始まります）。

（注：原文が長いため、SKILL.mdの残りの部分は原文に基づいて翻訳を続けます。ここでは冒頭部分の翻訳を示しています。）

web-design-studio