brandvm/webflow-style-guide

Webflow スタイルガイド：統一レイアウト、全サイト共通

スタイルガイドは、プロトタイプとWebflowの両方において、他のどのページよりも先に最初に構築されるページです。これにより、変数、タグスタイル、クラスが他の要素に依存する前に検証され、すべてのクラスが要素上に保持されるため、Webflowの未使用スタイルをクリーンアップ機能でCMS、スクリプト、未構築ページでのみ使用されるクラスが誤って削除されることはありません。

レイアウトは固定されています。プロジェクトはコンテンツのみを提供し、レイアウトは提供しません。

• sg.css はページ独自のレイアウト（Sg クラス）です。
• scripts/gen-style-guide.mjs は、Webflow スナップショット、CSS、プロジェクトのサンプルからページを生成します。
• scripts/check-style-guide.mjs は、クラスがページに不足している場合、コンボのクラスが1つの要素にまとめて配置されていない場合、またはレイアウトがずれている場合に失敗します。
• scripts/sections.mjs は、両方のスクリプトが共有するセクションリストです。
• すべてのタイポグラフィサンプルには data-sg-type（その名前）が付与されているため、プロトタイプの pnpm measure:type で1440と390でレンダリングされたタイプ（サイズ、行間、トラッキング、ウェイト）を表示し、クラスがWebflowに移行する前にデザインのタイプシートと比較できます。

共有ルールが適用されます（webflow-build › rules.md：デザイナーファースト、OKなしでのコミットやプッシュは禁止）。また、Webflowではビルド独自のルール（各バッチ前に許可を得ること）も適用されます。

レイアウト

フレーム。 左側の固定サイドバーにセクションが番号付きでリンクとしてリスト表示され、現在表示中のセクションがハイライトされます。右側に1つのコンテンツカラムがあります。991px以下では、サイドバーはナビゲーション下のリンクのストリップになり、横スクロールします。

新しい人向けに書かれています。 ページは、サイトを初めて見る人（クライアントや初日の開発者）にも理解できる必要があります。

• 概要は、ページの説明、使用方法（検索、行の読み方、追加前に再利用、ここに追加）の4つのカード、サイトの概要（数値）、フォント、変数コレクション、ブレークポイントで始まります。
• すべてのセクションは、番号、タイトル、そしてそれが何のためにあるのか、どのように使用するのかを1行で説明する文（テキストは scripts/sections.mjs にあり、すべてのサイトで同じ）で始まります。
• ボタン、フォーム、コンポーネントのサンプルはパネル上に配置されます。クラス名はチップ内に配置されます。長いテーブルは、スクロール中も名前を表示し続けます。
• すべてのラベルはサイト独自のフォントを使用します。モノスペースは使用しません。デザイナークラスは1つのフォントファミリーを保持し、システムモノスペースフォントは独自のスラッシュ付きゼロをもたらします。
• フレームはページから色を取得します（低不透明度の中立ラインとパネル）。そのため、ライトサイトでもダークサイトでも同じように見えます。

セクション は常にこの順序で、以下の名前とIDを持ちます。中身がないセクションは除外されます。何も追加、名前変更、並べ替えは行われません。

#	セクション	id	出典
1	概要	overview	生成：ページの使い方、カウント、フォント、コレクション、ブレークポイント
2	カラー	colors	Colors Semantic 以外のすべてのカラー変数
3	テーマ	themes	セクション、Colors Semantic モードを設定するすべてのクラス、およびモードごとの役割テーブル
4	タイポグラフィ	typography	Typography Styles モードを設定するすべてのクラス、ネイティブタグスタイル（見出し、段落、リンク）、Body スタイルのフォント機能、およびタイプスケール
5	ユーティリティ	utilities	Size、Weight、Leading、Tracking、Text、Max Width クラス
6	スペーシング、半径、レイアウト	spacing	スペーシング（それぞれサイズのバー付き）、Radius、Layout 変数
7	ボタンとリンク	buttons	サンプル
8	フォーム	form-elements	サンプル（アイテムは section=forms を使用；Webflow は forms を要素IDとして拒否します）
9	コンポーネント	components	サンプル
10	ページセクション	page-sections	サンプル、半サイズ画面で表示
11	その他のクラス	other-classes	生成：上記のいずれにも該当しないすべてのクラス

