swiss-editorial-minimalist (SKILLS.md v3.1)

モデルによって構築されたページは、通常、モデルが見てきたすべてのページの平均のように見えます。グラデーションのヒーロー、絵文字アイコンが並んだ角丸カード、すべてのボタンの下にある影、そして虹色を読み込むTailwind CDN。そのどれもが間違ってはいませんが、何一つとして決断されたものではありません。

このファイルは、それらのデフォルトを決断に置き換えます。このファイルがカバーするのは3つのことです。ハウススタイル（何を表示し、何を省くか）、それを支える技術ルール（トークン、スケール、ブレークポイント、アクセシビリティ）、そして結果が出荷される前にチェックするゲートです。

ルールは書かれた通りに従ってください。リクエストがルールと矛盾する場合、セクション0が何をすべきかを示します。

0. メタルール（最初に読むこと）

このファイルを受け取ったときの対処法

コードを書き始める前に、ファイル全体を読んでください。 ルールは相互に依存しています。
このファイルですでに決定されていることについて、説明を求めないでください。 合理的な前提で実行し、それを1行で述べてください。
リクエストがハウススタイルと矛盾する場合（例：「カラフル」「遊び心のある」「グラデーションヒーロー」「絵文字アイコン」「20px角丸カード」）、先に一度確認してから進めてください：

このリクエストはSKILLS.mdのセクションXに違反しています。ガイドから外れない限り、スイス・エディトリアル・ミニマリストスタイルで解釈します。

回答を待ってから構築してください。
デフォルトの出力は1つの完全なHTMLファイルで、インラインの<style>と<script>を含みます。ユーザーが明示的に要求しない限り、断片を提供しないでください。
CSSは常にセクション12の:rootブロックから始めてください。

このスタイルの名称について

語彙を一貫させるためにこれらの用語を使用してください。「モダン」「クリーン」「スリーク」を単独で使用しないでください。それらは具体的なことを何も述べていません。

「スイス・エディトリアル・ミニマリスト」：このファイルで説明されているデフォルト。
「ソフト・ブルータリズム」：より太い境界線とラフなグリッド。
「ネオ・ブルータリスト・エディトリアル」：アクセントカラーが1つ追加され、ハードオフセットシャドウがある。シャドウはデフォルトスタイルでは禁止されているため、ユーザーが明示的に要求した場合にのみこの名前を使用してください。
「モノクロームマガジン」：タイポグラフィ主導で、イラストレーションカードなし。

1. デザイン哲学

3つの原則。どれも譲歩できません：

コンテンツが王であり、タイポグラフィが建築である。 装飾的なイラストレーションはありません。大きな見出しが主要な視覚要素です。
構造は可視のままにする。 境界線、グリッド、セクション番号はそのまま表示されます。それらは隠されません。
モノクローム優先、色は後から。 デフォルトは黒、白、グレーです。色はダークモードか、最小限のアクセントとしてのみ表示されます。

ページは、エンジニアによって作られた印刷雑誌のように、落ち着いていて、しっかりしていて、知的で、エディトリアルな印象を与えるべきです。

2. パレット

ライトモード（デフォルト）

:root {
  --bg:     #f5f5f5; /* メイン背景、純白ではない */
  --ink:    #111111; /* 主要テキスト、純黒ではない */
  --muted:  #666666; /* セカンダリテキスト */
  --line:   #e0e0e0; /* 境界線と区切り */
  --card:   #eeeeee; /* カード背景 */
  --accent: #d4d4d4; /* ニュートラルアクセント */
  --dark:   #0a0a0a; /* ハイコントラストセクション（声明、フッター） */
  --white:  #ffffff;
}

ダークモード

body.dark {
  --bg:     #121212;
  --ink:    #f0f0f0;
  --muted:  #999999;
  --line:   #333333;
  --card:   #1e1e1e;
  --accent: #2a2a2a;
  --dark:   #050505;
  --white:  #181818;
}

カラールール（必須）

