ARTS&SCIENCE DESIGN.md

ARTS&SCIENCE（https://arts-science.com/）のデザイン仕様書。 2026-06-07 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 2003年にソニア・パークが東京で創設したファッション/ライフスタイルブランド。コンセプト "the perfect 6 and the beautiful 4" — 機能と美、アートとサイエンスの均衡を体現する。オリジナルコレクションとキュレーションアイテムを扱う、ギャラリーのような空間設計
• 密度: ヒーローは全幅の大判写真スライダーが画面を占め、テキストは最小限。プロダクト情報はプルダウン内に格納し、ファーストビューのノイズを極限まで削る。情報は「開示させる」設計
• キーワード: ギャラリー的、静謐、タイムレス、セリフ体、ミニマル、控えめな贅沢、クラフト
• 特徴: ブランドの文字組みは SabonNext（セリフ体） を主軸に据え、欧文の見出し・ナビゲーションにギャモン系の格調を与える。和文は ヒラギノ角ゴ ProN で支え、本文補助には Avenir55Roman のヒューマニストサンセリフを使う。背景は #f9f9f9 の温かみのあるオフホワイト、テキストは #1e1e1e の柔らかい墨色。ボタンらしいボタンは存在せず、テキストリンクと pill 型のカテゴリフィルターだけで動線を構成するほぼボタンレスの UI。装飾色を持たず、写真の色彩がページの彩度を担う

2. Color Palette & Roles

ARTS&SCIENCE は彩度を完全に排除し、無彩色のみで UI を構成する。ブランドカラーは「色がないこと」そのもの。プロダクト写真と素材の質感が画面の色を担い、UI はそれを邪魔しない。

Primary（ブランドカラー）

• ブランドカラーとして特定の有彩色は持たない。#1e1e1e（墨色）と #f9f9f9（温白）の二極で完結する

Neutral

