---
version: alpha
name: MUJI（無印良品）
description: "「ブランドなき品質」を掲げる日本のライフスタイルブランド。ベージュ×チャコール×白を基軸にした徹底的なミニマリズムと、Ma（間）の概念に基づく余白の設計が特徴。"
sources:
  - https://www.muji.com/jp/ja/store
  - https://www.muji.us/cdn/shop/t/987/assets/theme.css
  - https://k-lifestyle-blog.com/muji-font-design-guide/
  - https://www.brandcolorcode.com/muji
notes:
  - Japanストアのカラー頻度分析（HTML直接解析）: #3C3C43（145回）, #E0CEAA（54回）, #FFFFFF（89回）, #9D9DA0（15回）, #6D6D72（6回）, #7F0019（3回）。
  - ベージュ #E0CEAA は日本ストア固有の署名カラー。USストアでは使用頻度が低く、日本市場向けのブランドシグネチャーと判断。
  - USストアのメイン CSS（Shopify テーマ）から --color-body-text, --color-body, ボタンスタイル, フォントを直接取得。
  - ボタン variant 名は Next.js クラス名から逆引き: style--black / style--stroke / style--beige / style--disabled。
  - Japanストア Next.js CSS ファイルは CDN で直接アクセス不可。デザイントークンは HTML 頻度分析 + USサイト CSS + ブランド資料の三角測量。
  - フォントについて: ロゴ英字 Helvetica、パッケージ和文は Morisawa A-OTF Gothic MB101（2024年パッケージ改訂後は游ゴシック）。Web 表示フォントは Roboto (US) + システムサンセリフ。

colors:
  brand-red: "#7F0019"
  brand-beige: "#E0CEAA"
  text-primary: "#3C3C43"
  text-secondary: "#6D6D72"
  text-muted: "#9D9DA0"
  surface-white: "#FFFFFF"
  surface-beige-light: "#F5EBE0"
  surface-gray-light: "#F6F6F6"
  surface-gray-mid: "#DEDEDE"
  border: "#DEDEDE"
  black: "#000000"
  error: "#F05D5D"
  success: "#51A551"

typography:
  display:
    fontFamily: '"Helvetica Neue", "Helvetica", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif'
    fontSize: "2.23rem"
    fontWeight: 700
    lineHeight: 1.2
  h1:
    fontSize: "1.84rem"
    fontWeight: 700
    lineHeight: 1.3
  h2:
    fontSize: "1.71rem"
    fontWeight: 700
    lineHeight: 1.35
  h3:
    fontSize: "1.575rem"
    fontWeight: 700
    lineHeight: 1.4
  h4:
    fontSize: "1.3125rem"
    fontWeight: 700
    lineHeight: 1.4
  body:
    fontFamily: '"Helvetica Neue", "Helvetica", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif'
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.6
  body-medium:
    fontSize: "0.984rem"
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontSize: "0.82rem"
    fontWeight: 400
    lineHeight: 1.4
  small:
    fontSize: "0.766rem"
    fontWeight: 400
    lineHeight: 1.4
  price:
    fontSize: "0.875rem"
    fontWeight: 700
    lineHeight: 1.2

rounded:
  none: "0"
  sharp: "2px"
  default: "3px"
  medium: "6px"
  large: "16px"
  pill: "75px"
  full: "100%"

spacing:
  gutter-mobile: "10px"
  gutter-tablet: "15px"
  gutter-desktop: "25px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  xxl: "64px"
  section: "80px"

components:
  button-primary:
    backgroundColor: "#000000"
    color: "#FFFFFF"
    borderRadius: "3px"
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontWeight: 700
    fontSize: "0.875rem"
    letterSpacing: "0.01em"
    padding: "0.625rem 1rem"
    minWidth: "160px"
    hover-background: "#333333"
  button-stroke:
    backgroundColor: "transparent"
    color: "#3C3C43"
    border: "1px solid #3C3C43"
    borderRadius: "3px"
    fontWeight: 700
    fontSize: "0.875rem"
    hover-borderColor: "#000000"
    hover-color: "#000000"
  button-beige:
    backgroundColor: "#E0CEAA"
    color: "#3C3C43"
    borderRadius: "3px"
    fontWeight: 700
    fontSize: "0.875rem"
    hover-backgroundColor: "#C8B690"
  button-disabled:
    backgroundColor: "#DEDEDE"
    color: "#9D9DA0"
    borderRadius: "3px"
    cursor: "not-allowed"
  card:
    backgroundColor: "#FFFFFF"
    borderRadius: "0"
    imageAspectRatio: "1:1"
    priceColor: "#3C3C43"
    labelFontSize: "0.82rem"
    priceLayout: "bottom aligned, right-side heart icon"
  navbar:
    backgroundColor: "#FFFFFF"
    borderBottom: "1px solid #DEDEDE"
    height: "56px"
    linkColor: "#3C3C43"
    logoColor: "#7F0019"
  input:
    border: "1px solid #9D9DA0"
    borderRadius: "3px"
    focusBorder: "#3C3C43"
    backgroundColor: "#FFFFFF"
    fontSize: "0.875rem"
    padding: "0.6em 0.75em"
  tag-label:
    backgroundColor: "#E0CEAA"
    color: "#3C3C43"
    borderRadius: "0"
    fontSize: "0.766rem"
    padding: "0.15em 0.5em"
