吉田カバン / YOSHIDA & Co. (PORTER) DESIGN.md

Japan

吉田カバン（YOSHIDA & Co.）公式サイト（https://www.yoshidakaban.com/）のデザイン仕様書。 PORTER / LUGGAGE LABEL / B印 YOSHIDA 等、同社の主力ブランドを統括する公式コーポレートサイト。実サイトの computed style に基づいて記述。

Raw DESIGN.md

At a glance

Group: Japan
Main color: #ff9e5eOrange design systems
Fonts: Noto Sans JP Helvetica Neue

Colors in this file

#b4b4b4
Surface Mid Gray
#ffffff
Background
#dddddd
Surface Light Gray
#f2f2f2
Surface Pale Gray
#000000
PORTER Black
#333333
PORTER Gray Dark
#444444
PORTER Gray Mid
#f0f0f0
Surface Section
#efefef
Surface Input
#ff9e5e
PORTER Orange

吉田カバン（YOSHIDA & Co.）公式サイト（https://www.yoshidakaban.com/）のデザイン仕様書。 PORTER / LUGGAGE LABEL / B印 YOSHIDA 等、同社の主力ブランドを統括する公式コーポレートサイト。実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

デザイン方針: 1935 年創業の老舗カバンメーカーらしい、徹底して職人的・カタログ的なミニマリズム。装飾を排し、黒・白・グレースケールだけで構成
密度: 情報密度がきわめて高い。本文 12px、商品サムネキャプション 10px と日本語サイトの中でも最小級。プロのバイヤー向けカタログを意識した構成
キーワード: ミニマル、モノクローム、Helvetica、職人、カタログ、密度高
特徴: すべての CTA / カード / 入力欄が border-radius: 0px（完全に角張った設計）。色は #000 / #fff / #333 / #dddddd / #f2f2f2 / #b4b4b4 のグレースケール 6 色のみで構成。英語の見出しに Helvetica Neue（700） を使い、和文見出しと差をつける

2. Color Palette & Roles

Primary（ブランドカラー）

