web-design-base-v1 は何をしますか？

標準. すべてのサイトは、その主題に合わせてアートディレクションされ、テンプレートと誤認されることがなく、細部まで技術的に正確で、タイポグラフィを主要なツールとして使用します。

方法. 主題を読み、1つの具体的なビジュアルアイデアを挙げ、システムを構築し、コンテンツを計画し、その後コードを書きます。システムは最初のコード行の前に存在します。なぜなら、コーディング中に行われる選択はデフォルトに流れる傾向があるからです。

0. このスキルの読み方

レベル	意味
ゲート	最後にチェックされます。ゲートに不合格のページは完成していません。
MUST / MUST NOT	デフォルトの法則。ユーザーが依頼した場合のみ逸脱し、その旨を一文で説明します。
SHOULD	強いデフォルト。主題が求める場合は黙って逸脱します。
MAY	主題に役立つ場合に許可されます。

優先順位: ゲート1と2（アクセシビリティ）→ ユーザーの明示的なリクエスト → MUST → SHOULD → MAY。ユーザーがゲートを破る何かを依頼した場合、最も近くて合格するバージョンを構築し、変更した内容を説明します。同じレベル内では、より具体的なルールが優先されます。

例はデモンストレーションであり、テンプレートではありません。 以下のすべてのパレット、フォントの組み合わせ、フェリーの時刻表、コード値は、良い回答の形式を示しています。これらを無関係な主題にそのままコピーすることは、このスキルの最も一般的な失敗です。リストされたパレットや組み合わせをそのまま選択する場合は、計画の中で主題に関する事実をもって正当化してください。

1. 5つのゲート

ファーストペイントとNo-JS. ヒーローの見出しは最初のフレームから表示される: 移動なし、クリップなし（Ä Ö Üのウムラウトドットを含む）、アニメーションなし。JavaScriptが無効またはprefers-reduced-motionがオンの場合でも、ページは完全に機能する。
コントラスト. ボディテキストは7:1以上、ミュートテキストとアクセントテキストは4.5:1以上、大きな見出しは4.5:1以上、構造的な境界線、フォーカスリング、UIパーツは3:1以上。実際に使用されるすべてのテキスト/サーフェスのペアについて計算され、決して推定されない（§6）。
パレット規律. 背景、インク、1つのアクセント、さらにbg/inkの色合い。グラデーション、グロー、ガラスモーフィズム、色付きシャドウはなし。
完全性. すべてのセクションに実質的な内容がある（§8）、すべてのリンクが意図した場所にリンクしている、必要なすべての状態が存在する。
特異性. パレットとタイプを変更せずに別の主題に移動できる場合、その作業は完了していない。

2. モードの選択

モード	使用目的	適用されるルール
ショーケース	ランディング、ポートフォリオ、ショップフロント、エディトリアル、イベント、コーポレート	§12以外のすべて
プロダクトUI	ダッシュボード、管理画面、ツール、アプリ、フォーム主体のフロー	§1–§6、§10、§11、§12; ヒーローアーキタイプとセクションプールはスキップ
ドキュメント	ドキュメント、ハンドブック、モデルカード	ショーケースのタイポグラフィとカラー、プロダクトUIの構造（TOC、コード、状態）
監査	「私のページをレビュー/改善して」	問題点をリストアップし、壊れたものだけを修正し、既存のアイデンティティを維持
イテレーション	「Xを変更して」	指定されたトークンまたはルールとその直接の依存関係のみを変更し、黙ったままリファクタリングしない

ユーザーがブランド（色、ロゴ、フォント）を提供する場合、そのブランドがパレットとタイプです。そのコントラストを計算します。ブランドのアクセントがテキストとして4.5:1に失敗する場合、大きな要素または非テキスト要素にのみ使用し、同じ色相のより暗いテキストバリアントを追加します。

3. 構築の方法

コードの前に計画を書く: ユーザーの言語で12〜16行（イテレーション: 3行の差分）。

3.1 主題を読む。 訪問者は何をしなければならないか、何を理解しなければならないか？その主題は、実際の場所（港、鋳造所、研究室、台所、法廷、アーカイブ）でどのように見え、聞こえ、感じられるか？彼らが覚えなければならない唯一のことは何か？

3.2 ビジュアルアイデアに名前を付ける。 主題からの具体的なオブジェクト、素材、または慣行に名前を付ける1文。フェリー路線の例: 「印刷された出発時刻表: 太く凝縮された数字、罫線の行、ボードがヒーロー。」抽象的な形容詞（「モダン」「クリーン」「ボールド」）や色のリストはアイデアではありません。独創性テスト: このカテゴリの一般的なサイトが持つ3つのものを挙げ、このデザインにはそのどれもないことを確認する。

3.3 システムを計画の表として構築する。

フィールド	値
パレット	bg、ink、accent（hex）、名前の由来となった素材、使用ペアごとの計算比率
タイプ	display + textフェイス、主題に結びついた理由、最長単語とそのモバイルサイズ
ヒーロー	アーキタイプ（§7.1）+ 1行の正当化
レイアウト	基本ロジック（§7.2）とセクションがそれをどう変化させるか
モーション	1つのシグネチャーパターン + オプションのサポートパターン
セクション	順序付けされ、それぞれの役割と形式を持つ
シグネチャーモーメント	訪問者が覚える1つのこと

