objcts.io（オブジェクツアイオー） DESIGN.md

objcts.io（https://objcts.io/）のデザイン仕様書。 日本発の D2C プレミアムレザーグッズブランド。バッグ・アクセサリーを中心に、ものづくりの質感と機能美を追求。 実サイトの computed style 実測（2026-05-09 取得）に基づく。Shopify ベースの EC サイト。

1. Visual Theme & Atmosphere

• デザイン方針: ミディアムグレー #707070 を唯一のブランドカラーに据えた、極めて抑制的なモノトーン設計。派手な原色を一切排し、プロダクト写真の革の質感・色味を主役にする「ギャラリー型 EC」
• 密度: 12px という小さなベースフォントサイズ、本文は 15px で line-height 1.6。情報密度は控えめで、余白とプロダクトフォトに呼吸を持たせる
• キーワード: ミディアムグレー、レザーの質感、ギャラリー型、抑制、プロダクト写真中心
• 特徴:
  • ブランドカラーが #707070（ミディアムグレー）という極めて珍しい選択。黒でもシルバーでもない「革の中間トーン」をブランド色にすることで、レザープロダクトの陰影と調和させている
  • 本文フォントは Lato（欧文優先）+ 游ゴシック体 / YuGothic / Noto Sans JP の混植スタック。欧文の端正さを先に立て、プロダクト名・型番の多い EC に適した構成
  • 見出しはシステムフォントスタック（Shopify デフォルト）を使用。本文の Lato とのコントラストで、見出しを「構造」、本文を「ブランドの声」として分離
  • CTA の角丸戦略が混在: 主要 CTA（View All, Checkout）は border-radius: 0px（シャープ）、セカンダリ（Add, 登録）は 4〜5px、ページネーションは 50%（円形）。シャープな CTA が高級感を、丸みのあるセカンダリが親しみやすさを担う
  • ボーダー #e8e8e1 はわずかに黄緑がかったウォームグレー。純粋なグレーではなく、天然皮革の色味に寄せている
  • アナウンスメントバーは #1c1d1d（ほぼ黒）で、唯一のダーク面。ここだけ強い対比を持たせる
  • Checkout ボタンは #111111（漆黒に近い）で radius 0px。購入導線で最大の視覚的重みを作る
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値（CSS Custom Properties 含む）。すべて hex 表記。

Brand

