salveignis/bauhaus-geometry

バウハウス幾何学

ここでの幾何学は装飾ではなく、建築システムです。ページ上のすべての形状には役割がなければならず、形状を取り除いた後もページが機能しなければなりません。また、ページの本来の役割を妨げてはなりません。以下のワークフローを順に実行してください。

1. ページタイプでルーティングする

見た目ではなく、ページが果たすべきことから始めます。該当するガイドを読み、幾何学の制限と受け入れチェックリストを確認してください。

ページの種類	参照ガイド	強度制限
ホーム、ブランド、ローンチ、ランディング、エディトリアル	page-storefront.md	3
カテゴリ、検索結果、カタログ	page-plp.md	1
商品詳細	page-pdp.md	1、またはギャラリーの背後では2
カート、チェックアウト	page-checkout.md	0
ダッシュボード、管理画面、アカウント、設定	page-app.md	0 から 1

ブランドブリーフがあってもこの制限を引き上げることはできません。ショップのホームページはポスターのように派手でも、チェックアウトは控えめであるべきです。サイト全体をデザインする場合は、各ページのデザインを始める前に、ページごとに制限を設定してください。

次に、対応する規模を問い合わせてください。9つの商品と900の商品では、必要な構造が異なります。実際のカタログサイズに合わせて構築し、想定される最大サイズでテストしてください。

2. ブリーフを設定する

マークアップを書く前に、以下の3つを決定します。プロジェクトから推測し、ブランドが本当に未確定の場合にのみ質問してください。

幾何学強度。 ページの制限内で、ブランドを表現できる最低レベルをデフォルトとします。

レベル	名称	幾何学の範囲	適した用途
0	タイプ	なし。スケールとグレーの値で表現	マニフェスト、法律、長文読み物
1	マーカー	小さな形状でカテゴリや状態をエンコード	SaaS、ダッシュボード、科学、金融
2	ストラクチャー	グリッドが可視化され、画面ごとに1つの構成	スタジオ、文化、エディトリアル
3	ポスター	1つの構成が1つのセクションを支配	ローンチ、イベント、ブランドページ

1ページにレベル3のセクションは最大1つまでです。

奥行き階層。 D0がデフォルトです。「部品が組み合わさる」または「レイヤー」が実際のメッセージである場合にのみ奥行きを追加します。

階層	技法	コスト	用途
D0	フラットなタイルとライン	CSSのみ	ほぼすべての場所
D1	ハードオフセット（.bh-offset）	CSSのみ	ボタン、カード、強調
D2	斜め押し出し（.bh-extrude）	CSSフィルター	アイコンセット、ピクトグラム
D3	アイソメトリックスラブ（.bh-iso）	CSS 3D	ヒーロー、プロセス、製品のアーキテクチャ
D4	WebGL（bh-three.js）	three.js、GPU	インタラクティブな中心となる1つのみ

パレット。 <html> または任意のセクションに data-bh-palette を設定します：primary、mono、signal、ember、pop、lab、night。ブランドの場合は、6つのロールトークン（--bh-bg、--bh-fg、--bh-a1 から --bh-a4）を上書きし、ステップ5でコントラストチェックを実行します。赤、青、黄色は歴史的な慣習であり、必須ではありません。

3. 描画前に配置する

形状を配置する前に placement.md を読んでください。 各ページスロットに何が属するかをマッピングし、数値による予算を提供します：1ページに1つの構成、1ブロックに1つの形状ファミリー、1つのタイルサイズ、エッジをまたいで結合するフォーム、穴なし、図形内に別の図形をネストしない、アート外のデータ。タイルリストは何が存在するかを示し、このファイルはどこに配置するかを示します。

ヒーローの場合は、そこでアートモード（ブロック、スタック、フリーズ、ライン、セル）を選択します。デフォルトは composeBlock で構築されたブロックです：

node scripts/generate.mjs block --cols 3 --rows 4 --seed 7 --colors fg,a1,a3,a2

他のセクションについては、composition.md が各アーキタイプのルールと失敗モードを提供します。その多くはポスターメソッドであるため、最初にスロットマップを確認してください。