行。 ページ上のすべてのアイテムは1つの Sg Row です。左側には、デザイナーに表示される名前、CSSクラス、プレーンテキストのメモ（何にバインドされるか、ブレークポイントごとの値、状態）が表示されます。右側にはライブサンプルが表示されます。セクションは見出しと行のリストです。値のテーブル（モードごとの役割、タイプスケール、スペーシング、レイアウト）は、行のサンプル内に1つの Sg Table として配置されます。名前の列、その後にモードまたは値ごとの列が続きます。

フレーム内にプロジェクトクラスはありません。 フレームは Sg クラスのみを使用するため、プロジェクトのタイプスケールやセクションパディングに関係なく、ページは同じように見えます。プロジェクトクラスはサンプル内に表示されます。

変数は標準であり、制限ではない

ページはサイトにあるものをすべて表示します。テンプレートのコレクション、名前、スターター値（webflow-build 規則 §4、デフォルトフォントとして Geist を含む）は、変数の標準的なレイアウトと使用方法です。プロジェクトは自由に値を変更し、変数、モード、コレクションを追加、名前変更、削除できます。

• セマンティックコレクション外のカラー変数はスウォッチです。モードを設定するクラスはテーマまたはタイプ行です。ジェネレーターが役割を認識しないコレクションは、「スペーシング、半径、レイアウト」の下にテーブルとして表示されます。
• 標準コレクションを別の名前で呼ぶサイトは、design/style-guide/config.json で指定します。例：{ "collections": { "semantic": "Themes", "typeStyles": "Type Styles" } }（キー：semantic、typeStyles、typeRole、typeScale、spacing、radius、layout）。
• 固定されるのはレイアウト（フレーム、セクション順序、行）です。

サンプル（セクション 7 ～ 10）

サンプルを提供する2つの方法。どちらも同じ行を生成します。

1. 実際のページから取得する ため、ページと同期が保たれます。ページ上のマークアップをラップします。

<!-- sg:start section=components | name=Card | class=.card | note=Used in lists and on the home page -->
<a class="card" href="/work/item" data-card>…</a>
<!-- sg:end -->

2. 手動で作成する ページ単独では表示されないもの（ボタンの状態、フォームのパーツ）に対して。design/style-guide/items/ 内のセクションごとに1ファイル、各アイテムはヘッダーコメントの後にマークアップが続きます。

<!-- sg: section=buttons | name=Button Is Secondary | class=.button.is-secondary | note=Combo on Button -->
<a class="button is-secondary" href="#buttons">Secondary</a>

• section は buttons、forms、components、page-sections のいずれかです。name は必須、class と note はオプションです。
• コンポーネントとページセクションには、実際のページブロックを使用することを推奨します。手動でコピーしたサンプルはページからずれ、以前のビルドでは手動コピーしたプレビューから構築されたコンポーネントがスクリプトフックを失っていました。
• ジェネレーターは、サンプルから id、for、data-* フック、id 参照を削除し、inert とマークします。これはコンポーネントの画像であり、動作するコピーではないため、スクリプトはアタッチされず、フォーカスを取得するものはありません。
• ページは noindex であるため、2つ目の h1 があっても問題ありません。タイポグラフィセクションでは、実際の見出しを All H1 Headings タグスタイルのサンプルとして表示し、サンプルに含めることもできます。
• page-sections サンプルは、密閉されたフレーム内に半サイズで表示されます。そのページが Webflow に存在するようになったら削除します。そのページはクラスを保持し続けます。セクション 1 ～ 9 は永久に残ります。
• インラインの style 属性は使用しないでください。Webflow インポーターは、それぞれをジャンクなコンボクラスに変換します。カラースウォッチ、半径ボックス、スペーシングバーは、代わりに変数ごとに1つの生成コンボを使用します。

プロトタイプ内（最初のページ）

1. プロトタイプフォルダが存在し（webflow-prototype › プロジェクトセットアップ）、その Webflow スナップショットが最新であること（pnpm css）。
2. pnpm style-guide を実行します。design/style-guide/index.html と src/css/style-guide.css を作成します。決して編集しないでください。
3. プロジェクトのサンプル（ボタンとフォームアイテム、ページ構築に伴うコンポーネントとページブロック）を追加し、再度実行します。
4. pnpm check:style-guide がパスするまで実行します。
5. 担当者が1440、820、667、390でページをレビューし、最初のコンテンツページを開始する前に承認します。
6. 以降、新しいクラスやコンポーネントが追加されるたびに、同じ作業の中で行を追加します。サンプルを追加し、pnpm style-guide、pnpm check:style-guide を実行します。

