MARKS&WEB（マークスアンドウェブ） DESIGN.md

MARKS&WEB（https://www.marksandweb.com/）のデザイン仕様書。 2026-05-09 取得の computed style と CSS Custom Properties に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 「デイリープロダクツ」を掲げる日本発のボタニカルスキンケアブランド。白・ライトグレー・ダークグレー #303030 だけで構成される徹底したモノクロが特徴。色彩を排し、余白とタイポグラフィだけで「素材そのもの」の誠実さを表現する。装飾はほぼゼロ、影もゼロ、角丸もゼロ
• 密度: 商品一覧は密で小さい文字（14px カードタイトル）を grid で並べる EC 型。本文は 16px / line-height 1.8 と広めの行間で可読性を確保。英語の大きな見出し + 日本語小サブタイトルのバイリンガル二段見出しが全体を貫く
• キーワード: ボタニカル、モノクローム、Noto Sans JP、矩形 CTA（radius 0）、バイリンガル見出し、フラット、無装飾、植物由来
• 特徴: フォントは Noto Sans JP 一本。明朝体は使わない。font-weight は本文 400 / ボタンも 400 で、太さによるコントラストを作らない。唯一の有彩色はセール用の深紅 #831616 のみ。全コンポーネントが border-radius: 0 で統一された完全矩形

2. Color Palette & Roles

Primary（ブランドカラー）

MARKS&WEB の世界観はモノクロ。ブランドカラー自体がテキスト色と同一の #303030 であり、有彩色に頼らずトーンだけで空間を作る。

