45R（フォーティーファイブアール） DESIGN.md

45R（https://www.45r.jp/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 1977年に井上保美が立ち上げた、藍とインディゴ染めを軸にした日本のアパレルブランド。A1 ゴシック（Morisawa）一本でブランド全体を組み、ブランドカラー #1c2940（インディゴ／藍） を CTA・テキストすべてに使う。藍染めの工房が持つ、誠実で柔らかい現代和風の世界観
• 密度: ヒーロー見出しは 50〜60px と非常に大きく、letter-spacing -1.5〜-1.8px のタイトな字詰めで重心を作る。本文は 14〜20px、行間 1.6 で読みやすさを保つ
• キーワード: 藍染め、インディゴ #1c2940、A1 Gothic、Morisawa、レール（線）色 #e5e7e9、矩形 + 6px 角丸、ヘリテージ、藍の白、現代和風
• 特徴: フォントは A1 Gothic の Light / Regular / Medium のみ。font-weight は全て 400 のままで、ファミリーバリアントで太さを切り替える Morisawa ならではの組版。CTA は インディゴ塗りつぶし + radius 6px とライトグレー塗り + radius 0px の二系統

2. Color Palette & Roles

Primary（ブランドカラー）

45R の世界観の中心は 藍 / インディゴ #1c2940。CSS 変数 --wp--preset--color--indigo: #1C2940 として明示的に定義されている、ブランドの主軸色。

