ポスタルコ (POSTALCO) DESIGN.md

ポスタルコ（https://www.postalco.net/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 2000年に Mike Abelson と古内ヨシエが創業した東京の革・紙製品ブランド。スイス的なグリッドと、和紙を思わせる 暖かみのあるオフホワイト #fffffb を基調にした静謐なエディトリアル。色も装飾も最小限で、製品写真と素材感そのものを主役にする
• 密度: 余白がたっぷりで、本文は 14px / 行間 1.6 と一般的、ただし極めて少ない情報量で構成。letter-spacing: 2px の広い字間が見出しに適用され、文字が呼吸するような組版
• キーワード: 革製品、文房具、暖色オフホワイト、Jost、極淡グレー、矩形に近い角丸 3px、控えめなティール、ストア兼アーカイブ
• 特徴: 欧文は Jost（幾何学サンセリフ）一本で、和文は OS のサンセリフフォールバックに任せる。本文の色は黒ではなく #7d7d7d のミディアムグレー。アクセントに ティール #1e596c が稀に登場する。ボタンは border-radius: 3px のごく控えめな角丸の矩形

2. Color Palette & Roles

Primary（ブランドカラー）

POSTALCO はブランドカラーを「色」ではなく「素材の白さ」で表現する。#fffffb の暖かみのあるオフホワイトが面の基準。

