Mercari

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。

Back to all styles

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

10tokens
9type steps
2radius steps
—spacing base

Mercari, in one page

特記事項:

Do's and don'ts

Do

  • ブランドカラー #ff333f はCTAとアクティブ状態にのみ使用する
  • body の font-size は 15px を守る（16px にしない）
  • line-height は ×1.4 で統一する
  • フォント指定の「Custom」サフィックスを維持する
  • ボタンの角丸は 4px に統一する
  • 見出しには #666666 を使用し、本文 #333333 と差をつける

Don't

  • #ff333f を背景色やテキスト色として多用しない（CTA・アクティブ状態専用）
  • letter-spacing を追加しない（全要素で normal が統一ルール）
  • palt を適用しない（サイト全体で未使用）
  • line-height を ×1.4 以外に変えない（統一感が崩れる）
  • 見出しに #333333 を使わない（見出しは #666666 のパターン。h3 の一部は #333333）

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

This prompt ships with the source DESIGN.md.

メルカリのデザインシステムに従って、商品一覧ページを作成してください。
- プライマリカラー（CTAのみ）: #ff333f
- リンク色: #0073cc
- フォント: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN Custom", "Hiragino Sans Custom", "Meiryo Custom", sans-serif
- 本文: 15px / 400 / line-height: 1.4 / color: #333333
- 見出し: 20px / 700 / line-height: 1.4 / color: #666666
- グリッド余白: 24px
- ボタン角丸: 4px
- letter-spacing: normal（全要素）
- palt: 使用しない

The specification

Colour paletteRead the full spec