3.4 コンテンツを計画する。 すべてのセクションを具体的な事実、ステップ、名前、数字、日付、価格とともにリストする。内部で一貫性があり、マークされている場合、創作コンテンツは許可される（§8.3）。

4. 基礎

4.1 headはデザインの一部です

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fähre Norddeich: Abfahrten und Frachtraten</title>
  <meta name="description" content="Abfahrtsplan, Frachtraten und Kontakt der Fährlinie Norddeich–Borkum.">
  <meta name="theme-color" content="#F6F1E6">
  <meta property="og:title" content="Fähre Norddeich: Abfahrten und Frachtraten">
  <meta property="og:description" content="Abfahrtsplan, Frachtraten und Kontakt.">
  <meta property="og:locale" content="de_DE">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23C0430B'/%3E%3C/svg%3E">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Public+Sans:wght@400;500;600&display=swap">
  <script>
    /* モーションゲート: 隠れた開始状態は、このクラスが設定されている場合にのみ存在する（§9） */
    if (!matchMedia("(prefers-reduced-motion: reduce)").matches && "IntersectionObserver" in window)
      document.documentElement.classList.add("js-motion");
  </script>
  <style>/* §4.2 ベース、§4.3 トークン、次にコンポーネント */</style>
</head>

MUST: langがコピーと一致すること、titleとdescriptionが具体的であること、フォントURLが§5で選択されたファミリーと一致しdisplay=swapで終わること、ファビコンが存在すること（404を回避し、完成したように見える）。
MUST NOT: 空のhead、ドイツ語のコピーにlang="en"、display=swapなしのフォント。
プライバシー（EU/DE）。 Google FontsをGoogleのサーバーから読み込むと、訪問者のIPが送信されます。ドイツの裁判所はこれをGDPRの問題として扱っています。プロトタイプでは許容されます。本番環境では、フォントをセルフホストする（woff2ファイル、@font-face）ことをレポートで提案してください。環境が外部フォントをブロックする場合、フォールバックスタック（§4.5）はそれでもデザインされているように見える必要があります。

4.2 ベースCSS

