Francfranc（フランフラン） DESIGN.md

Francfranc（https://francfranc.com/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 日本発のインテリア・ライフスタイルブランド。家具・インテリア雑貨・ギフトを中心に展開。フェミニンで温かみのあるパレットが最大の特徴 — ブラッシュピンク（#f2e9e7）をシグネチャーカラーとし、ダスティローズ（#9c706d）をアクセントに使う。システムフォントのみ（Hiragino Sans 先頭）で、Web フォントを一切使わない軽量設計
• 密度: 繊細で上品なEC。本文 13px と小さめのベースサイズが、雑誌的な洗練された印象を生む。余白を十分に取った商品写真中心のレイアウト
• キーワード: フェミニン、ブラッシュピンク、エレガント、ミニマルCTA、細やかなレタースペーシング、システムフォント
• 特徴: letter-spacing 0.05em を全見出しに統一適用する。font-feature-settings は normal（palt なし）。font-weight は 300〜600 と幅広く、見出しでも 500〜600 に留まる。ボタンらしいボタンをほぼ持たず、リンクベースのミニマルなインタラクション設計

2. Color Palette & Roles

Primary（ブランドカラー）

Francfranc のカラーはピンクのグラデーションで構成される。ブラッシュピンクの面色とダスティローズのアクセントがブランドを象徴する。