PORTER Black (#000000): すべてのテキストと黒地の主役。純黒（pure black）を使う数少ないブランド
PORTER Gray Dark (#333333): ヘッダー・ナビ背景。「Navigation」「人気の検索ワード」エリア
PORTER Gray Mid (#444444): フォーカステキスト・検索ボタンのテキスト
PORTER Gray (#666666): 言語切替・サブテキスト

Surface（面色）

Background (#ffffff): ページ背景
Surface Light Gray (#dddddd): 大量に使われる中間グレー（カテゴリラベル背景・特集背景）
Surface Pale Gray (#f2f2f2): 「バックパック」「トートバッグ」などのラベルピル背景
Surface Section (#f0f0f0): セクション背景（「すべてのアイテム」「ストア一覧」等）
Surface Mid Gray (#b4b4b4): 「すべて見る」CTA の塗りつぶし背景
Surface Input (#efefef / #eaeaea): 検索ボックスの背景
Surface Translucent (rgba(204,204,204,0.3)): 編集記事カードの薄い背景

Accent（アクセント — ごくわずか）

PORTER Orange (#ff9e5e): キャンペーンバッジ等で使われる唯一の暖色アクセント

Text

Text Primary (#000000): 本文・見出しすべて純黒
Text Inverse (#ffffff): 黒地上のテキスト
Text Muted (#b4b4b4): 商品カテゴリラベル「RUCKSACK」「TOTE」等の英語キャプション

Note: 吉田カバンの UI に色相は存在しない。完全グレースケール（オレンジ系のキャンペーンを除く）。これは「商品（カバン本体）が主役」という思想の徹底。

3. Typography Rules

3.1 和文フォント

ゴシック体（唯一）:

Noto Sans JP（Web フォント、最優先）
ヒラギノ Sans / ヒラギノ角ゴ ProN（macOS フォールバック）
メイリオ（Windows フォールバック）

3.2 欧文フォント

サンセリフ（h2 のみ）: Helvetica Neue → Helvetica → Arial。英語の大見出し（CATEGORY / PRODUCTS 等）専用
本文の欧文: Noto Sans JP の欧文グリフをそのまま使用（独立指定なし）

3.3 font-family 指定

css/* 本文・UI 全般 */
font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

/* 大見出し（h2 / 英語タイトル） */
font-family: "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

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

本文は和文フォントを最優先（Noto Sans JP → ヒラギノ Sans → ヒラギノ角ゴ ProN → メイリオ）
英語見出しは欧文フォントを最優先にし、和文がフォールバックに入る
ヒラギノは ProN（JIS2004 字形） を採用（Pro ではない）

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

Role	Font	Size	Weight	Line Height	Letter Spacing	備考
Display (h2 EN)	Helvetica Neue	39px	700	44.265px (1.135)	normal	「CATEGORY」「PRODUCTS」等のセクション見出し
Logo (h1)	Noto Sans JP	12px	500	18px (1.5)	normal	サイト名の構造的見出し（視覚的にはロゴ画像）
Hero Heading	Noto Sans JP	17px	700	25.5px (1.5)	normal	「RECOMMEND for YOU」等
Sub Heading	Noto Sans JP	15px	400	22.5px (1.5)	normal	サムネタイトル
Nav Section Label	Noto Sans JP	15px	400	85px	normal	グローバルナビの「プロダクト」「ストア」
Body	Noto Sans JP	12px	400	18px (1.5)	normal	サイト全般の本文
Card Caption	Noto Sans JP	12px	500	15.6px (1.3)	normal	商品名
Card Sub Caption	Noto Sans JP	11px	400	16.5px (1.5)	normal	商品コピー
Card Brand Tag	Noto Sans JP	10px	700	12px (1.2)	normal	「PORTER / EXTREME」等のブランド冠ラベル
Card Category EN	Noto Sans JP	10px	700	10px (1.0)	normal	「RUCKSACK」「TOTE」等の英字カテゴリ（color #b4b4b4）
Price	Noto Sans JP	10px	700	13.5px (1.35)	normal	「¥57,200」等の価格
Link	Noto Sans JP	11–13px	400–700	normal	normal	フッター・ナビリンク

3.5 行間・字間

本文の行間: 1.5。日本語サイトとしては標準的（サンリオの 1.8 等とは異なり、より引き締まった印象）
見出しの行間: 1.13–1.5。h2（Helvetica Neue 39px）は 1.13 とややタイト
letter-spacing: 全要素で normal（吉田カバンは字間調整を行わない）
本文の字間: letter-spacing: normal

ガイドライン:

本文は 12px / line-height 1.5 がベース。情報密度を最大化する設計
大見出しは Helvetica Neue 700 で英語表記、和文よりも明らかに大きく扱う
ベタ組みを基本とし、字間は調整しない

3.6 禁則処理・改行ルール

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

商品名（PORTER / TANKER 等）はモデル名 + サイズ表記が長くなるため overflow-wrap で折り返す
価格・型番は折り返さない

3.7 OpenType 機能

cssfont-feature-settings: normal;

palt は使わない。職人的なベタ組みを維持
カーニング kern も明示指定なし

3.8 縦書き

該当なし（全面横書き）

4. Component Stylings

Buttons

Primary CTA（すべて見る / 現在地から探す）

Background: #b4b4b4
Text: #ffffff
Padding: 0 10px
Border Radius: 0px（角張り）
Font Size: 12–13px / Weight 400–700

Secondary Button（登録 / 検索送信）

Background: #ffffff
Text: #444444
Border: 1px solid #dddddd
Padding: 10px
Border Radius: 0px

Search Submit (small)

Background: #efefef
Text: #444444
Padding: 1px 6px
Border Radius: 0px
Font Size: 11px

Tag / Category Pill

Background: #f2f2f2
Text: #000000
Padding: 0 12px（推定）
Border Radius: 0px
Font Size: 12px / Weight 400

Inputs

Background: #efefef / #eaeaea
Border: なし、または 1px solid #dddddd
Border Radius: 0px
Padding: 8px 12px
Font Size: 12px / Weight 400

Cards

Background: #ffffff
Border: なし
Border Radius: 0px（カードに角丸を一切使わない）
Padding: 0（画像直下に密接にキャプション）
Shadow: なし（フラット）

Badges

商品ラベル「PORTER / EXTREME」: 10px Bold、純黒
カテゴリラベル「RUCKSACK」: 10px Bold、color #b4b4b4、英大文字
価格「¥57,200」: 10px Bold、純黒、line-height 1.35

5. Layout Principles

Spacing Scale

Token	Value	用途
XS	4px	アイコンとラベルの間
S	8px	カード内の細かい間
M	12px	カードキャプション間隔
L	18px	セクション内ブロック間
XL	24px	セクション間
XXL	40–60px	メジャーセクション間

Container

Max Width: 約 1280px（実測ベース）
Padding (horizontal): 16〜24px
グローバルナビ・ヘッダーは 100vw（黒バー: #333333）

Grid

商品サムネ: 4 カラムまたは 5 カラム
カテゴリリスト: 6 カラム以上の横スクロール併用
ガッターは 4–8px と狭め（情報密度を確保）

6. Depth & Elevation

Level	Shadow	用途
0	none	ほぼ全要素（フラット運用が原則）
1	`0 1px 3px rgba(0,0,0,0.08)`	スティッキーヘッダー / モーダル時のみ

吉田カバンはシャドウを実質使わない。階層は色面（#fff / #f0f0f0 / #dddddd / #333）の差で表現する。

7. Do's and Don'ts

Do（推奨）

本文は "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif のチェーンで指定
英語の大見出しは "Helvetica Neue", Helvetica, Arial, [和文フォールバック] でフォントを切り替える
すべての UI 要素は border-radius: 0px。角丸は使わない
配色は #000 / #ffffff / #333 / #dddddd / #f2f2f2 / #b4b4b4 のグレースケール 6 色に絞る
テキストには 純黒（#000000） を使う（吉田カバンは数少ない純黒運用ブランド）
本文は 12px / line-height 1.5 と引き締まったサイズで情報密度を確保する
letter-spacing: normal を厳守（字間調整は職人気質に反する）
商品サムネキャプションは 10px Bold まで小さくしてカタログ感を出す

Don't（禁止）

角丸を使わない。pill や rounded card は吉田カバンのデザインに反する
カラフルな色を使わない（オレンジ #ff9e5e のキャンペーンバッジを除く）
大きな box-shadow / drop-shadow を使わない（フラット原則）
本文を 14px 以上に膨らませない（カタログの密度感が失われる）
ヒラギノ Pro ではなく ProN を指定（吉田カバンは ProN 指定）
palt などの字詰め機能を使わない（ベタ組み原則）
グラデーションや透明背景の装飾を使わない（職人的な面色運用に反する）

8. Responsive Behavior

Breakpoints

Name	Width	説明
Mobile	≤ 767px	モバイル（1〜2 カラム）
Tablet	768–1023px	3 カラム
Desktop	≥ 1024px	4–5 カラム

タッチターゲット

最小サイズ: 44px × 44px（モバイル時のみ。デスクトップでは小さなリンクが多い）

フォントサイズの調整

モバイルでも本文は 12px を維持（情報密度優先）
大見出し h2（Helvetica Neue 39px）はモバイルで 24–28px に縮小

9. Agent Prompt Guide

クイックリファレンス

Primary Black: #000000 (純黒を使用)
Background: #ffffff
Header BG: #333333 (テキスト白)
Surface Light: #f2f2f2
Surface Section: #f0f0f0
Mid Gray Button BG: #b4b4b4
Surface Pale: #dddddd
Text Muted: #b4b4b4
Accent Orange (rare): #ff9e5e
Font (Body): "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
Font (Display EN): "Helvetica Neue", Helvetica, Arial, [上記和文フォールバック]
Body Size: 12px / Weight 400 / line-height 1.5 / letter-spacing normal
Display: 39px / Weight 700 / line-height 1.13 (Helvetica Neue)
Border Radius: 0px (すべて角張り)
Shadow: なし

プロンプト例

吉田カバン（PORTER）のデザインシステムに従って、商品カタログページを作成してください。
- 背景: #ffffff、テキスト: #000000（純黒を使用）
- 本文フォント: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
- 英語大見出し（CATEGORY、PRODUCTS）は "Helvetica Neue", Helvetica, Arial の Bold 39px
- 本文は 12px / line-height 1.5 / letter-spacing normal（情報密度重視のベタ組み）
- すべての CTA・カード・入力欄は border-radius: 0px（角丸禁止）
- 配色は #000 / #ffffff / #333 / #dddddd / #f2f2f2 / #b4b4b4 のグレースケール 6 色のみ
- 商品サムネは枠線なし・シャドウなしのフラット表示
- 商品キャプションは「PORTER / EXTREME」（10px Bold 黒）+「RUCKSACK」（10px Bold #b4b4b4）+ 価格「¥57,200」（10px Bold 黒）の階層で組む
- 「すべて見る」CTA は bg #b4b4b4 / text #ffffff / radius 0px / padding 0 10px
- ヘッダーバーは bg #333333 / テキスト白
- カラフルな色や角丸、シャドウは使わない（職人的なミニマリズムを維持）

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/yoshidakaban.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

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

Hoshino Resorts (hoshinoresorts.com)

Japan · Noto Sans JP

Hoshino Resorts (hoshinoresorts.com)のデザイン仕様書。

UPSIDER

Japan · Noto Sans JP

UPSIDER（https://up-sider.com/lp/）のデザイン仕様書。「上場のための法人カード」を掲げる法人カード／支出管理の B2B SaaS。10 万社超が導入。主 CTA はオレンジのグラデーションピル（linear-gradient(90deg, #f5833e 0%, #fead48 100%)）。サイト内で有彩色が出るのは、ほぼこの CTA だけ面色が background-color ではなく bac…

ＪＲ東海（Central Japan Railway Company）

Japan · Noto Sans JP

ＪＲ東海（Central Japan Railway Company）のデザイン仕様書。

南海電気鉄道（NANKAI）

Japan · Noto Sans JP

南海電気鉄道（NANKAI）のデザイン仕様書。

DEAN & DELUCA（ディーン・アンド・デルーカ）

Japan · Helvetica Neue

DEAN & DELUCA Japan 公式オンラインストア（https://www.deandeluca.co.jp/）のデザイン仕様書。ニューヨーク発のプレミアムフード＆ライフスタイルブランド。厳選された食材、美しいギフトパッケージ、アイコニックなトートバッグで知られる。実サイトの computed style 実測（2026-05-08 取得）に基づく。

SUQQU (スック)

Japan · FOT-ロダン Pro M

SUQQU（https://www.suqqu.com/ja/）のデザイン仕様書。花王グループ（旧カネボウ化粧品）のラグジュアリーコスメティクスブランド。「洗練」と「凛」を掲げ、日本の美意識を現代に昇華した商品で知られる。ブランド哲学: 「顔立ちからつくる」。骨格に沿ったメイクアップ理論で日本人女性の美を引き出す。実サイトの computed style 実測（2026-06-04 取得）に基づく。

All Design.md files Browse by font

吉田カバン / YOSHIDA & Co. (PORTER) DESIGN.md

At a glance

Colors in this file

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary（ブランドカラー）

Surface（面色）

Accent（アクセント — ごくわずか）

Text

3. Typography Rules

3.1 和文フォント

3.2 欧文フォント

3.3 font-family 指定

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

3.5 行間・字間

3.6 禁則処理・改行ルール

3.7 OpenType 機能

3.8 縦書き

4. Component Stylings

Buttons

Inputs

Cards

Badges

5. Layout Principles

Spacing Scale

Container

Grid

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

Don't（禁止）

8. Responsive Behavior

Breakpoints

タッチターゲット

フォントサイズの調整

9. Agent Prompt Guide

クイックリファレンス

プロンプト例

Use it with your agent

Related Design.md files

Hoshino Resorts (hoshinoresorts.com)

UPSIDER

ＪＲ東海（Central Japan Railway Company）

南海電気鉄道（NANKAI）

DEAN & DELUCA（ディーン・アンド・デルーカ）

SUQQU (スック)