ミナ ペルホネン (mina perhonen) DESIGN.md

ミナ ペルホネン（https://www.mina-perhonen.jp/）のデザイン仕様書。 2026-05-08 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 1995年にデザイナー皆川明が立ち上げたテキスタイル/ファッションブランドの公式サイト。「100年続くデザイン」「特別な日常」を体現する、絵本やテキスタイル画集のように余白が広く、文字と写真の関係に語りがある編集型サイト
• 密度: テキスタイルとプロダクト写真が主役。ナビゲーションと本文は游明朝で抑制的に組み、欧文には Adobe Garamond Pro を当てて手仕事の温度感を出す
• キーワード: 手仕事、明朝体、テキスタイル、編集的、静謐、文学的、二言語混植
• 特徴: 見出しから本文まですべてが明朝体（游明朝）。欧文セクション名（FASHION / TEXTILE / Season）にだけ Helvetica Neue や Adobe Garamond Pro を入れて空気を変える。彩度は抑え、警告のみ純赤（#ff0000）で目立たせる。CTA ボタンは存在せず、リンクテキストとカテゴリラベルだけで動線を構成するボタンレス UI

2. Color Palette & Roles

ミナ ペルホネンは色数を極端に絞る。コンテンツ（テキスタイルや製品写真）が彩度を持つため、UI は無彩色に徹している。

Primary（ブランドカラー）