• Brand Gray (#707070): メインのブランドカラー。Add ボタン背景、View All / Check Collaboration ボタン背景、本文テキスト色。CSS変数 --colorBtnPrimary
• Brand Gray Dim (#636363): ホバー時のプライマリボタン色。CSS変数 --colorBtnPrimaryDim
• Cart Dot (#ff4f33): カートアイコンの通知ドット。唯一の暖色アクセント（限定的な使用）。CSS変数 --colorCartDot

CTA / Buttons

• Primary CTA（Add）: 背景 #707070 / 文字 #ffffff / radius 5px / weight 400
• Checkout CTA: 背景 #111111 / 文字 #ffffff / radius 0px（シャープ）— 購入導線で最大の重み
• View All / Brand CTA: 背景 #707070 / 文字 #ffffff / radius 0px（シャープ）— セクション遷移
• Email Signup: 背景 #505050 / 文字 #ffffff / radius 3px — メール登録バナー
• Outline CTA: 背景 transparent / 文字 #000000 / border 1px solid / radius 4px — Check Products
• Outline Light: 背景 transparent / 文字 #ffffff / border 1px solid / radius 0〜4px — ダーク面上の CTA

Neutral — Warm-Tinted Gray Scale

Semantic（実測未確認・推奨値）

実サイトのプロダクトページにはエラー／成功色が表面化していない。EC向けに推奨する補完値:

• Danger: #cc3333 程度（品切れ表示、フォームエラー）
• Success: #3d7a4a 程度（在庫あり、注文完了）— ブランドのグレートーンに合わせ彩度を落とす
• Warning: #b5860a 程度（残りわずか等）

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体（YuGothic）を基本和文フォントとして使用
• フォールバック: Noto Sans JP → sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: Lato を最優先。Google Fonts のクリーンな欧文書体で、レザーグッズの型番・プロダクト名が美しく表示される
• 見出し用には別途システムフォントスタック（system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans）を使用

3.3 font-family 指定

css/* 本文・ナビ・ボタン等（Lato 優先の和欧混植） */
font-family: Lato, "游ゴシック体", YuGothic, "Noto Sans JP", sans-serif;

/* 見出し（h1〜h3）— Shopify デフォルトのシステムフォントスタック */
font-family: system-ui, -apple-system, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif;

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

• 本文は Lato（欧文）を先頭に置く。プロダクト名・型番が多い EC では欧文グリフの品質が重要。日本語は游ゴシック体 → Noto Sans JP でカバー
• 見出しはシステムフォントスタックで OS ネイティブの表示。Lato とは異なるフォントにすることで、「見出し＝構造的ナビゲーション」「本文＝ブランドの語り口」という二層構造を作っている
• 游ゴシック体と YuGothic は同一フォントの別名指定（macOS / Windows 対応）

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

実測値（トップページ・プロダクトページ、2026-05-09 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (15px): 1.6（24px / 15px）— 標準的な日本語本文の行間
• ベース (12px): 1.5（18px / 12px）— UI テキスト
• 見出し (18〜32px): 1.2（全見出し共通でタイト）

字間 (letter-spacing) — 実測:

• 本文・ベース: 0.025em（+0.3〜0.375px）— 微量の正トラッキングで日本語の可読性を確保
• 装飾テキスト: 0.2em（+3px / 15px）— レザーブランドらしい広い字間で高級感を演出
• セクション区切り見出し: 0.1em（+2px / 20px）— 見出しに呼吸を持たせる装飾的な字間
• 見出し（通常）: 0（トラッキングなし）
• 全要素 font-feature-settings: normal — palt / kern は明示的に有効化されていない

ガイドライン:

• 本文は line-height 1.6 + letter-spacing 0.025em が objcts.io の基本リズム。STORES (1.75) よりタイトで、EC の商品説明に適した行間
• 見出しは一律 line-height 1.2 でタイト。weight 400 のみで、太字を使わず「軽さ」で高級感を作る
• 装飾的な広い字間（0.1em〜0.2em）がブランドの声。セクション区切りやキャッチコピーで使用し、レザーの手触り・静けさを文字で表現する

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• プロダクト名（英語）は改行されにくいよう配慮
• Shopify のデフォルト禁則処理に準拠

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• Lato の欧文メトリクスと游ゴシック体のデフォルト字詰めに依存

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（Add — ブランドグレー角丸） — "Add" / カート追加

• Background: #707070
• Text: #ffffff
• Padding: 10px 20px
• Border Radius: 5px
• Font: Lato + 游ゴシック, 12px, weight 400
• Border: none

Checkout CTA（漆黒シャープ） — "Checkout" / 購入確定

• Background: #111111
• Text: #ffffff
• Padding: 12px 24px
• Border Radius: 0px（完全にシャープ — 購入導線の「決意」を表す）
• Font: Lato + 游ゴシック, 14px, weight 500
• Border: none

Brand CTA（グレーシャープ） — "View All" / "Check Collaboration"

• Background: #707070
• Text: #ffffff
• Padding: 12px 24px
• Border Radius: 0px（シャープ）
• Font: Lato + 游ゴシック, 12〜14px, weight 400
• Border: none

Email Signup CTA（ダークグレー） — メール登録バナー

• Background: #505050
• Text: #ffffff
• Padding: 10px 20px
• Border Radius: 3px
• Font: Lato + 游ゴシック, 12px, weight 400
• Border: none

Outline CTA（白枠） — "Check Products" / "最寄りの店舗を探す"

• Background: transparent
• Text: #000000（ライト面）/ #ffffff（ダーク面）
• Border: 1px solid currentColor
• Padding: 10px 20px
• Border Radius: 4px / 0px（文脈による）
• Font: Lato + 游ゴシック, 12px, weight 400

Pagination（円形）

• Background: #ffffff
• Text: #707070
• Border: 1px solid #e8e8e1
• Border Radius: 50%（完全な円）
• Size: 36px x 36px

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #e8e8e1
• Border (focus): 1px solid #707070
• Border Radius: 4px
• Padding: 10px 14px
• Font: Lato + 游ゴシック, 14px, weight 400
• Height: 40px

Cards / Product Cards

• Background: #ffffff
• Border: none（ボーダーレスでプロダクト写真を際立たせる）
• Border Radius: 0px（シャープ — レザーの端正さ）
• Shadow: none
• Image Aspect Ratio: 正方形（1:1）が基本

Announcement Bar

• Background: #1c1d1d
• Text: #ffffff
• Padding: 8px 16px
• Font: Lato + 游ゴシック, 12px, weight 400
• Position: fixed top

Header

• Background: #ffffff
• Border Bottom: 1px solid #e8e8e1
• Position: sticky
• z-index: 50 程度

Footer

• Background: #ffffff
• Border Top: 1px solid #e8e8e1
• Padding: 48px 24px

Drawers（カート・メニュー）

• Background: #ffffff（CSS変数 --colorDrawers）
• Overlay: rgba(0, 0, 0, 0.5) 程度

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1200px 程度
• Padding (horizontal): mobile 16px / desktop 24〜40px

Border Radius Strategy

重要: objcts.io は STORES やその他 SaaS 系とは異なり、主要 CTA がピル（9999px）ではなくシャープ（0px）。高級レザーブランドの「端正さ・直線美」を CTA の形状で表現している

Grid

• 商品一覧: 4 カラム（desktop）→ 2 カラム（mobile）
• Gutter: 16〜24px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は 背景面の色差（#ffffff → #f5f5f5 → #f2f2f2）と アナウンスメントバーの #1c1d1d で表現
• 影を使わないフラット設計がギャラリー的な静けさを支えている。影を入れる場合も alpha 0.06〜0.12 に抑える
• ウォームボーダー #e8e8e1 が影の代わりに要素の境界を示す

7. Do's and Don'ts

Do（推奨）

• 本文フォントは Lato を先頭に、和文フォールバックは游ゴシック体 → YuGothic → Noto Sans JP
• 見出しはシステムフォントスタック。本文と見出しでフォントファミリーを分ける
• ブランドカラーは #707070（ミディアムグレー） を CTA・テキスト・アクセントに一貫して使う
• 主要 CTA（View All, Checkout 系）は border-radius 0px のシャープにする
• セカンダリ CTA（Add 等）は radius 4〜5px の控えめな角丸にする
• 本文の line-height は 1.6 を基本にする
• ボーダーは #e8e8e1（ウォームグレー） を使い、冷たい灰色（#d1d5db 等）は避ける
• 見出しは weight 400（Regular）を基本にする。太字で強調するのではなく、サイズと余白で階層を作る
• 装飾的なテキストには letter-spacing 0.1em〜0.2em の広い字間を使い、レザーブランドの「静けさ」を表現する
• プロダクト写真を主役にし、UI はミニマルに抑える

Don't（禁止）

• 主要 CTA に 鮮やかな色（ブルー、グリーン、レッド等）を使わない — objcts.io の押しはグレーのみ。#ff4f33 はカート通知ドット専用
• 見出しに weight 600〜700 を使わない — 全見出し weight 400 がブランドの「軽さ」
• 本文に line-height 1.5 以下を使わない（商品説明文の読みやすさが損なわれる）
• ピル（border-radius 9999px） を主要 CTA に使わない — objcts.io の CTA はシャープ（0px）か控えめな角丸（4〜5px）
• 冷たいグレー（#9ca3af、#6b7280、#f3f4f6）を使わない。objcts.io のグレーは #707070 / #e8e8e1 / #f2f2f2 で構成され、どれも微かにウォーム
• プロダクトカードに 影やボーダーを付けない — 写真の美しさを枠で囲まない
• 12px より小さいフォントサイズを使わない（12px がベースの下限）
• font-feature-settings: "palt" 1 を勝手に追加しない（実サイトは normal）
• アナウンスメントバー以外に ダーク面を多用しない — ダーク面は #1c1d1d のバー1本だけ

8. Responsive Behavior

Breakpoints（Shopify 準拠の推奨値）

モバイル時の調整

• Hero H2: 32px → 22〜24px
• H1: 22px → 18〜20px
• 本文サイズは 15px を維持（line-height 1.6 維持）
• ベースサイズ 12px はモバイルでもそのまま
• 商品グリッド: 4列 → 2列
• ナビはハンバーガーメニュー化

タッチターゲット

• CTA ボタン: 高さ 40px 以上（padding 10〜12px + フォント + line-height ≒ 40〜44px）
• ページネーション: 36px（円形、タップしやすい）

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Gray (CTA / Text): #707070
Brand Gray Dim (Hover): #636363
Checkout Black: #111111
Announcement Dark: #1c1d1d
Email Signup Gray: #505050
Cart Dot (通知): #ff4f33
Warm Border: #e8e8e1
Surface Dim: #f2f2f2
Surface Medium Dim: #f5f5f5
Surface Light Dim: #fafafa
White: #ffffff

Body Font: Lato, "游ゴシック体", YuGothic, "Noto Sans JP", sans-serif
Heading Font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif

Body Size: 15px / line-height 1.6 / weight 400 / letter-spacing 0.025em / color #707070 or #000000
Base Size: 12px / line-height 1.5 / weight 400 / letter-spacing 0.025em / color #707070
Heading Size: 20〜32px / line-height 1.2 / weight 400 / letter-spacing 0
Decorative Text: 15〜20px / letter-spacing 0.1em〜0.2em

Border Radius: 0px（主要 CTA・カード）/ 4〜5px（セカンダリ CTA）/ 50%（ページネーション）
Shadow: 基本 none。ギャラリー的なフラット設計。階層は #f2f2f2 / #f5f5f5 の面色差で表現

プロンプト例

objcts.io のデザインに従って、レザーバッグの商品一覧ページを作成してください。
- 本文フォント: Lato, "游ゴシック体", YuGothic, "Noto Sans JP", sans-serif
- 見出しフォント: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
- セクション見出し: 20〜32px / weight 400 / line-height 1.2 / letter-spacing 0 / color #000000
- 本文: 15px / weight 400 / line-height 1.6 / letter-spacing 0.025em / color #707070
- ベーステキスト: 12px / weight 400 / line-height 1.5 / letter-spacing 0.025em / color #707070
- 装飾テキスト（キャッチコピー等）: letter-spacing 0.1em〜0.2em で静けさを演出
- 主要 CTA（View All）: 背景 #707070 / 白文字 / border-radius 0px / padding 12px 24px
- Checkout CTA: 背景 #111111 / 白文字 / border-radius 0px / padding 12px 24px / weight 500
- セカンダリ CTA（Add）: 背景 #707070 / 白文字 / border-radius 5px / 12px / weight 400
- Outline CTA: 背景 transparent / 文字 #000 / border 1px solid / radius 4px
- 商品カード: 背景 white / ボーダーなし / radius 0px / 影なし — 写真が主役
- ボーダー: #e8e8e1（ウォームグレー）
- 背景面: #ffffff / #f2f2f2 / #f5f5f5 の微妙な差で階層を作る
- 見出しは weight 400 のみ（太字を使わない）
- ブランドカラー #707070 以外の派手な色を CTA に使わない
- ピル（border-radius 9999px）を使わない — シャープか控えめな角丸
- box-shadow は基本 none — ギャラリー的なフラット設計を維持