Sausage Erectos X デザインシステムの設計——黒×金のカラーパレットが生まれるまで
デザインシステムの物語――なぜこの色、このフォント、この闇なのか
Sausage Erectosのウェブサイトは深いダークモードで統一されている。これは流行に乗ったわけではなく、素材の本質から導き出された必然的な選択だ。デザインシステムの各要素に込められた意図を語る。
なぜダークモードなのか
SUS304ステンレスの金属光沢をスクリーン上で最も美しく表現するには、暗い背景が必要だ。明るい背景では金属のハイライトが埋もれ、ステンレスの質感が伝わらない。暗い背景に浮かぶ銀色の光沢は、まるで暗闇の中で焚き火の光を受けた金属のようにドラマチックに見える。BBQの夜を想起させる演出でもある。
ゴールド #c9a96e の選定
ブランドカラーであるゴールド #c9a96e は、30個以上の候補色から選ばれた。選定プロセスでは、実際のSUS304ステンレスの写真をモニターに表示し、その横に候補色のスウォッチを並べて比較した。純粋な金色では華美すぎ、ベージュでは地味すぎる。#c9a96eはステンレスの冷たさとBBQの温かさの中間に位置し、控えめでありながら確かな存在感を持つ。このゴールドはCTA（Call to Action）ボタン、見出しのアクセント、アイコンのハイライトに使用される。
フォントの選定：SF Pro Display / Text
タイポグラフィにはApple純正のSF Pro Display（見出し用）とSF Pro Text（本文用）を採用した。選定理由は3つある。第一に、Apple Human Interface Guidelinesとの親和性が高く、iOSやmacOSのネイティブな体験と地続きになる。第二に、Optical Sizesの概念に基づきDisplay版とText版が最適化されており、小さな本文でも大きな見出しでも可読性が確保される。第三に、幾何学的でありながら温かみのある字形がピクトグラムの幾何学性と調和する。
Blur Backdropの設計意図
ナビゲーションバーや一部のパネルに適用されたblur backdrop（背景ぼかし）は、AppleのデザインにおけるFrosted Glass効果にインスパイアされている。半透明のぼかしは奥行き感を生み出し、コンテンツの階層構造を視覚的に表現する。CSSではbackdrop-filter: blur(20px)と半透明背景色の組み合わせで実現している。このぼかしの強度は視認性とのバランスで決定した。
CSS Custom Propertiesによるトークン管理
デザイントークンはCSS Custom Properties（カスタムプロパティ）で一元管理している。—color-gold: #c9a96e、—color-bg: #0a0a0a、—color-text: #f0f0f0、—blur-strength: 20pxなど、すべてのデザイン値が:rootに定義されている。コンポーネントはこれらの変数を参照するため、ブランドカラーの変更はたった1行の修正で全ページに反映される。
レスポンシブの3ブレークポイント
レスポンシブデザインは768px、1024px、1280pxの3つのブレークポイントで制御する。768px以下はモバイル（シングルカラム）、768〜1024pxはタブレット（2カラム）、1024〜1280pxはデスクトップ（3カラム）、1280px以上はワイドスクリーンだ。3Dビューアのサイズは画面幅に応じて動的にリサイズされ、どのデバイスでも最適な操作性を維持する。
ナビゲーションのblurの意図
ナビゲーションバーのblurは機能的な意味も持つ。スクロール時にコンテンツがナビゲーションの下を通過する際、blur効果により背景のテキストが読めなくなり、ナビゲーションの操作性が維持される。完全な不透明背景でもよいが、blurを使うことで画面の連続性が保たれ、コンテンツが「消える」のではなく「奥に退く」感覚を与える。
デザインシステムとは、無数の選択の堆積だ。一つ一つの色、フォント、数値には物語がある。それを語れないデザインは、まだ完成していない。
レスポンシブとブレークポイント
3つのブレークポイント
Sausage Erectosは3つのブレークポイントで設計されている。768px（タブレット）、1024px（小型デスクトップ）、1280px（大型デスクトップ）。
コンフィギュレーターでは、768px以下でモバイルレイアウトに切り替わり、コントロールパネルが下部のシートに変わる。この切り替えは、3Dキャンバスの操作性を確保するために必要だった。
blur backdropの意図
ナビゲーションバーとコントロールパネルにはbackdrop-filter: blur(20px)を適用している。これはAppleのfrosted glass効果を参考にした。半透明の背景がコンテンツを隠しすぎず、かつUIの存在感を保つ。
ダークモードしかない理由
Sausage Erectosにライトモードはない。ステンレスの金属光沢をスクリーンで表現するには、暗い背景が必須だからだ。明るい背景では金属の反射が目立たず、ただのグレーの板に見えてしまう。
デザインシステムは「なぜそうしたか」の集積だ。30個のゴールド候補から1つを選んだ理由が、ブランドの厚みになる。
CSS Custom Propertiesによるトークン管理
デザイントークンの構造
Sausage Erectosのデザインシステムは、CSS Custom Properties（カスタムプロパティ）で管理されている。
—bg: #08080a（背景色）、—gold: #c9a96e（アクセントカラー）、—text: #f5f5f7（テキスト色）、—surface: #131316（サーフェス色）、—border: #ffffff12（ボーダー色）。
これらのトークンがvariables.cssに定義され、全てのコンポーネントがこの変数を参照する。ゴールドの色を変えたければ、1箇所を変更するだけで全サイトに反映される。
なぜSF Proフォントか
AppleのSF Pro Display/Textを選んだ理由は、金属プロダクトとデジタルUIの橋渡しだ。SF Proは精密機械のような冷たさとヒューマニスティックな温かさを併せ持つ。ステンレスのフィギュアをスクリーンで扱うUIに最適だと判断した。