Rakuten

楽天市場（https://www.rakuten.co.jp/）のデザイン仕様書。

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

16tokens
10type steps
2radius steps
4pxspacing base

Rakuten, in one page

Do's and don'ts

Do

  • メイリオ先頭の和文優先フォントスタックを維持する
  • 商品情報は高密度に配置し、一覧性を重視する
  • 価格表示は #bf0000（楽天レッド）で統一する
  • ポイント表示は #ff8c00 で統一する
  • ボーダー（#dddddd）で要素を区切る

Don't

  • line-height を 1.5 以上に広げない（楽天市場の情報密度が崩れる）
  • 角丸を多用しない（楽天市場はシャープな矩形が基本）
  • box-shadow を多用しない（フラットなボーダー区切りが基本）
  • 欧文フォントを和文フォントの前に配置しない（和文優先のスタック）
  • CSS Custom Properties を使わない（楽天市場は直書きスタイルが基本）

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.

楽天市場のデザインシステムに従って、商品一覧グリッドを作成してください。
- ブランドカラー: #bf0000（楽天レッド）
- フォント: Meiryo, "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif
- 本文サイズ: 12px / line-height: 1.1
- 価格表示: #bf0000 / 14px / 700
- セール価格: #bf0000 / 16px / 700
- ポイント表示: #ff8c00
- ボーダー: #dddddd
- 角丸: なし（0px）
- 情報密度: 極めて高く。余白は最小限に

The specification

Colour paletteRead the full spec

