アーキテクチャ設計ガイド -- "Structural Grid"
Foster+Partners と Zaha Hadid Architects のサイトに共通するのは「構造が美」という哲学。12カラムのグリッドシステムが建物の骨格のように全てを支え、96px の見出しと 11px のラベルが作るスケール差が空間の奥行きを生む。
本テンプレートは建築事務所ポートフォリオに最適化された「Structural Grid」設計システムを定義する。モノクロームの色使い、Helvetica Neue のシステマティックなタイポグラフィ、そして厳密な12カラムグリッドが、建築の精密さをデジタル空間に再現する。
核心となる設計思想
アクセントカラーは使わない。色は #ffffff / #f2f2f2 / #e8e8e8 / #1a1a1a のモノクロームのみ。フォントサイズは 96px と 11px の極端な対比。角丸は 0px。全てが12カラムグリッドに従う。装飾はタイポグラフィのスケール差だけで十分。
1. デザイン哲学 -- 「構造が美」
Foster+Partners のグリッド
Foster+Partners のサイトは厳密なグリッドの上に建てられている。プロジェクト写真は大判で、メタ情報（所在地、面積、竣工年）は11pxの小さなラベルで添えられる。この96pxの写真キャプションと11pxのメタ情報の対比が建築の「スケール感」を伝える。
Zaha Hadid の非対称
Zaha Hadid Architects のサイトはグリッドの上に非対称のレイアウトを展開する。4/8カラム、5/7カラムといった不均等な分割が動きとテンションを生む。
ポートフォリオプレビュー
2. カラーパレット
全てモノクローム。アクセントカラーは存在しない。テキストの黒 (#1a1a1a) そのものがアクセントとして機能する。
3. タイポグラフィ
フォントスケール -- 極端な対比
DISPLAY
96px のヒーローと 11px のメタラベル。このスケール差が「建築的」。
4. コンポーネント
ボタン
スペックブロック
プロジェクトリスト
受賞リスト
5. レイアウトパターン
12カラムグリッド
建築サイトのグリッドは厳密に12カラム。非対称配置が基本:
| パターン | 左 | 右 | 用途 |
|---|---|---|---|
| 8/4 | 画像 | スペック | プロジェクト詳細 |
| 4/8 | テキスト | 画像 | 逆配置 |
| 5/7 | ナビ | コンテンツ | リスト表示 |
| 12 | フルブリード | -- | ヒーロー画像 |
スペーシング
- ヒーロー上下: 120px
- セクション上下: 80px
- グリッドギャップ: 24px
- スペックブロック間: 24px
- メタラベルと値の間: 4px
- コンテンツ最大幅: 1400px
6. 深度表現
影は使わない。建築と同じ手法で深度を表現する:
| 手法 | 説明 |
|---|---|
| 背景色段階 | #ffffff / #f2f2f2 / #e8e8e8 で面の違い |
| 区切り線 | #1a1a1a の太線でセクション分割 |
| スケール対比 | 96px vs 11px でドラマチックなコントラスト |
| グリッド線 | rgba(0,0,0,0.08) で構造を可視化 |
7. 実装上の注意点
Do
- 12カラムグリッドを厳密に守る
- フォントサイズの対比を大胆にする
- プロジェクト番号は monospace
- 区切り線を構造要素として使う
- 非対称レイアウトで動きを出す
- 角丸 0px を厳守
Don't
- アクセントカラーを使わない
- 影を使わない
- 中間のフォントウェイトを多用しない
- ソフトな印象を出さない
- グリッドを崩さない
8. レスポンシブ対応
| ブレークポイント | グリッド | ヒーロー文字 | 非対称 |
|---|---|---|---|
| Mobile (<768px) | 1カラム | 48px | 12カラム |
| Tablet (768-1200px) | 6カラム | 64px | 6/6 |
| Desktop (1200px+) | 12カラム | 96px | 4/8, 5/7 |
9. Agent プロンプト例
ヒーロー:
背景に建築写真フルブリード、overlay rgba(0,0,0,0.30)。
事務所名 #ffffff, 96px, weight 700, uppercase, letter-spacing -3px。
CTA: transparent + 1px solid #ffffff, 角丸 0px。プロジェクトグリッド:
8/4カラム比率。画像 16:10。
コード #8a8a8a, 11px, Space Mono, uppercase。
プロジェクト名 #1a1a1a, 24px, weight 400。スペック:
4カラム。border-top 1px solid #1a1a1a。
ラベル #8a8a8a, 11px, uppercase, letter-spacing 2px。
値 #1a1a1a, 24px, weight 400。