mina perhonen（ミナ ペルホネン） DESIGN.md

minä perhonen｜ミナ ペルホネン（https://www.mina-perhonen.jp/）のデザイン仕様書。 デザイナー皆川明が1995年に設立した、オリジナルの手描きテキスタイル・刺繍で知られる日本のファッション／テキスタイルブランド。「minä perhonen」はフィンランド語で「私｜蝶」を意味する。長く着られる、世代を超えて受け継がれる「特別な日常着」という哲学を持つ。 最大の特徴は 和文本文に明朝体（游明朝）を選ぶ数少ない設計。テック的なモダンさではなく、手仕事の温かみと文学的な静けさを、インクを紙に落としたような近似モノクロ（白 ＋ ほぼ黒 #212121） の組版で表現する。ブランドアクセント色を持たず、色数を極限まで削ぎ落とした、エディトリアルで詩的なシステム。 実サイトの computed style 実測（2026-07-26 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 静謐・エディトリアル・文学的。余白を贅沢に取り、細い罫と静かな明朝体で、ギャラリーの図録や詩集のような紙面をつくる。ファッションブランドでありながら喧騒がなく、テキスタイルの手仕事と「ものを長く大切にする」哲学が、余白と書体そのもので語られる
• mina perhonen について: 1995年設立。オリジナルの手描きテキスタイル・刺繍を核に、服・生地・器・家具まで展開する。Web も同じ思想で、写真とわずかな文字だけを白い紙面に置き、色で主張しない。プロダクト（生地）の色彩の豊かさに対し、サイトは意図的に近似モノクロに徹する
• 密度: 低密度。大きな余白、細い区切り線、静かなタイポグラフィ。情報を詰め込まず、ゆったりと呼吸する紙面
• キーワード: 明朝体（游明朝）、近似モノクロ、白と #212121、Adobe Garamond Pro、Helvetica Neue、行間1.8、余白過多、テキストリンク（塗りボタン非採用）
• 特徴:
  • 和文本文に明朝体（游明朝）を採用する数少ない設計。ゴシックのテック感を避け、セリフの温かさ・文学性を選ぶ
  • 欧文の見出し・ブランド表記（"minä perhonen" / "Season"）は Adobe Garamond Pro（オールドスタイル・セリフ）。上品でクラシックな欧文セリフ
  • ラテンのナビ・ラベル・フッターは Helvetica Neue。小さく、字間を広げて（0.1em〜0.2em）静かに配置
  • ブランドアクセント色を持たない。色は 白 / ほぼ黒 #212121 / 補助の #333333 / グレー #999999、そして意味的な赤 #ff0000（カート空・警告）だけ
  • CTA は 塗りボタンを使わず、下線付きのテキストリンクが基調。押し付けがましさのない導線
  • 本文の 行間は 1.8（16px→28.8px）。日本語の明朝を読みやすくゆったり組む
  • palt を使わない（font-feature-settings: normal）。詰めずに、素直な字送りで明朝の呼吸を残す

2. Color Palette & Roles

実測値。CSS Custom Properties は定義されていない。ページ背景は html/body ともに 白 #ffffff、本文テキストは #212121（ほぼ黒）。ヘッダーの一部オーバーレイに #333333 が現れる。ブランドアクセント色は存在しない。「白い紙 ＋ インクのような近似黒」の、意図的に色を削ぎ落とした設計と捉える。

Brand（ブランド）