• Blush Pink (#f2e9e7): ブランドシグネチャーの淡いピンク面。セクション背景・プロモーション帯に使用（19件出現）
• Dusty Rose (#9c706d): ブランドアクセント。ヘッダーロゴ周辺・カテゴリ名に使用
• Hot Pink (#ef4e96): SALE バッジ・プロモーション強調色（3件出現）

Text & Neutral

• Text Primary (#222222): メインテキスト・ヘッダーオーバーレイ（38件出現 — 最多。純黒を避けたソフトブラック）
• Text Secondary (#7f7f7f): フッターテキスト・補足情報
• Text Muted (#ababab): メタ情報・プレースホルダー（13件出現）

Surface

• Surface White (#ffffff): 標準ページ背景
• Surface Blush (#f2e9e7): ブランドカラー面。プロモーション帯・セクション区切りに使用
• Surface Light (#f3f2f3): ニュートラルなセカンダリ背景面

Border

• Border Default: 明示的な枠線は最小限。区切りは面色の切り替えで表現

3. Typography Rules

3.1 和文フォント

• ヒラギノ角ゴ Pro W3 / Hiragino Kaku Gothic Pro: macOS メイン
• メイリオ / Meiryo: Windows フォールバック

3.2 欧文フォント

• Helvetica: macOS 欧文フォールバック
• Arial: クロスプラットフォームフォールバック

3.3 font-family 指定

css/* 全体共通（和文先頭） */
font-family: "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Helvetica, Arial, sans-serif;

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

• 和文先頭型: Hiragino Sans を先頭に置き、日本語の表示品質を最優先
• macOS は Hiragino Sans → ヒラギノ角ゴ Pro W3 の2段階でカバー
• Windows は メイリオ（Meiryo）でカバー
• 欧文は Helvetica → Arial の順
• Web フォントは一切使用しない（システムフォントのみ）

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

3.5 行間・字間

• 本文の行間: line-height: 1.5 — 全階層で統一。Francfranc は line-height 1.5 をすべての要素に一貫して適用する
• 見出しの行間: line-height: 1.5 — 本文と同じ。大きな見出しでも line-height を詰めない
• 本文の字間: letter-spacing: normal — 本文・フッターは字間調整なし
• 見出しの字間: letter-spacing: 0.05em — H1〜H4 のすべての見出しに 0.05em を統一適用

ガイドライン:

• 見出しには letter-spacing: 0.05em を統一適用するのが特徴。フォントサイズに関わらず 0.05em
• 本文（13px / 400）には letter-spacing を適用しない
• line-height 1.5 がグローバルに適用される。見出しも本文も例外なし
• font-weight は 300（ヘッダーロゴ）〜600（見出し）の範囲で、700（Bold）は使用しない

3.6 OpenType 機能

css/* font-feature-settings 未使用 */
font-feature-settings: normal;

• palt 未適用: Francfranc は font-feature-settings を一切指定しない。プロポーショナル字詰めは使わず、等幅の全角字間をそのまま活かす
• letter-spacing 0.05em による字間調整は palt ではなくスペーシングで実現

3.7 改行・禁則

• 特別な禁則設定なし（ブラウザデフォルト）

3.8 縦書き

• 該当なし

4. Component Stylings

Buttons

Francfranc は明示的なボタンをほとんど持たない。インタラクティブ要素の大半は装飾のないテキストリンクで構成される。

Navigation Link（標準）

• Background: #ffffff
• Text: #222222
• Border: なし
• Border Radius: 0–4px
• Font Size: 13px
• Font Weight: 400

Login / Register

• Background: #ffffff
• Text: #222222
• Border Radius: 4px
• Font Size: 13px
• Font Weight: 400

SALE Badge

• Background: — （テキストカラーで表現）
• Text: #ef4e96（ホットピンク）
• Font Weight: 600

ボタンの考え方:

• 塗りつぶし CTA ボタンを持たない。リンクベースのミニマル設計
• border-radius は最大 4px。pill ボタン（9999px）は使用しない
• SALE やプロモーションは #ef4e96 のホットピンクテキストで強調
• ナビゲーションはネスト構造のインデントで階層を表現

Inputs

• Background: #ffffff
• Border: 1px solid（グレー系）
• Border Radius: 4px
• Font Size: 14–16px（iOS ズーム防止で 16px）
• Font Weight: 400

Cards（商品カード）

• Background: #ffffff
• Border: なし
• Border Radius: 0px
• Shadow: なし
• 商品画像 + 商品名（13px / 400–500）+ 価格の構成

5. Layout Principles

Spacing Scale（実測ベース）

Container

• Max Width: 全幅レイアウトを基本（EC サイト型）
• Padding (horizontal): 16–20px

Grid

• 商品カードグリッド: 2–4 カラム（ブレークポイントで可変）
• メニューはフルワイドのリスト形式

6. Depth & Elevation

Francfranc はシャドウをほぼ使わない。面色の切り替え（白 / ブラッシュピンク / ライトグレー）で空間を表現する。

7. Do's and Don'ts

Do（推奨）

• font-family は Hiragino Sans を先頭に置く（和文先頭型）
• 見出しの letter-spacing は 全階層に 0.05em を統一適用する
• line-height は 全要素に 1.5 を適用する（見出しも本文も例外なし）
• 面色にはブラッシュピンク #f2e9e7 を積極的に使う（Francfranc のアイデンティティ）
• テキストは #222222（純黒を避ける）
• SALE やプロモーションには #ef4e96 のホットピンクを使う
• border-radius は 最大 4px に留める
• 本文は 13px を基本サイズとする（雑誌的な洗練感）
• font-weight は 300〜600 の範囲内で使う
• ダスティローズ #9c706d はブランドロゴ・カテゴリ名に限定する

Don't（禁止）

• 純黒 #000000 をテキストに使わない（#222222 が標準）
• pill ボタン（radius 9999px）を使わない
• 塗りつぶし CTA ボタンを安易に追加しない（Francfranc はリンクベースのミニマル設計）
• font-weight: 700（Bold）を使わない（最大 600 まで）
• 本文に letter-spacing を付けない（見出しのみ 0.05em）
• palt（font-feature-settings）を適用しない（Francfranc は未使用）
• シャドウ（box-shadow）を使わない
• ビビッドな原色やネオンカラーを使わない（ピンク系 + グレー系のソフトパレット）
• Web フォントを追加しない（システムフォントのみ）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• Display（36px）→ 縮小
• ヘッダーロゴ周辺は 10px / weight 300 / #9c706d のまま維持
• letter-spacing 0.05em は見出しで維持（Francfranc のアイデンティティ）
• 商品グリッドは 1〜2 カラムに折り返し
• Input は 16px に拡大（iOS ズーム防止）

タッチターゲット

• メニュー項目はパディングで十分なタップ領域を確保
• 最小タッチターゲット: 44px x 44px（WCAG 基準）

9. Agent Prompt Guide

クイックリファレンス

Brand: Francfranc（フランフラン）
Origin: 日本発インテリア・ライフスタイルブランド
Blush Pink: #f2e9e7
Dusty Rose: #9c706d
Hot Pink (SALE): #ef4e96
Text Primary: #222222
Text Secondary: #7f7f7f
Background: #ffffff
Surface Blush: #f2e9e7
Surface Light: #f3f2f3

Font: "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Helvetica, Arial, sans-serif

palt: 未使用（font-feature-settings: normal）
Body: 13px / 400 / line-height 1.5 / letter-spacing normal / color #222
Heading: 16–36px / 500–600 / line-height 1.5 / letter-spacing 0.05em
Display: 36px / 500 / line-height 1.5 / letter-spacing 0.05em
CTA Style: テキストリンクベース（塗りつぶしボタンなし）/ radius 0–4px
Shadow: 使用しない

プロンプト例

Francfranc のデザインシステムに従って、商品一覧ページを作成してください。
- フォントは "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Helvetica, Arial, sans-serif
- font-feature-settings は指定しない（normal）
- 見出しは letter-spacing: 0.05em を統一適用、本文は normal
- 本文は 13px / 400 / line-height 1.5 / color #222222
- セクション見出しは 20px / 600 / line-height 1.5 / letter-spacing 0.05em
- 商品名は 18px / 500 / letter-spacing 0.05em
- 背景は白 #ffffff、プロモーション帯はブラッシュピンク #f2e9e7
- SALE バッジは #ef4e96 のテキストカラー
- 塗りつぶしボタンは使わない。リンクベースのミニマル設計
- border-radius は最大 4px
- シャドウは一切使わない

デザインの重要ポイント

1. ブラッシュピンク #f2e9e7 がブランドシグネチャー: 面色に使うことで Francfranc らしさが生まれる。背景全体ではなく、セクション帯やプロモーション領域に使う
2. 3層のピンク: ブラッシュピンク（#f2e9e7 / 面色）→ ダスティローズ（#9c706d / ブランドアクセント）→ ホットピンク（#ef4e96 / SALE 強調）の3段階で使い分ける
3. システムフォントのみ: Hiragino Sans を先頭とした和文先頭型フォールバック。Web フォントは不使用。ブランドの軽量性・実用性を反映
4. letter-spacing 0.05em は見出し専用: 本文には適用しない。見出しのみに統一的に 0.05em を付与することで、上品なスペーシングを実現
5. line-height 1.5 グローバル適用: 見出し・本文・フッターまで例外なく 1.5。統一感のあるリズムを保つ
6. 13px ベースサイズ: 一般的な 14–16px より小さく、雑誌的な洗練された印象を作る
7. ボタンレスUI: 明示的な塗りつぶしボタンをほぼ持たない。リンクとテキストカラーで行動を促すミニマルなアプローチ
8. palt 未使用: font-feature-settings を一切指定しない。letter-spacing 0.05em による字間調整のみ

取得日: 2026-05-09 出典: https://francfranc.com/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出