バウハウス / 幾何学的モダニズム デザインインスピレーション
形態は機能に従う。1919年にヴァイマールで創設されたバウハウスの精神は、100年経った今もデザインの根幹に息づいている。装飾を排し、純粋な幾何学形態と原色のみで構成する合理的デザイン -- Piet Mondrianの構成、Kandinskyの抽象絵画、そしてバウハウス校舎の建築がこのスタイルの源泉である。白い壁面に原色のアクセント。直線と円と三角形の対話。それがバウハウスの美学だ。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。幾何学装飾はCSS擬似要素やborder-radiusで再現しています。
デザイン哲学 -- Less is More
装飾ではなく構造で語る。原色が世界を構成する。幾何学が言語。
バウハウスUIの世界観では、すべての装飾的要素を排除し、形態そのものが機能を表現する。色は赤・青・黄の3原色に限定し、背景は白、テキストは黒。この制約の中で、太い黒ボーダーのグリッドと幾何学形態（円・正方形・三角形）が構造を語る。
以下が、この哲学を体現したバウハウス風レイアウトのプレビューである:
カラーパレット -- 原色の対話
バウハウスの色は徹底的にシンプルだ。赤、青、黄の3原色と、白と黒。それ以外は存在しない。
Primary Colors
RED
#ff0000
#ff0000
BLUE
#0000ff
#0000ff
YELLOW
#ffcc00
#ffcc00
BLACK
#000000
#000000
WHITE
#ffffff
#ffffff
Backgrounds
#ffffff
#f0f0f0
#000000
テキスト階層
HEADING TEXT#000000 -- Always Black
Secondary body text for descriptions#333333
Muted label and helper text#666666
| Token | 値 | 役割 |
|---|---|---|
| bg-primary | #ffffff | メイン背景 |
| bg-secondary | #f0f0f0 | セクション区分 |
| text-primary | #000000 | 常に黒 |
| red | #ff0000 | 第1アクセント |
| blue | #0000ff | 第2アクセント |
| yellow | #ffcc00 | 第3アクセント |
| border | 3px solid #000000 | グリッド分割線 |
コンポーネント -- 幾何学の部品群
ボタン
Primary
Red Accent
Outline
Ghost
カード
Foundation
Basic Design
形態、色彩、素材の基礎。
Advanced
Typography
サンセリフの美学を探求。
Workshop
Color Theory
原色と補色の対話。
幾何学装飾
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/BAUHAUS.mdをプロジェクトのDESIGN.mdにコピー- 原色のバランスをプロジェクトの性質に合わせて調整
- Stitch に「この DESIGN.md に従ってランディングページを作成してください」と指示
- 幾何学装飾は基本構造の後に追加
適したプロジェクト
- デザインスクール・教育機関のサイト
- アートギャラリー・美術館のウェブサイト
- 建築事務所のポートフォリオ
- デザインスタジオのコーポレートサイト
- タイポグラフィ・印刷関連のサービス
不向きなプロジェクト
- 温かみや親しみやすさが必要なサービス
- ダークモードが必須のツール
- 写真中心のメディアサイト
- 子供向け・カジュアルなアプリ
原色の使いすぎに注意
赤・青・黄は強い色です。アクセントとして使い、画面の大部分は白と黒で構成してください。原色が占める面積は全体の20%以下が目安です。