POPEYE Web DESIGN.md

POPEYE Web（https://popeyemagazine.jp/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: マガジンハウスの『POPEYE』Web 版。シティボーイ向けカルチャー誌の遊び心を Web に翻訳。強烈なコバルトブルー (#343ec9) + 白 + シアン (#3affff) の三色構成で、雑誌のような大胆な紙面密度をデジタルで再現
• 密度: 高密度。カードを格子状に詰め、各カードに非対称の角丸 (border-radius: 0px 5px 5px 0px 等) を入れて誌面のような切り抜きカット感を出す
• キーワード: ポップ、若々しい、ブルー、レトロモダン、雑誌的、アシンメトリック
• 特徴: テキストは原則 #343ec9（POPEYE Blue）の青文字。背景白に青文字、青背景に白文字を反転させながら使い、雑誌の見開きのようなコントラスト構造を作る。検索フォームや CTA には border-radius: 24px（pill）と 5px（カード内）の 2 トークンのみを使用

2. Color Palette & Roles

Primary（ブランドカラー）— CSS Custom Properties 実測値

POPEYE Web は CSS Custom Properties で 9 つのブルー段階 とアクセントカラーを定義している。

• Primary (#343ec9): POPEYE Blue。テキスト、ボーダー、アクティブ面。サイトの主役色
• Primary 2 (#3b47e7): やや明るい青
• Primary 3 (#4350ff): さらに明るい青
• Primary 4 (#4b59ff)
• Primary 5 (#5363ff)
• Primary 6 (#5b6cff)
• Primary 7 (#6275ff)
• Logo Color (#ff9000): ロゴのオレンジ（Primary に対する強烈な補色アクセント）

Calendar / Today モジュール

• Calendar Primary (#3affff): カレンダーの強調シアン（Primary の補色側）
• Calendar Background (#002184): 濃紺の暗いブルー (rgb 0, 33, 132)

TODO リスト・ドロワー

• TODO Title BG (#add8e6): ライトブルー
• TODO Accent (#0055ff): ビビッドブルー
• TODO BG (#f7f7f7): ライトグレー背景
• Drawer Primary (#343ec9)
• Drawer BG (#ffffff)
• Gathering Color (orange): イベント告知用

Neutral

• Background (#ffffff): ページ背景
• Surface Subdued (#f5f5f5): 一部のカード背景
• Text Body: 通常 #343ec9（白背景の場合）
• Text Inverse: #ffffff（青背景の場合）
• Article Body (#000000): 記事ページ本文のみ純黒（読み物として可読性優先）

Border Radius トークン

• Radius (24px): pill / 大きな角丸
• Radius Small (5px): カード・タグの小さな角丸

3. Typography Rules

3.1 和文フォント

POPEYE は DNP 秀英角ゴシック金 (Std) を Adobe Fonts 経由で使用。雑誌『POPEYE』本誌の組版に近い表情を Web で再現する。

• dnp-shuei-gothic-kin-std: DNP 秀英角ゴシック金 Std（Adobe Fonts）
• システムフォールバック: なし（直接 sans-serif へ）

Adobe Fonts のドメインライセンスのため、preview.html ではこのフォントが表示されない。雰囲気の近い代替として Zen Kaku Gothic New を使用する（DNP 秀英の流れを汲む字面）。

3.2 欧文フォント

• DM Sans: Google Fonts のジオメトリック・サンセリフ。POPEYE の英文表記（POPEYE / WEB / NO.949 等）を担当
• 和文フォント (秀英角ゴシック金) より先に置き、欧文部分は DM Sans で組む

3.3 font-family 指定

css/* メイン */
font-family: "DM Sans", dnp-shuei-gothic-kin-std, sans-serif;

/* 一部の system UI（検索ボタン等） */
font-family: Arial;

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

• 欧文 (DM Sans) を最優先 → ブランド名・数字を確実に DM Sans で表示
• 和文は秀英角ゴシック金を直接呼び、システムフォントへのフォールバックを設けない（Adobe Fonts 前提）
• Adobe Fonts が読み込めない環境では sans-serif にフォールバック

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

特徴:

• POPEYE は font-weight を 400 一本 で統一する（本文・見出し問わず）。太さで階層を作らず、サイズと色とレイアウトで階層を作る。これは雑誌の本誌組版の流儀
• ボディサイズは 14.4px と Web 標準 (16px) より小さめ。雑誌の細かな組版を再現

3.5 行間・字間

• 本文の行間: line-height: 1.5 を基本（21.6px / 14.4px）。雑誌的な詰めたリズム
• 見出しの行間: line-height: 1.0 も多用（h1, h5, header）。タイトルは 1 行で組み、行間で開く
• 本文の字間: letter-spacing: 0.36px（≈0.025em）。微小な字間を全文に適用
• 大見出しの字間: letter-spacing: 2.88px（h1 43.2px 時、≈0.0667em）。雑誌の大扉タイトル風に大きく開ける
• マーキータイトル: letter-spacing: 1.44px（20.16px 時、≈0.0714em）。流れるテロップでも字間を広めに

3.6 OpenType 機能

cssfont-feature-settings: "palt";

• POPEYE は palt を全テキスト要素に一律適用
• 雑誌組版の「字詰めの密度」を Web 上で再現する目的
• 数字も palt が効くため、価格・日付の半角数字が和文と均一の密度で組まれる

4. Component Stylings

Buttons / CTA

Primary CTA / 最新号バナー（"最新号: NO.949 特集..."）

• Background: #ffffff
• Text: #343ec9
• Border: 1px solid #343ec9
• Border Radius: 24px（pill）
• Padding: 14.4px 0
• Font: DM Sans + 秀英角ゴシック金
• Font Size: 14.4px
• Font Weight: 400
• Letter Spacing: 0.36px
• Footer 上の同 CTA は 反転（青背景・白文字・白ボーダー）

Calendar Action（"TODOリストを見る！"）

• Background: #3affff（シアン）
• Text: #002184（濃紺）
• Border: 1px solid #3affff
• Border Radius: 24px（pill）
• Padding: 0 28.8px
• Font Size: 14.4px

Card Title with Asymmetric Corner（カード見出し）

• Background: #ffffff
• Text: #343ec9
• Border: 1px solid #343ec9
• Border Radius: 0px 5px 5px 0px（左上のみ角丸なし）または 0px 5px 5px（右下も追加）
• Padding: 10.8px 14.4px
• 雑誌の切り抜きシール風の造形

Town Talk Card（曜日別カラム）

• Background: #343ec9
• Text: #ffffff
• Border Radius: 各カードで異なる角を採用
  • 月曜カード: 0px 24px 0px 0px（右上だけ pill）
  • 日曜カード: 0px 0px 24px（右下だけ pill）
  • 火・水・木・金・土: 0px（フラット）
• カード群を並べると「曜日カードのまとまり」全体に大きな pill が描かれる構造

Newsletter Submit

• Background: #343ec9
• Text: #ffffff
• Border Radius: 0px 24px 24px 0px（右側のみ pill）
• Input 側: border-radius: 24px 0px 0px 24px（左側のみ pill）
• 並ぶと完全な pill 形状になる

Inputs

• Background: #ffffff
• Border: 1px solid #343ec9
• Border Radius: 24px 0px 0px 24px（左側のみ pill。Submit と組み合わせる前提）
• Padding: 0 14.4px
• Font Size: 16px
• Font: DM Sans + 秀英角ゴシック金

フッター内の Newsletter は反転配色:

• Background: #343ec9
• Border: 1px solid #ffffff
• Text: #ffffff

Cards / Tags

Category Tag（"フード" 等）

• Background: #ffffff
• Text: #343ec9
• Border Radius: 5px 5px 0px 0px（上端のみ角丸。カード上部に貼り付ける）
• Padding: 7.2px 14.4px
• Font Size: 12.5px

Search Submit（虫眼鏡アイコンボタン）

• Background: #343ec9
• Border Radius: 0px 24px 24px 0px
• Padding: 16.128px

5. Layout Principles

Container

• 雑誌的な高密度グリッド
• カードは 2〜4 カラムで隙間なく敷き詰め
• 角丸は全体ではなく各カードの角単位で設定し、カード群を並べたときに全体で 1 つの大きなオブジェクトになるように設計

Spacing Scale（実測ベース、p-, m- クラス命名）

CSS クラス命名から推定される spacing トークン:

Border Radius Tokens

css--radius: 24px;        /* pill / 大きな角丸 */
--radius-small: 5px;   /* カード・タグの小角丸 */

この 2 トークンの組み合わせ + 「どの角に適用するか」のバリエーションで、すべての角丸表現が成立する。

6. Depth & Elevation

POPEYE はシャドウを 使わない。フラットな色面と非対称角丸で誌面構造を作る。

7. Do's and Don'ts

Do（推奨）

• テキストの基本色は #343ec9（POPEYE Blue）。本文・見出し・リンク・ボーダーまで一律
• 反転コンテキストでは 白背景に青文字 / 青背景に白文字 で組み、雑誌の見開きのようなコントラストを作る
• font-weight は 400 一本 で統一。太さで階層を作らず、サイズ・色・レイアウトで階層を表現
• カードの角丸は 非対称（4 つの角を別々に設定） で組む。雑誌の切り抜きカット感
• 字間は letter-spacing: 0.025em を全テキストに均一適用、大見出しのみ 0.067em 以上に開ける
• font-feature-settings に "palt" を必ず指定する
• CTA の角丸は 24px (pill) と 5px (small) の 2 値のみを使う
• カレンダー・TODO セクションだけは シアン (#3affff) と 濃紺 (#002184) の特別配色を許容

Don't（禁止）

• 黒文字 #000000 を主役にしない（記事ページの本文以外は基本的に #343ec9）
• font-weight 700 や 600 を多用しない。POPEYE は 400 で統一する組版思想
• 影 (box-shadow) を入れない。POPEYE はフラット
• 角丸を全体に均一に適用しない。「どの角を丸めるか」を意識的に設計
• 黄色・赤などの強い暖色アクセントは使わない。アクセントは オレンジ (#ff9000) か シアン (#3affff) のみ
• 行間 1.8 以上で本文を組まない（雑誌的な密度が失われる）

8. Responsive Behavior

Breakpoints（CSS class 命名から推測）

CSS には pl-2-tablet, textsize-articlebody-tablet, radius-small-bottom-left のような タブレット専用 utility クラス が大量に定義されており、breakpoint ごとに細かく font-size と padding が切り替わる。

モバイル時の調整

• カードグリッドは 1〜2 カラムに折り返し
• マーキー（流れるテロップ）はそのまま継続。スマホ幅でも続く
• TODO リスト等のオーバーレイは画面幅いっぱいに展開
• フォントサイズは PC 時の 80〜90% 程度に縮小

タッチターゲット

• pill CTA は最小 44px の高さを確保（padding 14.4px × 2 + line-height 14.4px = 43.2px なので、実装ではプラス 1〜2px の余裕あり）

9. Agent Prompt Guide

クイックリファレンス

Brand: POPEYE Web (マガジンハウス)
Primary Color: #343ec9 (POPEYE Blue)
Logo Accent: #ff9000 (orange)
Calendar Accent: #3affff (cyan)
Calendar BG: #002184 (dark navy)
Background: #ffffff
Text Body: #343ec9 (青文字が原則)
Text Inverse: #ffffff (青背景時)
Font: "DM Sans", dnp-shuei-gothic-kin-std, sans-serif
Body Size: 14.4px
Body Line Height: 1.5 (21.6px)
Letter Spacing: 0.36px (≈0.025em)
font-feature-settings: "palt"
Font Weight: 400 (一律)
Border Radius: 24px (pill) / 5px (small) のみ。非対称適用
CTA: 白bg + 青text + 1px 青border + radius 24px
Asymmetric Card: radius 0px 5px 5px 0px 等で雑誌切り抜き風

プロンプト例

POPEYE のデザインシステムに従って、新しい連載コラムのカード一覧ページを作成してください。
- フォント: "DM Sans", dnp-shuei-gothic-kin-std, sans-serif
- font-feature-settings: "palt"
- font-weight は 400 一本（太字を使わない）
- 本文・見出し・リンクの color は #343ec9 (POPEYE Blue)
- 背景は #ffffff
- カード見出しは border 1px solid #343ec9 + border-radius: 0px 5px 5px 0px (左上のみフラット)
- カテゴリタグ「ファッション」は border-radius: 5px 5px 0px 0px でカード上部に貼り付け
- CTA「もっと読む」は #ffffff bg + #343ec9 text + border 1px solid #343ec9 + border-radius: 24px (pill)
- 字間 letter-spacing: 0.36px、line-height: 1.5
- 影は使用禁止

字詰め・組版の重要ポイント

1. font-weight 400 で全階層を組む: 雑誌組版の流儀。太さに頼らず、サイズ・色・配置で階層を作る
2. #343ec9 の徹底: 青文字をデフォルトにして、世界観を保つ
3. 非対称角丸: border-radius: 0px 5px 5px 0px のように 4 隅を別々に指定。雑誌の切り抜きカット感
4. palt 全適用: 雑誌的な字詰め密度を Web で再現
5. 2 値の角丸トークン: 24px (pill) と 5px (small) のみ。それ以外の中間値は使わない
6. シアン #3affff はカレンダー・TODO 限定: ブランド全体の補色アクセントとして節度を持って使用

取得日: 2026-05-08 出典: https://popeyemagazine.jp/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出