ボディ背景は決して#fffではない。 オフホワイトの#f5f5f5を使用してください。
テキストは決して#000ではない。 #111を使用してください。
ブランドカラーは1ページあたり最大1〜2回表示され、常にCSS変数を介して、ハードコードされることはありません。
明るい色はステータス、アイコン、テキストに対して禁止されています。禁止されている例：emerald-500、green-600、red-500、blue-500、yellow-400、#27c93f、#ff5f56、#ffbd2e。これらはvar(--ink)またはvar(--muted)のモノクロームシンボル（●、▲、✕、→）に置き換えてください。
コントラストセクション（声明、CTA、フッター）は明るいテキストでvar(--dark)を使用します。
ダークモードは必須です。 デフォルトではprefers-color-schemeに従い、ユーザーがオーバーライドできるようにし、選択をlocalStorageに保存します。トグルはセクション5（「テーマトグル」）の必須マークアップを使用します。

3. タイポグラフィ

フォントペアリング

見出し：  'Space Grotesk'  (または Inter Tight、General Sans、Neue Montreal)
本文：     'DM Sans'        (または Inter、Satoshi、IBM Plex Sans)
等幅：     'JetBrains Mono' (またはシステム等幅)

本文テキストに装飾フォント、スクリプトフォント、セリフフォントを使用しないでください。セリフは引用文や署名（例：Georgia、イタリック体）にのみ許可されます。

タイプスケール（clampは必須。これによりメディアクエリなしでタイプが拡大縮小します）

/* ヒーローH1 */
font-size: clamp(55px, 5.6vw, 94px);   /* または狭いヒーロー用に clamp(32px, 4.3vw, 62px) */
line-height: 1.025;
letter-spacing: -0.07em;               /* 常に負の値 */
font-weight: 500;                      /* 700ではなく、400でもない */

/* セクションH2 */
font-size: clamp(42px, 4.2vw, 69px);
line-height: 1.08;
letter-spacing: -0.06em;
font-weight: 500;

/* カードH3 */
font-size: clamp(22px, 2.2vw, 27px);
line-height: 1.2;
letter-spacing: -0.04em;
font-weight: 500;

/* 本文 */
font-size: 16px–18px;
line-height: 1.7–1.8;
color: var(--muted);

/* マイクロ / アイブロウ / ラベル */
font-size: 12px;
letter-spacing: 0.15em–0.17em;
font-weight: 700;
text-transform: uppercase;

ハードタイポグラフィルール

見出しは常にネガティブレタースペーシング（-0.04emから-0.07emの間）を使用します。これはこのスタイルの特徴です。
見出しのウェイトは500です。太字の700はエディトリアルな雰囲気を損なわせます。
アイブロウとマイクロラベルは常に大文字で、ワイドトラッキング（0.15em以上）にします。
セクション番号（01、02、03）はマイクロラベルとして表示されます。それらを隠さないでください。
見出しの末尾にある終止符は、オプションでアクセントとして機能できます：
```
<h1>Judul.<span style="color:var(--muted)">.</span></h1>
```
本文テキストは左揃えにします。長い段落を中央揃えにしないでください。

4. レイアウトとグリッド

コンテナ

.wrap {
  max-width: 1440px;
  margin: auto;
  padding: 0 clamp(24px, 5vw, 84px);
}

垂直方向のスペーシング

セクション間：デスクトップではpadding: 130px 0、モバイルでは85pxに縮小。
ヘッダーの高さ：デスクトップで88px、モバイルで75px。
カード間のギャップ：15〜16px。タイトに保ち、24px以上にしないでください。

一般的なグリッドパターン

/* 非対称ヒーロー */
.hero { grid-template-columns: 1.04fr .96fr; }

/* 2カラムセクションヘッド */
.section-head { grid-template-columns: 1fr 1fr; align-items: end; }