---

## Overview

MUJI（無印良品 / Mujirushi Ryohin）は「ブランドなき品質品」を意味する日本のライフスタイルブランド（良品計画）。1980年創業。デジタルデザインもプロダクトデザインと同じ哲学を継承する：**余分なものを排除し、機能だけを残す**。

ビジュアルシステムは三色構成:
1. **ベージュ** (`#E0CEAA`) — 暖かみのある素材感、日本の自然素材への敬意
2. **チャコール** (`#3C3C43`) — 高コントラスト・高可読性のテキスト基盤
3. **白** (`#FFFFFF`) — 余白。「間（Ma）」の体現

**ブランドレッド** (`#7F0019`) はロゴとリンクアクセントのみに絞って使用。大面積への使用は避ける。


## Colors

| トークン | 値 | 出典 | 用途 |
|---|---|---|---|
| `brand-red` | `#7F0019` | ブランド公式 / US CSS | ロゴ・リンク・極小アクセント。**面積を拡大しない** |
| `brand-beige` | `#E0CEAA` | JP HTML 頻度分析（54回） | beige ボタン、バッジ、セクション背景アクセント |
| `text-primary` | `#3C3C43` | JP HTML 頻度分析（145回） | 見出し・本文・UIテキスト全般 |
| `text-secondary` | `#6D6D72` | JP HTML（6回） | サブテキスト、メタ情報 |
| `text-muted` | `#9D9DA0` | JP HTML（15回） | プレースホルダー、ディスエーブルラベル |
| `surface-white` | `#FFFFFF` | JP/US 共通 | 主背景、カード背景 |
| `surface-gray-light` | `#F6F6F6` | US CSS | フッター背景、hover 背景 |
| `border` | `#DEDEDE` | JP HTML（2回） | 区切り線、input 枠 |
| `black` | `#000000` | US CSS | 主要ボタン背景 |
| `error` | `#F05D5D` | US CSS | エラーメッセージ |
| `success` | `#51A551` | US CSS | 在庫あり・完了状態 |

**使ってはいけない組み合わせ**:
- `brand-red` を大面積背景に使う（ブランドの節度に反する）
- `brand-beige` と `surface-white` を隣接させず、必ずコントラスト確認


## Typography

### フォントスタック

MUJI はパンローマンな読みやすさを優先する。特定のウェブフォントは使用せずシステムフォントに依存（Shopify US サイトでは Roboto / Roboto Condensed を使用）。

**推奨ウェブ実装スタック（Latin + Japanese）**:
```css
font-family: "Helvetica Neue", Helvetica, Arial,
             "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Yu Gothic", "YuGothic", Meiryo, sans-serif;
```

日本語 `letter-spacing` は `-0.02em` 程度で詰めると MUJI らしい密度感になる。

### タイポグラフィスケール

| ロール | サイズ | ウェイト | 用途 |
|---|---|---|---|
| Display | 2.23rem | 700 | スライドショー見出し |
| H1 | 1.84rem | 700 | ページタイトル |
| H2 | 1.71rem | 700 | セクション見出し |
| H3 | 1.575rem | 700 | サブセクション |
| H4 | 1.31rem | 700 | カード見出し・特集タイトル |
| Body Medium | 0.984rem | 400 | リード文 |
| Body | 0.875rem | 400 | 本文・商品説明 |
| Label | 0.82rem | 400 | フィールドラベル |
| Small | 0.766rem | 400 | 補足・法的表記 |
| Price | 0.875rem | 700 | 価格表示 |

USサイト変数: `--font-size-body: .875rem`, `--font-size-heading-large: 2.23125rem`


## Layout

- **日本ストア**: Next.js (v2.81.0) アプリ
- **USストア**: Shopify カスタムテーマ
- **コンテナガター**: モバイル 10px / タブレット 15px / デスクトップ 25px
- **商品グリッド**: 4カラム（デスクトップ）/ 2カラム（タブレット）/ 2カラム（モバイル）
- カードは **正方形画像**（aspect-ratio 1:1）が基本
- セクション間余白: 64px〜80px（デスクトップ）

### ページ構造（日本ストア）