Primary（ブランドカラー）

  • 楽天レッド (#bf0000): ブランドカラー。ヘッダー背景、CTA、セール表示など全面的に使用
  • 楽天レッド Dark (#990000): ホバー・プレス時

Semantic（意味的な色）

  • Danger / Sale (#bf0000): セール価格、値引き表示。ブランドカラーと兼用
  • Warning (#ff8c00): ポイント表示、注意喚起
  • Success (#008000): 在庫あり、送料無料

Neutral（ニュートラル）

  • Text Primary (#666666): 本文テキスト（body デフォルト）
  • Text Dark (#333333): 見出し、強調テキスト
  • Text Secondary (#999999): 補足テキスト、注釈
  • Text Disabled (#cccccc): 無効状態のテキスト
  • Border (#dddddd): 区切り線、テーブル罫線
  • Border Light (#eeeeee): 薄い区切り
  • Background (#ffffff): ページ背景
  • Background Gray (#f6f6f6): セクション背景、ストライプ行
  • Surface (#ffffff): カード、商品枠
Type scaleRead the full spec

3.1 和文フォント

  • ゴシック体: Meiryo（メイリオ）、ヒラギノ角ゴ ProN
  • 明朝体: 使用なし

3.2 欧文フォント

  • サンセリフ: MS PGothic（和文フォント内の欧文グリフに依存）
  • 等幅: 特に指定なし

3.3 font-family 指定

/* 本文（body） */
font-family: Meiryo, "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;

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

  • メイリオを先頭に置く和文優先のスタック
  • Windows環境（メイリオ）→ macOS環境（ヒラギノ）→ レガシーWindows（MS Pゴシック）の順
  • 欧文専用フォントは指定せず、和文フォント内の欧文グリフを使用

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

RoleFontSizeWeightLine HeightLetter Spacing備考
Heading 2 (Ranking)Meiryo20px60028px (×1.4)normal「人気商品ランキング」等
Heading 2 (History)Meiryo20px60026px (×1.3)normal「最近チェックした商品」等
Heading 2 (Genre)Meiryo16px70017.6px (×1.1)normal「ジャンル」等
BodyMeiryo12px40013.2px (×1.1)normal本文テキスト
PriceMeiryo14px700—normal商品価格
Price (Sale)Meiryo16px700—normalセール価格（赤字）
CaptionMeiryo10px40011px (×1.1)normal最小テキスト、注釈

3.5 行間・字間

  • 本文の行間 (line-height): 1.1（極めてタイト。情報密度を最大化する設計）
  • 見出しの行間: 1.1〜1.4（見出しごとに異なる）
  • 本文の字間 (letter-spacing): normal
  • 見出しの字間: normal

注意事項:

  • body の line-height 1.1 は日本語としては極めてタイトであり、一般的な推奨値（1.5以上）を大きく下回る
  • これは楽天市場の「画面あたりの情報量最大化」という設計思想に基づく意図的な設定

3.6 禁則処理・改行ルール

/* 実測値 — 特別な指定なし（ブラウザデフォルト） */
word-break: normal;
overflow-wrap: normal;

3.7 OpenType 機能

/* palt は使用されていない */
font-feature-settings: normal;
  • プロポーショナル字詰め（palt）は未使用
  • カーニング（kern）も特に指定なし

3.8 縦書き

該当なし

Components and layoutRead the full spec

Buttons

Primary（購入ボタン）

  • Background: #bf0000
  • Text: #ffffff
  • Padding: 8px 16px
  • Border Radius: 4px
  • Font Size: 14px
  • Font Weight: 700

Secondary（カートに入れる）

  • Background: #ffffff
  • Text: #bf0000
  • Border: 2px solid #bf0000
  • Padding: 8px 16px
  • Border Radius: 4px

Point（ポイント付与）

  • Background: #ff8c00
  • Text: #ffffff
  • Padding: 4px 12px
  • Border Radius: 4px
  • Font Size: 12px
  • Font Weight: 700

Inputs

  • Background: #ffffff
  • Border: 1px solid #cccccc
  • Border (focus): 1px solid #bf0000
  • Border Radius: 4px
  • Padding: 6px 8px
  • Font Size: 14px
  • Height: 32px

Cards（商品カード）

  • Background: #ffffff
  • Border: 1px solid #dddddd
  • Border Radius: 0px（角丸なし）
  • Padding: 8px
  • Shadow: none（フラット）

Spacing Scale

TokenValue
XS4px
S8px
M12px
L16px
XL24px
XXL32px

Container

  • Max Width: 1120px
  • Padding (horizontal): 0px（コンテナ外側に余白を取らない設計）

Grid

  • Columns: 可変（商品グリッドは4〜6列）
  • Gutter: 8px〜12px
LevelShadow用途
0noneほぼすべての要素（フラットデザイン）
10 1px 3px rgba(0,0,0,0.12)ドロップダウンメニュー
20 2px 6px rgba(0,0,0,0.15)モーダル
  • 楽天市場はフラットな構造が基本。影（box-shadow）の使用は極めて限定的
  • 要素の区切りはボーダー（#dddddd）で表現する
Responsive behaviourRead the full spec

Breakpoints

NameWidth説明
Mobile≤ 767pxモバイルレイアウト（1列）
Tablet≤ 1023pxタブレットレイアウト（2〜3列）
Desktop> 1023pxデスクトップレイアウト（4〜6列）

タッチターゲット

  • 最小サイズ: 楽天市場では WCAG 基準の 44px を満たさないリンクが多数存在

フォントサイズの調整

  • モバイルでも本文 12px を維持する傾向がある（情報密度優先）

Drop-in CSS variables

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

body.theme-rakuten {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #525252;
  --heading-color: #525252;
  --link-color: #bf0000;
  --link-hover-color: #8c0000;
  --border-color: #e0e0e0;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(82,82,82,0.06);
  --card-hover-shadow: 0 6px 18px rgba(82,82,82,0.12);
  --header-bg: #525252;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #717171;
  --button-bg: #bf0000;
  --button-text-color: #ffffff;
  --button-hover-bg: #8c0000;
  --button-border: none;
  --button-border-radius: 4px;
  --button-secondary-bg: #f5f5f5;
  --button-secondary-text-color: #525252;
  --button-secondary-hover-bg: #eaeaea;
  --button-secondary-border: 1px solid #e0e0e0;
  --prompt-bg: #f6f6f6;
  --prompt-text-color: #525252;
  --base-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --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/rakuten/DESIGN.md · 5.4 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.