• Text Primary (#1e1e1e): 本文・見出し・ナビゲーション。純黒ではなく温かみのある墨色（rgb 30, 30, 30）
• Text Light (#efefef): 暗い写真上のオーバーレイテキスト。ヒーローキャプション、PICKUP ラベル等
• Background (#f9f9f9): ページ背景。純白ではなく微かに暖色寄りのオフホワイト
• Surface Hero (#ecebeb): ヒーロースライダー・セクション背景。温かみのあるライトグレー
• Footer (#1e1e1e): フッター背景。Text Primary と同色で反転レイアウト

Accent

• 有彩色のアクセントは使用しない
• Swiper.js のデフォルト #007aff はライブラリ由来であり、ブランドカラーではない

3. Typography Rules

3.1 和文フォント

ARTS&SCIENCE は ヒラギノ角ゴ ProN を和文の基盤とする。本文テキストでは yakuhanjp（約物半角）と游ゴシックを間に挟み、約物の字間を調整する。Webフォントは使用しない。

• Hiragino Kaku Gothic ProN: 主要和文フォント
• yakuhanjp: 約物半角化（括弧・読点の詰め用）
• YuGothic: macOS/Windows フォールバック
• serif: 最終フォールバック（本文スタックのジェネリック）

3.2 欧文フォント

欧文は2つの書体を使い分ける。見出し・ナビゲーションにはガラモン系セリフの SabonNext、本文・UIテキストにはヒューマニストサンセリフの Avenir55Roman を使う。

• SabonNextRegular: 見出し、ナビゲーション、ヒーローキャプション。格調と静謐さを担う
• SabonNextDemi: ショップラベル等の強調用。Regular より少し太いが weight 値は 400 のまま
• Avenir55Roman: 本文、カテゴリラベル、プルダウン内テキスト

フォント代替の注記: SabonNext は Linotype のライセンスフォント。preview.html では Google Fonts の EB Garamond で代替する（同じガラモン系セリフ）。Avenir は Frutiger のライセンスフォント。Google Fonts の Nunito Sans で代替する（同じヒューマニストサンセリフ系統）

3.3 font-family 指定

css/* 見出し・ナビゲーション（セリフ） */
font-family: SabonNextRegular, serif;

/* 見出し強調・ショップラベル */
font-family: SabonNextDemi, serif;

/* 本文・UI テキスト（サンセリフ） */
font-family: Avenir55Roman, yakuhanjp, yugothic,
             "Hiragino Kaku Gothic ProN", serif;

/* body（ベースリセット） */
font-family: "Hiragino Kaku Gothic ProN", sans-serif;

/* ---- preview.html 用 代替フォント ---- */
/* SabonNext → EB Garamond（Google Fonts） */
/* Avenir55Roman → Nunito Sans（Google Fonts） */

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

• SabonNext 系は @font-face でローカル埋め込みされているため、フォールバックは serif のみ
• 本文スタックは Avenir55Roman → yakuhanjp（約物詰め）→ yugothic → ヒラギノ角ゴ ProN → serif の順。欧文は Avenir で表示し、和文はヒラギノに自動的に継がれる
• 最終ジェネリックが serif（sans-serif ではない）である点に注意。ブランドのセリフ寄りの姿勢を反映

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

3.5 行間・字間

• 本文の行間: line-height: 1.8（25.2px / 14px）。Avenir + 和文の組み合わせで広めに取り、余白のある読み心地
• 見出しの行間: line-height: 1.3。SabonNext の見出しは詰めて組み、写真に添えるキャプション的な佇まい
• セクションタイトルの行間: line-height: 1.5。"PICKUP" 等のラベル的見出しはやや広め
• 本文の字間: letter-spacing: 0.05em。Avenir + 和文スタックでは軽い字間を入れて通気性を出す
• 見出しの字間: letter-spacing: 0.03em。SabonNext は素のメトリクスが美しいため最小限
• ラベルの字間: letter-spacing: 0.15em。"TOKYO" 等のショップラベルは大きく開けてキャプション的に見せる

3.6 OpenType 機能

• font-feature-settings の明示的な指定なし（normal）
• palt は使用しない
• kern も指定なし — SabonNext はフォント内蔵のカーニングテーブルに委ねる

3.7 改行・禁則

• コンテンツテキストが極端に少ないため、長文の折り返しが問題になる場面はほぼない
• 商品名は欧文のみ or 短い和文のため、禁則処理の影響は限定的

3.8 縦書き

該当なし

4. Component Stylings

Buttons

ARTS&SCIENCE は従来のボタンUIをほぼ持たない。動線はテキストリンクで構成され、唯一のボタン的要素はカテゴリフィルターの pill リンクのみ。

Pill Filter（"All" カテゴリリンク）

• Background: transparent
• Text: #1e1e1e
• Border: なし（実測では枠線なし）
• Border Radius: 60px（pill 形状）
• Font Family: Avenir55Roman, sans-serif
• Font Size: 14px
• Font Weight: 400
• Letter Spacing: 0.042em
• Line Height: 1.3

テキストリンク（ナビゲーション）

• Text: #efefef（暗い背景上）/ #1e1e1e（明るい背景上）
• Font Family: SabonNextRegular, serif
• Font Size: 17px（ヘッダー）/ 15px（本文内）
• Font Weight: 400
• Letter Spacing: 0.03em
• Underline: なし（hover 時のみ）

Inputs

• 実測で目立つフォーム入力要素は確認されず（EC 機能は別ドメインに分離している可能性あり）

Cards

ARTS&SCIENCE の「カード」は明示的なカードUIではなく、写真 + テキストの組み合わせで構成される。

• Background: transparent（写真の上にテキストをオーバーレイ）
• Border: なし
• Border Radius: 0px
• Shadow: なし
• 構成: 大判写真 + カテゴリラベル（13px Avenir） + アイテム名（15px Avenir weight 500）

Section Backgrounds

• Page: #f9f9f9（温白）
• Hero / Pickup: #ecebeb（温グレー。写真のマット感を引き出す）
• Footer: #1e1e1e（Text Primary と同色で反転）
• Pulldown: #f9f9f9 / #ecebeb の交互パターン

5. Layout Principles

Container

• ヒーロースライダーは 全幅（viewport 100%）。写真のインパクトを最大化
• ナビゲーションはオーバーレイでヒーロー上に重ねて表示
• プロダクトグリッドとショップ情報は中央寄せのコンテナ内

Spacing Scale（実測ベース）

Grid

• ヒーロー: 1 カラム全幅スライダー（Swiper.js）
• PICKUP: 大判写真グリッド
• SHOP: マルチカラム（都市別のリンクリスト）
• フッター: コンパクトなリンク群

6. Depth & Elevation

ARTS&SCIENCE はシャドウを一切使わない。奥行きは写真のトーンとテキストオーバーレイの透過で表現する。ギャラリーの壁面に作品を掛けるように、すべてがフラットに並ぶ。

背景色の切り替え（#f9f9f9 → #ecebeb → #1e1e1e）だけで空間を区切る。

7. Do's and Don'ts

Do（推奨）

• 見出し・ナビゲーションは SabonNext（セリフ体） で組む。EB Garamond で代替可
• 本文・UIテキストは Avenir55Roman + yakuhanjp + ヒラギノ角ゴ ProN で組む。Nunito Sans で代替可
• テキスト色は #1e1e1e（墨色）を使う。純黒 #000000 にしない
• 背景は #f9f9f9（温白）を使う。純白 #ffffff にしない
• 写真上のテキストは #efefef を使う
• 見出しの letter-spacing は 0.03em を基本とし、ラベルでは 0.15em まで広げる
• 本文の line-height は 1.8 を維持する
• 写真を大きく使い、テキストは最小限にする
• 動線はテキストリンクで構成し、ボタンUIを避ける

Don't（禁止）

• 有彩色のアクセントカラーを追加しない（ブランドは無彩色で完結する）
• ゴシック体（サンセリフ）で見出しを組まない（見出しはセリフ体）
• 太い font-weight（700 以上）を使わない（最大でも 500）
• ドロップシャドウを使わない
• カードに枠線や背景色をつけない（写真 + テキストオーバーレイが基本）
• 派手な CTA ボタン（塗りつぶし + 白文字）を作らない
• palt を適用しない
• テキストを密に詰めない（余白と通気性がブランドの核）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• ヒーローは全幅スライダーを維持（タッチスワイプ対応）
• ナビゲーションはハンバーガーメニュー化
• Hero Caption 26px → 20px 程度に縮小
• PICKUP グリッドは 1 カラム積みに変更
• フッターは 1 カラム積み

タッチターゲット

• ナビゲーションリンクは line-height 1.3 × 17px ≈ 22px と小さいため、padding で 44px 以上を確保
• Pill フィルターは border-radius 60px の十分な hit area を確保

フォントサイズの調整

• 見出し SabonNext は PC 比 70〜80% に縮小
• 本文 Avenir 14〜15px はモバイルでもそのまま維持

9. Agent Prompt Guide

クイックリファレンス

Brand: ARTS&SCIENCE
Text Primary: #1e1e1e (墨色)
Text Light: #efefef (写真上テキスト)
Background: #f9f9f9 (温白)
Surface Hero: #ecebeb (温グレー)
Footer: #1e1e1e
Heading Font: SabonNextRegular, serif (代替: EB Garamond)
Body Font: Avenir55Roman, yakuhanjp, yugothic,
           "Hiragino Kaku Gothic ProN", serif (代替: Nunito Sans)
Label Font: SabonNextDemi, serif
Body Size: 14–15px / 400–500 / line-height 1.8
Heading Size: 17–26px / 400 / line-height 1.3
Letter Spacing (heading): 0.03em
Letter Spacing (body): 0.05em
Letter Spacing (label): 0.15em
CTA Style: テキストリンク（ボタン UI なし）
Pill Filter: radius 60px / transparent bg
OpenType: palt 不使用

プロンプト例

ARTS&SCIENCE のデザインシステムに従って、新作コレクションページを作成してください。
- ヒーローは全幅写真。キャプション "Products" は SabonNextRegular 26px / 400 / #efefef / letter-spacing 0.03em で写真上にオーバーレイ
- セクションタイトル "PICKUP" は SabonNextRegular 21px / 400 / letter-spacing 0.063em
- 商品名は Avenir55Roman + Hiragino Kaku Gothic ProN 15px / 500 / line-height 1.8 / letter-spacing 0.05em
- カテゴリラベル "Collection" は Avenir55Roman 13px / 400 / letter-spacing 0.05em
- 背景は #f9f9f9（温白）、セクション面は #ecebeb（温グレー）
- テキスト色は #1e1e1e（墨色）、写真上は #efefef
- CTA ボタンは使わない。テキストリンクのみ
- palt は使わない、font-weight は最大 500
- 全体的に余白を広く取り、ギャラリーのような静謐さを保つ

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

1. セリフ体が主役: 見出し・ナビにはガラモン系セリフ（SabonNext）を使い、サンセリフは本文補助に留める
2. font-weight は 500 が上限: 700 以上の太字は使わない。ブランドの控えめさの核
3. letter-spacing の3段階: 見出し 0.03em → 本文 0.05em → ラベル 0.15em の階層がある
4. line-height の2段階: セリフ見出し 1.3（詰め）、サンセリフ本文 1.8（広め）
5. 純黒・純白を避ける: テキストは #1e1e1e、背景は #f9f9f9。柔らかいコントラスト
6. ボタンレス UI: CTA を塗りつぶしボタンで表現しない。テキストリンクと pill フィルターのみ
7. 写真が主役: UI の色彩は無彩色に徹し、プロダクト写真の色と質感を邪魔しない

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