Casa BRUTUS（カーサ ブルータス） DESIGN.md

マガジンハウス『Casa BRUTUS』Web 版（https://casabrutus.com/）のデザイン仕様書。 1998年創刊、建築・デザイン・暮らし・カルチャーを扱う日本を代表する建築・デザイン誌の Web 版。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白背景 #ffffff × 純黒文字 #000000 のシャープなコントラスト。Helvetica Neue + ヒラギノ角ゴ ProN の欧文先頭スタックで、雑誌特有のニュートラルでフラットな世界観を構築
• 密度: 情報密度は高め。建築・デザイン・暮らしの記事サムネイルを大胆な大判画像で並べる雑誌グリッド型レイアウト
• キーワード: 純白 + 漆黒、ノーマル字間（letter-spacing normal）、square CTA（border-radius 0px）、Helvetica Neue 欧文先頭、ヒラギノ ProN（Pro ではない点に注意）、line-height 1.5、雑誌的タイポグラフィ
• 特徴:
  • 欧文先頭フォントスタック — 和文サイトとしては珍しく "Helvetica Neue", helvetica, "Hiragino Kaku Gothic ProN", "Yu Gothic", ui-sans-serif, system-ui, sans-serif の順。欧文グリフは Helvetica Neue で出し、和文は ProN（ProN は ProN：JIS2004 字形対応）
  • CTA は完全な角型（border-radius: 0px） — Read More / 自分の星座をみる / 会員登録 / 登録する いずれも「白地 + 黒 1px 細罫線」で、min-width: 256px 、padding 8px、font-size 20px の outline ボタン。Suntory が pill 型なのに対し Casa BRUTUS は完全な squareで雑誌らしさを出す
  • palt 不使用 / letter-spacing normal — 字間は normal、Web フォント前提機能を使わず素のシステムフォントで構成
  • line-height 1.5 — 本文 16px / 24px、見出し 24px / 36px と統一比率
  • 見出しは 700 weight の太字 — h2 24px / h3 20px / h4 16px すべて weight 700。本文（400）との明確なコントラスト
  • 大型 h2（48px / 72px line-height） が「Topics 注目コンテンツ」など雑誌的な大判タイトルに使用される
  • PR バッジ — #000000 背景に #ffffff 文字、letter-spacing 0.3px の小さな PR ピル（12px / 18px / weight 700）
  • 記事カテゴリラベル — DESIGN / FASHION / ARCHITECTURE などを 24px / weight 400 で大きく表示するのが雑誌らしい

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand / Foreground