/* 3カラム特徴 */
.features { grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* 声明 */
.statement-grid { grid-template-columns: 1fr 1fr; gap: 60px; }

/* 推薦文（セクション8参照） */
.testimonial-grid { grid-template-columns: 1.2fr .8fr; gap: 60px; }

レイアウトルール（必須）

セクションは、影や異なる背景ではなく、1pxのvar(--line)境界線で区切られます。
大きなborder-radiusは避けてください。ボタンとカードは最大4pxです。画像とスクリーンショットのみが12〜22pxになります。
セクションヘッドではalign-items: endを使用して、見出しと段落が同じベースラインにくるようにします。これがエディトリアルなテクニックです。
非対称グリッド（1.04fr / .96fr）は、1fr / 1frよりも見栄えが良くなります。
本文テキストを中央揃えにしないでください。常に左揃えにします。
すべてのセクションには、1pxのvar(--line)のborder-topまたはborder-bottomが必要です。

5. コンポーネント

ボタン

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 4px;                 /* ほぼ正方形 */
  padding: 15px 20px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); background: #333333; }
}

/* バリエーション */
.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.light   { background: var(--bg); color: var(--ink); border-color: var(--bg); }

ボタンのルール：

すべてのボタンには矢印アイコンが付きます：外部リンクの場合は↗、スクロールの場合は↓。
ホバーではボタンが-2px持ち上がりますが、@media (hover: hover) 内でのみです。拡大縮小はせず、影も追加しません。
.btn.light に #fff を使用しないでください。var(--bg) を使用してください。

フィーチャーカード

┌─────────────────────────┐
│  [SVGラインアート 8:5]  │  ← 抽象的なモノクロームイラスト、または空
├─────────────────────────┤
│  ラベル マイクロ        │  ← 大文字、ワイドトラッキング
│  カードタイトル         │  ← Space Grotesk 24–27px
│  1〜2文の説明           │  ← muted、14px
└─────────────────────────┘

背景 var(--card)、border-radiusなし（または最大4px）。
境界線なし（カードが背景に溶け込みます）、または 1px solid var(--line)。

ホバー：transform: translateY(-5px)、@media (hover: hover) 内でのみ：

@media (hover: hover) { .card:hover { transform: translateY(-5px); } }

イラストレーションはSVGラインアートで、stroke-width: 1.2px、fill: none、インク色です。写真、グラデーション、絵文字ではありません。

ヘッダー

高さ88px、border-bottom: 1px solid var(--line)。
ブランド：34pxのロゴと、Space Grotesk 22pxの名前、letter-spacing: -1.1px。
ナビゲーション：14px、ウェイト600、ギャップ36px。
アクション：テーマトグル（太陽/月アイコン、下記「テーマトグル」の必須マークアップ）、CTAボタン、モバイル用ハンバーガーメニュー。
モバイルナビゲーションはヘッダーの下に絶対配置パネルとして開き、Escapeキーで閉じます。
ハンバーガーメニューには aria-label、aria-expanded、aria-controls が必要です。テーマトグルには aria-label と aria-pressed が必要です（下記参照）。

テーマトグル（必須マークアップ）

すべてのページにダークモードトグルがあり、常にこのマークアップを使用します。アイコンを描き直したり、絵文字に置き換えたり、テキストラベルを追加したりしないでください。SVGパス、id 値、aria-label は固定です。

<div class="header-actions">
  <!-- ダークモードトグルボタン -->
  <button id="theme-toggle" type="button" class="theme-toggle" aria-label="ダークモード/ライトモード切り替え" aria-pressed="false">
    <!-- 太陽アイコン（ライトモードで非表示、ダークモードで表示） -->
    <svg id="sun-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <circle cx="12" cy="12" r="5"></circle>
      <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
    </svg>
    <!-- 月アイコン（ライトモードで表示、ダークモードで非表示） -->
    <svg id="moon-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
    </svg>
  </button>
  <!-- CTAボタンとハンバーガーメニューはここ、同じラッパー内に配置します -->
</div>

.header-actions { display: flex; align-items: center; gap: 16px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;                    /* タップターゲット */
  min-height: 44px;
  padding: 8px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s;
}
@media (hover: hover) {
  .theme-toggle:hover { background: var(--card); }
}
.theme-icon { width: 20px; height: 20px; }

