MIKIMOTO（ミキモト） DESIGN.md

MIKIMOTO（https://mikimoto.com/jp-ja）のデザイン仕様書。 1893年創業、養殖真珠の発明者・御木本幸吉が興した日本発のラグジュアリージュエリーブランド。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白の余白とシャンパンゴールド #e5d3a9 のCTAで真珠の光沢と品格を表現。見出しにセリフ体（Noto Serif JP）、本文にサンセリフ体（Noto Sans Japanese）というクラシックラグジュアリーの二書体構成
• 密度: 本文の line-height は 2.0 と極めて広い。情報を詰め込まず、ゆとりある呼吸感で高級感を演出
• キーワード: ラグジュアリー、真珠の光沢、シャンパンゴールド、セリフ見出し、ワイドトラッキング、品格ある余白
• 特徴:
  • 見出しにセリフ体、本文にサンセリフ体というラグジュアリーブランドの定石を踏襲。Noto Serif JP の端正な明朝体が格式を、Noto Sans Japanese のゴシック体が現代性を担う
  • ブランドカラーは #e5d3a9（シャンパンゴールド）。真珠の温かな光沢を連想させる CTA の背景色。ボーダーには深みのある #b58f36 を使用
  • 色数を極限まで絞る: 黒 #000000・白 #ffffff・金 #e5d3a9 の3色のみ。彩度のある色（赤・青・緑）は一切使わない
  • letter-spacing 2px のワイドトラッキングをボタンラベル・カテゴリラベル・バックボタンに適用。余裕のある字間がラグジュアリーブランドの落ち着きを表現
  • サーフェスに #f2ebdc（ライトゴールド）を使い、真珠のような温かみのある面を作る
  • font-feature-settings: normal（palt 未使用）。字詰めせず、均等な字間を保つ
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand --- Gold

