PRESS BUTTER SAND DESIGN.md

PRESS BUTTER SAND（https://buttersand.com/）のデザイン仕様書。 2026-05-19 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 東京発の洋菓子ブランド。バターサンド専門店として、素材の高級感と大胆さを両立するドラマティックなビジュアルデザイン。筑紫Aオールド明朝（Fontworks） の伝統的な和文明朝体と Futura LT Pro の幾何学的欧文サンセリフを組み合わせ、和洋折衷の品格を表現。ブランドカラー #ff3300（オレンジレッド） は「焼きたて」の熱を想起させる鮮烈なアクセント
• 密度: フルスクリーンのヒーロー画像とゆったりとしたセクション構成。プロダクトの美しさを大写しにするシネマティックなレイアウト。情報量は最小限に絞り、ビジュアルで世界観を語る
• キーワード: ドラマティック、和洋折衷、オレンジレッド、明朝体、シネマティック、高級菓子
• 特徴: 黒いヒーローセクション（#000000） と ライトグレー（#d2d2d2） のコンテンツエリアが交互する劇的なコントラスト構成。見出しには和文は筑紫Aオールド明朝、欧文は Futura LT Pro という二系統フォントを使い分ける。ボタンは 角型（radius 0px） で、ブランドオレンジ #ff3300 の塗りつぶし。vw ベースのフォントサイジングを採用し、画面幅に応じてシームレスにスケール。font-feature-settings は normal（palt 不使用）で、代わりに letter-spacing の大きな値（0.05em〜0.15em）で和文の字間を調整

2. Color Palette & Roles

Primary（ブランドカラー）

PRESS BUTTER SAND のカラーパレットは 黒・グレー・白のモノトーン に 鮮烈なオレンジレッド を差し色として使う構成。焼き菓子の「熱」を表現するオレンジレッドが、ダーク基調のデザインの中で目を引く。