すべてのページをこの基礎から始めてください。これにより、シフト、クリップ、継承によるタイポグラフィの破損を防ぎます。

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h, 0px); }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
  font-synthesis: none;              /* ウェイトがロードされていない場合、偽の太字/イタリックを防ぐ */
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, table, form { margin: 0; }
ul, ol { padding-inline-start: 1.25em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }  /* リンクは認識可能 */
nav a, .btn { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[id] { scroll-margin-top: var(--header-h, 0px); }
table { border-collapse: collapse; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
.container { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: var(--gutter); inset-block-start: 0.75rem; z-index: 20;
  background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; }

MUST NOT: コンテンツに100vw、タイプを切り詰めるためのoverflow: hidden、ヒーロー見出しに負のマージンまたはtransform。フォントの自然なサイドベアリングを受け入れ、光学補正はしない。
MUST: すべてのテキストを.container内に配置する。計画でオフセットレイアウトが指定されていない限り、ヒーロー見出しはボディコピーの左端を共有する。
MUST: 全高ヒーローはmin-height: 100vh; min-height: 100svh;でサイズ設定する（svh行がサポートされる場所で優先されるため、モバイルブラウザのバーがヒーローを切り取らない）。
ボディコピーはremを使用し、固定pxは使用しない。これにより、訪問者のブラウザのフォント設定が引き続き機能する。

4.3 トークン

すべての色、フォント、サイズ、および間隔の値は1つのブロックに存在します。例の値を独自のパレット（§6）に置き換えてください。

:root {
  color-scheme: light;                     /* ダークパレットの場合は"dark": フォームコントロールとスクロールバーが追随 */
  --bg: #F6F1E6;  --bg-soft: #ECE3D3;
  --ink: #1C1A17; --ink-muted: #635A4C;    /* muted: ラベルとキャプションのみ */
  --accent: #C0430B; --on-accent: #F6F1E6; /* アクセント塗りのテキスト */
  --line: #857A66;                         /* 構造的な罫線: bgおよびbg-soft上で3:1以上 */
  --line-soft: #C9BEA8;                    /* 装飾的なヘアラインのみ */
  --focus: var(--accent);                  /* 反転バンド内で再割り当て */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-text: "Public Sans", "Segoe UI", sans-serif;
  --step-hero: clamp(3.25rem, 1rem + 11vw, 13rem);
  --step-h2:   clamp(2.25rem, 1rem + 5vw, 6rem);
  --step-label: 0.8125rem;
  --space-xs: 0.5rem;  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-l: clamp(3rem, 2rem + 4vw, 6.5rem);
  --space-xl: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --measure: 66ch;
  --header-h: 0px;                         /* スティッキーヘッダーの高さに設定、それ以外は0 */
  --rule: 1px solid var(--line);
}

MUST: ルール内のすべての値はこれらのトークンから来る。MUST NOT: ルール内のインラインhex、またはフレームワークのデフォルトパレット（gray-500、slate-200）。流体サイズはremとvwを組み合わせて、ブラウザのズームとフォント設定が引き続きサイズを変更できるようにする（純粋なvwはズームを無視する）。

4.4 言語とロケール

コピーはリクエストの言語である。langが一致する。Sie/duの使い分けは一貫している。
ドイツ語: 狭いカラムではhyphens: auto（正しいlangが必要）; フォントサブセットはäöüßと„ “ ‚ ‘ – をカバーする必要がある。タイポグラフィ引用符（„…“）、ドイツ語ページに英語のマーケティング用語は使用しない、数字と単位の間は （12 kg、9:30 Uhr）、日付は1. November 2026。
ビジネス向けのドイツ語サイトには、フッターにImpressumとDatenschutzのリンクが必要です（プロトタイプでは、ページ内のデモセクションで問題ありません）。2025年以降、BFSGにより、多くの消費者向けeコマースサービスでアクセシビリティが法的義務になっています。WCAG 2.1 AAが最低基準であり、このスキルのゲートはすでにそれを上回っています。

4.5 ネットワーク障害に耐えるフォント

同じクラスのフォールバックを選択してください（condensed → "Arial Narrow"、serif → Georgia、grotesk → system-ui）。2つのフォールバックは視覚的に明確に区別できる必要があります。これにより、フォントが失敗した場合でもページの階層が維持されます。使用するウェイトのみをロードします。displayに使用されるウェイトは、ロードされたファミリーに存在する必要があります（§5参照）。

4.6 ブレークポイントと375px

モバイルファースト。ブレークポイント: 480、760、1024、1320 px。375pxでは: 水平スクロールなし、ヒーロー見出しは5行以下、最長単語が収まる、タッチターゲットは44×44px以上、スティッキーヘッダーがアンカーを覆わない（--header-h）、2カラムレイアウトはすべてデザインされたモバイル形式を持つ。

最長単語ルール。 利用可能な幅≈ 375 − 2 × 19 ≈ 335 px。最大ヒーローサイズ（px）≈ 335 ÷ (最長単語の文字数 × 幅係数)。幅係数: condensed 0.42、serif 0.52、grotesk 0.58、expanded 0.68。clamp()の最小値をその値に設定します。condensedフェイスの「Frachtabfertigung」（17文字）では約47pxが許容されるため、上記の52pxの最小値はオーバーフローします: 最小値を下げるか、ソフトハイフンを追加します（Frachtabfertigung）。長いドイツ語の複合語が原因で、ヒーローにoverflow-wrap: anywhereを強制しないでください。

5. タイポグラフィ: 主要なツール

正確に2つのファミリーを使用します: 1つはdisplay、もう1つはtext。

Display	Text	適合
Big Shoulders Display	Public Sans	時刻表、物流、貨物、スポーツ
Barlow Condensed	Barlow	交通、案内標識、クラブ、イベント
Fraunces	Karla	食品、工芸、印刷、ホスピタリティ
Instrument Serif (400のみ)	Work Sans	エディトリアル、ファッション、建築
Newsreader	Libre Franklin	法律、機関、研究
Familjen Grotesk	Source Serif 4	雑誌、文化、非営利団体
IBM Plex Mono (display)	IBM Plex Sans	研究所、ツール、データ、ドキュメント
Archivo (幅軸 112–125)	Spline Sans	港湾、産業、製品シート
Anton (400のみ)	Barlow	キャンペーン、会場、ポスター
Bodoni Moda	Karla	高級品、ギャラリー、オークション

これらは出発点です。主題に応じて選択してください。非物流の主題に行1を選択することは、位置によって選択したことであり、主題によって選択したことにはなりません。フォントの実際の軸とウェイトを確認してください: Instrument SerifとAntonには1つのウェイトしかないため、「heavy」は利用できず、font-synthesis: noneによってブラウザがそれを模倣するのを防ぎます。ArchivoはURLにwdth（Archivo:wdth,[email protected],700..900）とCSSにfont-stretchが必要です。

MUST NOT: Inter、Roboto、Arial、Poppins、Playfair Display、Lora、Merriweatherをアイデンティティペアとして使用する。MUST NOT: すべてに1つのファミリーを使用する。displayとしてのMonospaceは…

（翻訳は元の内容の長さに基づいて打ち切られました。必要に応じて全文の翻訳を提供できます。）

Kadeka-SI/web-design-base-v1

web-design-base-v1 とは？

お気に入りのAIに質問する

ドキュメント

web-design-base-v1 は何をしますか？

0. このスキルの読み方

1. 5つのゲート

2. モードの選択

3. 構築の方法

4. 基礎

4.1 headはデザインの一部です

4.2 ベースCSS

4.3 トークン

4.4 言語とロケール

4.5 ネットワーク障害に耐えるフォント

4.6 ブレークポイントと375px

5. タイポグラフィ: 主要なツール

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me