BRUTUS（ブルータス） DESIGN.md

マガジンハウス『BRUTUS』Web 版（https://brutus.jp/）のデザイン仕様書。 1980 年創刊、男性向けカルチャー総合誌の Web 版。WordPress ベース、雑誌的タイポグラフィの典型例。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白背景 #ffffff × 漆黒文字 #101010 のシャープなコントラスト。和文「FOT-筑紫ゴシック Pro」+ 欧文「Futura PT」の二系統混植で、雑誌特有の知的でモダンな印象を作る
• 密度: コンテンツ密度は高め。特集記事のサムネイルと文字情報を碁盤目状に並べる、雑誌グリッド型レイアウト
• キーワード: 筑紫ゴシック B/E/H の重厚な見出し、Futura PT の幾何学的欧文、特集ごとのカテゴリカラー、純白基調 + 漆黒テキスト、palt 不使用、letter-spacing normal、line-height 1.5
• 特徴:
  • 2 系統フォント運用 — 和文には「FOT-筑紫ゴシック Pro」を Bold(B) / Extra Bold(E) / Heavy(H) で使い分け、欧文には「futura-pt」を 400/600 で使用
  • 筑紫ゴシック Heavy (Pro H) を見出しに使い、雑誌特有の重厚感ある見出し組を実現。一般的な丸ゴシック系（ヒラギノ・游ゴシック）とは異なる、フォントワークス独特のクセ
  • palt は使わない — 字間調整は letter-spacing normal が基本。WordPress のデフォルト組版に近い
  • line-height は 1.5（27px / 18px） — note の 2.0 と比べてかなりタイトな雑誌的行送り
  • 本文 18px — 雑誌記事として読み込ませる十分なサイズ
  • WordPress のプリセットを大量に保持 — 124 個もの --wp--preset--* 変数。実際の運用色は限定的
  • 特集ごとのカテゴリカラー — #577590（青灰）/ #00c6ac（ターコイズ）/ #5fb7ff（水色）/ #ab9a86（ベージュ）/ #275ba1（紺）/ #b87333（銅）/ #e63946（赤）など、特集ジャンルごとに彩りある面色を切り替える
  • 暗色帯セクションは #191919（ほぼ黒）で組み、白文字 + Futura で英字タイトルを大きく出す
  • 小さい英字キャプションは Futura PT の 600 weight 13px で、和文の上に「WATCHES／時計」のように対訳を載せる雑誌定番レイアウト
  • Adobe Fonts (futura-pt) と FOT (筑紫ゴシック) の組み合わせは商用ライセンスの範囲内でしか再現不可。preview.html では Google Fonts の Futura 代替と Noto Sans JP を使用

2. Color Palette & Roles

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

Brand

