IDÉE（イデー） DESIGN.md

Japan

IDÉE SHOP Online 公式サイト（https://www.idee-online.com/）のデザイン仕様書。 1982 年創業、自由が丘発の家具・インテリアブランド。"Life in Art" を掲げ、自社オリジナル家具とキュレーション雑貨を展開。実サイトの computed style 実測（2026-05-07 取得）に基づく。

Raw DESIGN.md

At a glance

Group: Japan
Main color: #b53939Red design systems
Fonts: YakuHanJPHelvetica + 游ゴシック Pr6n

Colors in this file

#001646
: 純白背景に
#111111
Brand Black
#ffffff
Page Background
#888888
CTA Border
#000000
Header Black
#b53939
Unnamed
#3a7c4f
Unnamed

IDÉE SHOP Online 公式サイト（https://www.idee-online.com/）のデザイン仕様書。 1982 年創業、自由が丘発の家具・インテリアブランド。"Life in Art" を掲げ、自社オリジナル家具とキュレーション雑貨を展開。実サイトの computed style 実測（2026-05-07 取得）に基づく。

1. Visual Theme & Atmosphere

デザイン方針: 純白背景に深紺 #001646（ミッドナイトブルー）をブランド色として据え、Helvetica + 游ゴシック Pr6n（Adobe Fonts）で組む抑制されたモダン・エディトリアル
密度: 商品写真を大きく敷き詰めるグリッド。情報は最小限に絞り込み、商品ビジュアルが主役。情報密度低、写真密度高
キーワード: 純白背景、深紺アクセント、Helvetica + 游ゴシック Pr6n、letter-spacing wide、palt、line-height 1.0 のタイト見出し、長方形 48px ライン CTA、角丸ゼロ、YakuHanJP 約物処理
特徴:
- Helvetica Neue を欧文先頭 + yu-gothic-pr6n（Adobe Fonts） を和文に採用 — エディター誌面のようなクリーン構成
- YakuHanJP を最先頭に置き、約物（カッコ・ハイフン）の半角アキを自動詰め — 日本語混在テキストの仕上がりが一段精緻になる
- font-feature-settings: "palt" を全要素に適用 — 和文プロポーショナル詰め
- letter-spacing 0.6px (≈+0.04em) を body・見出し共通で適用 — 字間を広げて Helvetica の素直な字面を保つ
- line-height: 1.0（h1 / body）— 見出しと体裁要素は詰めて組むことで、エディトリアル誌面のような視覚的シャープさを生む
- CTA は line-height 48px / 1px solid #888 のライン枠で長方形に組む（border-radius 0）
- ナビ・ヘッダーの label は 11px / weight 400 / letter-spacing 0.5px の極小英大文字組
- 深紺 #001646 はログインボタン背景・"NEW ARRIVALS" バッジ背景・フッタ面色として登場 — ブランド・サーフェス
- 角丸はすべて 0px（直角矩形を貫く）
- ライトモード前提（ダーク切替なし）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。 IDÉE は白 + 深紺 + 黒文字の極めて抑制された 3 色構成。

Brand

