Hanako Web（ハナコ） DESIGN.md

マガジンハウス『Hanako』の公式サイト Hanako Web（https://hanako.tokyo/）のデザイン仕様書。 1988 年創刊の女性誌。Web 版は WordPress 上に構築され、FOOD / TRAVEL / FORTUNE / HEALTH / LEARN / MAMA / SUSTAINABLE / CULTURE / WORK&MONEY の 9 カテゴリを持つ。 最大の特徴は、--theme-color という 1 つの CSS 変数を差し替えるだけでページ全体の面色が切り替わる「6 色のパステル・テーマシステム」。ペールグリーン / ペールオレンジ / ペールレッド / ペールブルー / ペールイエロー / ペールパープルの 6 色が --theme-color-1 〜 -6 として定義され、カテゴリごとに 1 色が --theme-color に代入される。 和文は 游ゴシック体を先頭に置く和文優先スタック、欧文見出しは Montserrat。letter-spacing: 0.03em がグローバル、palt は見出し・ナビにだけ掛ける。font-weight: 300（Light）を UI に多用するのも珍しい。 実サイトの computed style 実測（2026-08-16 取得。トップページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 写真が主役、UI は白と淡色の余白。彩度の高い色を UI に一切使わず、パステル 6 色の面と白だけで構成する。線は細く、ボタンはすべて枠だけのゴーストピル
• Hanako について: 「おいしい」「どこ行く？」が主戦場のライフスタイル誌。料理・旅・雑貨の写真が画面の 7 割を占めるため、UI は徹底して引く設計になっている
• 密度: 低〜中密度・メディア型。ヒーロー 3 枚 → New Articles → Videos → Ranking → Community と、セクションごとに面色を替えて縦に積む
• キーワード: 6 色パステルのテーマ変数、游ゴシック優先、Montserrat の欧文見出し、weight 300、ゴーストピル、ls 0.03em グローバル
• 特徴:
  • --theme-color を差し替えるだけでページ全体の面色が変わる。6 色（--theme-color-1 〜 -6）から 1 色を選び、セクション背景・区切り面に流す。トップページは #dbe8e8（ペールブルー）
  • ボタンに面色を持たせない。「View More」「FOLLOW US!」はすべて 1px solid の枠だけのピル。塗りボタンはランキングの選択タブ（黒）だけ
  • font-weight: 300（Light）を UI に使う。「View More」ボタン、フッター、ハンバーガー、入力欄がすべて 300。軽さが Hanako のトーン
  • letter-spacing: 0.48px（16px に対し 0.03em）がグローバル。見出しは 0.64px / 0.72px（0.04em）まで開く
  • font-feature-settings: "palt" は見出し・ナビ・タグにだけ掛け、本文には掛けない
  • 欧文見出しは Montserrat 単独（Montserrat, sans-serif）で、和文を挟まない。New Articles Videos RANKING などのセクション名がこれ
  • 濃色セクションが 3 種：ブルーグレー #6f7f89（Videos）／シルバー #adb8c3（Community）／ダークグレー #333333（フッター）
  • 記事メタ（日付）は Montserrat 14px の シルバー #adb8c3。本文の黒との差を大きく取る

2. Color Palette & Roles

CSS Custom Properties として整理されている。6 色のパステルが --theme-color-1 〜 -6 に、選択中の 1 色が --theme-color に入る構造。

Theme Colors（6 色パステル／カテゴリごとに切り替わる）

• --theme-color に上記のいずれかが代入される。トップページは #dbe8e8（= --theme-color-4）
• セクション背景（New Articles / POPULAR TAGS など）と区切り面に流す
• どれも明度が非常に高く彩度が低い。写真の色を邪魔しないための設計

Neutral（面・罫・文字）