• Brutus Ink (#101010): 本文の基本色（rgb(16, 16, 16)）。純黒ではなく、わずかに浮いた漆黒
• Brutus Charcoal (#191919): 暗色帯セクションの背景（rgb(25, 25, 25)）。ヘッダー・特集タイトル帯
• Page White (#ffffff): ページ背景の純白

Surface（背景）

• Page Background (#ffffff): 純白
• Section Light (#eaeaea): セクション間の薄いグレー区切り（rgb(234, 234, 234)）
• Magazine Beige (#e2dfd7): 「RECOMMEND ／ 注目のコンテンツ」などの上品なベージュ系の背景（rgb(226, 223, 215)）
• Soft Cream (#f4f3ef): 「WHAT'S NEW ／ 新着記事」のクリーム系背景（rgb(244, 243, 239)）
• Footer Slate (#394045): フッター帯（rgb(57, 64, 69)）
• Dark Charcoal (#212729): 言語切替メニュー（rgb(33, 39, 41)）
• Footer Ink (#2e2e2e): 「配信停止」等の控えめなフッター帯（rgb(46, 46, 46)）

Text / Foreground

• Text Primary (#101010): 本文・基本見出し
• Text Inverse (#ffffff): 暗色帯上のテキスト
• Text Magazine (#191919): カテゴリ見出し等の濃い黒
• Text Muted (#939393): 補助テキスト

Category Colors（特集カテゴリ別の面色）

これが BRUTUS の最大の特徴。特集ジャンルごとに彩り豊かな面色を切り替える：

• Slate Blue (#577590): 主力カテゴリ（出現頻度トップ）
• Turquoise (#00c6ac): カルチャー・アート系
• Sky Blue (#5fb7ff): ライフスタイル系
• Magazine Beige (#ab9a86): クラフト・伝統工芸
• Deep Navy (#275ba1): ビジネス・旅
• Copper (#b87333): フード・ドリンク
• Tomato Red (#e63946): 限定特集・速報
• Charcoal (#191919): "WATCHES／時計" のような時計・ジュエリー系の重厚カテゴリ
• Sand (#bda295): 二次的カテゴリ

Border / Divider

• 罫線は基本的に出さず、面色の切り替えで分節する
• どうしても必要な場合は 1px solid #eaeaea

Accent / Semantic

• エラー・成功・警告色は標準を持たない — 雑誌コンテンツが主体のため UI 系セマンティック色は希薄
• 補完する場合は Tomato Red #e63946 をエラー、Turquoise #00c6ac を成功として運用可能

3. Typography Rules

3.1 和文フォント

BRUTUS は Fontworks の「FOT-筑紫ゴシック Pro」を 3 ウェイト Web フォントとして配信している。雑誌組版の本格的な書体選択。

• FOT-筑紫ゴシック Pro B（Bold）: 本文・ナビ・リンク
• FOT-筑紫ゴシック Pro E（Extra Bold）: 中見出し・小見出し（h3 / h4）
• FOT-筑紫ゴシック Pro H（Heavy）: 大見出し（h2 / 特集タイトル）
• フォールバック: sans-serif（明示的な和文フォント名は 置かない）

3.2 欧文フォント

欧文は完全に別系統で運用：

• futura-pt（Adobe Fonts）: 日付・カテゴリラベル・英字タイトル
• ウェイト: 400（Regular）/ 600（Demi Bold）
• フォールバック: sans-serif

3.3 font-family 指定

実サイトの実測値。用途別に和文・欧文が完全に分かれる点が BRUTUS の特徴：

css/* 和文・本文（h1, body, a, button のデフォルト） */
font-family: "FOT-筑紫ゴシック Pro B", sans-serif;

/* 和文・中見出し（h3, h4, 強調 p） */
font-family: "FOT-筑紫ゴシック Pro E", sans-serif;

/* 和文・大見出し（h2, 特集タイトル） */
font-family: "FOT-筑紫ゴシック Pro H", sans-serif;

/* 欧文・日付/カテゴリ/英字タイトル */
font-family: futura-pt, sans-serif;

注意: 和文要素のフォールバックに「ヒラギノ」「游ゴシック」を含めない。WebFont 未読込時は OS の sans-serif にそのまま落とす思い切った設計。@font-face の読み込みを最優先する。

3.4 font-size

実測のサイズスケール（PC 1440px ビュー）：

3.5 line-height

実測値（比率に換算）：

• Body 18px: 1.50（27px / 18px）— 雑誌的なタイトな行送り
• H2 24px: 1.50（36px / 24px）
• H3 14px: 1.43（20px / 14px）
• 強調 p 19px: 1.47（27.93px / 19px）
• Body 14px (小): 1.50（21px / 14px）
• Caption 12px: 1.0（12px / 12px）— キャプションは詰める

3.6 letter-spacing

基本は normal（letter-spacing 指定なし）。WordPress デフォルト組版を踏襲し、和文も欧文も自然な字送りに任せる。

• 全要素ほぼ normal
• 大きい英字タイトル（Futura）にだけ気持ち広げる程度

3.7 font-feature-settings

palt は使わない（実測で確認）。約物の余分な空きをそのまま残す雑誌的組版。Mazda や PARCO の palt: ON とは対照的。

3.8 ウェイト戦略

和文は3ウェイト、欧文は2ウェイトで運用：

注意: 和文の Bold (Pro B) は font-weight 400 で運用される。これは Pro B 自体がすでに Bold 寄りの太さを持っているため。CSS の font-weight ではなく、ファミリ名の B/E/H で太さが決まる。

4. Component Stylings

4.1 ボタン（記事リンク）

cssfont-family: "FOT-筑紫ゴシック Pro B", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 27px;
color: #101010;
background-color: transparent;
border: none;
text-decoration: none;

• ボタンらしい矩形枠は持たず、テキストリンク主体
• 必要な場合は親要素のカード全体をクリッカブルにする

4.2 暗色 CTA（暗色帯上の白文字）

cssfont-family: "FOT-筑紫ゴシック Pro B", sans-serif;
font-size: 18px;
font-weight: 400;
color: #ffffff;
background-color: #191919;
padding: 16px 24px;

• 漆黒帯 #191919 の中で白文字
• 雑誌のキャプション風

4.3 カテゴリラベル（バッジ）

css/* 暗色帯の中の英字カテゴリ */
font-family: futura-pt, sans-serif;
font-size: 14px;
font-weight: 600;
color: #ffffff;
background: #577590; /* カテゴリ別 */
padding: 4px 12px;
letter-spacing: 0.04em;
text-transform: uppercase;

• 特集ジャンルに応じて bg を切り替える（Section 2 のカテゴリカラー参照）
• text-transform は uppercase が基本
• Futura PT で英字を組む

4.4 カード（記事サムネイル）

• 写真（4:3 または 16:9）+ タイトル + 日付・カテゴリ
• 影なし、罫線なし、画像と文字情報の縦配置のみ
• 周囲の余白だけで区切る
• カードタイトル: 筑紫ゴシック E、14〜16px、weight 700

4.5 雑誌セクションヘッダー（英字＋和文）

html<div class="section-header">
  <span class="en">WHAT'S NEW</span>
  <span class="ja">新着記事</span>
</div>

css.section-header .en {
  font-family: futura-pt, sans-serif;
  font-size: 19px; font-weight: 800;
  color: #191919;
  text-transform: uppercase;
}
.section-header .ja {
  font-family: "FOT-筑紫ゴシック Pro H", sans-serif;
  font-size: 24px; font-weight: 800;
  color: #191919;
  margin-left: 12px;
}

これが BRUTUS のシグネチャ。**英字大文字（Futura）+ 和文重厚見出し（筑紫 H）**を並べる雑誌定番。

4.6 フォーム

• フォームは検索ボックス・メール購読程度。専用デザインは控えめ
• 入力欄: 1px solid #eaeaea 矩形、border-radius: 0
• 送信ボタン: 漆黒帯 #191919 + 白文字

5. Layout Principles

• コンテナ最大幅: 1280〜1440px（雑誌的な広めのワイド）
• グリッド: 12 カラム。記事サムネイルは 3〜4 カラム配置が基本
• セクション間余白: 中庸（48〜80px）
• 背景色を切り替えてセクションを区切る — #ffffff / #eaeaea / #e2dfd7 / #f4f3ef を交互に
• 見出しは左揃えが基本
• 画像は 4:3 または 16:9。記事サムネイルは 4:3 が主流
• 特集カテゴリページでは大胆にカテゴリカラーで全幅塗りすることがある

6. Depth & Elevation

• 影は使わない（box-shadow は基本 none）
• カードや UI 要素のレベル差は 面色の違いで表現
• 暗色帯セクション #191919 は強い視覚的アクセントとして機能
• ホバー状態は背景色 / 透明度の微変化で表現

7. Do's and Don'ts

✅ Do

• FOT-筑紫ゴシック Pro B/E/H と futura-pt を併用する
• 和文要素のフォールバックは sans-serif のみ — ヒラギノ・游ゴシックを置かない
• palt は使わない — letter-spacing normal が基本
• 本文 line-height は 1.5 に設定（雑誌的なタイト感）
• 大見出しは英字（Futura）+ 和文（筑紫 H）の対訳組み
• 特集ごとに カテゴリカラーで彩りを変える
• 漆黒帯 #191919 を強いアクセントとして使う

❌ Don't

• ヒラギノ角ゴシック / 游ゴシック / メイリオで代用しない（デザインの大事な部分が失われる）
• letter-spacing を本文に与えない（雑誌の自然な字送りを保つ）
• line-height を 1.7 以上に広げない（雑誌密度を保つ）
• カードに角丸・影を付けない
• 単一の単色アクセントで全特集を統一しない（カテゴリ色の多様性を失う）

8. Responsive Behavior

• PC 1440px をベース幅とする
• タブレット（〜1024px）: 4 カラム → 2 カラム、本文 16〜17px
• モバイル（〜768px）: 1 カラム、本文 15〜16px、H2 18〜20px
• letter-spacing は normal を維持
• 特集カテゴリカラーはモバイルでも保つ

9. Agent Prompt Guide

AI エージェントに BRUTUS 風 UI を生成させる際のプロンプト。

Generate a Japanese magazine-style UI in the BRUTUS visual style.

Visual:
- Pure white background (#ffffff) with sharp ink text (#101010)
- Magazine grid layout with section-color background switches
- letter-spacing: normal globally (NO palt, NO custom kerning)
- line-height: 1.5 for body (tight, magazine-like)
- Strong charcoal accent bands (#191919) with white text + Futura uppercase

Typography:
- Japanese: "FOT-筑紫ゴシック Pro B" (body), "Pro E" (subheadings), "Pro H" (large headings)
- English: futura-pt (Adobe Fonts), weights 400 / 600 / 800
- Body: 18px / line-height 1.5 / letter-spacing normal / weight 400
- H2: 24px / weight 800 / Pro H
- H4: 16px / weight 700 / Pro E
- Captions: 13px / Futura PT / weight 600

Components:
- Cards: image + title + date, no shadow, no border, no radius
- Section headers: English uppercase (Futura PT 800) + Japanese (Pro H 800) side-by-side
- Category badges: Futura PT 600 / 14px on category-colored bg

Color Strategy (category palette):
- Slate Blue #577590 (primary)
- Turquoise #00c6ac (culture)
- Sky Blue #5fb7ff (lifestyle)
- Magazine Beige #ab9a86 (craft)
- Deep Navy #275ba1 (business/travel)
- Copper #b87333 (food)
- Tomato Red #e63946 (special)
- Charcoal #191919 (watches/jewelry)

Avoid:
- Hiragino / Yu Gothic in font fallback (use sans-serif only)
- palt (no Japanese kerning adjustment)
- line-height 2.0 (too loose for magazine density)
- Single brand color (preserve category color diversity)
- Box shadows or rounded corners on cards