• Champagne Gold (#e5d3a9): メインのブランドカラー。主要 CTA の背景色。真珠の温かな光沢を表現
• Deep Gold (#b58f36): CTA のボーダー色。シャンパンゴールドに深みと輪郭を与える
• Light Gold Surface (#f2ebdc): アクティブ状態のタブ背景、カード面。真珠のような温白の面

CTA / Buttons

• Primary CTA: 背景 #e5d3a9 / 文字 #000000 / border 1px solid #b58f36 / radius 4px / padding 19px 16px 20px / 12px / weight 400 / letter-spacing 2px
• Secondary CTA（推奨実装）: 背景 transparent / 文字 #000000 / border 1px solid #000000 / radius 4px / padding 19px 16px 20px / 12px / weight 400 / letter-spacing 2px
• Text Link: 文字 #000000 / underline / 14px / weight 400

Neutral --- Monochrome

Semantic（推奨値）

実サイトにはエラー／成功色は表面化していない。ラグジュアリーブランドの抑制されたトーンに合わせた補完値:

• Danger: #8b2020 程度の深いレッド（派手にしない）
• Success: #2d6a4f 程度の落ち着いたグリーン
• Warning: #b58f36（Deep Gold を兼用）

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文）: Noto Sans Japanese を使用。本文・ナビ・フォーム・UI 全般に適用
• 明朝体（見出し）: Noto Serif JP を使用。h1・h2 等の見出しに適用し、格式と高級感を表現
• フォールバック: sans-serif（ゴシック体）/ serif（明朝体）

3.2 欧文フォント

• サンセリフ: Noto Sans Japanese の欧文グリフを使用。専用の欧文書体は持たない
• セリフ: Noto Serif JP の欧文グリフを使用
• 純粋な欧文書体（Helvetica Neue, Inter 等）は font-family に含まれない

3.3 font-family 指定

css/* 見出し（h1, h2） */
font-family: "Noto Serif JP", serif;

/* 本文・UI（body, p, a, span, button, nav, input, select, label） */
font-family: "Noto Sans Japanese", sans-serif;

/* NotoSans 表記（ナビメニュー内） */
font-family: NotoSans, sans-serif;

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

• 見出しは Noto Serif JP のみ指定し、フォールバックは serif。明朝体の品格を優先
• 本文は Noto Sans Japanese のみ指定し、フォールバックは sans-serif。可読性を優先
• ナビの一部に NotoSans（スペースなし）が使われている。同一フォントの別名表記
• Google Fonts から両方読み込み可能。ウェイト 400 のみ使用（ボールド不使用がブランドの特徴）

代替フォント注記: Noto Serif JP / Noto Sans JP はいずれも Google Fonts で無料配信されており、ライセンス制限なく preview.html でも使用可能。

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

実測値（トップページ、2026-05-09 取得）

3.5 行間・字間

行間 (line-height) --- 実測:

• 本文 (14px): 2.0（28px / 14px）--- 極めて広い行間。ラグジュアリーブランドの呼吸感
• フッター (12px): 1.92（23px / 12px）--- 本文に準じた広さ
• CTA ラベル (12px): 1.5（18px / 12px）
• 見出し H1 (42px): 1.33（56px / 42px）--- タイトに引き締め
• 見出し H2 (28px): 1.36（38px / 28px）
• ナビ (16px): 1.2（19.2px / 16px）--- コンパクトなナビ高

字間 (letter-spacing) --- 実測:

• 本文・見出し: normal（0）。大半の要素はデフォルトの字間を使用
• CTA ラベル・カテゴリラベル・Back ボタン (12px): 2px --- ラグジュアリーブランド特有のワイドトラッキング。小さなラベルに余裕と格式を持たせる
• 言語セレクター: 1px --- CTA ほどではないが、やや広げる

ガイドライン:

• 日本語本文は line-height 2.0 が MIKIMOTO の基本リズム。1.75 以下は使わない
• 見出し（Noto Serif JP）は letter-spacing normal のまま。明朝体の自然なメトリクスを活かす
• UI ラベル・ボタン文字には letter-spacing 2px を適用。これがラグジュアリー感の核心
• ウェイトは全要素 400（Regular）のみ。ボールド（600/700）を使わないことで、繊細さと品格を表現

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;            /* 既定の日本語禁則 */
overflow-wrap: break-word;     /* 長い英単語の折り返し */
line-break: strict;            /* 厳格な禁則処理 */

• ヒーロー見出しは手動改行で位置を制御
• CTA ラベルは white-space: nowrap

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• Noto Serif JP / Noto Sans Japanese のデフォルトメトリクスに任せる方針
• 明朝体見出しに palt を入れると品格が崩れるため、意図的に normal を維持していると推測

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（ゴールド角丸） --- "ミキモトホーム"・"マイアカウント"・"登録する"

• Background: #e5d3a9（シャンパンゴールド）
• Text: #000000
• Border: 1px solid #b58f36（ディープゴールド）
• Padding: 19px 16px 20px（上下に大きな余白）
• Border Radius: 4px（控えめな角丸）
• Font: Noto Sans Japanese, 12px, weight 400
• Letter Spacing: 2px（ワイドトラッキング）

Secondary CTA（黒ボーダー角丸） --- 推奨実装

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Padding: 19px 16px 20px
• Border Radius: 4px
• Font: Noto Sans Japanese, 12px, weight 400
• Letter Spacing: 2px

Text Link --- 本文中リンク

• Background: transparent
• Text: #000000
• Padding: 0
• Font: Noto Sans Japanese, 14px, weight 400
• Border: none（必要に応じて underline）

Inputs

• Background: #ffffff
• Border: 1px solid #595959
• Border (focus): 1px solid #000000（推奨）
• Border Radius: 4px
• Padding: 12px 16px
• Font: Noto Sans Japanese, 14px, weight 400
• Height: 44px

Select

• Background: #ffffff
• Border: 1px solid #000000
• Border Radius: 4px
• Font: Noto Sans Japanese, 12px, weight 400
• Color: #595959

Cards / Surfaces

• Background: #ffffff（メイン）/ #f2ebdc（ライトゴールドの面）
• Border: none（影と面色で階層を表現）
• Border Radius: 0px（直角が基本。ラグジュアリーブランドの端正さ）
• Shadow: 基本フラット（box-shadow: none）

Header

• Background: #ffffff
• Border Bottom: なし
• Position: fixed top: 0
• z-index: 50 程度

Footer

• Background: #ffffff
• Font: Noto Sans Japanese, 12px, weight 400
• Line Height: 1.92
• Padding: 48px 24px

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1200px（推奨）
• Padding (horizontal): mobile 16px / desktop 24~40px

Border Radius Scale

Grid

• シングルカラム中心のレイアウト（ジュエリーの大きなビジュアルを活かす）
• 商品グリッド: 2~4 カラム（Flexbox / CSS Grid）
• Gutter: 16~24px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• ラグジュアリーブランドは影を極力排し、余白とサーフェス色で階層を表現する
• 影を使う場合は 非常に薄く（opacity 0.04~0.08）。存在を意識させない控えめさが鍵
• #f2ebdc（ライトゴールド面）と #ffffff（白）の対比でセクションの区切りを作る

7. Do's and Don'ts

Do（推奨）

• 見出しは Noto Serif JP（明朝体）、本文は Noto Sans Japanese（ゴシック体） の二書体構成を守る
• 本文の line-height は 2.0 を基本にする（14px で 28px）
• CTA ラベル・カテゴリラベルには letter-spacing 2px を適用し、ラグジュアリーな余裕を出す
• 主要 CTA は #e5d3a9（シャンパンゴールド）背景 + #b58f36 ボーダー
• ウェイトは 全要素 400（Regular）のみ。ボールドを使わない繊細さがブランドの特徴
• カードやセクションは 直角（border-radius 0） を基本にする。角丸は CTA と入力欄のみ
• 色は 黒・白・金の3色に限定する。彩度のある色を加えない

Don't（禁止）

• 見出しに ゴシック体（サンセリフ）を使わない --- セリフ体の品格が失われる
• font-weight 600 / 700 を使わない --- MIKIMOTO は全要素 weight 400。太字は品格を損なう
• 本文に line-height 1.75 以下を使わない（ラグジュアリーの余白感が崩れる）
• 彩度の高い色（赤 #ff0000、青 #0066ff、緑 #00cc00 等）を使わない --- 金・黒・白のみ
• CTA に ピル形状（border-radius 9999px）を使わない --- MIKIMOTO は 4px の控えめな角丸
• CTA の letter-spacing を normal にしない --- 2px のワイドトラッキングが必須
• 大きな box-shadow を使わない --- ラグジュアリーブランドは影を極力排する
• カードに 丸い角丸（8px 以上）を使わない --- 直角が基本
• palt を 見出しに適用しない --- 明朝体の均等な字間が品格を生む

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• ヒーロー H1: 42px -> 28~32px
• セクション H2: 28px -> 20~24px
• 本文サイズは 14px を維持（line-height も 2.0 維持）
• 商品グリッドは 2 カラム -> 1 カラム
• ナビはハンバーガーメニューへ切替

タッチターゲット

• 主要 CTA: 高さ 56px 以上（padding 19px 16px 20px + 12px font + 1.5 line-height = 約 57px）
• WCAG 基準の 44px を十分に確保

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Champagne Gold (CTA BG): #e5d3a9
Deep Gold (CTA Border): #b58f36
Light Gold Surface: #f2ebdc
Pure Black (Text): #000000
Muted Gray: #595959
White (BG): #ffffff

Heading Font: "Noto Serif JP", serif
Body Font: "Noto Sans Japanese", sans-serif

H1: 42px / weight 400 / line-height 1.33 / letter-spacing normal / Noto Serif JP
H2: 28px / weight 400 / line-height 1.36 / letter-spacing normal / Noto Serif JP
Body: 14px / weight 400 / line-height 2.0 / letter-spacing normal / Noto Sans Japanese
CTA Label: 12px / weight 400 / line-height 1.5 / letter-spacing 2px / Noto Sans Japanese
Footer: 12px / weight 400 / line-height 1.92 / Noto Sans Japanese

Border Radius: 0px（カード）/ 4px（CTA・入力欄）
Shadow: 基本 none。階層は #f2ebdc サーフェスと余白で表現
Weight: 全要素 400 のみ（ボールド不使用）

プロンプト例

MIKIMOTO のデザインに従って、ジュエリーコレクションの一覧ページを作成してください。
- 見出しフォント: "Noto Serif JP", serif（明朝体）
- 本文フォント: "Noto Sans Japanese", sans-serif（ゴシック体）
- コレクション名（H1）: 42px / weight 400 / line-height 1.33 / Noto Serif JP
- セクション見出し（H2）: 28px / weight 400 / line-height 1.36 / Noto Serif JP
- 本文: 14px / weight 400 / line-height 2.0 / Noto Sans Japanese / color #000000
- 主要 CTA: 背景 #e5d3a9（シャンパンゴールド）/ 文字 #000000 / border 1px solid #b58f36 / radius 4px / padding 19px 16px 20px / 12px / weight 400 / letter-spacing 2px
- セカンダリ CTA: 背景 transparent / 文字 #000000 / border 1px solid #000000 / radius 4px / 12px / weight 400 / letter-spacing 2px
- カード: 背景 #ffffff / border-radius 0（直角）/ shadow なし
- サーフェス: #f2ebdc（ライトゴールド）でセクション背景を分ける
- ボーダー: なし（余白と面色で区切る）
- font-weight は全要素 400 のみ（ボールド禁止）
- 彩度のある色（赤・青・緑）は使わない。黒・白・金のみ
- CTA ラベルの letter-spacing は必ず 2px