Primary（ブランドカラー）

  • Mercari Red (#ff333f): メインのブランドカラー。CTAボタン、アクティブタブに使用
  • Primary (rgb): rgb(255, 51, 63)

Semantic（意味的な色）

  • Link (#0073cc): テキストリンク。rgb(0, 115, 204)

Neutral（ニュートラル）

  • Text Primary (#333333): 本文テキスト、フッターテキスト
  • Text Secondary (#666666): 見出し（h2）、非アクティブタブ、補足テキスト
  • Background (#ffffff): ページ背景
  • Button Secondary Text (#333333): ログインボタン等のテキスト
  • Button Secondary BG (#ffffff): ログインボタン等の背景
Type scaleRead the full spec

3.1 和文フォント

  • ゴシック体: "Hiragino Kaku Gothic ProN Custom", "Hiragino Sans Custom", "Meiryo Custom"
  • 「Custom」サフィックス付きの独自 @font-face 定義。フォントメトリクス（ascent/descent 等）を調整している可能性がある

3.2 欧文フォント

  • サンセリフ: "Helvetica Neue", Arial

3.3 font-family 指定

/* 本文（実測値） */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN Custom", "Hiragino Sans Custom", "Meiryo Custom", sans-serif;

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

  • 欧文フォント（Helvetica Neue, Arial）を先に指定 — 欧文グリフの表示品質を優先
  • 和文フォントに「Custom」サフィックス付きの独自定義を使用
  • macOS: Hiragino Kaku Gothic ProN Custom → Hiragino Sans Custom
  • Windows: Meiryo Custom
  • 最後に generic family（sans-serif）を指定

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

RoleFontSizeWeightLine HeightLetter Spacing備考
Heading 2本文と同じ20px70028px (×1.4)normal「おすすめの商品」「人気のブランド」。色 #666666
Heading 3本文と同じ17px70023.8px (×1.4)normal「掘り出しもの」。色 #333333
Body本文と同じ15px40021px (×1.4)normalメインの本文テキスト。色 #333333
Footer本文と同じ15px70021pxnormalフッター内テキスト。色 #333333
Link本文と同じ15px400—normalリンクテキスト。色 #0073cc
CTA Button本文と同じ14px700—normal「出品」ボタン。色 #fff / bg #ff333f
Login Button本文と同じ14px400—normal「ログイン」ボタン。色 #333 / bg #fff
Tab (active)本文と同じ14px700—normal「おすすめ」タブ。色 #ff333f
Tab (inactive)本文と同じ14px700—normal「マイリスト」タブ。色 #666
Input本文と同じ16px40022.4pxnormal検索入力欄。色 #333

3.5 行間・字間

  • 本文の行間 (line-height): ×1.4（21px / 15px）。日本語サイトとしてはタイト寄り
  • 見出しの行間: ×1.4（全要素で統一）
  • 本文の字間 (letter-spacing): normal（すべての要素で統一）
  • 見出しの字間: normal

ガイドライン:

  • 全体で line-height ×1.4 に統一。セクションごとの差異なし
  • letter-spacing は全要素で normal。日本語の字間調整は行っていない

3.6 禁則処理・改行ルール

/* 実測値に基づく推定。一般的なウェブデフォルト */
word-break: normal;
overflow-wrap: break-word;

3.7 OpenType 機能

/* palt は使用していない */
font-feature-settings: normal;
  • palt: 未使用。プロポーショナル字詰めは適用されていない
  • kern: デフォルトのカーニング

3.8 縦書き

該当なし

Components and layoutRead the full spec

Buttons

Primary (CTA — 出品)

  • Background: #ff333f
  • Text: #ffffff
  • Border Radius: 4px
  • Font Size: 14px
  • Font Weight: 700

Secondary (ログイン)

  • Background: #ffffff
  • Text: #333333
  • Border Radius: 4px
  • Font Size: 14px
  • Font Weight: 400

Tabs

Active

  • Background: #ffffff
  • Text: #ff333f
  • Font Size: 14px
  • Font Weight: 700

Inactive

  • Background: #ffffff
  • Text: #666666
  • Font Size: 14px
  • Font Weight: 700

Inputs

  • Background: #ffffff
  • Border Radius: 0px（角丸なし）
  • Font Size: 16px
  • Font Weight: 400
  • Line Height: 22.4px
  • Text Color: #333333

CSS Custom Properties（実測値）

TokenValue用途
--grid-layout-gutter24pxグリッド間の余白
--grid-layout-inset16pxグリッド内側の余白
--grid-layout-page-padding-top40pxページ上部パディング
--grid-layout-page-padding-bottom64pxページ下部パディング
--grid-layout-page-padding-horizontal36pxページ左右パディング

Grid

  • Gutter: 24px（--grid-layout-gutter）
  • Inset: 16px（--grid-layout-inset）

z-index 階層（CSS Custom Properties 実測値）

TokenValue用途
--mer-z-index-menu1100メニュー
--mer-z-index-navigation1200ナビゲーション
--mer-z-index-modal1400モーダル
--mer-z-index-snackbar1500スナックバー通知
--mer-z-index-tooltip1600ツールチップ
Responsive behaviourRead the full spec

タッチターゲット

  • 最小サイズ: 44px x 44px（WCAG基準）

フォントサイズの調整

  • 入力欄は 16px を維持（iOS のズーム防止）
  • 本文は 15px を基準とし、モバイルでも変更しない方針

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-mercari {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #333333;
  --heading-color: #333333;
  --link-color: #0073cc;
  --link-hover-color: #005699;
  --border-color: #dadada;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(51,51,51,0.06);
  --card-hover-shadow: 0 6px 18px rgba(51,51,51,0.12);
  --header-bg: #333333;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #707070;
  --button-bg: #ff333f;
  --button-text-color: #000000;
  --button-hover-bg: #ff000f;
  --button-border: none;
  --button-border-radius: 4px;
  --button-secondary-bg: #f3f3f3;
  --button-secondary-text-color: #333333;
  --button-secondary-hover-bg: #e7e7e7;
  --button-secondary-border: 1px solid #dadada;
  --prompt-bg: #f5f5f5;
  --prompt-text-color: #333333;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 4px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

Where this came from

Source document
jp/design-md/mercari/DESIGN.md · 5.8 KB
Repository
kzhrknt/awesome-design-md-jp
Licence
MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.