UI Skillbook
2

Meiji (明治) DESIGN.md

Japan

明治（https://www.meiji.co.jp/）のデザイン仕様書。 乳製品・チョコレート・菓子・栄養食品を中心とした総合食品メーカーのコーポレートサイト。 実サイトの computed style 実測（2026-05-22 取得）に基づく。

Raw DESIGN.md

At a glance

Group
Japan
Main color
#d90000Red design systems
Fonts
Noto Sans CJKYakuHanJP

Colors in this file

  • #06171f

    Text Primary

  • #ffffff

    BG White

  • #d90000

    : ライトブルーグレー #edf3f7 の穏やかなサーフェスを基調に、

  • #edf3f7

    デザイン方針

  • #407bbe

    4色のカテゴリ配色

  • #ffa24b

    4色のカテゴリ配色

  • #00ae83

    4色のカテゴリ配色

  • #000000

    700

  • #b7c4ce

    Gray 3

  • #cfdae3

    Gray 4

明治（https://www.meiji.co.jp/）のデザイン仕様書。 乳製品・チョコレート・菓子・栄養食品を中心とした総合食品メーカーのコーポレートサイト。 実サイトの computed style 実測（2026-05-22 取得）に基づく。

1. Visual Theme & Atmosphere

  • デザイン方針: ライトブルーグレー #edf3f7 の穏やかなサーフェスを基調に、明治レッド #d90000 の見出しアクセントと マルチカラーのカテゴリ配色（ブルー・オレンジ・グリーン）で、食と健康のブランドらしい清潔感と信頼感を表現
  • 密度: 全テキスト要素で line-height 1.8 を一貫して適用する非常に広い行間設計。letter-spacing 0.06em のゆったりした字送りと合わせ、情報密度よりも読みやすさ・安心感を優先
  • キーワード: 清潔、健康的、ファミリー向け、明治レッド、広い行間
  • 特徴:
    • 和文フォントに YakuHanJP + Noto Sans CJK を採用。YakuHanJP は日本語の約物（括弧・句読点）をプロポーショナル化する専用フォントで、括弧やカンマの余白を詰めて自然な日本語組版を実現
    • ブランドカラーは #d90000（明治レッド）。CSS 変数 --primary-color: #f00 と --text-color2: #d90000 の2段階で定義されている
    • 4色のカテゴリ配色: 赤 --primary-color、ブルー --accent-color1: #407bbe、オレンジ --accent-color2: #ffa24b、グリーン --accent-color3: #00ae83 で商品カテゴリや情報領域を分類
    • ページ背景は純白 #ffffff ではなく #edf3f7（ライトブルーグレー）。CSS 変数 --bg2 がこれに該当。穏やかさ・清潔感の演出
    • テキストの主要色は #06171f（ダークネイビー）。純黒 #000000 ではなく、やわらかい印象
    • ウェイト 200〜300 のライトウェイト見出しを装飾的に使い、700 の太い見出しとの対比で視覚リズムを作る
    • palt は使用しない。代わりに YakuHanJP がフォントレベルで約物のプロポーショナル化を処理
    • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

  • Meiji Red (#d90000): メインのブランドカラー。見出し（"お知らせ" 等）に使用。CSS 変数 --text-color2
  • Primary Red (#ff0000): CSS 変数 --primary-color に定義された純赤。ブランドの基準色
  • CTA Red (#e30200): Cookie 同意ボタン等のインタラクティブ要素に使用。#d90000 よりわずかに明るい

Category Accents（マルチカラー体系）

  • Accent Blue (#407bbe): CSS 変数 --accent-color1。カテゴリ分類・情報セクションの識別に使用
  • Accent Orange (#ffa24b): CSS 変数 --accent-color2。プロモーション・注目コンテンツの識別
  • Accent Green (#00ae83): CSS 変数 --accent-color3。健康・サステナビリティ関連コンテンツ

Neutral

TokenhexCSS 変数役割
Text Primary#06171f--text-color1本文テキスト（ダークネイビー）
Text Red#d90000--text-color2見出し強調・ブランドテキスト
Gray 1#59636b--gray-accent1補助テキスト、日付
Gray 2#7c8a95--gray-accent2プレースホルダー、不活性テキスト
Gray 3#b7c4ce--gray-accent3ボーダー、区切り線
Gray 4#cfdae3--gray-accent4淡いボーダー、背景区切り
BG White#ffffff--bg1ヘッダー、カード面
BG Light Blue-Gray#edf3f7--bg2ページ背景・セクション面
BG Medium#dde5eb--bg3ホバー面・アクティブ面
Dark Navy#27455c—フッター背景
Near Black#06171f—フッター最下部背景

Semantic（推奨値）

実サイトにはエラー／成功状態の明確な色定義は表面化していない。ブランドトーンに合わせた推奨値:

  • Danger: #d90000（ブランドレッドを兼用）
  • Success: #00ae83（Accent Green を兼用）
  • Warning: #ffa24b（Accent Orange を兼用）

3. Typography Rules

3.1 和文フォント

  • ゴシック体: YakuHanJP を最優先（約物プロポーショナル化専用）→ Noto Sans CJK（本文の和文書体）
  • YakuHanJP の役割: 括弧「」（）や句読点、・の前後に入る半角分の余白を除去し、自然な字詰めを実現する。font-feature-settings の palt と同様の効果をフォント自体で達成
  • 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

  • 専用の欧文書体は持たず、Noto Sans CJK の欧文グリフを使用
  • font-family に欧文専用サンセリフ（Helvetica Neue / Arial 等）は含まれない

3.3 font-family 指定

css/* 全要素共通（body, h1〜h5, p, a, span, button, nav） */
font-family: YakuHanJP, "Noto Sans CJK", sans-serif;

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

  • YakuHanJP を先頭に置き、約物（括弧・句読点）のグリフのみを上書きする
  • 残りの和文・欧文は Noto Sans CJK で表示
  • YakuHanJP がない環境でも Noto Sans CJK で正常に表示される（約物の詰めが効かないだけ）

代替フォント注記: YakuHanJP + Noto Sans CJK はいずれも Web フォントとして CDN 配信可能だが、preview.html や社外資料では Google Fonts の Noto Sans JP で代替する。字面の印象はほぼ同等（約物のプロポーショナル化のみ差異）。

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

実測値（トップページ、2026-05-22 取得）

RoleFontSizeWeightLine HeightLetter SpacingColor備考
Display (Section Title)Noto Sans CJK40px70072px (x1.8)2.4px (0.06em)#000000"商品情報" 等のメインセクション
Display (Light)Noto Sans CJK40px30050px (x1.25)0.96px#59636b装飾見出し・キャッチ
H2 SubNoto Sans CJK24px70043.2px (x1.8)0.96px (0.04em)#000000サブセクション見出し
H2 RedNoto Sans CJK16px70028.8px (x1.8)0.96px (0.06em)#d90000"お知らせ" 等のブランドカラー見出し
H3 Pick-upNoto Sans CJK42px20075.6px (x1.8)0.96px#06171fピックアップ・特集の大見出し
H3 SubNoto Sans CJK18.72px70033.696px (x1.8)0.96px#06171fカード内見出し
P LeadNoto Sans CJK20px40036px (x1.8)1.2px (0.06em)#000000リード文
P Card TitleNoto Sans CJK32px50040px (x1.25)0.96px#06171fカードタイトル
P CopyNoto Sans CJK24px50043.2px (x1.8)0.96px#06171fコピーテキスト
BodyNoto Sans CJK16px40028.8px (x1.8)0.96px (0.06em)#06171f本文
NavNoto Sans CJK15px50027px (x1.8)—#06171fグローバルナビ
SmallNoto Sans CJK14px40025.2px (x1.8)—#06171f補足テキスト・日付

3.5 行間・字間

行間 (line-height) — 実測:

  • 本文 (16px): 1.8（28.8px / 16px）— 明治の最も特徴的なデザインシグネチャー。全テキスト階層でほぼ統一
  • リード (20px): 1.8（36px / 20px）
  • 見出し (24〜42px): 1.8（大見出しでも同じリズムを維持）
  • カードタイトル (32px): 1.25（例外的にタイト）
  • 装飾見出し (40px light): 1.25（例外的にタイト）
  • ナビ (15px): 1.8（27px / 15px）
  • 小テキスト (14px): 1.8（25.2px / 14px）

字間 (letter-spacing) — 実測:

  • 本文・見出し共通: +0.06em（0.96px / 16px）。見出しでも同じ値
  • リード (20px): +0.06em（1.2px / 20px）
  • サブ見出し (24px): +0.04em（0.96px / 24px）

ガイドライン:

  • 明治の line-height 1.8 は日本語サイトとしても広めの部類。食品・健康ブランドとしての「安心感」「読みやすさ」を最優先した設計
  • letter-spacing 0.06em はグローバルに適用。見出しで詰める（負のトラッキング）ことはしない
  • ウェイト 200〜300 のライト見出しは装飾用。700 の太い見出しと組み合わせてコントラストを作る

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;
  • ナビゲーション項目は white-space: nowrap

3.7 OpenType 機能

cssfont-feature-settings: normal;
  • palt は明示的に使用していない
  • YakuHanJP が約物のプロポーショナル化をフォントレベルで処理するため、palt による字詰めは不要
  • 明治サイトの「整った約物」は YakuHanJP の効果であり、OpenType 機能ではない

3.8 縦書き

  • 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（レッド） — Cookie 同意・メイン CTA

  • Background: #e30200
  • Text: #ffffff
  • Padding: 10px 24px
  • Border Radius: 4px
  • Font: Noto Sans CJK, 16px, weight 500
  • Border: none

Secondary（ボーダー付き） — ナビゲーション内ボタン

  • Background: #ffffff
  • Text: #06171f
  • Border: 1px solid #b7c4ce
  • Padding: 10px 16px
  • Border Radius: 4px
  • Font: Noto Sans CJK, 15px, weight 500

Nav Link（テキストリンク） — グローバルナビ項目

  • Background: transparent
  • Text: #06171f
  • Border: 1px solid #b7c4ce（ドロップダウンの区切り）
  • Font: Noto Sans CJK, 15px, weight 500

Category Badge — カテゴリ色付きの小ラベル

  • Background: 各カテゴリ色（#407bbe / #ffa24b / #00ae83）
  • Text: #ffffff
  • Padding: 4px 12px
  • Border Radius: 2px
  • Font: Noto Sans CJK, 12px, weight 700

Inputs（推奨実装）

  • Background: #ffffff
  • Border: 1px solid #b7c4ce（--gray-accent3）
  • Border (focus): 2px solid #407bbe（--accent-color1）
  • Border Radius: 4px
  • Padding: 10px 16px
  • Font: Noto Sans CJK, 16px, weight 400
  • Height: 44px

Cards

  • Background: #ffffff
  • Border: 1px solid #cfdae3（--gray-accent4）または border なし
  • Border Radius: 8px
  • Padding: 24px
  • Shadow: 0 2px 8px rgba(0, 0, 0, 0.06)（hover 時）

Header

  • Background: #ffffff
  • Border Bottom: 1px solid #cfdae3
  • Position: fixed top: 0
  • Height: 80px 程度

Footer

  • Background: #27455c（ダークネイビー）→ #06171f（最下部）
  • Text: #ffffff
  • Padding: 48px 24px

5. Layout Principles

Spacing Scale（8px グリッド）

TokenValue用途
XS4pxアイコンと文字の間
S8pxラベルと値の間
M16pxカード内の段落間
L24pxカードの内側余白
XL48pxセクション間の縦余白
XXL80pxヒーロー上下のゆとり

Container

  • Max Width: 1200px
  • Padding (horizontal): mobile 16px / desktop 32px

Border Radius Scale

TokenValue用途
Small2pxカテゴリバッジ
Medium4pxボタン・入力欄
Large8pxカード
XL12pxモーダル

Grid

  • 12 カラムグリッド
  • Gutter: 24px

6. Depth & Elevation

LevelShadow用途
0noneカード・ボタン（基本フラット）
10 2px 8px rgba(0, 0, 0, 0.06)カードホバー
20 4px 16px rgba(0, 0, 0, 0.08)ドロップダウン・ナビメニュー
30 8px 24px rgba(0, 0, 0, 0.12)モーダル・ダイアログ
  • 実測ではフラットなデザインが基本。影は控えめ
  • 階層表現は #edf3f7 サーフェスと #ffffff カードの色差で実現
  • 影を使う場合も彩度の低い黒（rgba(0, 0, 0, 0.06〜0.12)）で控えめに

7. Do's and Don'ts

Do（推奨）

  • 和文フォントは YakuHanJP → Noto Sans CJK → sans-serif のフォールバックを指定する
  • line-height は 1.8 を全体の基本リズムにする（明治の最も特徴的な設計判断）
  • letter-spacing は +0.06em をグローバルに適用する
  • ブランドカラー #d90000 は見出しの色アクセントとして使い、赤い背景面としては控えめにする
  • カテゴリ色（ブルー #407bbe、オレンジ #ffa24b、グリーン #00ae83）は情報の分類に使い、装飾目的の多用は避ける
  • テキスト色は #06171f（ダークネイビー） を基本にし、純黒は避ける
  • サーフェスは #edf3f7 を使い、カードは白 #ffffff で浮かせる
  • ウェイトの使い分けで視覚的なリズムを作る（200/300 = 装飾見出し、400 = 本文、500 = コピー・ナビ、700 = 強い見出し）

Don't（禁止）

  • line-height 1.5 以下を使わない（明治の余白感が完全に崩れる。1.8 が原則）
  • 純黒 #000000 を本文テキストに使わない（#06171f のダークネイビーを使用）
  • pill 形状（border-radius 9999px）のボタンを使わない — 明治のボタンは角丸 4px が基本
  • 見出しに負のトラッキングを使わない（明治は見出しも正のトラッキング 0.06em）
  • palt を CSS で有効にしない（YakuHanJP に任せる）
  • ブランドレッド #d90000 を広い面（背景全体・ヒーロー面）に使わない — あくまでテキストアクセント
  • 冷たいグレー（#9ca3af、#f3f4f6 等）は使わない（--bg2: #edf3f7 はブルーグレー系）

8. Responsive Behavior

Breakpoints（推奨値）

NameWidth説明
Mobile≤ 767pxモバイルレイアウト
Tablet≤ 1023pxタブレットレイアウト
Desktop> 1024pxデスクトップレイアウト

モバイル時の調整

  • Display (40px) → 28〜32px
  • H2 Sub (24px) → 20px
  • 本文サイズは 16px を維持（line-height 1.8 も維持）
  • ナビはハンバーガーメニュー化

タッチターゲット

  • 最小サイズ: 44px x 44px（WCAG 基準）
  • ナビボタン: padding 10px + font 15px + line-height 1.8 = 約 44px

フォントサイズの調整

  • モバイルでは本文 14〜16px、見出しはデスクトップの 70〜80% 程度に縮小
  • line-height 1.8 は端末問わず維持する

ダークモード

  • 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Meiji Red (Brand): #d90000
CTA Red: #e30200
Accent Blue: #407bbe
Accent Orange: #ffa24b
Accent Green: #00ae83
Text Primary (Dark Navy): #06171f
Gray 1 (補助): #59636b
Gray 2 (不活性): #7c8a95
Gray 3 (ボーダー): #b7c4ce
Gray 4 (淡ボーダー): #cfdae3
BG White: #ffffff
BG Light Blue-Gray: #edf3f7
BG Medium: #dde5eb
Footer Dark: #27455c

Font: YakuHanJP, "Noto Sans CJK", sans-serif
（YakuHanJP 不在時の代替: "Noto Sans JP"）

Body Size: 16px / line-height 1.8 / weight 400 / letter-spacing 0.06em
Display: 40px / line-height 1.8 / weight 700 / letter-spacing 0.06em
Display Light: 40px / line-height 1.25 / weight 300
H2 Sub: 24px / line-height 1.8 / weight 700 / letter-spacing 0.04em
Small: 14px / line-height 1.8
Nav: 15px / line-height 1.8 / weight 500

Border Radius: 4px（ボタン）/ 8px（カード）/ 2px（バッジ）
Shadow: 基本 none。階層は #edf3f7 と #ffffff の面色差で表現

CSS Custom Properties

css:root {
  --primary-color: #f00;
  --accent-color1: #407bbe;
  --accent-color2: #ffa24b;
  --accent-color3: #00ae83;
  --text-color1: #06171f;
  --text-color2: #d90000;
  --gray-accent1: #59636b;
  --gray-accent2: #7c8a95;
  --gray-accent3: #b7c4ce;
  --gray-accent4: #cfdae3;
  --bg1: #fff;
  --bg2: #edf3f7;
  --bg3: #dde5eb;
}

プロンプト例

明治のデザインに従って、商品一覧ページを作成してください。
- フォント: YakuHanJP, "Noto Sans CJK", sans-serif（代替: "Noto Sans JP"）
- 全テキストの line-height は 1.8 を基本にする
- letter-spacing は 0.06em をグローバルに適用
- セクション見出し: 40px / weight 700 / line-height 1.8 / color #000000
- サブ見出し: 24px / weight 700 / line-height 1.8 / letter-spacing 0.04em
- 本文: 16px / weight 400 / line-height 1.8 / letter-spacing 0.06em / color #06171f
- 補助テキスト: 14px / weight 400 / line-height 1.8 / color #59636b
- ページ背景: #edf3f7（ライトブルーグレー）
- カード背景: #ffffff、ボーダー 1px solid #cfdae3、radius 8px
- ブランドカラー見出し: color #d90000（テキストアクセントとして）
- CTA ボタン: 背景 #e30200 / 白文字 / radius 4px / padding 10px 24px
- カテゴリバッジ: 背景 #407bbe or #ffa24b or #00ae83 / 白文字 / radius 2px
- フッター: 背景 #27455c（ダークネイビー）/ 白文字
- 純黒 #000000 は見出しのみ、本文は #06171f
- pill 形状のボタンは使わない（角丸 4px が基本）

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/meiji.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "meiji" })

Related Design.md files

IDÉE（イデー）

Japan · YakuHanJP

IDÉE SHOP Online 公式サイト（https://www.idee-online.com/）のデザイン仕様書。 1982 年創業、自由が丘発の家具・インテリアブランド。"Life in Art" を掲げ、自社オリジナル家具とキュレーション雑貨を展開。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

SIX（シックス）

Japan · MaisonNeue

SIX inc.（https://www.sixinc.jp/）のデザイン仕様書。 東京・南青山を拠点とする、カンヌ／ADFEST 等で数々の賞を獲る独立系クリエイティブ・エージェンシー。TOYOTA・ＳＭＢＣ日興証券（日興フロッギー）・popIn Aladdin 等のブランド／コミュニケーション開発を手がける。 最大の特徴は 純白 → ライトグレー（#eeeeee）→ ニアブラック（#1a1a1a）だけのモノクローム基調 に、ただ一…

ぺんてる（Pentel）

Japan · paralucent

ぺんてる（Pentel）のデザイン仕様書。

9h ナインアワーズ（nine hours）

Japan · YakuHanJP

ナインアワーズ（https://ninehours.co.jp/）のデザイン仕様書。 「汗を洗い流す 1h ／ 眠る 7h ／ 身支度する 1h ＝ 9h」というコンセプトで 2009 年に開業したカプセルホテル。 サインは廣村正彰、プロダクトデザインは柴田文江、ロゴタイプは廣村デザイン事務所。Web も同じ設計思想で、白と黒とグレー 10 段だけで組まれている。 最大の特徴は YakuHanJP（約物半角）をフォントスタックの先頭に…

一条工務店（ICHIJO）

Japan · YakuHanJP

一条工務店（ICHIJO）のデザイン仕様書。

NIPPONIA

Japan · YakuHanJP

NIPPONIAのデザイン仕様書。

All Design.md filesBrowse by font