• Background (#ffffff / --theme-color-background): ページ地色
• Ink (#000000 / --c-black): body と記事タイトルの文字色。Hanako は本文に純黒を使う
• Dark Gray (#333333 / --c-dark-gray / --theme-color-black): 見出し（h4）・ボタンの枠と文字・フッターの面色
• Gray (#707070 / --theme-color-grey): 補助テキスト
• Light Gray (#a3a3a3 / --theme-color-light): 非選択タブの枠と文字
• Silver (#adb8c3 / --c-silver / --theme-color-mask): 記事の日付・メタ情報の文字色、ロゴ、および「Join our Community」セクションの面色
• Blue Gray (#6f7f89 / --c-blue-gray / --theme-color-background-dark): Videos セクションの濃色面。白抜き文字を載せる
• Pale Gray (#d7dce1 / --c-pale-gray): 区切り線・淡い面
• Light Gray BG (#eeeeee / --c-light-gray): 汎用の薄面

Accent（差し色）

• Accent Blue (#5889ac, rgb 88,137,172): 「Today I feel...」フローティングバーの面色、「Old Issue」ボタンの枠と文字。サイト唯一の彩度を持つ色で、点でしか使わない

Semantic（意味的な色）

• Hanako は雑誌メディアのため意味色が前面に出ない
• Info: アクセントブルー #5889ac を流用
• Danger／Error: #cf2e2e（WordPress プリセットの vivid-red）を用いる
• Success: パステルの --theme-color-1 #e3e8d3 を面に使う

3. Typography Rules

和文は游ゴシック体を先頭に置く和文優先スタック、欧文見出しは Montserrat 単独。letter-spacing: 0.03em がグローバル、palt は見出し・ナビにだけ。font-weight: 300 を UI に多用するのが Hanako の軽さを作っている。

3.1 和文フォント

• ゴシック体: 游ゴシック体（游ゴシック体 → "Yu Gothic" → YuGothic）を先頭に置き、以降 ヒラギノ角ゴ Pro → メイリオ → MS Pゴシック と繋ぐ
• ヒラギノは Pro（ProN ではない）。"ヒラギノ角ゴ Pro" / "Hiragino Kaku Gothic Pro" の 2 表記を並べる
• Web フォントを一切使わない。OS 搭載フォントだけで組む（写真の読み込みを優先する判断）
• 明朝体は使わない
• Windows の游ゴシック問題: 游ゴシックは Windows で Regular（400）が細く見える。Hanako は font-weight: 300 を多用するため、Windows ではさらに細く落ちる。実装時は Windows 向けに 300 → 400 へ引き上げるフォールバックを検討すること

3.2 欧文フォント

• サンセリフ: Montserrat。2 通りの使い分けがある
  • Montserrat, sans-serif（単独）: 欧文だけのセクション見出し（Hanako Magazine Official Join our Community）と日付
  • Montserrat, 游ゴシック体, …（和文を後続）: 和欧混じりの見出し・ラベル（New Articles Hanako Magazine DAILY）
• 等幅フォントの指定はない

3.3 font-family 指定

css/* 本文・UI（和文優先） */
font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
             "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
             "MS Pゴシック", "MS PGothic", sans-serif;

/* 和欧混じりの見出し・ラベル */
font-family: Montserrat, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
             "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
             "MS Pゴシック", "MS PGothic", sans-serif;

/* 欧文のみのセクション見出し・日付 */
font-family: Montserrat, sans-serif;

/* グローバル */
letter-spacing: 0.03em;   /* 16px に対し 0.48px */

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

• 和文を先頭に置く（游ゴシック体）。日本語の表示品質を優先する方針
• 欧文が主体のときだけ Montserrat を先頭に差し替える。3 種類のスタックを用途で使い分ける
• 游ゴシックは 3 表記（游ゴシック体 / "Yu Gothic" / YuGothic）を並べて環境差を吸収する
• ヒラギノは Pro。ProN と混同しない

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

• font-weight: 700 が出るのは記事タイトル（18px）だけ。それ以外は 400 か 300
• font-weight: 300 が UI の広い範囲（ボタン・フッター・入力欄・ハンバーガー）に使われる。これが Hanako の軽さの正体
• letter-spacing は px 固定 0.48px で書かれているため、サイズが小さいほど相対的に広がる（10px なら 0.048em）。小さい文字ほど字間が開く設計

3.5 行間・字間

• 本文の行間 (line-height): 1.55（16px→24.8px）。記事タイトルは 1.75（18px→31.5px）と最も開く
• 見出しの行間: 1.0〜1.2（30px→30px / 26px→31.2px / 16px→19.2px）と締める
• 字間 (letter-spacing): グローバルに 0.48px（16px 基準で 0.03em）。見出し・記事タイトルは 0.64px / 0.72px（0.04em）、欧文ボタンは 1px（0.083em）
• palt は見出し・ナビ・タグ・日付にだけ掛け、本文には掛けない

ガイドライン:

• 見出しは締めて（1.0〜1.2）、記事タイトルは開く（1.75）。この落差が Hanako のリズム
• 字間は px 固定で 0.48px を保つ。em に変換して一律にしない（小さい文字ほど開くのが意図）
• 本文 16px / 行間 1.55 を守る。写真キャプションでも 14px を下回らない

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 記事タイトルに 【福島】「ままどおる」 のような括弧・鉤括弧が頻出する。word-break: break-all にすると括弧が行頭に来るため使わない

• タイトルは 2〜3 行で折り返す前提。line-height: 1.75 が効くのはこのため

3.7 OpenType 機能

css/* 見出し・ナビ・タグ・日付 */
font-feature-settings: "palt";

/* 本文 */
font-feature-settings: normal;

• palt の適用先が明確に分かれる。見出し（h3 / h4）・グローバルナビ・タグピル・日付には掛け、本文と記事タイトルには掛けない
• 見出しは字面を詰めて塊として見せ、読ませるテキストは等幅のまま letter-spacing で開く、という使い分け

3.8 縦書き

• 該当なし。UI・記事とも横組み

4. Component Stylings

ボタンは原則「枠だけ」。塗りボタンはランキングの選択タブ 1 種のみ。

Buttons

Primary（ゴーストピル）— 主要 CTA

• Background: transparent
• Text: #333333
• Border: 1px solid #333333
• Border Radius: 43.5px（高さいっぱいの完全な丸端）
• Padding: 15px 30px
• Font: 和文 / 15px / weight 300 / ls normal
• 例: 「View More」
• 濃色セクション上では Text / Border を #ffffff に反転する

Secondary（欧文ゴーストピル）

• Background: transparent
• Text: #333333 / Border: 1px solid #333333
• Border Radius: 999px
• Padding: 10px 20px
• Font: Montserrat / 14px / weight 500 / ls 1.4px（0.1em）
• 例: 「FOLLOW US!」

Accent（アクセントブルー）

• Background: #ffffff
• Text: #5889ac / Border: 1px solid #5889ac
• Border Radius: 99px
• Padding: 8px 10px
• Font: 11px / weight 400
• 例: 「Old Issue」

Tabs（ランキング切替）

Active（塗り）

• Background: #000000 / Text: #ffffff
• Border: 1px solid #000000 / Border Radius: 5px
• Padding: 0 10px / Font: Montserrat + 和文 / 10px / weight 400
• 例: 「DAILY」

Inactive（枠）

• Background: transparent / Text: #a3a3a3
• Border: 1px solid #a3a3a3 / Border Radius: 5px
• 例: 「WEEKLY」「MONTHLY」
• タブだけが角丸 5px の矩形。ほかのボタンはすべてピル

Tags

• Background: #ffffff / Text: #000000
• Border: なし
• Border Radius: 99px
• Padding: 12px 16px
• Font: 14px / weight 400 / ls 0.48px / palt
• 例: 「#手土産」「#シュークリーム」
• パステル面（--theme-color）の上に白いピルを置くのが定型

Cards（記事）

• Background: transparent（親セクションの面色を透かす）
• Border: なし / Border Radius: 0（画像は角丸なしの矩形）
• 構成: 画像 → タイトル（18px / 700 / lh 1.75）→ カテゴリ ｜ 日付（Montserrat 14px / #adb8c3）
• Shadow: なし

Inputs

• Background: #ffffff
• Border: 1px solid #d7dce1
• Border Radius: 5px
• Padding: 12px 16px
• Font: 和文 / 15–16px / weight 300
• Text: #333333 / Placeholder: #a3a3a3

Sections（面色の使い分け）

5. Layout Principles

Spacing Scale

CSS 変数として定義されている。

• セクション間 80px、ブロック間 48px、グリッドの溝 48px。溝が広いのがメディアらしい余白設計

Container

• Section Max Width: --theme-section-max-width = 74rem（1184px）
• 本文カラム幅: --theme-p-max-width = 48rem（768px）
• WordPress 側: --wp--style--global--content-size = 800px / --wp--style--global--wide-size = 1280px
• Padding (horizontal): 16〜24px

Grid

• ヒーローは 3 カラム（画像のアスペクトは縦長・横長を混在させる）
• New Articles は 2 カラム + サイドバー（雑誌カバー・バナー）
• Gutter: 48px（--theme-grid-gap）
• 画像は角丸なし。矩形のまま並べる

6. Depth & Elevation

フラット。影を使わない。

• WordPress のプリセット影（natural / deep / sharp / outlined / crisp）は変数としては存在するが、実際のページでは適用されていない
• 奥行きは 白 × 6 色パステル × ブルーグレー #6f7f89 × シルバー #adb8c3 × ダークグレー #333333 の面のコントラストだけで作る
• 写真そのものが最大の「面」であり、そこに影を足さない

7. Do's and Don'ts

Do（推奨）

• 面色は --theme-color 経由で参照する。6 色（#e3e8d3 #f8ecd9 #f2e5e2 #dbe8e8 #f8f8ed #f2edf5）から 1 色を選び、カテゴリで切り替える
• 和文は 游ゴシック体を先頭に置く。欧文が主体のときだけ Montserrat を先頭に差し替える
• ボタンは枠だけのピルにする（1px solid / radius 43.5px 〜 999px）
• font-weight: 300 を UI（ボタン・フッター・入力欄）に使い、軽さを出す
• 記事タイトルだけ 700 / 18px / line-height 1.75 で重くする
• letter-spacing: 0.48px をグローバルに効かせる（px 固定のまま）
• palt は見出し・ナビ・タグ・日付にだけ掛ける
• 日付・メタは Montserrat 14px の シルバー #adb8c3 に沈める
• 濃色セクションは #6f7f89 → #adb8c3 → #333333 の 3 段を使い分ける
• 画像は角丸なしの矩形で並べる

Don't（禁止）

• ボタンに面色を塗らない（例外はランキングの選択タブ #000000 のみ）
• 彩度の高い色を UI に使わない（アクセントブルー #5889ac を点で使うのが上限）
• 影を落とさない（WordPress プリセットの影が変数にあっても使わない）
• 画像に border-radius を付けない
• 本文に palt を掛けない
• letter-spacing を em に変換して一律にしない（px 固定 0.48px が意図。小さい文字ほど開く）
• 記事タイトル以外に font-weight: 700 を使わない
• Web フォントを追加しない（OS 搭載フォントで組むのが方針）
• ヒラギノを ProN と書かない（Pro が正しい）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• 「View More」は padding: 15px 30px + 15px の行で 52px 相当の高さを確保している
• タグピルは padding: 12px 16px で 38px。モバイルでは上下パディングを 14px に上げること

フォントサイズの調整

• 本文 16px は据え置き（モバイルでも下げない）
• Section Head 30px → 22〜24px、26px → 20px 程度に縮小
• 記事タイトル 18px は据え置き。行間 1.75 を維持する（モバイルほど折り返しが増えるため）
• letter-spacing: 0.48px はモバイルでも維持する
• font-weight: 300 は小サイズで潰れやすい。モバイルの 10〜11px は 400 に上げてよい

9. Agent Prompt Guide

クイックリファレンス

Background:     #ffffff （--theme-color-background）
Theme Colors:   --theme-color-1 #e3e8d3（ペールグリーン）
                --theme-color-2 #f8ecd9（ペールオレンジ）
                --theme-color-3 #f2e5e2（ペールレッド）
                --theme-color-4 #dbe8e8（ペールブルー）
                --theme-color-5 #f8f8ed（ペールイエロー）
                --theme-color-6 #f2edf5（ペールパープル）
                → 1 色を --theme-color に代入してページ全体に流す
Text:           #000000（本文・記事タイトル） / #333333（見出し・ボタン）
Meta:           #adb8c3 （日付・シルバー）
Dark Sections:  #6f7f89（Videos） / #adb8c3（Community） / #333333（フッター）
Accent:         #5889ac （点でのみ使用）
Border:         #d7dce1（罫・入力欄） / #333333（ボタン枠） / #a3a3a3（非選択タブ）
JP Font:        游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
                "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
                "MS Pゴシック", "MS PGothic", sans-serif
EN Font:        Montserrat, sans-serif（欧文見出し・日付）
Body Size:      16px / weight 400 / lh 1.55（24.8px）
Article Title:  18px / weight 700 / lh 1.75 / ls 0.04em
Light UI:       weight 300（ボタン・フッター・入力欄）
Letter Spacing: 0.48px（px 固定。グローバル） / 見出しは 0.64–0.72px
Feature:        font-feature-settings: "palt"（見出し・ナビ・タグ・日付のみ）
Radius:         43.5px / 999px（ボタン・タグのピル） / 5px（タブ・入力欄） / 0（画像）
Shadow:         なし
Container:      1184px（--theme-section-max-width） / 768px（本文カラム）
Gaps:           section 80px / block 48px / grid 48px

プロンプト例

Hanako Web のデザインシステムに従って、FOOD カテゴリの記事一覧ページを作成してください。
- 和文は 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", メイリオ… の和文優先スタック
- 欧文のセクション見出し（New Articles など）と日付は Montserrat, sans-serif
- セクションの面色は --theme-color を定義して参照する。FOOD には --theme-color-1 #e3e8d3 を割り当てる
- 地は白 #ffffff、テキストは #000000、見出しとボタンは #333333、日付は #adb8c3
- 本文 16px / weight 400 / line-height 1.55、letter-spacing 0.48px（px 固定でグローバル）
- 記事タイトルは 18px / weight 700 / line-height 1.75 / letter-spacing 0.72px（palt は掛けない）
- 見出し・ナビ・タグ・日付にだけ font-feature-settings: "palt" を掛ける
- ボタンは面色を持たせず、1px solid #333333・border-radius 43.5px のゴーストピル
  文字は 15px / weight 300（「View More」）
- タグは白い面の border-radius 99px ピル、padding 12px 16px、14px / weight 400
- ランキングのタブだけ塗り（選択 = #000000 の面に白文字、非選択 = #a3a3a3 の枠）で radius 5px
- Videos セクションは #6f7f89、Community は #adb8c3、フッターは #333333 の面に白抜き文字
- 画像に border-radius を付けない。影も一切使わない
- コンテナ幅 1184px、本文カラム 768px、セクション間 80px・グリッドの溝 48px