• Ink Black (#212121): 本文テキスト・見出しの基調色。純黒 #000000 ではなく、わずかに和らげたインクのような黒。紙に落としたインクの温度感を出す
• Paper White (#ffffff): ページ背景。すべての面はこの白い紙の上に置かれる。ブランドの「余白」を担う最重要の色

Surface / Neutral（面色・ニュートラル）

• Overlay Dark (#333333): ヘッダーの小さなオーバーレイ・一部の面に現れる二次的な暗色。#212121 より一段明るい
• Gray (#999999): 日付・キャプション等の最小テキスト（10px の "2026.07.25" 等）。控えめな補助情報

Semantic（意味的な色）

• Danger / Alert (#ff0000): カート空の注記「＊かごには何も入っていません。」等に使われる純赤。このサイトで唯一の彩度を持つ色で、警告・エラー・欠品の意味的シグナルに限定される。装飾やアクセントには使わない
• Warning / Success 専用色は持たない。必要なら意味的赤 #ff0000 を注意喚起に、情報は本文黒 #212121 で表現する

Text（テキスト階層）

• Text Primary (#212121): 本文・見出し
• Text Muted (#999999): 日付・最小キャプション
• Border / Rule (#212121 極細 / 実装では 1px の淡い罫): 区切り線は黒の細罫を基調に、必要に応じて淡いグレーで

3. Typography Rules

和文本文に 游明朝（Japanese Mincho / セリフ） を据える、このジャンルでは異例の設計。欧文の見出し・ブランド表記は Adobe Garamond Pro（オールドスタイル・セリフ）、ラテンのナビ・ラベル・フッターは Helvetica Neue。本文は 行間 1.8、palt は不使用（font-feature-settings: normal）で、明朝の素直な字送りを保つ。

3.1 和文フォント

• 明朝体（本文・見出しの主役）: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP"（セリフ。本文・見出しの和文はこの明朝一系統）
• ゴシック体（限定用途）: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "Noto Sans JP"（「サインイン・登録」等のラベルのみゴシックを使う）
• 本文は明朝が基調。ゴシックはごく一部のUIラベルに限られる

3.2 欧文フォント

• セリフ（見出し・ブランド表記）: adobe-garamond-pro（Adobe Fonts。オールドスタイルのセリフ。"minä perhonen" / "Season" / h2 見出しに使う）
• サンセリフ（ナビ・ラベル・フッター）: "Helvetica Neue", arial（"FASHION" 等のナビ、フッター、日付ラベル）
• 等幅は主要導線では使わない
• preview.html での注記: 游明朝は macOS/Windows のシステムフォントで Google Fonts に無いため、プレビューでは Google Fonts の Shippori Mincho（游明朝に近い和文明朝） を代替に用いる。adobe-garamond-pro（Adobe Fonts / ドメインライセンス）は表示できないため EB Garamond（Google Fonts） で代替する。実装時は必ず游明朝（システム）と adobe-garamond-pro（Adobe Fonts）を読み込むこと

3.3 font-family 指定

css/* 本文・和文見出し（明朝） */
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", serif;

/* 欧文見出し・ブランド表記（オールドスタイル・セリフ） */
font-family: adobe-garamond-pro, serif;

/* ラテンのナビ・ラベル・フッター（サンセリフ） */
font-family: "Helvetica Neue", arial, sans-serif;

/* 一部UIラベル（ゴシック） */
font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "Noto Sans JP", sans-serif;

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

• 和文本文は游明朝を先頭に、無い環境では Noto Serif JP → serif に落とす（明朝の質感を最後まで保つ）
• 欧文セリフは adobe-garamond-pro → serif、ラテン系は Helvetica Neue → arial → sans-serif
• 和文本文の末尾は必ず serif（ゴシックに落とさない。明朝の性格を守る）

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

• 本文は weight 400 が既定。強調段落で 500、見出しは 400〜500、ゴシックラベルのみ 700。ウェイトのコントラストは弱く、静かに揃える

3.5 行間・字間

• 本文の行間 (line-height): 1.8（16px→28.8px）。日本語の明朝をゆったり読ませる基準
• 見出しの行間: 1.2（36px→43.2px、24px→28.8px）。見出しは詰めて塊にする
• 本文の字間 (letter-spacing): normal（トップ）〜 0.05em（記事本文 16px 基準 0.8px）。ごくわずかに開ける程度で、詰めない
• ナビ・ラベルの字間: ラテンは 0.1em（"FASHION"）、ゴシックラベルは 0.2em（"サインイン・登録"）、日付は 0.15em。小さなラテン文字は字間を大きく開けて静かなリズムを作る
• ブランド欧文セリフ ("minä perhonen" / "Season"): normal。オールドスタイルの自然な字送りを尊重する

ガイドライン:

• 日本語本文は明朝で line-height 1.8 を基準にゆったり組む（詰めない）
• 本文の letter-spacing は normal 〜 0.05em にとどめ、palt で詰めない
• 小さなラテン・ラベルは逆に字間を大きく（0.1〜0.2em）開けて、静けさとエディトリアル感を出す

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt は使わない */

• palt は不使用（実測 font-feature-settings: normal）。明朝の素直な字送りを保ち、詰めによる緊張感を避ける
• 見出しでも palt を掛けず、余白と字間で調整する
• kern は環境依存に任せ、明示的な字詰めはしない

3.8 縦書き

• 該当なし。主要導線はすべて横組み
• 用いる場合は writing-mode: vertical-rl; text-orientation: mixed;（明朝は縦組みとの相性が良く、図録的な用途では検討に値する）

4. Component Stylings

Buttons

重要: 実サイトには塗りつぶしの CTA ボタン（filled button）が存在せず、interactive 抽出は空だった。導線は基本的に 下線付きのテキストリンクで構成される。以下はブランドの性格に合わせて設計した、控えめで上品なボタン仕様。実装でも、まずテキストリンク（border-bottom）を優先し、塗りボタンは本当に必要な箇所に限ること。

Text Link（基調・推奨）

• Background: transparent
• Text: #212121
• Border-bottom: 1px solid #212121
• Padding: 0 0 2px
• Font: 游明朝, 16px, weight 400
• ホバー: 下線・文字色を薄める（opacity 0.6 程度）
• 用途: サイト全体の主要導線。押し付けがましくないリンク

Outline（枠線・静か）

• Background: transparent
• Text: #212121
• Border: 1px solid #212121
• Padding: 14px 28px
• Border Radius: 0（角丸を使わず、紙面の端正さを保つ）
• Font: 游明朝 / adobe-garamond-pro, 14〜16px, weight 400
• 用途: 「View More」等の穏やかなセカンダリ導線

Quiet Dark（塗り・最小限）

• Background: #212121
• Text: #ffffff
• Padding: 14px 32px
• Border Radius: 0
• Font: 游明朝, 16px, weight 500
• 用途: どうしても面で見せたい場合の最終手段。角丸なし・彩度なしで静けさを保つ

Inputs

• Background: #ffffff
• Border: 1px solid #999999（または下線のみの border-bottom: 1px solid #212121）
• Border (focus): 1px solid #212121
• Border Radius: 0
• Padding: 12px 4px
• Font: 游明朝, 16px, weight 400
• Text Color: #212121 / Placeholder: #999999
• 罫は細く、角丸を持たせない。下線のみのフィールドも紙面によく合う

Cards

• Background: #ffffff
• Border: なし（余白と写真だけで区切る）／必要時 1px solid の淡い罫
• Border Radius: 0
• Padding: 写真は余白なしで大きく、テキストブロックのみ内側に余白
• Shadow: なし（フラット。Depth & Elevation 参照）
• テキスタイル・生地の写真を大きく置き、下に品名（游明朝 #212121）と補助情報（Helvetica Neue #999999・日付等）を静かに添える。角丸・影・枠線に頼らず、余白で構成する

5. Layout Principles

Spacing Scale

余白がこのシステムの主役。セクション間は XL〜XXL で大きく取り、要素は余白で区切る（罫や面色に頼りすぎない）。

Container

• Max Width: 1080px 目安（写真は全幅ブリードも可）
• Padding (horizontal): 24〜48px

Grid

• Columns: 12（実運用は 2〜3 カラムの写真グリッド）
• Gutter: 24〜48px
• テキスタイル・製品の写真グリッドは、間隔を広く取り、キャプションを小さく静かに置く

6. Depth & Elevation

• 奥行きはほぼ使わない。余白と細罫、写真そのもので構成し、影は最小限に。角丸も使わず、紙面の端正さを保つ

7. Do's and Don'ts

Do（推奨）

• 和文本文は 游明朝（明朝体） で組む（末尾は serif。ゴシックに落とさない）
• 欧文の見出し・ブランド表記は adobe-garamond-pro、ラテンのナビ・ラベルは Helvetica Neue を使い分ける
• 日本語本文の行間は 1.8 を基準にゆったり組む
• 色は 白 と ほぼ黒 #212121 を基調に、近似モノクロを貫く
• 導線は下線付きのテキストリンクを基調にする（塗りボタンに頼らない）
• 小さなラテン・ラベルは字間を大きく（0.1〜0.2em）開けて静けさを出す
• 余白を贅沢に取り、セクション間は XL〜XXL で区切る
• 意味的な赤 #ff0000 は警告・欠品のシグナルにだけ使う

Don't（禁止）

• 和文本文にゴシック体を使わない（このブランドの温かさは明朝が担う）
• palt で本文を詰めない（font-feature-settings: normal が基本。明朝の呼吸を残す）
• 彩度のあるアクセント色やグラデーションを足さない（近似モノクロを崩す）
• 角丸・ドロップシャドウを多用しない（フラットで端正な紙面を保つ）
• 純黒 #000000 ではなく #212121 を使う（インクのような和らいだ黒）
• 意味的な赤 #ff0000 を装飾・アクセントに流用しない（警告以外に使わない）
• 塗りつぶしの派手な CTA を主導線に据えない（テキストリンクが基調）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。テキストリンクは十分な行間・padding でタップ領域を確保

フォントサイズの調整

• モバイルでは本文 15〜16px を維持（明朝の可読性のため小さくしすぎない）
• 見出し 36px → 24〜28px 程度に縮小し、行間はゆったり保つ
• 小さなラテン・ラベル（10〜12px）はモバイルでも字間を保ち、詰めない

9. Agent Prompt Guide

クイックリファレンス

Brand/Text:   #212121   （インクのようなほぼ黒。純黒は使わない）
Background:   #ffffff   （紙のような白。余白が主役）
Sub/Overlay:  #333333 / #999999（二次暗色 / 最小キャプション）
Alert:        #ff0000   （警告・欠品のみ。アクセントに流用しない）
アクセント色: なし（意図的な近似モノクロ）
和文 Font:    游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", serif（明朝／末尾 serif）
欧文 Serif:   adobe-garamond-pro, serif（ブランド表記・見出し）
ラテン Font:  "Helvetica Neue", arial, sans-serif（ナビ・ラベル・フッター）
Body Weight:  400（強調 500 / ゴシックラベル 700）
Body Size:    16px
Line Height:  1.8（本文）／ 1.2（見出し）
Letter Spacing: normal〜0.05em（本文）／ 0.1〜0.2em（小ラテン・ラベル）
palt:         off（font-feature-settings: normal）
Button:       下線付きテキストリンク基調（塗りボタンは最小限・角丸なし）

プロンプト例

mina perhonen（ミナ ペルホネン）のデザインシステムに従って、テキスタイル製品の紹介ページを作成してください。
- 和文本文は游明朝（明朝体）で組む: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", serif（末尾は serif）
- 欧文の見出し・ブランド表記は adobe-garamond-pro、ラテンのナビ・ラベルは "Helvetica Neue"
- 本文は 16px・weight 400・行間 1.8・letter-spacing は normal〜0.05em。palt は使わない
- 色は白 #ffffff と ほぼ黒 #212121 の近似モノクロを貫く。アクセント色は足さない
- 導線は下線付きのテキストリンク（border-bottom: 1px solid #212121）を基調にし、派手な塗りボタンは使わない
- 小さなラテン・ラベル（"FASHION" 等）は字間を 0.1〜0.2em 開けて静かに置く
- 余白を贅沢に取り、角丸・ドロップシャドウは使わずフラットに構成する
- 警告・欠品の注記だけ #ff0000 を使う（それ以外に赤は使わない）