ユーザーがリファレンスを提供した場合は、構築前に reference-decoding.md の方法で測定し、同じ数値で自分のページと比較してください。

ユーザーが理論的な根拠を求める場合、決定に異論がある場合、またはデザインについて記述する場合は、theory.md の理論を読んでください。

4. パーツを読み込む

assets/ からプロジェクトにコピーします。記憶から書き直さないでください。

• bauhaus-geometry.css：トークン、タイル、フィールド、奥行き、モーション。常に含めてください。カスケードレイヤーに収められ、すべて bh- というプレフィックスが付いているため、既存のデザインシステムと共存しても安全です。
• bauhaus-ui.css：ウィジェットとセクション。プロジェクトに独自のコンポーネントがある場合はスキップし、代わりにそれらのコンポーネントにタイルとトークンを適用してください。
• bauhaus-commerce.css と bh-commerce.js：リスト、フィルター、商品ページ、カート、チェックアウト。ショップにはこれを使用します。
• bh-shapes.js：データとしてのカスタム形状。<bh-shape> を含みます。
• bh-geometry.js：ジェネレーターとオプションのカスタム要素 <bh-field>、<bh-bundle>、<bh-construct>。
• bh-three.js：D4のみ。templates/construct-webgl.html に配線方法が示されています。
• templates/landing.html：出発点となる完全なマーケティングページ。
• bh-audit.js：ステップ6で使用するブラウザ内チェックツール。

ランタイムJSを必要としないように、静的なマークアップを優先してください：

node scripts/generate.mjs field --preset bloom --cols 6 --rows 3 --seed 4
node scripts/generate.mjs bundle --preset u --n 9 --gap 5
node scripts/generate.mjs construct --preset pinwheel
node scripts/generate.mjs shape --name bean --size 64

複数のシードを試して最良のものを採用してください。生成されたフィールドはドラフトですので、構成が弱い部分は手動で個々のタイルを交換してください。

5. 構築する

タイルが原子です。1つの要素、1つのプリミティブ、1つの90度回転：

<i class="bh-t" data-s="quarter" data-f="a1" data-g="bg" data-r="90"></i>

• data-s 形状：solid disc dot quarter half arch leaf tri peak diamond cross x stair octa ring notch bite bars slash arcs rings burst dots dotfan checker void
• data-f 図形、data-g 背景：bg fg a1 a2 a3 a4、または --f と --g を直接設定
• data-r：90 180 270
• レイアウト：.bh-field と --cols、描画グリッド用の .bh-cells、スケールコントラスト用の data-span="2"

リストにない形状が必要ですか？ 最初に shapes.md を読み、bh-shapes.js にデータとして記述してください。SVGパスを手描きしたり、シルエットの上にストロークの詳細を追加したりしないでください。

既製のマークアップを見つけて、コピーとトークンを適応させてください：

• commerce.md：商品カードとその状態、バリエーション、カート行、注文サマリー、チェックアウトフィールド
• sections.md：ヒーロー、ベントー、統計、プロセス、CTA、フッター
• widgets.md：カード、統計、価格プラン、チャート、グラフ、アコーディオン、フォーム、タブ
• grids.md：モジュール、レイアウトレシピ、レスポンシブルール
• depth-3d.md：コンストラクト、D3、D4のスペック形式
• motion.md：エントランス、スクロール、キネティックレシピ

フレームワーク。 クラスと属性はそのまま移植できます。JSXでは、className と style={{ "--cols": 6 }} と記述します。Tailwindでは、コアスタイルシートを維持し、その周囲のレイアウトに任意の値を使用します。可能な限りビルド時に生成されたマークアップをレンダリングしてください。

6. 検証する

以下のコマンドを実行し、報告された問題を修正してから完了してください：

node scripts/check-contrast.mjs            # バンドルされたパレット
node scripts/check-contrast.mjs --bg "#f2ede1" --fg "#191816" --a1 "#d3341b" --a2 "#1d4fa3"
node scripts/shape-lint.mjs src/index.html # インラインSVGを含む任意のファイル

次に、ブラウザで375pxと1280pxで、監査を実行し、ページガイドの受け入れリストを確認してください：