• Ink (#212121): 本文・見出しの基調色。純黒ではなく深い墨色（rgb 33, 33, 33）。明朝の縦画を上品に見せる
• Paper (#ffffff): 背景。白い紙のような素地
• Mute Gray (#999999): 日付、補足、二次情報

Accent / Warning

• Alert Red (#ff0000): "＊かごには何も入っていません。" のメッセージのみ純赤を使用。装飾的な彩色には使わない

Surface

• Header (#ffffff): ヘッダー背景
• Pill / Badge (#333333): ナビゲーションのオン状態などで使われるダーク pill 背景

3. Typography Rules

3.1 和文フォント

• Yu Mincho 系: 「游明朝」「Yu Mincho」「YuMincho」を順に試行
• Noto Serif JP: Webフォントフォールバック
• serif: 最終フォールバック
• 副: Yu Gothic 系: 「サインイン・登録」など限定的にサンセリフを当てる箇所のみ

明朝体を全面採用しているサイトは少数派。ミナ ペルホネンは「ブランド = 紙の本（書籍）」というメタファーを徹底している。

3.2 欧文フォント

• Adobe Garamond Pro: ナビゲーションの "Season" など格調を要する英語タイトルに使用
• Helvetica Neue → arial → sans-serif: 横組み英字、ロゴテキスト、セクション英語ラベル（FASHION, TEXTILE 等）、コピーライト、日付
• adobe-garamond-pro: 大型 h3（コレクションタイトル "つぐ minä perhonen"）に使用

Adobe Garamond Pro は Adobe Fonts のドメインライセンスのため、preview.html では表示されない。代替として EB Garamond を Google Fonts から読み込んで雰囲気を再現する。

3.3 font-family 指定

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

/* 欧文セクションラベル */
font-family: "Helvetica Neue", arial, sans-serif;

/* 欧文タイトル（コレクション名等） */
font-family: adobe-garamond-pro, serif;

/* サインイン等の和文サンセリフ */
font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "Noto Sans JP", sans-serif;

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

3.5 行間・字間

• 本文の行間: line-height: 1.8（28.8px / 16px）。明朝の長文を読み物として組む。日本語編集物の標準
• 見出しの行間: line-height: 1.2。明朝の縦画を活かすため、見出しは詰め気味
• 本文の字間: letter-spacing: normal。明朝のメトリクスをそのまま使う
• 欧文ラベルの字間: letter-spacing: 0.1em〜0.2em。FASHION / TEXTILE などの大文字英語ラベルは、和文との視覚的バランスのため広めに開ける
• 日付ラベルの字間: letter-spacing: 0.15em。10px の小さな英数字日付は字間を広げて読みやすく

3.6 OpenType 機能 / palt

• palt は使用しない。明朝体の素のメトリクスを尊重する
• font-feature-settings に明示指定はなし。ブラウザデフォルトのカーニングのみ

3.7 二言語混植

ミナ ペルホネンの大きな特徴は和文と欧文をシームレスに混植すること。

• ナビゲーション: "FASHION" (Helvetica Neue) + "ファッション" (游明朝) のような対比を画面内で同居させる
• コレクション名: "つぐ minä perhonen" のように和文 + Adobe Garamond Pro の欧文を 1 行に並べる
• 数字・日付は基本的に Helvetica Neue で組む

4. Component Stylings

Buttons

ミナ ペルホネンには明示的なボタン要素はほぼ存在しない。CTA はテキストリンクとカテゴリラベルで構成する。

Text Link

• Color: #212121
• Background: transparent
• Font Size: 16px
• Font Weight: 400
• Border Radius: 0px
• Underline: ホバー時のみ表示（または常時非表示）

Category Label（FASHION / TEXTILE 等）

• Color: #212121
• Background: transparent
• Font Family: "Helvetica Neue", arial, sans-serif
• Font Size: 14px
• Font Weight: 500
• Letter Spacing: 0.1em
• Text Transform: uppercase 想定

Sign-in Pill（ヘッダー右上）

• Background: #333333
• Color: #ffffff
• Font: 游ゴシック 14px / 700, letter-spacing 0.2em

Inputs

抽出データに input 要素は出現しなかったが、想定値:

• Border Radius: 0px（明朝の世界観に角丸は馴染まない）
• Border-bottom のみ: 1px solid #212121（横線下線のみ）
• Background: #ffffff
• Padding: 8px 0
• Font Size: 16px

Cards / Lists

• Background: #ffffff
• Border: 0px（境界線なし、余白で区切る）
• Border Radius: 0px
• Shadow: なし
• 写真 + 日付（Helvetica Neue 10px）+ タイトル（游明朝 16px）の 3 段構成

Header

• Padding: 0px（中身に余白を持たせる）
• Background: #ffffff
• Border-bottom: なし、または 1px の細いラインのみ

5. Layout Principles

Container

• 最大幅は固定せず、ブラウザ幅に応じて余白で吸収する
• ヘッダーはセンターロゴ型。左右に均等に余白を取る
• 本文ブロックは画面幅に対して相対的に幅を取り、長文ページでも 720〜960px 程度に収める

Spacing Scale（実測ベース）

Grid

• ヒーローは大きな 1 カラム
• 商品グリッドは 2〜3 カラム（ブラウザ幅依存）
• ナビゲーションは横一列（PC）→ アコーディオン（スマートフォン）

6. Depth & Elevation

ミナ ペルホネンはシャドウを使わない完全フラット。テキスタイルや写真自体が質感を持つため、UI で立体感を加える必要がない。

7. Do's and Don'ts

Do（推奨）

• 本文・見出しすべてに游明朝を採用。サンセリフは欧文ラベルや限定的な機能ラベルだけに留める
• 本文の color: #212121（純黒は避ける）
• 欧文と和文を 1 行に混植する（"つぐ minä perhonen"）。和文 = 游明朝、欧文 = Adobe Garamond Pro / Helvetica Neue
• 欧文セクションラベルは letter-spacing: 0.1em で広めに開ける
• 日付・コピーライトは Helvetica Neue で組み、和文と区別する
• CTA はテキストリンク。ボタン枠を作らない
• 本文の line-height: 1.8 を必ず確保
• 見出しの line-height: 1.2（詰める）
• アクセントカラーは使わず、写真・テキスタイルの色を主役にする

Don't（禁止）

• 純黒 #000000 を本文に使わない（#212121 が基準）
• ゴシック体を本文に使わない（明朝体の世界観が崩れる）
• 角丸 CTA や pill ボタンを多用しない（フラット長方形 or テキストリンク）
• ドロップシャドウ・グラデーションを使わない
• 鮮やかな彩度（純赤以外）を UI に持ち込まない
• 欧文ラベルを letter-spacing: 0 で組まない（0.1em 以上が標準）
• 日本語と欧文で同じフォントを使わない（明確に書体を分ける）
• 行間 1.5 以下で本文を組まない（1.8 が標準）

8. Responsive Behavior

Breakpoints（一般的な慣例ベース）

モバイル時の調整

• h1 36px はそのまま、または 28px 程度に縮小
• ヘッダーはハンバーガーメニュー化
• 商品グリッドは 1〜2 カラムに折り返し
• 欧文と和文の混植 1 行は、モバイルでは行を分けることがある

タッチターゲット

• テキストリンクの周辺に 12px 以上の padding を取り、タップ領域を確保

9. Agent Prompt Guide

クイックリファレンス

Brand: ミナ ペルホネン (mina perhonen)
Body Color: #212121 (純黒不可)
Surface: #ffffff
Mute: #999999
Alert: #ff0000 (警告のみ)
JP Font: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", serif
EN Font (label): "Helvetica Neue", arial, sans-serif
EN Font (title): adobe-garamond-pro, serif
Body Size: 16px
Body Line Height: 1.8 (28.8px)
Heading Line Height: 1.2
Body Letter Spacing: normal
Label Letter Spacing: 0.1em〜0.2em
palt: 使用しない
CTA: テキストリンク優先（ボタン枠を作らない）
Border Radius: 0px (角丸なし)
Shadow: none (フラット)

プロンプト例

ミナ ペルホネンのデザインシステムに従って、新作テキスタイルの紹介ページを作成してください。
- 本文・見出しは 游明朝, "Yu Mincho", "Noto Serif JP", serif
- 欧文タイトル "Spring 2026 Collection" は adobe-garamond-pro, serif
- 欧文セクションラベル "FASHION" は Helvetica Neue 14px / 500 / letter-spacing 0.1em
- 本文は 16px / 400 / line-height 1.8 / color #212121
- 見出しは line-height 1.2 で詰める
- CTA はテキストリンクのみ。ボタン枠は使わない
- 写真の下に日付ラベル "2026.05.08" を Helvetica Neue 10px / 400 / letter-spacing 0.15em で配置
- 角丸とドロップシャドウは使用しない（完全フラット）
- 警告メッセージのみ #ff0000 を使用

字詰め・組版の重要ポイント

1. 明朝中心の世界観を壊さない: 本文・見出しすべて游明朝。欧文だけ Helvetica Neue / Adobe Garamond Pro に切り替える
2. palt を使わない: 明朝体のデフォルトメトリクスを尊重する
3. 欧文ラベルの字間を広げる: FASHION 等の大文字英語は letter-spacing 0.1em 以上で組む
4. 二言語混植: 和文と欧文を 1 行に同居させても違和感がないよう、フォントの切替で空気を変える
5. ボタン枠を作らない: CTA はテキストリンク。pill や角丸長方形は使わない
6. #212121 の徹底: 本文・見出しすべてこの色。純黒禁止

取得日: 2026-05-08 出典: https://www.mina-perhonen.jp/, https://www.mina-perhonen.jp/news/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測