```
AppBanner（アプリ誘導帯）
Header
  ロゴ（左） | 検索 + アイコン（右）
DesktopMenu / MobileMenu（カテゴリ展開）
---
Hero / キャンペーンバナー（スライドショー）
新商品セクション（カードグリッド）
いろいろな無印良品（活動・特集リンク）
よみもの（ブログ・スタッフ記事）
---
Footer
  ロゴ | サイトグループリンク | SNSボタン | ポリシーリンク | コピーライト
```

カテゴリナビゲーション例: SALE / 新商品 / 婦人・レディース / 紳士・メンズ / こども / 収納・家具・家電 / 生活雑貨 / コスメ・ケア / 食品 / ReMUJI / 特集 / 読みもの


## Components

### ボタン

3 つのビジュアルバリアント + 1 つのステート:

**Black（プライマリ）**
```css
background: #000;
color: #fff;
border-radius: 3px;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.01em;
padding: 0.625rem 1rem;
min-width: 160px;
```
hover: `background: #333`

**Stroke（セカンダリ）**
```css
background: transparent;
border: 1px solid #3C3C43;
color: #3C3C43;
border-radius: 3px;
```
hover: `border-color: #000; color: #000`

**Beige（ブランドアクセント）**
```css
background: #E0CEAA;
color: #3C3C43;
border-radius: 3px;
```
「もっと見る」など、コンテンツ拡張 CTA に使用。

**サイズ**:
- Small: `min-width: 96px`
- Medium: `min-width: 160px`（デフォルト）
- Large: `min-width: 240px`

### 商品カード（CardDesktopS / CardMobileS）

```
[正方形画像 1:1]
[ブランドラベル（任意）]
[商品名テキスト]
[サイズテキスト（任意）]
[カラーボタン（●●○）（任意）]
[価格] ♡ （wishlist）
```

- 画像 hover: overlay 表示なし、シンプルフェード
- テキストは左揃え、価格は太字
- 枠線なし（border-radius: 0）
- ラベル（NEW / SALE）: ベージュ背景、角なし

### ナビゲーション

```
[MUJI ロゴ（赤）]  [検索] [ハート] [カート]
（アンダーライン → カテゴリドロワー展開）
```

- Header 高さ: 56px
- ロゴは SVG、clip-path で形成
- アイコンボタン: 背景なし、24×24px

### 入力フィールド

```css
border: 1px solid #9D9DA0;
border-radius: 3px;
background: #fff;
padding: 0.6em 0.75em;
font-size: 0.875rem;
```
focus: `border-color: #3C3C43`


## Imagery

**写真スタイル**:
- 白または薄ベージュの背景に商品を単体配置（商品写真）
- 生活シーン写真は明るい自然光、モノトーン・ナチュラルな空間
- 過剰なレタッチは行わず素材感を残す
- テキストオーバーレイは最小限（バナー見出しのみ）

**カラー写真の原則**:
- 商品写真はカラーニュートラル背景 (`#FFFFFF` / `#F6F6F6`)
- キャンペーンバナーも派手なグラデーションを使わない
- アパレルは着用シーン写真と単品写真を使い分ける

**アイコン**:
- シンプルな stroke アイコン（塗り潰しなし）
- SVG、24×24px 基準
- 色: `#3C3C43`（通常）/ `#7F0019`（お気に入り・アクティブ状態）


## Logo And Usage

- ロゴは「MUJI」全大文字テキスト + SVG clip-path で構成
- カラー: `#7F0019`（ブランドレッド）、白背景のみ
- 白地上の赤ロゴがデフォルト。ダーク背景では白ロゴを使用
- 最小サイズ: 幅 60px 以上
- クリアスペース: ロゴ高さの 50% 以上
- 「無印良品」の和文ロゴと「MUJI」の英文ロゴは独立した資産

**禁止**:
- `#7F0019` 以外のカラーでの使用
- ロゴの変形・エフェクト・グラデーション
- ベージュ背景上への配置（コントラスト不足）


## Do's and Don'ts

### Do
- ボタンの `border-radius` は 3px 以下に保つ（丸みを出さない）
- `brand-beige` (#E0CEAA) は CTA や見出し装飾に積極的に使う
- 余白を広めに取る（セクション間 64〜80px）
- 商品カードは必ず正方形画像で統一する
- 日本語テキストの `letter-spacing` は `-0.02em` を基準にする
- 価格は `font-weight: 700` で強調
- エラー・成功は専用色（`#F05D5D` / `#51A551`）を使う
- フォントはシステムフォントスタックで十分（ウェブフォント不要）

### Don't
- `brand-red` (#7F0019) をボタン背景・大面積に使う
- グラデーションやシャドウを過剰に使う（`box-shadow` は hover 時のみ）
- border-radius を 6px 超で使う（カードや入力フィールドは特に注意）
- 黒 (#000) 以外の色をプライマリボタンに使う
- カード画像に 16:9 など縦横比の異なる比率を混在させる
- テキストリンクに下線を常時表示する（hover 時のみ）
- 装飾的なフォント・アイコンフォントを使う