• Brand Orange (#ff3300): ブランドの象徴色。セクション見出し・プロダクトタイトル・CTAボタン背景に使用。CSS 変数: --color-orange
• Black (#000000): ヒーローセクション背景・本文テキスト。CSS 変数: --color-black

Text & Neutral

• Text Primary (#000000): 本文テキスト・ニュースタイトル
• Text Dark (#231815): フッター等のダーク要素テキスト（RGB 35, 24, 21 — わずかに赤みを帯びた黒）。CSS 変数: --color-dark
• Text Dark Alt (#222222): 補助テキスト。CSS 変数: --color-dark_2
• Text Secondary (#666666): メタ情報・日付等の補足テキスト。CSS 変数: --color-gray
• Text Tertiary (#333333): 中間濃度のグレー。CSS 変数: --color-gray_2
• Text on Dark (#ffffff): 黒背景・オレンジ背景上の白テキスト。CSS 変数: --color-white

Surface

• Surface Light Gray (#d2d2d2): ページボディ背景。コンテンツエリアの基調色。CSS 変数: --color-gray-light
• Surface Hero (#000000): ヒーローセクション・トップエリアの黒背景
• Surface White (#ffffff): カード・コンテンツブロックの白背景
• Surface Off-White (#f4f4f4): 薄い背景バリエーション。CSS 変数: --color-white_2
• Surface Light Gray 2 (#ededed): セクション背景バリエーション。CSS 変数: --color-gray-light_2
• Surface Light Gray 3 (#dbdbdb): ボーダー・区切り。CSS 変数: --color-gray-light_3
• Surface Light Gray 4 (#e4e4e4): ボーダー・区切りバリエーション。CSS 変数: --color-gray-light_4

Accent

• Brand Orange (#ff3300): CTA・見出し・リンクのアクセント色。視線誘導の要

3. Typography Rules

3.1 和文フォント

PRESS BUTTER SAND の和文タイポグラフィは 筑紫Aオールド明朝 Pr6（Fontworks） を中心に構成される。ウェイトのバリエーションが豊富で、CSS Custom Properties で管理されている。

• FOT-筑紫Aオールド明朝 Pr6 R (--ff-regular): 見出し・プロダクトタイトルの基本ウェイト

• FOT-筑紫Aオールド明朝 Pr6 M (--ff-medium): フッターラベル等の中間ウェイト

• FOT-筑紫Aオールド明朝 Pr6 B (--ff-bold): 強調見出し

• FOT-筑紫Aオールド明朝 Pr6 L (--ff-light): 軽いアクセント

• FOT-筑紫Aオールド明朝 Pr6 D (--ff-demibold): セミボールド

• FOT-筑紫Aオールド明朝 Pr6 E (--ff-extrabold): 極太見出し

• FOT-TsukuAOldMinPr6E (--ff-old-extrabold): オールドスタイル極太

• Hiragino Kaku Gothic ProN: body のフォールバック。ゴシック体で本文の可読性を担保

フォントライセンスに関する注意: FOT-筑紫Aオールド明朝は Fontworks のライセンスフォント（LETS / fonts.to 等で配信）。preview.html では Shippori Mincho（Google Fonts）で代替する。筑紫Aオールド明朝の持つオールドスタイルの風情・墨だまり感に最も近い Google Fonts 和文明朝体

3.2 欧文フォント

• FuturaLTPro-Book (--ff-futura-r): 本文レベルの欧文
• FuturaLTPro-Light (--ff-futura-l): 軽い欧文テキスト
• FuturaLTPro-Medium (--ff-futura-m): セクション見出し・CTAボタンの欧文。実測で最も多く使用されるウェイト
• FuturaLTPro-Heavy (--ff-futura-b): 極太の欧文見出し

フォントライセンスに関する注意: Futura LT Pro は Linotype のライセンスフォント（Adobe Fonts 等で配信）。preview.html では Jost（Google Fonts）で代替する。Futura と同じ幾何学的サンセリフの系譜で、字形の比率が近い

3.3 font-family 指定

css/* 欧文見出し・CTA（Futura LT Pro 系） */
font-family: "FuturaLTPro-Medium", sans-serif;

/* 和文見出し・プロダクトタイトル（筑紫Aオールド明朝） */
font-family: "FOT-筑紫Aオールド明朝 Pr6 R", serif;

/* 本文・ナビゲーション（ゴシック体フォールバック） */
font-family: "Hiragino Kaku Gothic ProN", sans-serif;

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

• 欧文見出しは Futura LT Pro を単独指定。フォールバックは sans-serif のみ
• 和文見出しは筑紫Aオールド明朝を単独指定。フォールバックは serif
• 本文はヒラギノ角ゴ ProN。和文ゴシック体で可読性を確保
• preview.html 用代替: Futura LT Pro → Jost / 筑紫Aオールド明朝 → Shippori Mincho

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

フォントサイズは vw ベース（viewport width に比例）。以下は 1440px viewport での実測値。

3.5 行間・字間

• 本文の行間: line-height: 1.0 — body レベル。コンパクトなデフォルト設定

• 和文見出し（プロダクトタイトル）の行間: line-height: 1.61 — 和文明朝体の品格を保つゆったりとした行間

• ニュースタイトルの行間: line-height: 1.85 — 複数行タイトルの可読性を確保

• 欧文見出しの行間: line-height: 1.0 — Futura の幾何学的なタイトな行間

• 欧文見出しの字間: letter-spacing: 0.05em — 控えめなスペーシング

• 和文プロダクトタイトルの字間: letter-spacing: 0.125em — 明朝体に余裕を持たせるワイドスペーシング

• ニュースタイトルの字間: letter-spacing: 0.15em — 最も広い字間。和文の品格を強調

• CTA の字間: letter-spacing: 0.02em — ごく控えめ

ガイドライン:

• letter-spacing は 三段階: ニュースタイトル 0.15em（ワイド）/ プロダクトタイトル 0.125em（中間）/ 欧文見出し 0.05em（控えめ）
• 和文見出しの letter-spacing は 0.1em 以上が基本。明朝体の繊細な筆致に呼吸を与える
• vw ベースのサイジングにより、letter-spacing も viewport に応じてスケールする

3.6 禁則処理・改行ルール

• 特別な禁則設定なし（ブラウザデフォルト）
• プロダクト名・ニュースタイトルは短文が前提

3.7 OpenType 機能

cssfont-feature-settings: normal; /* palt 不使用 */

• palt は使用しない: 字詰めは letter-spacing の明示的な指定で制御
• 明朝体の等幅的な組みを活かし、letter-spacing で広げる方針
• palt を使わないことで、筑紫Aオールド明朝の持つ伝統的な等幅組みの品格を保持

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（塗りつぶし — "PRODUCTS"）

PRESS BUTTER SAND の CTA はブランドオレンジ塗りつぶし + 角型が基本。

• Background: #ff3300
• Text: #ffffff
• Border Radius: 0px（完全な角型 — pill でも角丸でもない）
• Padding: 17px 32px
• Font Family: "FuturaLTPro-Medium", sans-serif
• Font Size: 14px
• Font Weight: 400
• Letter Spacing: 0.02em (0.3px)

Secondary CTA（テキストリンク — "VIEW MORE"）

• Text: #ff3300
• Background: transparent
• Border Bottom: 1px solid #ff3300
• Font Family: "FuturaLTPro-Medium", sans-serif
• Font Size: 11px
• Font Weight: 400
• Border Radius: 0px

Navigation Link（"STORE店舗一覧はこちら"）

• Background: #d2d2d2
• Text: #000000
• Font Family: "Hiragino Kaku Gothic ProN", sans-serif
• Border Radius: 0px

ボタンの考え方:

• メインは #ff3300 オレンジレッドの塗りつぶし。白テキストとのコントラストで食欲を喚起する
• radius は 0px の完全角型。シャープで潔い印象。菓子ブランドの甘さとは対照的な切れ味
• 欧文ラベルは FuturaLTPro-Medium で統一。font-weight は 400（Futura の Medium ウェイトが font-family 名に内包されている）
• セカンダリはテキストリンク + アンダーラインスタイル。背景なし・ボーダーなし・下線のみ

Cards（プロダクトカード）

• Background: コンテキストに応じて #ffffff または #d2d2d2
• Border Radius: 0px
• Shadow: なし
• プロダクト写真 + タイトル（筑紫Aオールド明朝 / 26px / ls 0.125em / color #ff3300）の構成

Section Backgrounds

• Hero: #000000（黒 — ドラマティックなファーストビュー）
• Content Body: #d2d2d2（ライトグレー — コンテンツエリアの基調）
• Card / Block: #ffffff（白 — コンテンツブロック内）
• Off-White: #f4f4f4（わずかに暖かみのある白）

5. Layout Principles

Container

• フルブリードのヒーローセクション + 中央寄せのコンテンツエリア
• vw ベースのフォントサイジングにより、ブレークポイント不要のシームレスなスケーリング

Spacing Scale（実測ベース）

Font Size Scale（CSS Custom Properties）

フォントサイズは rem ベースの CSS 変数で管理。vw での実測値はこれを viewport に応じてスケールしたもの。

6. Depth & Elevation

PRESS BUTTER SAND はシャドウをほぼ使わない。黒（#000000）とグレー（#d2d2d2）と白（#ffffff）の面の切り替えだけで空間の奥行きを表現する。

7. Do's and Don'ts

Do（推奨）

• 欧文見出し・CTA ラベルには Futura LT Pro（または Jost） を使う
• 和文見出し・プロダクトタイトルには 筑紫Aオールド明朝（または Shippori Mincho） を使う
• ブランドアクセントは #ff3300 のみ使う
• CTA ボタンは 角型（radius 0px）+ #ff3300 背景 + 白テキスト にする
• セクション見出しの色は #ff3300 にする（欧文・和文ともに）
• 和文見出しの letter-spacing は 0.1em 以上にする
• 欧文見出しの letter-spacing は 0.05em にする
• ヒーローセクションは 黒背景（#000000） にする
• コンテンツエリアの背景は #d2d2d2 にする
• 「VIEW MORE」等のセカンダリリンクは #ff3300 テキスト + 下線 にする
• vw ベースのサイジングを維持し、viewport に応じたシームレスなスケーリングを保つ

Don't（禁止）

• pill ボタン（radius 9999px）を使わない（PRESS BUTTER SAND は 完全角型 0px）
• 角丸ボタン（radius 4px〜8px）も使わない
• palt を適用しない（明朝体の等幅組みを維持）
• #ff3300 以外のアクセントカラー（青、緑等）を使わない
• 和文テキストに Futura を使わない（和文は筑紫Aオールド明朝 or ヒラギノ角ゴ ProN）
• 欧文テキストに明朝体を使わない（欧文は Futura LT Pro）
• 見出しの letter-spacing を 0（normal）にしない（和文は 0.1em 以上が必須）
• シャドウ（box-shadow）を使わない（面の色で奥行きを表現する）
• コンテンツエリアの背景を純白（#ffffff）にしない（#d2d2d2 ライトグレーが基調）
• line-height を一律で設定しない（和文明朝 1.6〜1.85 / 欧文 1.0 と使い分ける）

8. Responsive Behavior

Breakpoints

PRESS BUTTER SAND は vw ベースのフォントサイジングを採用しており、明確なブレークポイントによるレイアウト切り替えよりもシームレスなスケーリングを重視。

vw ベースのスケーリング

• フォントサイズが vw 単位で指定されており、viewport 幅に比例して自動スケール
• 1440px viewport で 11.232px のテキストは、375px viewport では約 2.9px 相当まで縮小（実際には min-font-size 等で下限制御される想定）
• letter-spacing の em 値もフォントサイズに連動してスケールする

タッチターゲット

• CTA ボタンのパディング（17px 32px）はデスクトップ基準。モバイルではタップ領域の拡張が必要
• ナビゲーション項目は十分なタッチターゲットサイズを確保する

9. Agent Prompt Guide

クイックリファレンス

Brand: PRESS BUTTER SAND
Origin: 東京発のバターサンド専門洋菓子ブランド
Brand Orange: #ff3300 (--color-orange)
Black: #000000 (--color-black)
Dark: #231815 (--color-dark)
Gray: #666666 (--color-gray)
Page Background: #d2d2d2 (--color-gray-light)
Surface White: #ffffff (--color-white)
Surface Off-White: #f4f4f4 (--color-white_2)
Font JP Heading: "FOT-筑紫Aオールド明朝 Pr6 R", serif（代替: "Shippori Mincho", serif）
Font EN Heading: "FuturaLTPro-Medium", sans-serif（代替: "Jost", sans-serif）
Font Body: "Hiragino Kaku Gothic ProN", sans-serif
palt: 不使用（font-feature-settings: normal）
Section Title EN: 28px / 400 / line-height 1.0 / letter-spacing 0.05em / color #ff3300
Product Title JP: 26px / 400 / line-height 1.61 / letter-spacing 0.125em / color #ff3300
News Title JP: 15px / 400 / line-height 1.85 / letter-spacing 0.15em / color #000000
Body: 11px (vw-based) / 400 / line-height 1.0
CTA Style: filled (bg #ff3300, text #fff, radius 0px, padding 17px 32px)
CTA Font: FuturaLTPro-Medium / 14px / 400 / letter-spacing 0.02em
Secondary Link: text #ff3300 + border-bottom 1px solid #ff3300
Shadow: 使用しない

プロンプト例

PRESS BUTTER SAND のデザインシステムに従って、新商品の紹介ページを作成してください。
- ヒーローセクションは黒背景 #000000 にフルブリードのプロダクト写真
- セクション見出し "PICK UP" は FuturaLTPro-Medium (or Jost), 28px, color #ff3300, letter-spacing 0.05em
- 商品名は 筑紫Aオールド明朝 (or Shippori Mincho), 26px, color #ff3300, letter-spacing 0.125em, line-height 1.61
- CTA「PRODUCTS」は bg #ff3300, text #fff, radius 0px, padding 17px 32px
- ページ背景は #d2d2d2。コンテンツブロックは白 #ffffff
- "VIEW MORE" リンクは #ff3300 テキスト + 下線（border-bottom）
- シャドウは一切使わない。面の色（黒 / グレー / 白）で奥行きを表現する
- font-feature-settings は normal（palt 不使用）

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

1. 二系統フォントの使い分け: 和文は筑紫Aオールド明朝（明朝体）、欧文は Futura LT Pro（幾何学サンセリフ）。この和洋のコントラストがブランドの品格を生む。混植しない（和文テキストに Futura を使わない、その逆も同様）
2. palt 不使用: font-feature-settings: normal がグローバル。字詰めは letter-spacing の明示指定で制御する方針。明朝体の等幅的な組みを活かすデザイン判断
3. letter-spacing の三段階: ニュースタイトル 0.15em（ワイド）/ プロダクトタイトル 0.125em（中間）/ 欧文見出し 0.05em（控えめ）。和文ほど letter-spacing を広くとり、明朝体の筆致に呼吸を持たせる
4. #ff3300 オレンジレッドの象徴性: 「焼きたて」の熱・素材の鮮度を想起させるブランド固有の色。見出しテキスト色としても、CTA 背景色としても使う二刀流。テキスト / 背景の両方で使える強い色
5. 角型ボタン（radius 0px）: pill でも角丸でもない完全な矩形。菓子ブランドの甘さに対する、デザインのシャープさ。「焼き菓子の型」を想起させる幾何学的な潔さ
6. 面による空間構成: 黒（#000000）→ グレー（#d2d2d2）→ 白（#ffffff）の三段階のサーフェスで奥行きを表現。シャドウを使わずに空間を生む
7. vw ベースのスケーリング: フォントサイズが viewport width に比例するため、ブレークポイントに依存しないフルイドデザイン

取得日: 2026-05-19 出典: https://buttersand.com/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出 フォント代替: FOT-筑紫Aオールド明朝 Pr6 → Shippori Mincho（Google Fonts）/ FuturaLTPro → Jost（Google Fonts）