const { audit } = await import("./assets/bh-audit.js");
console.table(audit({ card: ".bh-product", name: ".bh-product__name", price: ".bh-price" }));

また、以下も確認してください：

• ヒーローを数える：1つの形状ファミリー、1つのサイズ、穴なし、結合するフォーム。リファレンスの隣に置き、数値を比較する。
• すべての幾何学を頭の中で取り除く：階層はまだ明確か？
• 各形状には名前を付けられる役割がある：マーク、分割、フレーム、エンコード、ナビゲート、アンカー。
• 装飾的な構成には aria-hidden="true" が設定されている。データ形状にはテキストによる代替がある。
• 水平スクロールがなく、タイルは正方形を保っている。
• テキストは決してパターンタイル（bars、arcs、dots、burst）の上に配置されない。
• 色だけが意味を伝える唯一の手段ではない。a3 と a4 はラベルがない限り装飾用。
• モーションは prefers-reduced-motion の下で停止し、1ビューにつきループするものは1つだけ。
• インタラクティブなターゲットは少なくとも44pxの高さがあり、フォーカスが可視化されている。

厳格なルール

権利。 スタイルは使用しても、作品自体は使用しないでください。命名、画像の追加、リファレンスの適応を行う前に rights.md を参照してください。

• 歴史的、現代的なものを問わず、特定のアートワーク、ポスター、ロゴ、構成を複製しないでください。リファレンス画像は原則を伝えるためのみであり、色を変えるだけでなく、構造自体を変更してください。
• 1922年のバウハウスシグネット、博物館のロゴ、歴史的な建物、家具、人物の写真を、ユーザーがライセンスされたファイルを提供しない限り使用しないでください。
• クライアントの製品を「バウハウス」とブランド化したり、バウハウスの機関や企業との提携を暗示したりしないでください。
• フォント：デフォルトではバンドルされたスタックを使用します。これらはオープンライセンスのJost、Archivo、Space Grotesk（SIL OFL）を参照しています。ライセンスなしに商用リバイバルを出荷しないでください。

フォルム。

• フラットな塗りつぶし、ヘアライン、ハードエッジ。図形にグラデーション、ソフトシャドウ、グラスモーフィズム、角丸カードは使用しないでください。曲線はジオメトリから生まれ、コンテナの border-radius からではありません。
• 非対称レイアウト：左詰めのテキストと中心から外れたウェイト。中央に配置されたヒーローとその周りに浮かぶ形状は避けてください。
• 1つの彩度の高いアクセントが各ビューを支配するようにしてください。3つの等しい原色は玩具のように見えます。
• スケールコントラストは必須です：非常に大きなフォルムと非常に小さなフォルムをペアにしてください。
• 語彙を制限することで変化を持たせてください。5つの形状をうまく使うことは、25個すべてを同時に使うことよりも優れています。

スケール。 9アイテムのデモでリストを判断しないでください。完了と呼ぶ前に、多数のアイテム、長い名前、欠落した画像、空の結果でテストしてください。

よくある失敗。

失敗	修正
コンテンツの周りにランダムな形状が散らばっている	composeBlock で1つのブロックを構築し、残りを削除する
図形の中に別の図形がネストされている	オブジェクト自体を2×2にまたがるフォルムにする
すべてのセクションにヘアラインがある	1つのセクションだけをフレームで囲み、他のセクションはスペースで区切る
壁紙のように、すべてを均等なタイルで覆う	大きなスパンを追加し、空白を追加し、領域を減らす
すべての要素に原色を使用する	1つのアクセントだけを使用し、残りはインクと紙にする
幾何学がコピーと競合する	強度を1レベル下げる
あらゆる場所で「バウハウス」フォントを使用する	テキストにはニュートラルなグロテスク体を、ディスプレイのみに幾何学サンセリフ体を使用する
何も語らないアイソメトリックシーン	パーツが実際のコンセプトに対応していない限りD0を使用する
はみ出たスタブや細片がある形状	bh-shapes.js で再構築する：カットであってストロークではない
ショップにエディトリアルレイアウトを適用する	ページタイプでルーティングする：価格とアクションを優先する
ワンタップ追加で誰も選択していないバリアントを選ぶ	複数ある場合はオプションにリンクする