ONIBUS COFFEE (オニバスコーヒー) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

対象サイト: https://onibuscoffee.com/ ONIBUS COFFEE は東京・奥沢を拠点とするスペシャルティコーヒーの焙煎所／カフェ。 「コーヒーで、街と暮らしを豊かにする。/ Connecting people through coffee.」を掲げる。 EC は Shopify 上に構築されており、生豆の産地や生産者名を商品名に据えたラインナップが並ぶ。 温かいアイボリー（#f8f6f4）を下地に、黒の細罫と大きく開いた字間で組む、 角丸ゼロ・影ゼロの静かなクラフト EC。 実測はトップページ / 全商品一覧（/collections/all）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 焙煎所の紙袋を思わせる温かいアイボリー #f8f6f4 を全面の下地に敷き、黒の 1px 罫と字間を大きく開いた小さな文字で組む。装飾を一切足さず、商品写真（白バックのコーヒーバッグ）と余白だけで構成する。角丸・影・面塗りボタンを使わない「引き算のクラフト EC」
• 密度: 低〜中密度。商品グリッドは 4 カラムで並ぶが、ガター 8px と詰めつつカード自体には枠も影も付けない。文字は 12〜18px と小さめで、代わりに字間（letter-spacing）を大きく開いて呼吸させる
• キーワード: アイボリー地 / スペシャルティ / 角ゼロ / 疎な字間 / 焙煎所 / クラフト EC
• 形状言語: すべての要素が border-radius: 0。Shopify のテーマ変数（--buttons-radius-outset: 0px / --product-card-corner-radius: 0 / --badge-corner-radius: 0 / --media-radius: 0px）がいずれもゼロで、丸みが徹底的に排除されている。影も全変数が opacity: 0 で完全にフラット
• 書体の性格: 欧文は tenon（Typotheque のヒューマニスト サンセリフ）。和文は MyYuGothicM → 游ゴシックへ落とすスタックで、Windows でも中太を確保する構成。ウェイトは Regular(400) が基調で、セクション見出しだけ Bold(700) ＋ letter-spacing: 0.2em という極端な字間で「ラベル」として立たせる
• ブランドの署名: (1) 最上部のダークブラウン #40150b の告知バー（焙煎豆の色）、(2) 商品サムネイル左上のオリーブイエロー #c4c22c のランキング バッジ、(3) 透明・1px 黒罫・角ゼロの CTA

2. Color Palette & Roles

Base（下地）