/* アイコンの状態は body.dark に従うため、JavaScriptでクラスを切り替える必要はありません */
#sun-icon  { display: none; }
#moon-icon { display: block; }
body.dark #sun-icon  { display: block; }
body.dark #moon-icon { display: none; }

<!-- <body> 内の最初の要素として配置。これにより、保存されたテーマが最初の描画の前に適用されます -->
<script>
  (function () {
    var KEY = 'theme';
    var saved = null;
    try { saved = localStorage.getItem(KEY); } catch (e) {}
    var dark = saved ? saved === 'dark'
                     : window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.body.classList.toggle('dark', dark);

    document.addEventListener('DOMContentLoaded', function () {
      var btn = document.getElementById('theme-toggle');
      if (!btn) return;
      btn.setAttribute('aria-pressed', String(document.body.classList.contains('dark')));
      btn.addEventListener('click', function () {
        var isDark = document.body.classList.toggle('dark');
        btn.setAttribute('aria-pressed', String(isDark));
        try { localStorage.setItem(KEY, isDark ? 'dark' : 'light'); } catch (e) {}
      });
    });
  })();
</script>

テーマトグルルール：

ラッパー（.header-actions）、ボタン id="theme-toggle"、アイコンID sun-icon と moon-icon は、書かれている通り正確に保持してください。スクリプトとチェックリストがそれらを探します。
月はライトモードで表示（クリックでダークに）。太陽はダークモードで表示（クリックでライトに）。デフォルトの状態はライトですが、prefers-color-scheme: dark または保存された選択がそうでない場合は異なります。
ボタンは変数からのみ色を取得します：アイコンとテキストには var(--ink)、境界線には var(--line)、ホバー背景には var(--card)。色をハードコードしないでください。
border-radiusは最大4px、タップターゲットは少なくとも44×44px、ホバー状態は @media (hover: hover) 内に配置します。
アイコンは20px、stroke="currentColor"、stroke-width="1.8"、fill="none"、aria-hidden="true"。ボタンは aria-label を持ちます。
このボタンには aria-pressed を使用します。aria-expanded はハンバーガーメニュー用であり、テーマトグル用ではありません。
選択を localStorage にキー theme で保存し、値は light または dark とします。ストレージ呼び出しは try/catch でラップしてください。
トグルはTailwindなしで動作します。元のスニペットはTailwindユーティリティクラス（flex items-center gap-4、p-2、w-5 h-5、hidden/block）を使用していましたが、Tailwind CDNが禁止されている（セクション10）ため、ここでは上記のバニラCSSに置き換えられています。プロジェクトがすでにビルドステップでTailwindを実行している場合、ユーティリティクラスは残っていても構いませんが、色は text-[var(--ink)] と記述する必要があります。text.var(--ink) という形式はタイポであり、機能しません。

フッター

背景 var(--dark)、前景のテキストは var(--bg)。
高さは最小限に保ちます。フッターには、コピーライト行、ソーシャルリンク、プライバシーポリシー/利用規約へのリンクのみを含めます。CTAやナビゲーションの複製は不要です。
フッターの境界線：上端に1pxの var(--line)。
フッターテキストは 14px、color: var(--muted)（または背景が var(--dark) の場合はそのバリエーション）。ソーシャルリンクは color: var(--bg)、ホバー時に color: var(--muted)。

6. アンチパターン（禁止）

これらのパターンは、プロジェクトの至る所で、多くのページで、どのモデルでも、繰り返しポップアップ表示されます。SKILLS.mdがアクティブな場合は、それらを生成しないでください。