• 45R Indigo (#1c2940): 文字・ロゴ・Primary CTA の主軸色（rgb 28, 41, 64）— 藍染めの色そのもの
• Pale Pink (#f78da7): 季節キャンペーン用アクセント（WordPress プリセット）— 桜・春のフィーチャー時のみ

Functional / Status

WordPress 側のデザイントークンとして以下が定義されている。在庫状態のラベル等で使う。

• Restock (#e1e0d7): 再入荷バッジの背景（rgb 225, 224, 215）— 砂色
• Soldout (#f17676): 完売バッジの背景（rgb 241, 118, 118）— 柔らかな赤

Surface & Line

• White (#ffffff): 標準背景
• Line (#e5e7e9): 区切り線・薄面・"WOMEN" "MEN" 等のセカンダリ CTA の背景（rgb 229, 231, 233）
• Thin (#cced3): さらに細い区切り（rgb 204, 206, 211）
• Light Gray (#c1c1c1): 補助境界色（rgb 193, 193, 193）

Text

• Text Primary (#1c2940): 本文・見出しの主要色（インディゴ）— 黒は使わず、すべて藍で組む
• Text Secondary (#838994): サブテキスト（rgb 131, 137, 148）
• White Text (#ffffff): Primary CTA 上のテキスト

3. Typography Rules

3.1 和文フォント

45R は A1 Gothic（Morisawa）を Light / Regular / Medium の3バリアントで使い分ける。Adobe Fonts で配信されている。

• A1 Gothic L: 大ヒーロー見出し（50〜60px の超大型タイトル）
• A1 Gothic R: 本文・標準的な見出し・CTA
• A1 Gothic M: 日付・小キャプション・補助情報

3.2 欧文フォント

• 欧文専用の指定はなく、A1 Gothic が欧文も担当（"NEW" "WOMEN" "MEN" "MAY COLLECTION 2026" 等）
• A1 Gothic は欧文も整った字面を持つため、日英混植でも違和感がない

3.3 font-family 指定

css/* 本文・標準 */
font-family: "A1 Gothic R", sans-serif;

/* 大ヒーロー見出し */
font-family: "A1 Gothic L";

/* 日付・小キャプション */
font-family: "A1 Gothic M";

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

• Adobe Fonts の A1 Gothic が読み込めなかった場合 sans-serif（OS の標準ゴシック）
• 日本語環境では Hiragino Sans / Yu Gothic にフォールバック
• font-weight は 常に 400。太さはファミリーバリアントで切り替える（A1 Gothic L / R / M）
• preview など Adobe Fonts が使えない環境では Zen Kaku Gothic New（Google Fonts、Morisawa 系で字形が近い）で代替

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

3.5 行間・字間

• 本文の行間: line-height: 1.6（22.4px / 14px、32px / 20px）— 自然な可読性
• 巨大見出しの行間: 1.23〜2.0。Hero（60px）は 1.23 と詰めて重さを出し、Section（50px）は 2.0 と大きく開けてリズムを作る
• 大見出しの字間: letter-spacing: -0.03em（-1.5px @ 50px、-1.8px @ 60px）— マイナスの字詰めで重心を作る
• 本文の字間: letter-spacing: normal（0）
• 日付・キャプションの字間: -0.02em（-0.24px @ 12px）— わずかなマイナス字詰め
• ボタン・リンクの字間: -0.03em（-0.54px @ 18px）

3.6 OpenType 機能

• 抽出データ上で明示的な font-feature-settings 指定はなし（normal）
• A1 Gothic（Morisawa）の備える既定のカーニング・約物処理に依存
• palt は使用しない: 和文の字詰めは Morisawa A1 Gothic のメトリクスに任せる

3.7 改行・禁則

• 本文は word-break: normal の自然な折り返し
• 商品名・特集タイトル（"花処　江戸桜" など、全角スペースで意図的に区切るタイトル）は1単語として扱い、改行を避ける
• 大ヒーロー（"MAY COLLECTION 2026"）は1行に収める前提

4. Component Stylings

Buttons

Primary CTA（45R Indigo + 角丸 6px）（"コーディネートを見る" "くわしく見る" "もっと見る" 等）

• Background: #1c2940
• Text: #ffffff
• Border: なし
• Border Radius: 6px
• Padding: 0px 28px〜64px（ボタン高は line-height で確保）
• Font Family: "A1 Gothic R", sans-serif
• Font Size: 14〜16px
• Font Weight: 400

Secondary CTA（ライトグレー塗り + 矩形）（"WOMEN" "MEN" のカテゴリー導線）

• Background: #e5e7e9（line color）
• Text: #1c2940（インディゴ）
• Border: なし
• Border Radius: 0px（完全矩形）
• Padding: 15px
• Font Family: "A1 Gothic R", sans-serif
• Font Size: 16px
• Font Weight: 400

Tertiary（透明 + 緩い角丸）（特集記事カード等の透明領域リンク）

• Background: transparent
• Text: #1c2940
• Border Radius: 10px（カード状のリンクのみ）
• Padding: 80px（巨大なカード状）

ボタンの考え方:

• Primary は インディゴ塗り + radius 6px。"45R らしさ" の象徴
• Secondary は ライトグレー塗り + radius 0px。CTA より地味で、ナビ的役割
• 2つの形（角丸 6px と矩形 0px）を意図的に書き分け、Primary と Secondary を視覚的に分離

Inputs

• Font Family: A1 Gothic R, sans-serif
• Font Size: 14〜16px
• Border: 1px solid #cced3
• Border Radius: 6px（Primary CTA に揃える想定）
• Background: #ffffff

Cards（商品カード）

• Background: #ffffff
• Border Radius: 0px〜10px（用途による）
• Shadow: なし（フラット）
• 製品写真 + 商品名 (A1 Gothic R) + 価格 + バッジ（restock #e1e0d7 / soldout #f17676）

Section Backgrounds

• Hero: #ffffff または商品写真フル
• Listing: #ffffff の白基調
• Footer: #1c2940（インディゴ反転）+ #ffffff テキスト

Status Badges

• 再入荷: bg #e1e0d7（restock）+ text #1c2940
• 完売: bg #f17676（soldout）+ text #ffffff
• NEW: bg #1c2940 + text #ffffff

5. Layout Principles

Container

• ヘッダーは max-width 全幅
• メインコンテンツは固定 max-width（実測ベースで 1200〜1400px 想定）の中央寄せ
• グローバルナビは画面幅いっぱいで、横スクロール対応

Spacing Scale（実測ベース）

WordPress Preset Sizes

CSS Custom Properties に以下のフォントサイズプリセットが定義されている。記事 UI 等で使用される。

Grid

• 商品グリッドは 3〜4 カラム
• 特集記事は 2 カラム
• ヒーローは 1 カラム全幅

6. Depth & Elevation

45R はシャドウを基本使わない。インディゴと白の対比で空間を作る。

7. Do's and Don'ts

Do（推奨）

• すべての文字を color: #1c2940（45R Indigo）で組む。黒は使わない
• フォントは A1 Gothic の L / R / M バリアントで切り替える。font-weight は 400 固定
• 大ヒーロー見出し（50〜60px）には A1 Gothic L を使い、letter-spacing: -0.03em のタイトな詰め
• 本文・標準見出しは A1 Gothic R + letter-spacing: normal
• 日付・キャプションは A1 Gothic M + letter-spacing: -0.02em
• Primary CTA は #1c2940 + radius 6px の組み合わせ
• Secondary CTA は #e5e7e9 + radius 0px の矩形
• Status バッジは #e1e0d7（restock）/ #f17676（soldout）/ #1c2940（NEW）のプリセット色を使う
• 反転セクション（フッター等）は #1c2940 + #ffffff

Don't（禁止）

• 純黒 #000000 を文字色や見出しに使わない
• font-weight を変える代わりに A1 Gothic L / R / M のバリアントを切り替える
• A1 Gothic 以外のフォント（Hiragino・YuGothic 等）を直接指定しない（fallback としてのみ）
• Primary と Secondary の radius を統一しない。6px と 0px を意図的に使い分ける
• 鮮やかな色（vivid-red, vivid-orange 等の WordPress プリセット）を本文や CTA に使わない
• 大見出しの letter-spacing を 0 にしない（-0.03em のタイト詰めが必須）
• 太字（700）を使わない。すべて 400 のまま、ファミリーで太さを表現
• バッジの色を勝手に変えない（restock / soldout / NEW のプリセットは保つ）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• Hero h2 60px → 36〜42px（--wp--preset--font-size--x-large 相当）
• Section h2 50px → 32px
• 商品グリッドは 2 カラムに折り返す
• Secondary CTA "WOMEN" / "MEN" は縦並び

タッチターゲット

• Primary CTA は line-height で 40px 以上を確保
• Secondary CTA は padding 15px で 46px 以上

9. Agent Prompt Guide

クイックリファレンス

Brand: 45R（フォーティーファイブアール）
Primary Color (Indigo): #1c2940
Line Color: #e5e7e9
Thin Border: #cced3
Light Gray: #838994
Restock Badge: #e1e0d7
Soldout Badge: #f17676
Surface: #ffffff
Body Font: "A1 Gothic R", sans-serif
Hero Font: "A1 Gothic L"
Caption Font: "A1 Gothic M"
Body Size: 14〜16px / 400 / line-height 1.6
Hero Size: 50〜60px / 400 / line-height 1.23〜2.0 / letter-spacing -0.03em
Body Letter Spacing: normal
Caption Letter Spacing: -0.02em
Primary CTA: bg #1c2940, color #fff, radius 6px
Secondary CTA: bg #e5e7e9, color #1c2940, radius 0px
Font Weight: 400 fixed (A1 Gothic L/R/M で太さ切り替え)
palt: 使用しない

プロンプト例

45R（フォーティーファイブアール）のデザインシステムに従って、新コレクションの紹介ページを作成してください。
- フォント: "A1 Gothic R", sans-serif（大見出しは "A1 Gothic L"、日付は "A1 Gothic M"）
- 全文字 color は #1c2940 のインディゴ（黒は使わない）
- ヒーロー h2「MAY COLLECTION 2026」は A1 Gothic L / 60px / 400 / line-height 1.23 / letter-spacing -1.8px (-0.03em)
- セクションタイトル「New arrivals」は A1 Gothic L / 50px / line-height 2.0 / letter-spacing -1.5px
- リード（p 20px）で素材や染めの背景を語る、line-height 1.6
- 本文は p 14〜16px / line-height 1.6 / letter-spacing normal
- 日付ラベルは A1 Gothic M / 12px / letter-spacing -0.24px
- Primary CTA「くわしく見る」は #1c2940 bg + #fff text + radius 6px + padding 0 28px〜64px
- Secondary CTA「WOMEN」「MEN」は #e5e7e9 bg + #1c2940 text + radius 0px + padding 15px
- 在庫バッジは #e1e0d7（再入荷）/ #f17676（完売）/ #1c2940（NEW）
- フッターは #1c2940 + #ffffff の反転
- font-weight は **常に 400**。太さは A1 Gothic L / R / M のファミリー切替で表現

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

1. A1 Gothic を Light / Regular / Medium で切り替える: font-weight ではなくファミリーで太さを変える Morisawa 流の組版。45R の固有の流儀
2. すべての文字を #1c2940 で組む: 黒は使わない。藍染めの色がブランドカラーであり、テキスト色そのもの
3. 大見出しは letter-spacing -0.03em: タイトな字詰めで重心を作る。50〜60px の巨大見出しに必須
4. Primary radius 6px / Secondary radius 0px: 形を意図的に書き分け、CTA の階層を視覚的に明示
5. font-weight は 400 固定: 700 や 600 を使わない。Morisawa A1 Gothic のメトリクスに従う
6. WordPress プリセット色: restock / soldout / NEW などのバッジは固定プリセットを使う

取得日: 2026-05-08 出典: https://www.45r.jp/, https://www.45r.jp/about/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出