• Casa Black (#000000): 本文・見出し・CTA 罫線・PR バッジ背景。純黒を使う点が雑誌らしい
• Casa White (#ffffff): ページ背景・CTA 背景・暗色帯上の文字色
• Inverse Text (#ffffff): 黒帯セクション・PR バッジ上のテキスト

Surface（背景）

• Page White (#ffffff): ページ標準背景
• Soft Cream (#f9e0cc): 連載・特集系のフィーチャーカード背景（淡いベージュ）
• Soft Sky (#e7f4f9): 占い・お告げコーナー等のアクセント面（淡い水色）
• Modal Veil (rgba(0, 0, 0, 0.5)): モーダル・動画オーバーレイの暗幕

Accent / Promotional（誌面アクセント）

雑誌らしく特集や提携モジュールごとに鮮やかなアクセント色を散りばめる：

• Promo Pink (#dc3b89): キャンペーン・プロモアクセント
• Promo Red (#ff3434): 緊急告知・新着強調
• Social Blue (#1877f2): SNS シェアボタン（Facebook 系）

Border / CTA

• CTA Border (#000000): outline CTA の 1px 細罫線
• Hairline (rgba(0, 0, 0, 0.1)): セクション区切り

Note: Casa BRUTUS の本体は 「純白 + 純黒 + わずかなアクセント面色」 の極めて抑制された配色。彩度の高い色は記事カバー画像と特集ロゴに任せ、UI は黒白で構成するハイコントラスト・ミニマルの戦略。

3. Typography Rules

3.1 和文フォント

ゴシック体（システムスタック / 欧文先頭）:

• ヒラギノ角ゴ ProN（macOS。Pro ではなく ProN：JIS2004 対応の最新字形）
• Yu Gothic（macOS / Windows 10+）
• ui-sans-serif（OS の UI フォント）
• system-ui（ブラウザの UI フォント）

3.2 欧文フォント

• Helvetica Neue（最優先。macOS 内蔵）
• helvetica（小文字。一般的な Helvetica）
• ui-sans-serif / system-ui / sans-serif（フォールバック）
• 絵文字: Apple Color Emoji / Segoe UI Emoji / Segoe UI Symbol / Noto Color Emoji

3.3 font-family 指定

css/* 全要素共通 */
font-family: "Helvetica Neue", helvetica, "Hiragino Kaku Gothic ProN", "Yu Gothic",
             ui-sans-serif, system-ui, sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

フォールバックの考え方:

• 欧文先頭スタック — 欧文グリフは Helvetica Neue で出力、和文部分は自動的にヒラギノ ProN にフォールバック
• ProN を使う点に注意 — Pro（旧字形）ではなく ProN（JIS2004 新字形）。BRUTUS（同じマガジンハウス）と異なり ProN を選択
• Webフォント不使用 — Adobe Fonts や Google Fonts は読み込まず、OS フォントのみで構成。ページが軽い

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文 line-height: 1.5 で統一（24px / 16px = 1.5）
• 大見出し line-height: 同じく 1.5（72px / 48px = 1.5、36px / 24px = 1.5）
• 連載タイトル line-height: 2.5（40px / 16px、暗色帯上で余白を取る）
• letter-spacing: ほぼすべて normal。例外は PR バッジの 0.3px のみ
• 本文の字間調整は基本しない — 雑誌らしい素のタイポグラフィ

3.6 禁則処理・改行ルール

• デフォルト挙動を尊重 — word-break: keep-all 等は指定しない
• 大判画像と組み合わせるため、テキストブロックは比較的短い

3.7 OpenType機能

• font-feature-settings: normal — palt や kern を使わない。OS フォントのデフォルト組版そのまま
• 欧文先頭スタックなので、欧文部分は Helvetica Neue の自然な字組

3.8 縦書き

• 通常コンテンツでは未使用

4. Component Stylings

Buttons

Primary CTA (Outline Square)

• 背景: #ffffff
• 罫線: 1px solid #000000
• 文字色: #000000
• font-weight: 400
• font-size: 20px（モバイルは 16px）
• min-width: 256px
• text-align: center
• border-radius: 0px（完全な角型）
• padding: 8px（縦横とも 0.5rem = 8px、Tailwind p-2.5 の md:text-xl 設定）
• 用途: 「Read More」「自分の星座をみる」「会員登録」「登録する」など全 CTA

Disabled

• disabled:opacity-20 disabled:cursor-not-allowed — 透過 20% でグレーアウト

Tags / Category Labels

• font-size: 24px
• font-weight: 400
• line-height: 36px (1.5)
• color: #000000
• 背景: 透過
• 装飾なし、テキストのみで大きく表示する雑誌スタイル
• 用途: 「DESIGN」「ARCHITECTURE」「FASHION」「FOOD」等のジャンル

PR Badge

• 背景: #000000
• 文字色: #ffffff
• font-size: 12px
• font-weight: 700
• line-height: 18px (1.5)
• letter-spacing: 0.3px
• padding: 2px 8px 程度の小さなピル
• 用途: 提携記事・広告タイアップを示す「PR」バッジ

Cards

• 背景: #ffffff
• 罫線: なし、または極薄 rgba(0, 0, 0, 0.1)
• 影: なし（フラット）
• 角丸: 0px
• 大判画像が中心。テキストは下に配置
• 用途: 記事カード、特集カード

Article (記事ページ)

• 本文 font-size: 16px / weight 400 / line-height 24px (1.5)
• 段落間余白: 大きめ（16〜24px）
• 行間 1.5 で雑誌的なタイトな組み

5. Layout Principles

• コンテンツ幅: 1200px〜1280px のラージコンテナ
• ヒーロー: 全幅画像 + 大型タイポ（h2 48px）「Topics 注目コンテンツ」のような雑誌見出し
• 大判サムネイル: 各記事カードに大きなビジュアルを使い、写真が主役の雑誌的構成
• 3 列グリッド: 「特集」「連載」「Topics」を 3 列カードで並べる
• 暗色帯セクション: 動画連載モジュールなどに #000000 の暗幕を使い、白文字で重厚感を出す
• CTA は中央寄せ・大型: min-width 256px の堂々とした配置

6. Depth & Elevation

• 影: box-shadow: none がデフォルト。フラットデザインを徹底
• 段階表現: 影ではなく面色の差（#ffffff vs #f9e0cc / #e7f4f9） や1px 罫線（#000000 細罫線） で奥行きを作る
• 画像は段差なし — 写真の枠も罫線も使わず、ベタッと面で並べる雑誌的レイアウト

7. Do's and Don'ts

Do's

• CTA は完全な角型（border-radius: 0px） + 白地 + 黒 1px 細罫線
• 欧文先頭フォントスタック — "Helvetica Neue", helvetica, "Hiragino Kaku Gothic ProN"...
• letter-spacing は normal — 字間調整しない雑誌的素組み
• line-height 1.5 に統一する
• ProN を使う（Pro ではない）— JIS2004 新字形
• 見出しは 700 weight、本文は 400 weight で太さの階段を作る
• 写真を主役にする — UI は黒白で抑え、コンテンツの色は画像に委ねる
• PR バッジには黒地 + 白文字 + 0.3px letter-spacing

Don'ts

• CTA を pill 型（border-radius 30px+）にしない — Casa BRUTUS は完全角型
• letter-spacing を強く効かせない — 雑誌は素組みが基本
• 濃い影や強いグラデーションを使わない（フラット主義）
• 和文先頭スタックにしない — Casa BRUTUS は欧文先頭が特徴
• ProN ではなく Pro を指定しない — 新字形の ProN を使う
• 彩度の高いブランドカラーを UI に多用しない — 色は記事画像に任せる

8. Responsive Behavior

• デスクトップ: マルチカラム（3 列のカードグリッド）、CTA は 20px / md:text-xl
• タブレット (768〜1024px): 2 列に折り畳み、CTA は 16〜20px
• モバイル (〜767px): 1 列、CTA は 16px（md: プレフィックス前のデフォルト）
• min-width: 256px の CTA は画面幅が狭い場合は中央配置のままサイズを保つ
• ハンバーガー OPEN ボタン（半透過白 oklab(0.999994 0.0000455678 0.0000200868 / 0.9) ＝ ほぼ #ffffff）でメニューを開く

9. Agent Prompt Guide

Casa BRUTUS らしい UI を生成するときは以下を伝えるとよい：

- font-family: "Helvetica Neue", helvetica, "Hiragino Kaku Gothic ProN", "Yu Gothic", ui-sans-serif, system-ui, sans-serif
- 本文 line-height: 1.5（24px / 16px）、見出しも 1.5（36px / 24px）
- letter-spacing: normal（PR バッジのみ 0.3px）
- ブランドカラー: #000000 (Casa Black) と #ffffff (Casa White) のみ
- アクセント面色: #f9e0cc (cream) / #e7f4f9 (sky) を必要に応じて
- CTA: 白地 + 黒 1px 細罫線、border-radius 0px（完全角型）、min-width 256px、padding 8px、font-size 20px、weight 400
- PR バッジ: 黒地 + 白文字、12px / weight 700 / letter-spacing 0.3px
- 影なし（フラットデザイン）
- カテゴリタグは 24px / weight 400 で大きく表示する雑誌スタイル
- Webフォント不使用（OS の Helvetica Neue + ヒラギノ ProN で構成）
- 写真を主役に — UI 色は抑え、画像で誌面を彩る