Primary Navy / Midnight Blue (#001646): IDÉE のブランドカラー（rgb(0, 22, 70)）。ログインボタン背景、"NEW ARRIVALS" バッジ、フッタ面色、最重要のブランド色
Brand Black (#111111): 本文・ナビ・見出しの基調色（rgb(17, 17, 17)）

Surface（背景）

Page Background (#ffffff): ページ全体の純白
Brand Surface (#001646): ブランド面（フッタ・主要 CTA・バッジ）
Header Black (#000000): ヘッダーロゴ・主要見出しの一部で純黒も併用

Text / Foreground

Text Primary (#111111): 本文・商品名・見出し
Text Inverse (#ffffff): 深紺面・黒面上の白文字
Text Logo (#000000): ロゴ・特定見出し（純黒）

Border / Divider

CTA Border (#888888): ライン CTA の 1px 枠
Subtle Divider: 罫線は最小限。空間と写真の角で区切る

Accent / Semantic

実 UI に表面化したアクセント色は深紺 #001646 のみ。エラー・成功色の標準は確認できず、UI は完全に紺・白・黒で完結
補完する場合は赤 #b53939 / 緑 #3a7c4f を深みのあるエディター彩度で

3. Typography Rules

3.1 和文フォント

IDÉE はAdobe Fonts の yu-gothic-pr6n（游ゴシック Pr6N） を最優先する Web フォント運用。

第 0 候補: YakuHanJP — 約物半角アキ詰めの専用サブセットフォント（Yaku Han JP）
第 1 候補: "Helvetica Neue" / Helvetica（欧文グリフはここで処理）
第 2 候補: yu-gothic-pr6n（Adobe Fonts 配信の游ゴシック Pr6N — Web フォント名）
第 3 候補: YuGothic / "游ゴシック Medium" / "Yu Gothic Medium" / 游ゴシック / "Yu Gothic"
最終フォールバック: sans-serif

重要: YakuHanJP と yu-gothic-pr6n は IDÉE の Adobe Fonts 契約由来のドメインライセンス。preview.html では Google Fonts の代替フォントを当てる:

YakuHanJP → 代替なし（標準フォントで近似）

yu-gothic-pr6n → "Yu Gothic Medium" / "Hiragino Sans" で代替

3.2 欧文フォント

第 1 候補: Helvetica Neue
第 2 候補: Helvetica
役割: ASCII グリフ・サインオブジェ（英大文字ロゴ "NEW ARRIVALS" 等）すべて Helvetica で組む

3.3 font-family 指定

実サイトの実測値（body / h1 / h2 / p / a 共通）:

cssfont-family: YakuHanJP, "Helvetica Neue", Helvetica, yu-gothic-pr6n, YuGothic,
  "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif;

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

YakuHanJP を最先頭に置く — 「（」「）」「、」「。」「・」等の約物だけを半角アキ字形に置換するサブセットフォント。和欧混在組版の精度を一段上げる
Helvetica Neue / Helvetica を欧文位置に挟む — ASCII グリフを Helvetica で組む（YakuHanJP は ASCII を持たない）
yu-gothic-pr6n（Adobe Fonts） が和文の主役 — Pr6N は游ゴシックの拡張字形セット
AI で再現する場合、"Helvetica Neue", Helvetica, "Yu Gothic Medium", "Hiragino Sans", "Yu Gothic", sans-serif に簡略化して問題なし。可能なら YakuHanJP を CDN 経由で読み込む

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

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

Role	Size	Weight	Line Height	Letter Spacing	Color	備考
Page Heading (h1)	28px	700	28px (×1.0)	0.6px (+0.02em)	`#111111`	ページタイトル — line-height 1.0 でタイト
Section Title (h2)	21px	700	33.6px (×1.6)	0.6px	`#111111`	"INFORMATION" "SHOP NEWS" 等
Hero Item Title	30px	400	42px (×1.4)	0.6px	`#111111`	スライダー内大型タイトル
Body	14px	400	14px (×1.0)	0.6px (+0.04em)	`#111111`	段落・通常テキスト — タイトな組
Topic Body	13px	400	19.5px (×1.5)	0.6px	`#111111`	商品カテゴリ説明
Item Name	12px	400	16.8px (×1.4)	0.6px (+0.05em)	`#111111`	"IDEE Cotton Linen Tote Bag ネイビー"
Section Label	11px	400	11px (×1.0)	0.5px (+0.045em)	`#ffffff`	"NEW ARRIVALS" 英大文字バッジ
Helper Link	11px	400	11px (×1.0)	0.3px	`#ffffff`	"お買いものガイド" 等のヘッダ補助
CTA Text (line)	15px	400	48px (×3.2)	0.6px	`#111111`	"特集一覧を見る" line-height で高さを作る
CTA Text (navy)	12px	400	24px (×2.0)	0.3px	`#ffffff`	"ログイン" / 深紺ピル

3.5 行間・字間

本文の行間: 1.0（14 / 14）— 極端にタイト。エディター誌面の引き締まった字組
見出し（h1 / Section Label）の行間: 1.0 — タイトルもタイト
節タイトル（h2）の行間: 1.6（33.6 / 21）— 唯一広めに取る
CTA の行間: 48px / 24px（line-height で高さを決める ため、padding は 0px）
letter-spacing:
- 本文・見出し: 0.6px（≈+0.04em） — 全体的に字間を開く
- Section Label / Helper Link: 0.3〜0.5px — 11px の小文字に合わせ調整

ガイドライン:

IDÉE の本文 line-height 1.0 は意図的なエディター組 — 商品名・短文ラベルが中心で、長文段落は別ページで line-height 1.5+ に切り替える
見出しは line-height 1.0 でタイトに、字間 0.6px で軽く開く（Helvetica Neue の字面を活かす）
CTA の高さは line-height で決める（line-height: 48px で 48px 高のボタン）— padding を 0px で組む

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

商品名は短く、改行を意識した組
約物半角詰めは YakuHanJP が自動処理（CSS では特別な指定不要）

3.7 OpenType 機能

cssfont-feature-settings: "palt";

palt（プロポーショナル代替メトリクス）を全要素に適用
yu-gothic-pr6n の和文約物が詰まり、Helvetica の欧文と混ざる和欧混在組版が締まる
YakuHanJP との二段重ねで、約物処理は二重に最適化

3.8 縦書き

該当なし。横書きのみ

4. Component Stylings

Buttons

IDÉE の CTA は3 種類に明確に分かれる。

Primary CTA — Navy Pill（"ログイン" 等）

Background: #001646（ブランド深紺）
Text: #ffffff
Border: なし
Padding: 0px 10px
Border Radius: 0px
Font: 12px / weight 400 / line-height 24px / letter-spacing 0.3px
高さ: line-height 24px が決定（padding 0）

Secondary CTA — Line Box（"特集一覧を見る" "SHOP NEWS一覧" 等）

Background: #ffffff
Text: #111111
Border: 1px solid #888888
Padding: 0px
Border Radius: 0px
Font: 15px / weight 400 / line-height 48px / letter-spacing 0.6px
高さ: 48px（line-height で決定）

Section Label — Navy Badge（"NEW ARRIVALS" 等）

Background: #001646
Text: #ffffff
Padding: 4px 8px（推奨）
Border Radius: 0px
Font: 11px / weight 400 / line-height 1.0 / letter-spacing 0.5px / 英大文字

Inputs

Background: #ffffff
Border: 1px solid #888888
Border (focus): 1px solid #001646（ブランド深紺）
Border Radius: 0px
Padding: 12px 16px
Font: 14px / Helvetica + 游ゴシック Pr6n / weight 400
Color: #111111

Cards / Item Tiles

商品グリッドの 1 枚:

Background: #ffffff
Border: なし
Border Radius: 0px
Padding: 0（写真を縁取らずベタ置き）
Shadow: なし
構造:
- 商品写真（正方形 1:1 〜 4:5）
- 商品名（12px / #111111 / line-height 1.4）
- 価格（必要に応じ 13px / weight 400）

Header / Nav

Background: #ffffff
Color: #111111
Logo "IDÉE" 中央 or 左
Section Label "NEW ARRIVALS" 等は #001646 深紺バッジに白 11px で組む
ナビ項目: 13px / weight 400 / letter-spacing 0.6px
Padding: 12px 16px

Footer

Background: #001646（ブランド深紺）
Color: #ffffff
"© 2002 IDÉE" / "FOLLOW US" は Helvetica で英文組
Padding: 48px 32px 32px

5. Layout Principles

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

Token	Value	用途
XS	4px	バッジ内余白
S	8px	リスト項目間
M	16px	カード内段落間
L	24px	カード間
XL	48px	セクション内余白
XXL	80px	セクション間

Container

Max Width: 1280px（推奨）
Padding (horizontal): mobile 16px / desktop 32px

Grid

商品カード: 2 カラム（mobile）→ 3 カラム（tablet）→ 4 カラム（desktop）
Gutter: 16〜24px
ヒーロースライダーは画面幅いっぱい

Border Radius Scale

Token	Value	用途
Square	0px	全要素（カード・タグ・ボタン・入力欄）

IDÉE は全要素で角丸ゼロを貫く。pill・circle すら登場しない直角原則

6. Depth & Elevation

Level	Shadow	用途
0	`none`	カード・写真・パネル（基本フラット）
1	`0 0 0 1px #888888`	ライン CTA の枠で代替

IDÉE は影を一切使わない。立体表現はゼロで、写真の発色と深紺面が視覚階層を作る
カード・モーダルすべてフラット
ホバー演出は border-color / opacity の変化のみ

7. Do's and Don'ts

Do（推奨）

背景は純白 #ffffff、ブランド面は深紺 #001646
本文・見出しは #111111（純黒 #000 ではない、わずかに浮かせる）
欧文を Helvetica Neue → 和文を yu-gothic-pr6n（または "Yu Gothic Medium"） で組む
YakuHanJP を最先頭に挟んで約物を自動半角詰め
font-feature-settings: "palt" を全要素に適用
letter-spacing: 0.6px（≈+0.04em）を本文・見出しに
本文 line-height 1.0 でタイトに（短文・商品名のみで構成すること前提）
見出し h1: 28px / weight 700 / line-height 1.0
CTA は line-height で高さを決める（48px / 24px）— padding は 0
ライン CTA は 1px solid #888 / border-radius 0
深紺 CTA は #001646 / 白文字 / border-radius 0 / 12px
Section Label は深紺バッジに白 11px / letter-spacing 0.5px / 英大文字
角丸はすべて 0px（pill・circle 無し）
影・グラデーション・カラフルなアクセントを使わない

Don't（禁止）

純黒 #000000 を本文に使わない（#111111 を使う）
本文に letter-spacing normal / 0 を適用しない（0.6px が IDÉE の標準）
font-feature-settings を normal に戻さない（palt が必須）
ボタンに border-radius を付けない（直角を維持）
深紺以外のブランドアクセント色を追加しない（#001646 一本でブランドを表現）
影・elevation を使わない（フラット原則）
長文を line-height 1.0 で組まない — エディター誌面用の短文専用組。長文は 1.5+ に切り替え
角丸（border-radius > 0）を使わない（全要素 0px）

8. Responsive Behavior

Breakpoints

Name	Width	説明
Mobile	≤ 768px	スマホ
Tablet	769–1024px	タブレット
Desktop	> 1024px	デスクトップ

モバイル時の調整

Page Heading (h1): 28px → 22px
Body: 14px 維持
ナビは drawer ハンバーガーへ切り替え
商品グリッド 4 → 2 → 1 カラム
CTA は line-height 44px に縮小（タッチターゲット最小確保）

タッチターゲット

最小 44×44px。ライン CTA は line-height 48px で十分、深紺 CTA は line-height 24px のため padding を上下追加して 44px+ を確保

ダークモード

対応なし。ライトモード固定
フッタ深紺面が「ダーク的役割」を担う

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff（純白）
Brand Navy: #001646（ログイン・バッジ・フッタ）
Text Primary: #111111（やや柔らかい黒）
Text Inverse: #ffffff
Border (CTA): #888888

Font: YakuHanJP, "Helvetica Neue", Helvetica, yu-gothic-pr6n, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif
Web Fallback (簡略): "Helvetica Neue", Helvetica, "Yu Gothic Medium", "Hiragino Sans", "Yu Gothic", sans-serif

Page Heading (h1): 28px / weight 700 / line-height 1.0 / letter-spacing 0.6px
Section Title (h2): 21px / weight 700 / line-height 1.6 / letter-spacing 0.6px
Body: 14px / weight 400 / line-height 1.0 / letter-spacing 0.6px (+0.04em)
Topic Body: 13px / weight 400 / line-height 1.5 / letter-spacing 0.6px
Item Name: 12px / weight 400 / line-height 1.4 / letter-spacing 0.6px
Section Label: 11px / weight 400 / line-height 1.0 / letter-spacing 0.5px / 英大文字 / 深紺バッジ
CTA Text (line): 15px / weight 400 / line-height 48px / letter-spacing 0.6px / black on white
CTA Text (navy): 12px / weight 400 / line-height 24px / letter-spacing 0.3px / white on #001646

Border Radius: 0px（全要素）
Shadow: none（フラット）
font-feature-settings: "palt"（全要素グローバル適用）

プロンプト例

IDÉE のデザインに従って、家具商品の一覧ページを作成してください。
- 背景: #ffffff（純白）
- ブランド色（深紺）: #001646
- フォント: "Helvetica Neue", Helvetica, "Yu Gothic Medium", "Hiragino Sans", "Yu Gothic", sans-serif
  （可能なら YakuHanJP を CDN で読み込み、和文約物を半角詰め）
- font-feature-settings: "palt" を全要素に適用
- 本文 letter-spacing: 0.6px (+0.04em)
- ページ見出し: 28px / weight 700 / line-height 1.0 / color #111111
- セクションタイトル "NEW ARRIVALS": 11px / 白文字 / 深紺 #001646 バッジ / letter-spacing 0.5px / 英大文字
- 商品グリッド（4 カラム）: 写真 + 商品名 12px / line-height 1.4 / color #111111
- ヒーロースライダー: 大型タイトル 30px / weight 400 / line-height 1.4
- ライン CTA "特集一覧を見る": 白背景 / 1px solid #888 / border-radius 0 / 15px / line-height 48px / 黒文字
- 深紺 CTA "ログイン": 背景 #001646 / 白文字 12px / border-radius 0 / line-height 24px / padding 0 10px
- フッタ: 背景 #001646（深紺）/ 白文字 / "© 2002 IDÉE" は Helvetica
- 影・グラデーション・カラフルなアクセントは一切使わない
- 角丸はすべて 0px（直角矩形を貫く）
- 本文 line-height 1.0 のタイト組（短文・商品名のみ。長文は line-height 1.5+ に切り替え）

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/idee.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "idee" })

Meiji (明治)

Japan · Noto Sans CJK

明治（https://www.meiji.co.jp/）のデザイン仕様書。乳製品・チョコレート・菓子・栄養食品を中心とした総合食品メーカーのコーポレートサイト。実サイトの computed style 実測（2026-05-22 取得）に基づく。

SIX（シックス）

Japan · MaisonNeue

SIX inc.（https://www.sixinc.jp/）のデザイン仕様書。東京・南青山を拠点とする、カンヌ／ADFEST 等で数々の賞を獲る独立系クリエイティブ・エージェンシー。TOYOTA・ＳＭＢＣ日興証券（日興フロッギー）・popIn Aladdin 等のブランド／コミュニケーション開発を手がける。最大の特徴は純白 → ライトグレー（#eeeeee）→ ニアブラック（#1a1a1a）だけのモノクローム基調に、ただ一…

ぺんてる（Pentel）

Japan · paralucent

ぺんてる（Pentel）のデザイン仕様書。

9h ナインアワーズ（nine hours）

Japan · YakuHanJP

ナインアワーズ（https://ninehours.co.jp/）のデザイン仕様書。「汗を洗い流す 1h ／眠る 7h ／身支度する 1h ＝ 9h」というコンセプトで 2009 年に開業したカプセルホテル。サインは廣村正彰、プロダクトデザインは柴田文江、ロゴタイプは廣村デザイン事務所。Web も同じ設計思想で、白と黒とグレー 10 段だけで組まれている。最大の特徴は YakuHanJP（約物半角）をフォントスタックの先頭に…

一条工務店（ICHIJO）

Japan · YakuHanJP

一条工務店（ICHIJO）のデザイン仕様書。

NIPPONIA

Japan · YakuHanJP

NIPPONIAのデザイン仕様書。

All Design.md files Browse by font

IDÉE（イデー） DESIGN.md

At a glance

Colors in this file

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Brand

Surface（背景）

Text / Foreground

Border / Divider

Accent / Semantic

3. Typography Rules

3.1 和文フォント

3.2 欧文フォント

3.3 font-family 指定

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

3.5 行間・字間

3.6 禁則処理・改行ルール

3.7 OpenType 機能

3.8 縦書き

4. Component Stylings

Buttons

Inputs

Cards / Item Tiles

Header / Nav

Footer

5. Layout Principles

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

Container

Grid

Border Radius Scale

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

Don't（禁止）

8. Responsive Behavior

Breakpoints

モバイル時の調整

タッチターゲット

ダークモード

9. Agent Prompt Guide

クイックリファレンス

プロンプト例

Use it with your agent

Related Design.md files

Meiji (明治)

SIX（シックス）

ぺんてる（Pentel）

9h ナインアワーズ（nine hours）

一条工務店（ICHIJO）

NIPPONIA