グラデーションヒーローセクション。 特に紫から青へのグラデーション。禁止。
smooth scrollとparallax。 scroll-behavior: smooth も transform-style: preserve-3d も禁止。
点滅するアニメーション。 フェードイン、スライドイン、弾むアニメーション。禁止。
フォームと入力に明るいアウトライン。 禁止。focus-visible には outline: 2px solid var(--ink) を使用してください。
ページ上部のクッキーバナー。 ページフッターにテキストリンクで十分です。
Tailwind CDN。 デフォルトの設定は重く、すべての色をロードし、テーマトグルの text-[var(--ink)] をサポートしていません。プロジェクトがTailwindを必要とする場合、ビルドステップを設け、設定でプルーニングする必要があります。
Google Analytics、Facebook Pixel、HubSpotトラッキング。 これらのスクリプトを生成しないでください。ユーザーが明示的に要求した場合でも、セクション0に従って一度確認してください。
10ページ以上のサイトマップ。 このスタイルは、マーケティングサイト、ランディングページ、プロジェクトのランディングページ用です。ブログには適していません。
letter-spacing: normal のテキスト。 特に見出しは、常にトラッキングを設定してください。スケールが移行をカバーします。
絵文字。 すべてのコンテキストで禁止。SVGモノクロームアイコン、または省略記号（+、→、✕、●、■、◆）を使用してください。
Font Awesome と Material Icons。 アイコンはインラインSVGでレンダリングします。CDNアイコンライブラリは使用しないでください。
丸いボタン。 禁止。ボタンは border-radius: 4px で、完全に角が丸い場合は決してありません。
WebP画像の背景色。 透明なWebPの背景色（#fafafa）が透けて見えることがよくあります。代わりに var(--bg) を使用してください。
this、it、that、we、our を使用したあいまいなコピー。 セクション9の「コピールール」を参照してください。
Numeral.js と day.js。 日付と数値の書式設定は、バニラJavaScriptの Intl で処理してください。

7. アクセシビリティとパフォーマンス

すべての画像には alt テキストが必要です。alt属性を省略しないでください。
すべてのボタンには aria-label が必要です。アイコンのみのボタンはアクセシビリティに違反します。
フォーカスインジケータは可視である必要があります。outline: none は :focus-visible ルールなしでは使用しないでください。

prefers-reduced-motion を尊重します：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

色のコントラスト比は、通常テキストで4.5:1以上、拡大テキストで3:1以上（WCAG AA）。
フォントファイルはプリロードします：<link rel="preload" as="font" type="font/woff2" href="..." crossorigin>
Google Fontsは実運用リンクでは使用可能ですが、プロトタイプ用の@importは許可されています。
CSSの will-change は、ブラウザがレイヤー化を決定するのを妨げるため使用しないでください。
ページのTotal Blocking Time（TBT）が200ms未満、LCPが2.5秒未満であることを確認してください。最初にペイントする前に、レンダリングをブロックするリソースを削除してください。

8. セクションの種類

ヒーロー

非対称グリッド（1.04fr / .96fr）または中央揃えのブロック。
左側：H1、小見出し（オプションで、color: var(--muted) の16〜18px）、CTAボタン。
右側：製品/プロジェクトのスクリーンショットまたはSVGラインアート。 border-radius: 12px、box-shadow: none。
いいえ「背景画像」。いいえグラデーションオーバーレイ。

セクションヘッド

2カラムデフォルト。左側：セクション番号（01、02、03）+ H2。右側：小見出し、簡潔な段落。
align-items: end を使用して、見出しとテキストが常に同じベースラインにくるようにします。

グリッド

3カラム（デフォルト）。2カラム（コンテンツが少ない場合）。8pxのパディングを持つ4カラムも許可されます。

声明

大きな引用文（clamp 24px〜32px、font-weight: 500）、投稿者の名前と役職を添えて。
背景：var(--dark)、前景のテキストは var(--bg)。背景のバリエーション：var(--card)、テキストは var(--ink) も許可されます。

テスティモニアル

引用テキストと推薦者ポートレートの非対称グリッド。

CTA

見出し + 段落 + ボタンの中央揃えブロック。
背景：var(--dark) または var(--card)。
前景のテキストは var(--bg)（var(--dark) 上）または var(--ink)（var(--card) 上）。

フッター

最小限。コピーライト、ソーシャルリンク、プライバシーポリシー/利用規約。

9. コピーライティングルール

