Design System
事前登録 LP・EC・会社 HP 共通のデザインシステムA案「自然派」。BEIGIC の UI の骨格と SIORIS の空気を借り、和紙白の地に砂と苔の面、自然光の素材カットで組む。本国のロゴと思想は継承し、色と写真は日本向けに置き換える案。トークンは tokens/tokens.json。
B案「本国ブランドサイト継承」。本国のブランドサイト uniquemi-beauty.com の色・書体・形をそのまま日本語化する案。オフホワイトとラベンダーがかった白の地、CENIGIA の紫と Matcha の深緑、Crimson Text のセリフ見出し、ピル型ボタン、樹皮・溶岩石の上の商品写真。トークンは tokens/variant-b.css（A案への上書き）。
C案「日本の公式通販型」。LAGOM 日本公式通販（lagomcosmetics.jp）を参考に、色・書体だけでなくページの作りを日本の公式通販の型に寄せる案。白地に薄灰、Murecho 一本、角丸なし、送料無料ライン → 商品 → 買える場所 → ニュース、の順。トークンは tokens/variant-c.css（A案への上書き）。
D案「本国トーン × 日本通販の作り」。色・書体・形・写真は B案（本国継承）をそのまま、ページの作りは EC だけ C案（日本の公式通販型）。9 月の事前登録 LP は A/B のブランドサイト型で組み、11 月の EC トップと商品ページを日本通販の型にする。根拠は docs/variant-d.md、トークンは tokens/variant-d.css（前半は B と同一、後半が C 部品の塗り替え）。
3 つのトーン
| 静けさ | 余白で格を出す。角丸なし・影なし・グラデーションなし。アクセント色は 1 画面に 1〜2 箇所。 |
| 素材感 | 砂・石・葉・水の中に商品を置いた「素材カット」を主役に。原料（ツボクサ・野生高麗人参・抹茶・済州火山岩）は実物と産地で見せる。 |
| 正確さ | 税込価格、全成分、薬機法の注記、配送・返品が整っていること自体をデザインにする。 |
| 本国のまま | 色（紫・深緑）、書体（Crimson Text）、形（ピル型・0.6rem 角丸）、写真（樹皮・溶岩石・質感マクロ）を変えない。日本語化だけする。 |
| ラインの色 | CENIGIA = 紫、Matcha = 深緑をボタンやライン見出しに直接使う。面はラベンダーがかった白と緑がかった白で切り替える。 |
| 正確さ | 税込価格・全成分・注記・配送返品の部品は A案と共通。 |
| 買い物が先 | 送料無料ライン、商品、買える場所（他モール・店舗）、ニュース。世界観より「何が・いくらで・どこで」を先に見せる。 |
| 細く・広く | Murecho 400 を字間・行間広めで。色は深緑 1 点。角丸なし。 |
| 本物の証 | 受賞・掲載メディア・取扱店舗・他モール公式の枠を最初から持つ。 |
ベンチマーク
| BEIGIC | UI の骨格。余白、字間の広い英字ラベル、角のない UI、ベージュを第二の面に。 |
| SIORIS | ブランドの空気。自然光と素材の写真、緑、Story / Ingredients / Certification の 3 段で原料を語る構造、暗いフッター、日本 EC の法定リンク。配分はおおよそ 5:5。 |
| 本国 | ロゴ（セリフ）、「肌の根本を満たし、自ら回復する力を完成させる」、11SKU・4 ライン。 |
| 本国ブランドサイト | 正。uniquemi-beauty.com。地 #FAF7F3、紫 #863C9A、深緑 #20382A、Crimson Text ＋ Pretendard、ピル型ボタン、樹皮・溶岩石の商品カット、白背景のモデル。 |
| BEIGIC / SIORIS | 余白の量と日本 EC の法定リンクだけ借りる。 |
| LAGOM 日本公式通販 | 作りの正。告知バー → 2 分割ヒーロー → BEST PRODUCTS → ABOUT → オンラインストア → 取扱店舗 → NEWS → MEDIA。Murecho 400、白と薄灰、角丸なし、丸バッジ。 |
| 本国 | ロゴ・思想・ライン構成・パッケージ色（バッジのドット）だけ。 |
Color
色墨と和紙白の 2 色で 8 割を組む。砂と苔が第二の面、ツボクサ緑はアクセント、琥珀は補助。苔は原料・ストーリーなど「植物・産地」を語るセクションの背景に使い、価格・カート・フォームには使わない。白 (#FFFFFF) はカードと入力欄の面だけ。
本国サイトの色をそのまま使う。地はオフホワイト #FAF7F3、文字は #111。CENIGIA の紫 #863C9A が主ボタンとアクセント、Matcha の深緑 #20382A が第二アクセント。第二の面はラベンダーがかった白と緑がかった白で、語るラインに合わせて切り替える。
白と薄灰で組み、色は深緑 1 点だけ。ヒーローの文章パネルは淡い緑・淡い紫・淡いクリームを語る商品のラインで切り替える（LAGOM の淡い水色の位置）。セールは琥珀。ボタンは墨。
Brand
color.brand.*Surfaces
bg · surface-alt · surface-greenセクションの地は和紙白を基本に、砂（商品・限定）と苔（原料・ストーリー）を挟む。砂と苔は隣り合わせにせず、間に和紙白を置く。
セクションの地はオフホワイトを基本に、ラベンダー白（CENIGIA・ヒーロー）と緑白（Matcha・原料）を挟む。ラインが変わるところで面の色を変える。
セクションの地は白を基本に、薄灰（BEST PRODUCTS・NEWS・フッター）を交互に。淡い色はヒーローの文章パネルだけに使う。
Neutral
color.neutral.0–900灰色はすべて墨の方向に僅かに温かい。純粋な無彩色は使わない。
本国の #111 / #555 / #A7A7A7 / #CCC を基準に、僅かに紫へ寄せた 11 段。
純粋な無彩色。LAGOM の #121212 / #2C2C2C / #F3F3F3 / #FFFFFF を基準にした 11 段。
Semantic
color.semantic.*フォームと通知にだけ使う。装飾には転用しない。warning は琥珀と共用。
Line accents
color.line-accent.*11SKU・4 ラインの識別色。本国の商品写真から、CENIGIA はラベンダー〜紫、Matcha は深緑のガラス瓶、Mask は白箱にホログラムの蓮と確認済み。Reine は未確認で琥珀を仮置き。バッジのドットとライン見出しの小さな面にだけ使う。
Typography
文字ロゴのセリフを英字見出し（Cormorant Garamond）と和文見出し（Noto Serif JP）が継ぐ。本文は Noto Sans JP で可読性を取り、英字ラベルは Jost を大文字・字間 0.18em で組む。日本語は文字量が多いので行間 1.9・行長 42 字まで。
LAGOM と同じく Murecho（日本語の幾何学ゴシック）一本。見出しも本文も 400、英字の大見出しだけ 300 で大文字・字間 0.25em。字間 0.05em・行間 2.0 で「細く、広く」組む。セリフは使わない。
本国サイトと同じ組み合わせ。英字見出しとラベルは Crimson Text（セリフ）を 600 で太めに、和文は見出しも本文も Noto Sans JP（本国の Pretendard の代替。日本語版が Google Fonts にない）。英字ラベルは大文字化せずイタリックで添える。行間 1.9・行長 42 字は A案と同じ。
自ら回復する力を。
ツボクサ、野生高麗人参、抹茶、済州の火山岩。UniqueMi は韓国産の植物原料を軸に、肌が本来もつ力を引き出すスキンケアをつくっています。
CENIGIA ラインは、ツボクサ由来の成分とマイクロバイオーム・リポソームを組み合わせたシリーズです。乾燥や外部刺激でゆらぎやすい肌にうるおいを与え、キメを整えます。化粧水・美容液・乳液・クリームの 4 ステップに加え、SPF50+ PA++++ の日やけ止めをそろえています。
ご登録いただいた方に、発売日と先行販売のご案内をメールでお送りします。
※ 表示価格はすべて税込です。※ 画像はイメージです。
Scale
font.size.*| Token | SP | PC (md+) | 用途 |
|---|---|---|---|
| 4xl | 48 | 64 | ヒーロー英字 |
| 3xl / 2xl | 36 | 48 | h1 |
| 2xl / xl | 28 | 36 | h2 |
| xl / lg | 22 | 28 | h3 |
| md | 18 | 18 | リード文 |
| base | 16 | 16 | 本文・入力欄（これ未満にしない） |
| sm | 13 | 13 | 補足・ラベル・ボタン |
| xs | 11 | 11 | 注記・法定表示のみ |
Loading
Google Fonts<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Murecho:wght@300;400;500;700&display=swap">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Noto+Sans+JP:wght@400;500;600;700&display=swap">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@400;500&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500&display=swap">
Spacing & Grid
余白とグリッド4px 基準。セクション上下は SP 64 / PC 96。画面端は SP 20 / PC 40。コンテンツ 1200、全幅 1440、本文 720。12 カラム。md（768px）で SP と PC を切り替える。
| Token | 値 | 用途 |
|---|---|---|
| container | 1200px | コンテンツ最大幅 |
| container-wide | 1440px | ヒーロー・全幅画像 |
| prose | 720px | 和文本文（38〜42 字） |
| section | 64 / 96px | セクション上下（SP / PC） |
| gutter | 20 / 40px | 画面端（SP / PC） |
| breakpoint sm | 640px | |
| breakpoint md | 768px | SP → PC 切替 |
| breakpoint lg | 1024px | 商品 4 列・サイドナビ |
| breakpoint xl | 1280px |
Shape & Motion
形・影・動き角は立てる。影は浮くものにだけ。動きは短く、自動で動かない。
本国サイトと同じ。ボタンとバッジはピル型（10rem）、カード・画像・安心情報は 0.6rem、入力欄は 0.2rem。影は A案と同じくほぼ使わない。動きは短く、自動で動かない、も同じ。
LAGOM と同じ。角丸 0（ボタン・入力・画像）、バッジだけ丸（4rem）。影なし。商品カードの hover は拡大せず薄くする。
| Token | 値 | 用途 |
|---|---|---|
| radius.none | 0 | ボタン・カード・画像・バッジ |
| radius.sm | 2px | 入力欄・チェックボックス |
| radius.full | 9999px | 丸いアイコンボタン・ラインのドット |
| shadow.sm | 0 1px 2px / 6% | ドロップダウン |
| shadow.md | 0 8px 24px / 8% | モーダル・固定カートバー |
| border.hair | 1px · line #E2DFD7 | 罫線・カード枠 |
| motion.fast | 150ms | hover・色変化 |
| motion.base | 250ms | 開閉・フェード |
| motion.slow | 600ms | 画像フェードイン・カード hover の拡大 1.03 |
| easing | cubic-bezier(0.2, 0, 0, 1) | reduced-motion では全部 0ms |
Form
フォーム事前登録 LP で最初に使う。必須は赤字「必須」、任意は灰字「任意」。エラーは入力欄の直下に文で。入力欄の文字は 16px（iOS の自動ズーム回避）。姓と名は分け、住所は郵便番号 7 桁から補完する。
結果メッセージ
ご登録ありがとうございます。発売時にメールでご案内いたします。
登録に失敗しました。入力内容をご確認のうえ、時間をおいて再度お試しください。
お盆期間中（8/13〜8/16）のご注文は 8/17 以降順次発送いたします。
こちらの商品は 11 月上旬発売予定です。
ラジオ・チェック
Badge & Price
バッジと価格バッジは英字大文字・線のみ。価格は「¥5,500（税込）」を崩さない。セールは打消し線と琥珀色だけで、割引率の大きな数字やカウントダウンは出さない。
※ 価格はすべて仮。本国価格（New Age Cream 54,000₩ など）から日本価格を決めるまでの見本。
<span class="um-price"><span class="um-price__amount">¥6,600</span><span class="um-price__tax">（税込）</span></span> <span class="um-badge um-badge--line um-badge--cenigia">Cenigia</span>
Product card
商品カード写真 4:5、ライン名（英字小）、商品名、容量、価格（税込）。★評価はレビュー基盤が決まるまで載せない。高さは内容に任せ、商品名は省略せず折り返す。SP 2 列、PC 3 列。
※ 画像はプレースホルダー。EC 一覧は和紙白または砂の地で撮った正面カット。価格は仮。
※ 画像はプレースホルダー。EC の一覧・商品詳細はラベンダー白の地の明るい商品カット（本国メインビジュアルと同系）。樹皮・溶岩石の暗いカットはブランドストーリーと LP ヒーローだけで使う。価格は仮。
※ 画像はプレースホルダー。白地の商品カット。受賞・掲載バッジは写真の右下に載せる。価格は「通常価格／セール価格」の 2 段（下の LP（C案）参照）。
Note & Legal
注記と法定表示薬機法の但し書きは効能文の直下に um-note で。全成分・使用上の注意・製造販売元は um-legal で商品ページに定型で置く。配送・返品は um-assure で購入ボタンの近くに。
効能文 ＋ 注記
マイクロバイオーム・リポソームが角質層のすみずみまで浸透し、乾燥による小じわを目立たなくします。
- 浸透は角質層まで
- 効能評価試験済み
- 画像はイメージです
単独の注記
表示価格はすべて税込です。送料は別途かかります。
安心情報（購入ボタン直下）
¥8,800（税込）以上で送料無料
不良品は交換いたします
製造販売元による品質管理のもと発送
法定表示ブロック
全成分
水、グリセリン、ツボクサエキス、BG、スクワラン、セラミドNP、乳酸桿菌発酵液、レシチン、カルボマー、フェノキシエタノール、香料（例示）
使用上の注意
お肌に異常が生じていないかよく注意してご使用ください。傷やはれもの、湿疹等、異常のある部位にはお使いにならないでください。使用中、赤み・はれ・かゆみ・刺激等の異常があらわれた場合は使用を中止し、皮膚科専門医等にご相談ください。
- 内容量
- 50mL
- 製造国
- 韓国
- 製造販売元
- （輸入代行業者名・契約後に確定）
- 発売元
- 株式会社UniqueMi Japan
Section heading
セクション見出しとリード英字 eyebrow → 和文見出し → リード の 3 段が既定。英字を主にするときは Cormorant を大きく、和文を小さく添える。左寄せが既定、ヒーローと CTA だけ中央。
韓国の大地で育った、5 つの原料
ツボクサ、野生高麗人参、抹茶、済州の火山岩、マイクロバイオーム。産地と根拠を、ひとつずつ。
Cenigia
ツボクサとマイクロバイオームのラインLP
事前登録 LP（9 月公開）ヒーロー → ベネフィット → 原料 → 商品 → 事前登録フォーム。最初の適用先。フォームは既存の WaitlistForm.astro の構造をこの見た目に置き換える。
告知バー → 2 分割ヒーロー → BEST PRODUCTS → ABOUT → オンラインストア／取扱店舗 → NEWS／MEDIA。買い物の導線が先、世界観は後。フォームは既存の WaitlistForm.astro の構造をこの見た目に置き換える。
Made by Nature
肌の根本を満たし、自ら回復する力を。
韓国産の植物原料を軸にしたスキンケアブランド UniqueMi が、日本で発売します。事前登録で発売日と先行販売のご案内をお届けします。
※ 本番は砂・石・葉・水の中に商品を置いた素材カット。
※ 本番は本国サイトのメインビジュアル（ラベンダーがかった白の地に CENIGIA のボトル、白背景のモデル）をそのまま使える。樹皮・溶岩石の暗いカットを使うのはここ（ヒーロー）とブランドストーリーだけ。
※ C案のヒーローは下の「LP（C案）」の 2 分割型を使う。この形は使わない。
静かに、確かに、肌を整える
韓国産の主要原料
ツボクサ、野生高麗人参、抹茶、済州火山岩、マイクロバイオーム。
SKU・4 ライン
CENIGIA / Matcha / Reine / Mask。化粧水から日やけ止めまで。
認証を取得
FDA・CPNP・VEGAN。取得している事実のみを、そのまま示します。
韓国の大地で育った原料
どこで、どう育ち、なぜこの肌に効くのか。原料ごとに産地から語ります。
ツボクサ（センテラ）
産地: 韓国産（産地・収穫時期は本国に確認中）
肌に: 乾燥や外部刺激でゆらぎやすい肌にうるおいを与え、キメを整える
なぜ: CENIGIA ラインの軸。マイクロバイオーム・リポソームと組み合わせる
野生高麗人参
産地: 韓国の山地（要確認）
肌に: はりとつやを与える
なぜ: Reine ラインとトーンアップ日やけ止めに。栽培ものではなく野生を使う理由を本国に取材する
抹茶
産地: 要確認
肌に: 肌を清浄にし、なめらかにする
なぜ: クレンジングオイルとフェイシャルパックに。Vegan / CPNP
済州の火山岩
産地: 済州島
肌に: 肌をひきしめ、うるおいを与える
なぜ: 火山岩の洞窟で 100 日発酵させたマスクシート。素材と製法の写真を主役にする
※ 効能はいずれも化粧品の範囲内。表現の最終確認は薬事担当が行う。産地・収穫の情報は本国（ハギョン）へ取材して埋める。
EC トップ
EC トップ（11 月公開）— C の作りを B のトーンでD案では、この「日本の公式通販型」は 11 月の EC トップに使う。9 月の LP は上のヒーロー型。告知バー → 2 分割ヒーロー → NEW / BEST PRODUCTS → ABOUT → INGREDIENTS → 事前登録。オンラインストア・取扱店舗・NEWS・MEDIA の枠は中身が揃うまで出さない（下の見本は「揃ったあと」の姿）。
LAGOM 型。告知バー → 2 分割ヒーロー（左: 淡色パネルに文章／右: 商品写真＋丸バッジ）→ NEW / BEST PRODUCTS → ABOUT UNIQUEMI → INGREDIENTS → 事前登録 → NEWS。SP では写真が上、文章が下。
ツボクサとマイクロバイオームを高濃度で。
乾燥による小じわを目立たなくする
〈コンセントレイテッド ニューエイジ クリーム〉が日本に新登場。
※ 効能評価試験済み
メイクも毛穴の汚れも、抹茶のオイルでするりと。
〈抹茶 クレンジングオイル〉。
Vegan・CPNP 認証。
Best Products人気の商品
About UniqueMiユニクミについて
肌には、自ら回復する力があります。
韓国・ソウルで生まれた〈ユニクミ〉は、ツボクサ、野生高麗人参、抹茶、済州の火山岩といった韓国産の植物原料を軸に、肌が本来もつ力を引き出すスキンケアをつくっています。
Online Store公式オンラインストア
※ 他モール出店・取扱店舗が決まるまでは枠を出さない（空の枠は逆効果）。
Shop List取扱店舗
全国のバラエティショップで販売予定
Media
- LIPS に〈コンセントレイテッド ニューエイジ クリーム〉が掲載されました
- @cosme に商品情報を登録しました
※ 掲載が出るまで（11 月頃）は非表示。
EC
商品詳細（10 月中に完成）左に写真、右に「ライン → 商品名 → 価格（税込）→ 容量・認証 → 購入 → 安心情報」。全成分と注意事項はページ下部の法定表示ブロック。プロダクトシートの本文を流用する。
LAGOM 型。日本語フルネームで「何の商品か」を名前で言い切り、価格の前に特長と根拠、価格の後に送料無料ラインと「どこで買えるか」。全成分は折りたたみ。
Concentrated New Age Cream
コンセントレイテッド ニューエイジ クリーム · 50mL
¥6,600（税込）ツボクサ由来成分とマイクロバイオーム・リポソームを高濃度で配合したクリーム。乾燥による小じわを目立たなくし、肌にはりを与えます。本国のクラウドファンディングで目標の 1,899% を達成した、UniqueMi を代表する一品です。
効能評価試験済み
¥8,800（税込）以上で送料無料
LAGOM 型の商品ページ。日本語フルネーム＋カテゴリ → 取扱注記 → 特長 3 点（根拠注記付き）→ サイズ → 通常価格／セール価格 → 送料無料ライン → 数量・カート → ご購入はこちら → 折りたたみ（使い方／全成分）→ 縦長の商品情報画像。
ユニクミ コンセントレイテッド ニューエイジ クリーム（保湿クリーム）
本商品は公式オンラインストアおよび Amazon 公式ストアでお取り扱いしております。
- ・韓国クラウドファンディング 達成率 1,899%*
- ・乾燥による小じわを目立たなくする**
- ・FDA 登録済み
*Wadiz 2024 年（本国調べ） **効能評価試験済み
サイズ： 50mL
合計 ¥8,800（税込）以上で 送料無料
使い方
全成分
製造販売元・発売元
縦長の商品情報画像（LAGOM の「香りのノート」画像に相当）
ツボクサエキス／マイクロバイオーム・リポソーム／セラミドNP
乾燥や外部刺激でゆらぎやすい肌にうるおいを与え、キメを整えます。
HP
会社 HP（会社概要・ブランドストーリー・お問い合わせ）EC と同じトークン・同じヘッダー。会社概要は定義リストで淡々と。ブランドストーリーは本文幅 720px で読ませる。
会社概要
- 社名
- 株式会社UniqueMi Japan（UniqueMi Japan Co., Ltd.）
- 代表取締役
- Kim Haak-young
- 事業内容
- 化粧品の輸入・販売
- 設立
- 2026 年（登記完了後に確定）
- 本国
- (주)유니크미（韓国）
Status
状態と関連文書| 項目 | 状態 | 備考 |
|---|---|---|
| Foundation（トークン） | A / B / C / D 比較中 | A案「自然派」tokens/tokens.json、B案「本国ブランドサイト継承」tokens/variant-b.css、C案「日本の公式通販型」tokens/variant-c.css、D案「本国トーン × 日本通販の作り」tokens/variant-d.css（推奨。docs/variant-d.md）。決めたら一本化。ブランドカラーは KV 受領後に照合 |
| Components（LP 用） | v0.1 | ボタン・フォーム・バッジ・価格・カード・注記・ヘッダー・フッター・見出し。components.css |
| Components（EC 用） | 一部 | カート・チェックアウトの部品は 10 月に追加 |
| Patterns | LP / EC 商品詳細 / HP 会社概要 | 商品一覧・カート・チェックアウト・お問い合わせは 10 月 |
| ガイドライン | v0.1 | docs/guidelines.md（禁止事項・ロゴ・写真・薬機法） |
| ベンチマーク分析 | 完了 | docs/benchmark.md |
| 韓国側との差分 | v0.1 | docs/diff-from-kr.md。受領後に更新 |
| ロゴ・KV アセット | 未受領 | 清水／蓮華 経由。design-system/assets/ に置く |
| Figma / .pen | 未着手 | 実装がこの HTML と CSS で先行。必要なら .pen に起こす |