Webflow 内（最初のページ）

変数、タグスタイル、クラス、リポジトリバンドルが導入され、他のページが作成される前に行います。バッチごとに許可を得ます。

1. ページ。 /design/style-guide を design フォルダ内に、標準シェル（webflow-build 規則 §1）で作成します。ページのヘッドコードに noindex, nofollow を含めます。サイト検索とサイトマップから除外します（サイトマップ設定にはサイトプランが必要です。プランがないサイトでは、noindex タグによって検索から除外され、プランが存在するようになったら除外設定を行います）。ページへのリンクはフルページロードを行います。
2. Sg クラス。 スターターから複製されたサイトにはすでに存在します。それ以外の場合は、すべての値を保持する最も迅速な方法：WHTML ビルダーでフレームをインポートし、css として sg.css を渡します（変数と calc() はプレーンな値に置き換えられ、rgb(r g b / a) は rgba() として記述されます）。インポーターは、各クラスをロングハンドプロパティ、状態、ブレークポイントで作成し、スラッグで名前を付けます。その後、各クラスをデザイナーに表示される名前にリネームします（Sg Row、Sg Row Meta、Sg Table Key...）。.w--current ルールは Sg Sidebar Link の Current 状態になります。これはスタイルツール自体では記述できません。これはクラスが新しい場合にのみ機能します。すでに存在するクラスについては、インポーターは番号付きの複製を作成します（webflow-build/lessons/mcp.md）。
3. 変数コンボ。 各カラー変数に対して、コンボ Sg Swatch Color + Is … を background-color にバインドします。各半径変数に対して、Sg Radius + Is … を border-radius にバインドします。各スペーシング変数に対して、Sg Bar + Is … を width にバインドします。生成された src/css/style-guide.css に、1行に1つずつリストされます。
4. 生成されたページから、クラスのみを使用してセクションごとにビルドします。マークアップをインポートする前に、すべてのクラスとコンボを作成します（インポーターは、1つのクラスが欠落しているとクラスリスト全体をドロップします）。次に、各サイドバーリンクを対応するセクション（リンクタイプ：ページセクション）にポイントし、Webflow が現在のセクションをマークできるようにします。
5. コンポーネントの行は、マークアップのコピーではなく、コンポーネントインスタンスです。
6. ステージングで確認： サイト内のすべてのクラスが公開ページまたはシェルに表示され、すべてのコンボが1つの要素に存在すること（コンボのクラスが離れてしか表示されない場合でも、クリーンアップによって削除されます）。サイドバーが表示中のセクションをハイライトすること。noindex がヘッドにあること。これが確認できて初めて、未使用スタイルのクリーンアップを安全に実行できます。

既存サイトの場合

テンプレートから構築されていないサイトでも、同じページを取得できます。webflow-prototype スキルのプロトタイプスターターからプロトタイプフォルダを作成し、サイトのスナップショットを取得してから、「プロトタイプ内」と「Webflow内」の手順に従います。Sg クラスはまだ存在しないため、手順2で作成します。

ゲート

• プロトタイプスタイルガイド承認 [担当者]：プロトタイプの最初のコンテンツページの前。
• スタイルガイドベース完了 [Claude 確認、担当者承認]：Webflow ページがこれまでに存在するすべてのクラスを保持していること。公開され、3つの幅で確認済み。
• スタイルガイド最終確認 [Claude 確認]：ビルド引き継ぎ時に、pnpm check:style-guide がパスし、公開ページがすべてのクラスを保持していること。

レイアウトの変更

レイアウトの変更は、1つのプロジェクト内ではなく、ここで全サイトに対して一度に行います。sg.css、セクションリスト、またはテンプレート内のジェネレーターを編集し、同じ作業ラウンドでスターターサイトを更新し、リリースします（webflow-build › rules.md › コントリビューション）。プロジェクトは pnpm update-skills と pnpm style-guide で更新を取得します。