能動態で書く。 「製品があなたのために分析を行います」ではなく、「製品がデータを分析します」。
「私たち」「弊社」を避ける。 読者に直接話しかけてください。
あいまいな代名詞（これ、それ、あれ）を避ける。 「これにより生産性が向上します」ではなく、「リポジトリ全体の検索により生産性が向上します」。
値を使用して説得する。 「高速」ではなく、「5秒で1GBを処理します」。
「革新的」「最先端」「破壊的」を使用しない。 それらは何も意味しません。
箇条書きは簡潔に。 1項目あたり最大7語。

10. 技術スタックルール

デフォルトの出力は1つのHTMLファイル（インラインCSS + JS）。
Tailwindは、CDN経由ではなく、ビルドステップ（npm install、postcss、purge）がある場合にのみ許可されます。
外部CDNは許可されていません：フォントCDNは許可されています。アイコンCDNと分析CDNは禁止されています。
CSS変数はトークンとして使用します。クラスユーティリティは避けてください。
すべてのトランジションは 0.2s の ease を使用します。カスタムイージングは使用しないでください。
ランディングページとポートフォリオにはReactは必要ありません。インタラクションが検索、フィルタリング、マルチステップフォームである場合にのみReactを使用してください。

11. レスポンシブルール

デスクトップ（1025px以上）

すべてのルールが適用されます。

タブレット（769px〜1024px）

3カラムグリッドを2カラムに縮小。
非対称ヒーローグリッドを1カラムにスタック。
セクションのパディングを130pxから100pxに縮小。

モバイル（768px以下）

すべてのグリッドを1カラムにスタック。
セクションのパディングを85pxに縮小。
ヒーローH1のフォントサイズをclamp(32px, 4.3vw, 62px)に縮小。
余白をpadding: 0 20pxに設定。
ヘッダーの高さを65pxに縮小。
モバイルナビゲーションは絶対配置パネル。
CTAのコピーを短くしますが、文脈は維持します。
画像の幅を100%に拡大。

12. :root ブロック（必須のCSS開始点）

:root {
  --bg:     #f5f5f5;
  --ink:    #111111;
  --muted:  #666666;
  --line:   #e0e0e0;
  --card:   #eeeeee;
  --accent: #d4d4d4;
  --dark:   #0a0a0a;
  --white:  #ffffff;
  --radius-sm: 4px;
  --radius-md: 12px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

13. 納品前チェックリスト

コードを出荷する準備ができたら、すべての項目を確認してください。見つからないものがあれば、見つけて修正するか、該当しない場合は理由を1行でメモしてください。

14. 変更履歴

v3.1: タイポグラフィスケールをclamp()に標準化。ダークモードトグルに必須マークアップを追加。Tailwind CDNを禁止リストに追加。アンチパターンセクションを再構成。「アイコンはSVG」ルールを明確化。var(--radius-sm) を：rootに移動。色、アクセシビリティ、パフォーマンスのチェックを追加して納品前チェックリストを拡張。
v3.0: 初期公開。

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

ドキュメント

swiss-editorial-minimalist (SKILLS.md v3.1)

0. メタルール（最初に読むこと）

このファイルを受け取ったときの対処法

このスタイルの名称について

1. デザイン哲学

2. パレット

ライトモード（デフォルト）

ダークモード

カラールール（必須）

3. タイポグラフィ

フォントペアリング

タイプスケール（clampは必須。これによりメディアクエリなしでタイプが拡大縮小します）

ハードタイポグラフィルール

4. レイアウトとグリッド

コンテナ

垂直方向のスペーシング

一般的なグリッドパターン

レイアウトルール（必須）

5. コンポーネント

ボタン

フィーチャーカード

ヘッダー

テーマトグル（必須マークアップ）

フッター

推薦文

6. アンチパターン（禁止）

7. アクセシビリティとパフォーマンス

8. セクションの種類

ヒーロー

セクションヘッド

グリッド

声明

テスティモニアル

CTA

フッター

9. コピーライティングルール

10. 技術スタックルール

11. レスポンシブルール

デスクトップ（1025px以上）

タブレット（769px〜1024px）

モバイル（768px以下）

12. :root ブロック（必須のCSS開始点）

13. 納品前チェックリスト

14. 変更履歴

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me