• Background (#f8f6f4): ページ全体の下地。温かいアイボリー（rgb(248,246,244)）。html と body の両方が同じ値で、上部 viewport の 12 点サンプルのうち告知バー以外の 9 点すべてがこの色を返す。この下地こそがブランドの決定的な特徴
• Surface (#ffffff): 商品画像の背景・検索入力欄・ドロップダウンなど、下地から一段持ち上げる面。純白
• Ink Black (#000000): 本文・商品名・価格・CTA の罫の基調色。純黒

Brand / Accent（ブランド・アクセント）

• Roast Brown (#40150b): ダークブラウン（rgb(64,21,11））。最上部の送料無料告知バーとポップアップの帯に使う面色。深煎りの豆の色であり、下地のアイボリーに対して唯一の濃い面。文字は白 #ffffff
• Olive Yellow (#c4c22c): オリーブイエロー（rgb(196,194,44)）。「人気NO.1 / NO.2 / NO.3」ランキング バッジの面色。文字は白 #ffffff。サイト中で最も彩度の高い色だが、使用箇所は 3 枚のサムネイルのみという徹底した節度が特徴
• Badge Gray (#888888): 「NEW」バッジの面色（rgb(136,136,136)）。文字は白 #ffffff。ランキングより一段弱い告知として使う

Neutral（ニュートラル）

• Text Primary (#000000): 本文・商品名・価格。純黒
• Text Heading (#464646): セクション見出し（h2.c-headerLine）専用の濃いグレー（rgb(70,70,70)）。本文の純黒よりわずかに退けてある
• Text Muted / Line (#bfb7af): 温かいグレージュ（rgb(191,183,175)）。セクション見出しの下罫（border-bottom: 1px solid）と、メニュー内のキャッチコピー文字色を兼ねる。罫と補助文字を同じ色で統一している点がこのサイトの流儀
• Border (#000000): CTA・入力欄の枠は純黒 1px
• Line Soft (#bfb7af): 見出し下線・区切り罫

色に関する設計思想

• 基調は「アイボリー地 #f8f6f4」「純黒の文字と罫 #000000」「白の商品面 #ffffff」の 3 色
• 濃い面はダークブラウン #40150b だけ。告知バーという 1 箇所に限定して使い、ページ内で乱用しない
• 有彩色はオリーブイエロー #c4c22c だけ。ランキング バッジという 1 用途に限定する
• 罫と補助文字はどちらも #bfb7af。グレーではなくわずかに黄みを含んだグレージュにすることで、アイボリーの下地となじませる
• CTA に面色を持たせない（透明＋黒罫）ため、ページ全体が「紙に印字した」ような静けさになる

3. Typography Rules

3.1 和文フォント

• ゴシック体: MyYuGothicM → 游ゴシック / Yu Gothic / YuGothic → ヒラギノ角ゴ ProN / Hiragino Kaku Gothic ProN → メイリオ / Meiryo → sans-serif
  • MyYuGothicM は Windows の游ゴシック Medium 問題への対策。Windows の游ゴシックは Regular が細すぎるため、@font-face で Medium にマッピングした別名を先頭に置き、Windows でも中太を確保している（SmartHR の AdjustedYuGothic と同種の手法）
  • 和名・英名の両方を書く（游ゴシック と Yu Gothic / メイリオ と Meiryo）ことで、OS の言語設定に依らず解決させている
  • ヒラギノは ProN（Pro ではない）
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ: tenon（Typotheque のヒューマニスト サンセリフ。低コントラストで開いたアペチュアを持つ）。フォールバックチェーンの先頭に置かれ、和文フォントより優先される。欧文グリフを tenon で拾い、和文グリフだけが游ゴシックに落ちる設計
• 欧文専用の指定: 英語キャッチコピー・メルマガ入力欄など一部は font-family: tenon, sans-serif と和文を省いた短いスタックを使う
• セリフ / 等幅: 使用しない

代替フォントの注記: tenon は Typotheque の Web ライセンス フォントのため、ローカル・preview.html では表示できない。

• tenon → Work Sans（低コントラストのヒューマニスト サンセリフで、開いたアペチュアと骨格が近い。次点は Hanken Grotesk）
• 和文 MyYuGothicM / 游ゴシック → Zen Kaku Gothic New（游ゴシックに近い、やや古典的で線の細い和文ゴシック。Noto Sans JP より印象が近い）
• preview.html では CSS 変数だけでなくインラインスタイルのフォント指定も代替フォントに揃えること

3.3 font-family 指定

css/* 基本（body / 見出し / 商品名 / 価格 / ナビ すべて共通） */
font-family: tenon, MyYuGothicM, 游ゴシック, "Yu Gothic", YuGothic,
             "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
             メイリオ, Meiryo, sans-serif;

/* 欧文のみのテキスト（英語キャッチ・メルマガ入力欄） */
font-family: tenon, sans-serif;

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

• 欧文（tenon）を先頭に置き、ラテン グリフをブランド書体で拾う（note や Apple JP と同じ「欧文優先」方針）
• 和文は Windows 対策の MyYuGothicM を先に、次に游ゴシック（和名・英名の両方）、macOS のヒラギノ ProN、最後にメイリオ
• サイト全体でこの 1 スタックのみ。見出し・本文・UI でフォントを切り替えない。階層はサイズ・ウェイト・字間だけで作る

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

3.5 行間・字間

• 既定の行間 (line-height): 1.0（＝ font-size と同値）。ナビ・価格・ボタン・キャッチなど、1 行で完結するテキストはすべて行間ゼロ相当で組み、要素間の余白で間隔を作る
• 折り返す本文の行間: 1.7〜1.8（商品名 1.71 / アコーディオン見出し 1.8 / セクション見出し 1.72）。2 行以上になる箇所だけ行間を広げるという明確な使い分け
• 既定の字間 (letter-spacing): 0.05em（0.7px / 14px）。body に設定されており、サイト全体に効く
• 欧文の字間: 0.1em（1.4px / 14px）。和文の 2 倍に開く
• 見出しの字間: 0.2em（3.6px / 18px）。極端に開いてラベル的に見せる、このサイト最大の特徴
• CTA の字間: 0.05em（0.6px / 12px）

ガイドライン:

• 日本語本文としては行間 1.0 は極端に狭い。これは「1 行テキストのみ」という前提でのみ成立する。段落を組む場合は 1.7〜1.8 を使う
• 字間はすべての階層で開く方向（詰めない）。見出し 0.2em → 欧文 0.1em → 本文 0.05em という段階を守る
• 見出しに 0.2em を入れると和文が大きく散るため、見出しは短い単語（「新着」「コーヒー」）に限定する

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 商品名は「コロンビア / ルイス・フェリペ」のように産地とプロデューサーをスラッシュで区切る。折り返しはスラッシュの後で起こるのが自然

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使わない */

• 実測ではすべての要素で font-feature-settings: normal。palt は使用しない
• 字間を詰める代わりに letter-spacing で開く方向に振っているため、palt による詰めは方針と矛盾する

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

すべての要素で border-radius: 0、box-shadow: none。 Shopify テーマ変数もすべて 0 / opacity 0 に設定されている。

Buttons

Primary CTA（.c-buttonLink）— 透明・黒罫・角ゼロ

このサイトの主要 CTA はすべてこの 1 種類。「全ての商品を見る」「商品を見る」「詳しく見る」「全て見る」いずれも同一スタイル。

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 0
• Padding: 2px 25px 0（上下非対称。ベースラインを視覚的に中央へ寄せるための微調整）
• Size: 実測 180px × 36px
• Font Size: 12px
• Font Weight: 400
• Letter Spacing: 0.05em（0.6px）
• Box Shadow: none
• Hover（推奨）: background: #000000; color: #ffffff（反転）

重要: このサイトには塗りつぶしのプライマリボタンが存在しない。CTA を目立たせるために面色を足さないこと。

Secondary（.c-mailmagazineButton）— 罫なしテキストボタン

• Background: transparent
• Text: #000000
• Border: なし
• Font Size: 12px / Weight 400
• 例: メルマガの「登録」

Badges

Ranking Badge（人気NO.1〜3）

• Background: #c4c22c（オリーブイエロー）
• Text: #ffffff
• Border Radius: 0
• Padding: 0 11px
• Font Size: 12px / Weight 400 / Letter Spacing 0.06em
• 配置: 商品サムネイルの左上に絶対配置

New Badge（NEW）

• Background: #888888
• Text: #ffffff
• 他は Ranking Badge と同一

Section Heading（.c-headerLine）

見出しは「ラベル＋下罫」で構成する、このサイト固有のコンポーネント。

• Font Size: 18px / Weight 700
• Color: #464646
• Letter Spacing: 0.2em
• Line Height: 1.72
• Padding: 0 0 18px
• Border Bottom: 1px solid #bfb7af

Inputs

検索入力欄（.c-searchForm_input）

• Background: #ffffff
• Border: なし（面の白で入力欄を示す）
• Border Radius: 0
• Padding: 0 0 0 24px
• Font Size: 16px
• Letter Spacing: normal（入力欄だけ字間を開かない）

メルマガ入力欄（.c-mailmagazineInput）— 下線のみ

• Background: transparent
• Border: border-bottom: 1px solid #000000 のみ
• Border Radius: 0
• Padding: 0 0 10px
• Font Size: 14px
• Font Family: tenon, sans-serif

Focus（推奨）

• Border（下線）を #000000 の 2px に増す、または outline: 1px solid #000000
• 色相を変えない（ブランドに accent の focus 色が存在しないため）

Cards（Product Card）

• Background: transparent（下地のアイボリーのまま）
• Border: なし（--product-card-border-width: 0）
• Border Radius: 0（--product-card-corner-radius: 0）
• Box Shadow: なし（--product-card-shadow-opacity: 0）
• Image Padding: 0（--product-card-image-padding: 0）
• Text Alignment: center（実サイトの商品名・価格は中央揃え。テーマ変数の left は上書きされている）
• 構成: 正方形の商品写真（白バック）＋ 商品名（14px / lh 1.71）＋ 価格（14px）。バッジがある場合のみ画像左上に重ねる
• カードを枠や影で囲わない。白バックの商品写真そのものが「面」として機能し、アイボリーの下地と対比する

5. Layout Principles

Spacing Philosophy

コンテナ幅 1200px の中に、ガター 8px の密なグリッドで商品を並べる。要素同士の間隔は詰めつつ、上下のセクション間には大きな余白（ヘッダー上部 80px 等）を取る。カードに枠を付けないぶん、写真の白と下地のアイボリーのコントラストで区画を示す。

Spacing Scale（実測 + 推定）

Container

• Max Width: 1200px（.c-baseLayout 実測。Shopify 変数 --page-width: 120rem に対応）
• Padding: 80px 0 0（ヘッダー）/ 0 0 40px（フッター）
• ヒーロー画像・カテゴリー写真はフルブリード可

Grid

• Product Grid: 4 カラム（デスクトップ 1200px 内）
• Gutter: 8px（デスクトップ）/ 4px（モバイル）
• Section Spacing: --spacing-sections-desktop: 0px — セクション自体には余白を持たせず、中身のパディングで制御する

6. Depth & Elevation

• Shopify テーマ変数の影はほぼすべて opacity: 0（--media-shadow-opacity: 0.0 / --product-card-shadow-opacity: 0 / --buttons-shadow-opacity: 0 / --drawer-shadow-opacity: 0.0）。唯一 --popup-shadow-opacity: 0.05 だけが値を持つ
• 奥行きは「白の商品写真」「1px の黒罫」「グレージュの下罫 #bfb7af」「余白」で表現する。影で持ち上げない

7. Do's and Don'ts

Do（推奨）

• 下地は温かいアイボリー #f8f6f4、文字と罫は純黒 #000000、商品面は白 #ffffff の 3 色を基調にする
• 濃い面はダークブラウン #40150b（告知バー）に限定し、有彩色はオリーブイエロー #c4c22c（ランキング バッジ）に限定する
• すべての要素を border-radius: 0 にする（Shopify のテーマ変数がすべて 0 で徹底されている）
• CTA は透明背景 ＋ 1px solid #000000 ＋ 角ゼロ ＋ 12px / 字間 0.05em。塗りつぶしボタンは作らない
• 字間は開く方向に段階を付ける — 見出し 0.2em > 欧文 0.1em > 本文・UI 0.05em
• 1 行で完結するテキストは line-height: 1.0、2 行以上に折り返す商品名・段落は 1.7〜1.8 を使う
• セクション見出しは #464646 / 18px / 700 / 字間 0.2em ＋ border-bottom: 1px solid #bfb7af の「ラベル＋下罫」型にする
• 商品カードは枠も影も付けず、白バックの正方形写真＋中央揃えの商品名・価格だけで構成する
• 和文スタックの先頭に MyYuGothicM を置き、Windows の游ゴシック Regular が細くなる問題を回避する

Don't（禁止）

• 角丸を付けない（border-radius は全要素 0。8px の角丸すら使わない）
• 影を付けない（ポップアップ以外は box-shadow: none）
• CTA に背景色を塗らない（面色のプライマリボタンはサイト内に存在しない）
• オリーブイエロー #c4c22c をランキング バッジ以外に広げない。ダークブラウン #40150b を告知バー以外の面に塗らない
• letter-spacing を詰めたり palt を有効にしたりしない（このブランドは開く方向に統一している）
• 折り返す日本語の段落に line-height: 1.0 を適用しない（1 行テキスト限定のルール）
• 見出しの 0.2em を長い文章に適用しない（短い単語のラベルに限る）
• 価格を太字や赤字で強調しない（商品名と同じ 14px / 400 / #000000）
• 和文フォント 1 つだけを指定しない（必ずフォールバックチェーン全体を書く）
• 純白 #ffffff をページ背景に使わない（下地は必ずアイボリー #f8f6f4）

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

• 最小サイズ: 44px × 44px
• CTA の実測は 180px × 36px。モバイルでは高さを 44px 以上に拡張する（幅は 100% でも可）

フォントサイズの調整

• 本文 14px は据え置き（これ以上小さくしない）
• 検索入力欄は 16px を維持する（iOS の自動ズーム回避）
• セクション見出し 18px はモバイルでも維持しつつ、字間を 0.2em → 0.12em に緩めて折り返しを防ぐ
• グリッド ガターは 8px → 4px（--grid-mobile-*）

9. Agent Prompt Guide

クイックリファレンス

Background:     #f8f6f4（温かいアイボリー / html・body 共通）
Surface:        #ffffff（商品写真・検索入力欄）
Ink / 罫 / CTA: #000000
Roast Brown:    #40150b（告知バーの面。文字は #ffffff）
Olive Yellow:   #c4c22c（人気NO.x バッジ。文字は #ffffff）
Badge Gray:     #888888（NEW バッジ。文字は #ffffff）
Heading Text:   #464646
Muted / Line:   #bfb7af（見出し下罫・補助文字）
Font:           tenon, MyYuGothicM, 游ゴシック, "Yu Gothic", YuGothic,
                "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
                メイリオ, Meiryo, sans-serif
                （→ Work Sans + Zen Kaku Gothic New で代替）
Body Size:      14px / line-height 1.0 / letter-spacing 0.05em
段落 line-height: 1.7〜1.8（2 行以上に折り返す場合）
Heading:        18px / 700 / #464646 / letter-spacing 0.2em
                + border-bottom 1px solid #bfb7af / padding-bottom 18px
EN Text:        14px / letter-spacing 0.1em
CTA:            transparent / #000 / 1px solid #000 / radius 0
                / padding 2px 25px 0 / 12px / letter-spacing 0.05em / 180×36px
Badge:          radius 0 / padding 0 11px / 12px / letter-spacing 0.06em
Radius:         0（全要素）
Shadow:         none（ポップアップのみ 0 4px 5px rgba(0,0,0,0.05)）
palt:           off
Container:      1200px
Grid:           4 カラム / gutter 8px

プロンプト例

ONIBUS COFFEE のデザインシステムに従って、スペシャルティコーヒーの商品一覧セクションを作成してください。
- 下地: #f8f6f4（温かいアイボリー）、商品写真の面: #ffffff、文字と罫: #000000
- フォント: tenon, MyYuGothicM, 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN",
  "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
  （tenon が使えない環境では Work Sans + Zen Kaku Gothic New で代替）
- すべての要素を border-radius: 0、box-shadow: none にする
- セクション見出し「新着」は 18px / 700 / #464646 / letter-spacing 0.2em、
  下に border-bottom: 1px solid #bfb7af を引き、padding-bottom: 18px
- 商品カードは枠も影も付けず、正方形の白バック写真＋中央揃えの商品名（14px / line-height 1.71）
  ＋ 価格（14px / 400 / #000000）だけで構成する。4 カラム / gutter 8px
- 人気商品には左上に #c4c22c・白文字・角ゼロ・padding 0 11px のバッジ、
  新商品には #888888 の同型バッジを重ねる
- CTA「全ての商品を見る」は透明背景 ＋ 1px solid #000000 ＋ 角ゼロ ＋ 12px ＋ letter-spacing 0.05em、
  180×36px。塗りつぶしボタンは使わない
- 字間は開く方向のみ（見出し 0.2em / 欧文 0.1em / 本文 0.05em）。palt は使わない
- ページ最上部に #40150b・白文字・14px の送料無料告知バーを 1 本だけ置く

Web ライセンスフォントが使えない環境での代替指針

• 欧文 tenon → Work Sans（低コントラストのヒューマニスト サンセリフ。次点 Hanken Grotesk）
• 和文 MyYuGothicM / 游ゴシック → Zen Kaku Gothic New（游ゴシックに近い骨格。Noto Sans JP より印象が近い）
• 代替でも「アイボリーの下地・純黒の文字と細罫・角ゼロ／影ゼロ・枠なしの商品カード・開いた字間（見出し 0.2em）・ダークブラウンの告知バー・オリーブイエローのバッジ 1 色」を守れば世界観は再現できる