• Warm Off-white (#fffffb): メイン背景・カード面（rgb 255, 255, 251）。--payment-terms-background-color に同値が定義されている
• Pure White (#ffffff): 純白。一部の透過レイヤーで使用

Text & Gray Scale

POSTALCO の文字は黒ではない。すべてグレースケールで階調をつくる。

• Body Gray (#7d7d7d): 本文の標準色（rgb 125, 125, 125）。本文・キャプション
• Heading Gray (#636363): 見出しの色（rgb 99, 99, 99）。h1〜h3
• Deep Gray (#171717): 一部の濃いテキスト（rgb 23, 23, 23）。プロモ等
• Mid Gray (#afafaf): More ボタン等の Outline CTA 背景（rgb 175, 175, 175）
• Promo Cream (#f7f6eb): プロモバナー文字色（rgb 247, 246, 235）に使われる薄黄白

Surface（面）

• Surface Subtle (#f0f0f0): セクション地・カード地（rgb 240, 240, 240）— 出現回数最多
• Surface Muted (#e9e9e9): 区切りや更に薄いカード（rgb 233, 233, 233）
• Surface Cool (#eff3f3): 涼しげな淡いセクション（rgb 239, 243, 243）
• Surface Coolest (#f7f7f8): 最も淡い面（rgb 247, 247, 248）
• Overlay Dark (rgba(0, 0, 0, 0.3)): 画像オーバーレイ

Accent

• Postal Teal (#1e596c): プロモ・ロゴ周辺で稀に登場するアクセント（rgb 30, 89, 108）。深い青緑

3. Typography Rules

3.1 和文フォント

POSTALCO は明示的な和文 Web フォントを指定しない。Jost, sans-serif の sans-serif フォールバックで OS のシステム和文ゴシック（macOS なら Hiragino Sans、Windows なら游ゴシック）に委ねる方針。

• Hiragino Sans: macOS デフォルト
• Yu Gothic: Windows デフォルト
• Noto Sans CJK JP: Linux 等の代替

3.2 欧文フォント

• Jost: indestructible Software 制作のオープンソース幾何学サンセリフ（Futura のリバイバル）。すべての要素で唯一指定される

3.3 font-family 指定

css/* すべての要素 */
font-family: Jost, sans-serif;

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

• Jost が読み込めない場合は OS の標準サンセリフ
• 日本語環境では sans-serif → Hiragino Sans / Yu Gothic にフォールバック
• セリフ・明朝は 使用しない

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

3.5 行間・字間

• 本文の行間: line-height: 1.6（22.4px / 14px）— 一般的なサンセリフ本文の値
• 見出しの行間: 1.0〜1.5。Major Title は 1.2 と詰めて重さを出す
• 見出しの字間: letter-spacing: 2px（≈0.09em）— 大きく開けた字間がブランドの上品さの源
• 本文の字間: letter-spacing: normal（0）— 見出しと本文で意図的にコントラストを作る
• 見出しは widely-tracked、本文は normal: POSTALCO の組版の二面性

3.6 OpenType 機能

• 抽出データ上で明示的な font-feature-settings 指定はなし（normal）
• Jost の備える既定のカーニングに依存
• palt は使用しない: 和文に対する詰め指示はなし。OS フォールバックでの自然な字間

3.7 改行・禁則

• 本文は word-break: normal の自然な折り返し
• 商品名（"オールレザースナップパッド" 等）は改行を許容
• 数字 + 通貨記号（"¥11,000" など）は半角扱い

4. Component Stylings

Buttons

Outline CTA / More Button（"More" "GOOGLE MAP" のリンク的アクション）

• Background: #afafaf（ミドルグレー）
• Text: #fffffb（暖オフホワイト）
• Border: なし
• Border Radius: 3px（極小の角丸）
• Padding: 14.4px 25px
• Font Family: Jost, sans-serif
• Font Size: 14px
• Font Weight: 400
• Letter Spacing: normal

Form Submit（登録ボタン）

• Background: #7d7d7d（ボディグレー、More より濃い）
• Text: #fffffb
• Border Radius: 3px
• Padding: 14.4px 25px
• Font Family: Jost, sans-serif

Language Toggle / Select（"日本語" 等の言語切替）

• Background: #fffffb
• Text: #7d7d7d
• Border Radius: 3px
• Padding: 10.5px 42px 10.5px 14px（右に大きい余白で矢印アイコン用）

ボタンの考え方:

• 強い色は使わず、グレー濃度の階調で階層を作る
• More（薄）→ Submit（濃）→ Disabled（最薄）
• Border Radius はすべて 3px。ピル（pill）も完全矩形も使わない。控えめな角丸が POSTALCO らしさ

Inputs

• Font Family: Jost, sans-serif
• Font Size: 14px
• Border: 1px solid #e9e9e9 想定
• Border Radius: 3px
• Background: #fffffb

Cards

• Background: #fffffb または #f0f0f0
• Border Radius: 0px（カード自体は矩形）
• Shadow: なし（フラット）
• 製品写真 + h3 カテゴリ + 短いキャプションの構成

Section Backgrounds

• Hero: #fffffb（暖オフホワイト）
• Listing: #f0f0f0 の薄グレー
• Newsletter: #e9e9e9
• Promo Bar: #1e596c（ティール）に #f7f6eb の文字

5. Layout Principles

Container

• ヘッダーは max-width 全幅、内側で中央寄せ
• メインコンテンツは固定 max-width（実測ベースで 1200px 前後想定）の中央寄せ
• フッターは max-width 全幅で薄グレー地

Spacing Scale（実測ベース）

Grid

• ヒーローは 1 カラム全幅（製品写真または記事サムネイル）
• 商品グリッドは 2〜3 カラム（少数精鋭の表示）
• フッターは 3〜4 カラム

6. Depth & Elevation

POSTALCO はシャドウを基本使わない。グレー濃度の階調と細い境界線で空間を作る。

7. Do's and Don'ts

Do（推奨）

• 本文 color は #7d7d7d、見出しは #636363 のグレースケール
• フォントは Jost 一本。和文は sans-serif で OS フォールバック
• 見出しに letter-spacing: 2px を必ず適用する。POSTALCO の上品さの核
• 本文 letter-spacing は normal（見出しと本文でコントラストをつくる）
• 本文の line-height: 1.6 を確保
• ボタンは border-radius: 3px の控えめな角丸
• font-weight は 400 のみ
• 背景は #fffffb の暖オフホワイトを基準にする
• プロモにのみアクセントとして #1e596c のティールを稀に使う

Don't（禁止）

• 純白 #ffffff を背景に使わない（POSTALCO の暖かみが失われる）
• 純黒 #000000 を本文色に使わない
• 太字（700）を使わない。Jost 400 の細さを保つ
• pill（border-radius 50%）を使わない
• 完全矩形（border-radius 0px）にもしない（3px の角丸が個性）
• セリフ・明朝を使わない
• 鮮やかな色（赤・緑・オレンジ）を使わない
• 見出しの letter-spacing を 0 にしない（広い字間が POSTALCO の特徴）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• Major Title h2 22px → 20px
• 商品グリッドは 1〜2 カラムに折り返す
• ナビゲーションはハンバーガーメニュー化

タッチターゲット

• CTA は最小 40px 高（14.4 + 14.4 + 14 = 42.8px）を確保
• リンクのタッチエリアは padding を含めて十分確保

9. Agent Prompt Guide

クイックリファレンス

Brand: ポスタルコ (POSTALCO)
Surface (Warm Off-white): #fffffb
Surface Subtle: #f0f0f0
Surface Muted: #e9e9e9
Body Gray: #7d7d7d
Heading Gray: #636363
Deep Gray: #171717
Mid Gray (Outline CTA bg): #afafaf
Accent Teal: #1e596c
Body Font: Jost, sans-serif
Body Size: 14px / 400 / line-height 1.6
Heading Letter Spacing: 2px
Body Letter Spacing: normal
Heading Weight: 400 (太字禁止)
CTA Border Radius: 3px
CTA Padding: 14.4px 25px
palt: 使用しない

プロンプト例

ポスタルコ(POSTALCO)のデザインシステムに従って、新作レザー製品の紹介ページを作成してください。
- フォント: Jost, sans-serif（和文は OS フォールバック）
- 背景: #fffffb の暖オフホワイト
- 本文 color は #7d7d7d、line-height: 1.6、letter-spacing: normal
- 見出し color は #636363、letter-spacing: 2px、font-weight 400
- ヒーローは製品の大判写真 + h2 22px / 400 / letter-spacing 2px
- 本文は p 14px の控えめな短文
- CTA「詳しく見る」は #afafaf bg + #fffffb text + radius 3px + padding 14.4px 25px
- フォーム送信は #7d7d7d bg で More より一段濃く
- セクション地は #f0f0f0 の薄グレーで分節
- プロモバナーには稀に #1e596c のティールを差し色として使う
- 装飾は最小限。グレースケールと暖オフホワイトのみで構成する

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

1. 見出しに letter-spacing 2px: POSTALCO の組版の核心。Jost の幾何学的な字面を解放する
2. 本文は letter-spacing normal: 見出しと本文で意図的なコントラストを作る
3. 本文色は #7d7d7d: 黒ではなくミディアムグレー。柔らかさの源
4. 背景は #fffffb の暖オフホワイト: 純白を避け、和紙のような温度を持たせる
5. CTA は radius 3px: pill でも矩形でもない、ごく控えめな角丸
6. font-weight 400 縛り: Jost の細さを保つ。太字にしない

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