• Charcoal (#303030): テキスト・見出し・Primary CTA の背景色。ブランドの基調色（rgb 48, 48, 48）
• Light Gray (#eeeeee): フッター背景・バッジ・セクション地。控えめなグレー面
• Tab Active (#c1c1c1): アクティブタブ背景。中間のグレー
• Tab Inactive (#f3f3f3): インアクティブタブ背景。極淡グレー

Accent

• Deep Red (#831616): セール・値引きタグ等に限定使用。唯一の有彩色（rgb 131, 22, 22）

Text & Neutral

• Text Primary (#303030): 本文・見出し・ラベル — 全テキストに統一
• Text Tab (#222222): インアクティブタブのテキスト色（rgb 34, 34, 34）
• Border (#707070): ニュースレター登録ボタンの枠線（rgb 112, 112, 112）
• Input Placeholder (#999999): 想定プレースホルダー色

Surface

• Surface White (#ffffff): 標準背景・Secondary CTA 背景
• Surface Light (#f3f3f3): インアクティブタブ・極淡セクション
• Surface Gray (#eeeeee): フッター・バッジの面色
• Newsletter Input BG (#ffffff): 入力欄背景
• Newsletter Button (#cccccc): ニュースレター登録ボタン背景

3. Typography Rules

3.1 和文フォント

MARKS&WEB は Noto Sans JP のみ。明朝体は一切使わない、ゴシック一本の簡潔な構成。

• Noto Sans JP: 本文・見出し・ボタン・すべてのテキストに使用
• フォールバック: sans-serif（CSS 変数 --font-body-family で定義）

3.2 欧文フォント

• 欧文専用のフォント指定はなく、Noto Sans JP の欧文グリフがそのまま使われる
• 見出しの "NEW ITEMS" "ABOUT US" "VIEW MORE" 等の英文ラベルも Noto Sans JP

3.3 font-family 指定

css/* 本文・見出し・すべて共通 */
font-family: "Noto Sans JP", sans-serif;

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

• CSS 変数 --font-body-family / --font-heading-family ともに "Noto Sans JP", sans-serif
• Web フォントの未到達時は OS のデフォルト sans-serif
• フォールバックチェーンは最小限で、他のフォントに依存しない設計

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

3.5 行間・字間

• 本文の行間: line-height: 1.8（28.8px / 16px）— 日本語本文に十分な余白を確保。ボタニカルブランドらしいゆったりした組版
• 見出しの行間: line-height: 1.3 を基本。英語見出しが多いため欧文寄りのタイトな行間
• 本文の字間: letter-spacing: 0.6px（0.0375em @ 16px）— 微細だが一貫した字間で均整の取れた本文
• 告知・ラベルの字間: letter-spacing: 1px（0.077em @ 13px）— 大文字英語や告知バーで広めのスペーシング
• 見出しの字間: normal（0）— 見出しは字間を開けない

3.6 OpenType 機能

• font-feature-settings: normal — palt は使用しない
• 字詰めは行わず、letter-spacing の統一値で間合いを作る方針
• カーニングも明示指定なし

3.7 改行・禁則

• 本文は word-break: normal の自然な折り返し
• 商品名は日本語のみのものが多く、英日混在は比較的少ない
• 告知バーは letter-spacing 1px で 1 行に収める前提

4. Component Stylings

Buttons

Primary CTA（「詳しくはこちら」）

• Background: #303030
• Text: #ffffff
• Border: なし
• Border Radius: 0px（完全矩形）
• Padding: 0 30px（高さはline-height制御）
• Font Size: 15px
• Font Weight: 400
• Letter Spacing: 1px (0.067em)
• Line Height: 18px

Secondary CTA（"VIEW MORE"）

• Background: #ffffff
• Text: #303030
• Border: なし
• Border Radius: 0px
• 同一フォントサイズ・ウェイト

Tab Button — Active

• Background: #c1c1c1
• Text: #ffffff
• Border Radius: 0px
• Padding: 5px 10px
• Font Size: 12px / Weight 500（唯一の 500 使用箇所）

Tab Button — Inactive

• Background: #f3f3f3
• Text: #222222
• Border Radius: 0px
• Padding: 5px 10px
• Font Size: 12px / Weight 500

Newsletter Submit（「登録」）

• Background: #cccccc
• Text: #303030
• Border: 1px solid #707070
• Border Radius: 0px
• Padding: 8px 20px

Wishlist Button

• Background: #000000
• Text: #ffffff
• Border Radius: 0px

ボタンの考え方:

• 全ボタンが radius 0px の完全矩形。例外なし
• font-weight は CTA でも 400 を維持（タブのみ 500）。太さで目立たせるのではなく、#303030 の塗りつぶしと letter-spacing: 1px で存在感を出す
• 影やホバーエフェクトは最小限。フラットの徹底

Inputs

• Font Family: "Noto Sans JP", sans-serif
• Font Size: 16px（本文）/ 12px（ニュースレター）
• Border: なし（メイン入力欄）/ 実測なし
• Border Radius: 0px（--inputs-radius: 0px）
• Background: #ffffff
• Padding: 15px（メイン）/ 0 8px（ニュースレター）

Cards（商品カード）

• Background: #ffffff
• Border Radius: 0px
• Shadow: なし（完全フラット）
• 商品写真 + h3（14px / 400 / line-height 1.5） + 価格テキストの構成
• グリッド間隔: 8px（--grid-desktop-horizontal-spacing / --grid-desktop-vertical-spacing）

Section Backgrounds

• Hero / メイン: #ffffff
• フッター: #eeeeee（ライトグレー）
• 告知バー: #ffffff + 上下ボーダー
• 全面ダーク反転は使わない（OSAJI との違い）

5. Layout Principles

Container

• Max Width: 100rem（1600px、CSS 変数 --page-width）
• 商品グリッドとコンテンツは全幅に近い配置
• 本文コンテンツは適度な左右 padding で読みやすさを確保

Spacing Scale（実測ベース）

Grid

• 商品グリッドは 3〜4 カラム
• Grid gap: 8px（desktop、CSS 変数で定義）
• 非常にタイトなグリッド間隔が特徴（他ブランドは 16〜32px が一般的）

6. Depth & Elevation

MARKS&WEB は影を一切使わない。box-shadow の指定は全コンポーネントで確認されていない。奥行きは色のトーン差（白 → #eeeeee → #303030）のみで表現する。

7. Do's and Don'ts

Do（推奨）

• テキスト色は #303030 を統一使用する（純黒 #000000 は Wishlist ボタンのみ）
• フォントは "Noto Sans JP", sans-serif のみ。明朝体を混ぜない
• border-radius: 0px をすべてのコンポーネントで徹底する
• 本文に letter-spacing: 0.6px（0.0375em）、告知・ラベルに letter-spacing: 1px を適用する
• 本文の line-height: 1.8 で日本語の可読性を確保する
• 見出しは「英語（大きめ）+ 日本語サブ（小さめ）」のバイリンガル二段構成にする
• 面色は白 #ffffff と #eeeeee のグレーのみ。有彩色のセクション背景を作らない
• CTA の font-weight は 400 を維持する
• グリッド間隔は 8px のタイトな密度を保つ

Don't（禁止）

• 明朝体（Zen Old Mincho、Noto Serif JP 等）を使わない
• pill（border-radius 50%）や角丸（8px〜）を使わない
• box-shadow を使わない。完全フラットを保つ
• #831616（Deep Red）をセール・値引き以外の用途で使わない
• ボタンを太字（600〜700）にしない。400 を維持する（タブの 500 のみ例外）
• 派手な有彩色（ブルー、グリーン、オレンジ等）を使わない
• グラデーションやテクスチャを使わない
• テキストに #000000 を使わない（#303030 がブランド基調）
• 行間を 1.5 未満にしない（日本語本文の可読性を損なう）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• Section Title h2 26px → 20px 程度に縮小
• 商品グリッドは 2 カラムに折り返す
• ナビゲーションはドロワー化
• グリッド間隔は 8px を維持（タイトさはモバイルでも保つ）

タッチターゲット

• Primary CTA は line-height 18px + padding で高さが控えめなため、モバイル時は padding 拡張推奨
• タブボタンは 5px + 5px + 12px = 22px と小さいため、モバイルでは padding を広げる

9. Agent Prompt Guide

クイックリファレンス

Brand: MARKS&WEB（マークスアンドウェブ）
Primary Color: #303030 (Charcoal — テキストと同一)
Light Gray: #eeeeee (フッター・バッジ)
Deep Red: #831616 (セール限定)
Tab Active: #c1c1c1
Tab Inactive: #f3f3f3
Newsletter Button: #cccccc
Text Primary: #303030
Background: #ffffff
Body Font: "Noto Sans JP", sans-serif
Body Size: 16px / 400 / line-height 1.8
Body Letter Spacing: 0.6px (0.0375em)
Heading Size: 26px / 400 / line-height 1.3
CTA Font Size: 15px / 400 / letter-spacing 1px
CTA Border Radius: 0px (全ボタン共通)
CTA Font Weight: 400
Grid Gap: 8px
palt: 使用しない
box-shadow: 使用しない

プロンプト例

MARKS&WEB（マークスアンドウェブ）のデザインシステムに従って、新商品紹介ページを作成してください。
- フォント: "Noto Sans JP", sans-serif のみ。明朝体は使わない
- 本文 color は #303030、font-size 16px、line-height: 1.8、letter-spacing: 0.6px
- 見出しは英語 + 日本語サブの二段構成: h2 "NEW ITEMS" 26px / 400 / lh 1.3 + sub "新商品" 14px / 400
- 見出しの letter-spacing は normal（0）、ラベル・告知は letter-spacing: 1px
- Primary CTA「詳しくはこちら」は #303030 bg + #ffffff text + radius 0px + padding 0 30px + font-weight 400 + letter-spacing 1px
- カード: 商品写真 + h3 14px / 400 / lh 1.5 + 価格。grid-gap 8px
- 面色は #ffffff と #eeeeee のみ。有彩色のセクション背景を作らない
- box-shadow は一切使わない。完全フラット
- 角丸は一切使わない。すべて border-radius: 0px

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

1. モノクロの徹底: #303030 + #eeeeee + #ffffff の 3 色だけで世界を作る。有彩色は #831616 セールタグのみ
2. letter-spacing の二段階: 本文 0.0375em / ラベル・告知 0.077em。見出しは normal
3. radius 0px の完全矩形: pill も角丸も一切なし。すべてのインタラクティブ要素が矩形
4. font-weight 400 の統一: CTA ですら 400。太さで強調しない。色の塗りつぶしで区別する
5. バイリンガル二段見出し: "NEW ITEMS"（英語 26px）+ "新商品"（日本語 14px）の構成が全セクションに共通
6. 8px グリッド: 商品グリッドの間隔が 8px と非常にタイト。密度の高い EC レイアウト
7. 影ゼロ: box-shadow の指定が一切ない。奥行き表現は色のトーン差のみ

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