ヤッホーブルーイング（YOHO BREWING） DESIGN.md

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

実測日: 2026-08-08 / 対象: https://yohobrewing.com/, /craft_beer/, /company/message/

1. Visual Theme & Atmosphere

「よなよなエール」「水曜日のネコ」「インドの青鬼」を醸す長野・軽井沢のクラフトビール会社。 コーポレートサイトは濃紺 #112240 を地色に、蛍光に近い黄 #F8E133 を差す2色でできている。 黄と紺の反転をボタン・タブ・バッジで繰り返し、同じ2色を役割ごとに入れ替えるのが設計の核。

• デザイン方針: 濃紺と黄の2色。中間色を挟まず、面と文字を反転させて階層をつくる
• 密度: 中。1200px の版面に写真を大きく使い、本文は 800px に絞る
• キーワード: 濃紺×黄、太い4pxボーダーのピル、角丸10px、影ゼロ、weight は 500 と 700 の2値

このサイトの特徴的な癖（他サイトと違う点）

1. body の地色が濃紺 #112240。白地ではない。コンテンツ側が白や黄の面を 敷いて上に乗る構造で、セクションの隙間から常に紺が覗く
2. ボタンのボーダーが 4px。1px でも 2px でもなく 4px の太い罫を border-radius: 80px のピルに巻く。紺地の上でも白地の上でも輪郭が残る
3. 同じ2色を反転して3種のボタンをつくる。黄地×紺文字 / 紺地×黄文字（枠は黄）/ 透明×紺文字（枠は紺）。第3の色を足さない
4. font-weight の既定が 500（Noto Sans JP Medium）。400 を使わない。 見出し・ボタン・バッジが 700。この2値だけ
5. line-height: 1.6 が既定。16px→25.6px、14px→22.4px。 代表メッセージの大見出しだけ 2.4（36px→86.4px）と極端に開く
6. letter-spacing: 0（normal ではなく明示的な 0）がリセットで指定される。 字間を開けない方針
7. 商品バッジが円形。border-radius: 50% に 6px solid #F8E133 の輪、 中は rgba(0,0,0,.3) の半透明。ビール写真の上に直接置く
8. box-shadow の宣言が CSS 全体で 0 件
9. 酒類サイトのため、フッターに20歳未満への配慮文と「適正飲酒の取り組み」バナー （#F1E2B0 のベージュ）を常設する

2. Color Palette & Roles

Brand（この2色がすべて）

Sub（黄の派生）

Base

• Ink (#000000): 白地・黄地の上の本文。--yh-black
• On Navy (#ffffff): 紺地の上の本文・タグ文字
• Overlay (rgba(0, 0, 0, 0.3)): 円形バッジの中身（写真を透かす）
• Header Scrim (rgba(17, 34, 64, 0.85)): スクロール時のヘッダー背景

css:root {
  --yh-navy:        #112240;
  --yh-yellow:      #F8E133;
  --yh-soft-yellow: #EABF4B;
  --yh-profile-bg:  #F1E2B0;
  --yh-beige:       #e8daaa;
  --yh-black:       #000000;
}

色の使い分けの原則

• 紺の上には黄（見出し・ボタン文字・バッジ）
• 黄の上には紺（ボタン文字・タブのアクティブ）
• 白の上には黒（本文）
• 赤・緑・青を足さない。ビールのラベルは色数が多いが、UI は紺と黄だけ

3. Typography Rules

3.1 和文フォント

Noto Sans JP 1本。 Webフォントはこれだけ。

• 本文・見出し・ボタン・すべて: "Noto Sans JP", sans-serif
• html の既定（フォールバック）: "Hiragino Kaku Gothic ProN"

font-optical-sizing: auto を併記しており、可変フォントとして読み込んでいる。

3.2 欧文フォント

• Inter: .inter クラスを当てた欧文の見出し・数字だけに使う（weight 500）
• それ以外の欧文（About YOHO Brewing、Beer Lineup 等の英字サブタイトル）は Noto Sans JP の欧文グリフをそのまま使う

3.3 font-family 指定

css/* リセット — サイト全体 */
body {
  background: #112240;
  color: #000000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;              /* 400 ではない */
  font-optical-sizing: auto;
  line-height: 1.6;
  letter-spacing: 0;             /* normal ではなく 0 */
  -webkit-text-size-adjust: 100%;
}

/* フォーム部品にも同じ指定を明示（line-height だけ 2） */
input, select, textarea, button {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
}

/* 欧文の見出し・数字 */
.inter { font-family: "Inter", sans-serif; font-weight: 500; }

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

• Webフォント単独型。"Noto Sans JP", sans-serif の2段だけ。 プラットフォームフォントをチェーンに並べない
• html にだけヒラギノ角ゴ ProN を置き、Noto の読み込み前に和文が崩れないようにしている
• 欧文専用の Inter はクラスで明示的に当てる。チェーンに混ぜない

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

ウェイトは 500 と 700 の2値だけ。400 も 600 も使わない。 h1〜h6 はリセットで font-size: 100%; font-weight: 500; に潰され、 必要な階層はクラス（.c-heading_01 等）で与える。

3.5 行間・字間

• 既定の line-height は 1.6。16px→25.6px、14px→22.4px。 日本語サイトとしてはやや詰まり気味で、軽快さと情報密度を取っている
• 大見出しほど比率が下がる（40px→1.35、32px→1.375）。 文字が大きいので相対的な行送りを詰める、標準的なやり方
• 例外が2つ:
  • 代表メッセージの h2 だけ 2.4（36px→86.4px）。読み物として大きく開く
  • フォーム部品だけ 2.0（リセットで明示）
• ボタンとユーティリティは 1.0。上下パディングで高さを作る
• letter-spacing は 0。リセットで明示的に 0 を指定しており、 normal ですらない。字間を開けるのは一部の英字ラベル（0.05em）だけ

css/* 本文 */
p { font-size: 16px; line-height: 1.6; letter-spacing: 0; font-weight: 500; }

/* 大見出し — 行送りは詰める */
.c-heading_01 { font-size: 40px; font-weight: 700; line-height: 1.35; }

/* 代表メッセージだけ極端に開く */
.p-message_head { font-size: 36px; font-weight: 700; line-height: 2.4; }

/* ボタン — 行送り 1.0 ＋ 上下パディングで高さを作る */
.c-nav_01 a { font-size: 16px; font-weight: 700; line-height: 1; padding: 0 28px; }

3.6 禁則処理・改行ルール

• 「ヤッホーブルーイング」「よなよなエール」「水曜日のネコ」「インドの青鬼」 「僕ビール君ビール」などの商品名は途中で折らない
• 見出しは和文行と欧文行の2行構成が基本（「会社情報 / About YOHO Brewing」）。 1行に混ぜない
• 醸造所名は「北海道・北広島」のように中黒で地名と施設名を繋ぐ。 中黒の前後で折らない

3.7 OpenType 機能

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

• palt を使わない。letter-spacing: 0 と合わせて、 Noto Sans JP の等幅ベタ組みをそのまま出す
• 詰め組みをしない代わりに、行送り 1.6 で軽さを出している

3.8 縦書き

ヒーロー左下の「SCROLL」インジケーターだけが縦方向のテキスト。 本文・見出しに縦組みは使わない。

3.9 preview.html でのフォント代替

代替不要。 実サイトと同じ書体で再現できる数少ないケース。

4. Component Stylings

Buttons

3種すべて border-radius: 80px / border-width: 4px / 16px / weight 700 / padding 0 28px。 違うのは面色と文字色だけ。

Primary（黄地 — 紺の上でも白の上でも使う）

css.c-nav_01 a {
  background: #F8E133;
  border: 4px solid #F8E133;
  border-radius: 80px;
  color: #112240;
  font-size: 16px;
  font-weight: 700;
  padding: 0 28px;
}

用例: 「一覧はこちら」「詳しくはこちら」

Inverse（紺地×黄枠 — 白い面の上で使う）

css.c-nav_02 a {
  background: #112240;
  border: 4px solid #F8E133;
  border-radius: 80px;
  color: #F8E133;
}

用例: 「ご取材申し込みはこちら」

Outline（透明×紺枠 — 白い面の上で使う）

css.c-nav_03 a {
  background: transparent;
  border: 4px solid #112240;
  border-radius: 80px;
  color: #112240;
}

用例: 「詳しくはこちら」（低優先）

いずれも :after で右端に 8×14px の矢印を置く（right: 16〜20px / translateY(-50%)）。

Tabs（一覧のカテゴリ切替）

• Border Radius: 44px / Border: 2px solid #F8E133 / Padding: 0 32px 2px
• Font: 16px / weight 700
• アクティブ: background: #F8E133 / color: #112240
• 非アクティブ: background: #112240 / color: #F8E133

ボタンと同じ2色の反転でアクティブを示す。下線やインジケーターを使わない。

Language Switch

• Border Radius: 26px / Padding: 0 0 2px / 16px / weight 700
• JP（選択中）: background: #F8E133 / color: #112240 / border: 1px solid #F8E133
• EN: background: transparent / color: #F8E133 / border: 1px solid transparent

Badges

Circle Badge（商品写真の上）

css.badge {
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);   /* 写真を透かす */
  border: 6px solid #F8E133;        /* 太い黄の輪 */
  color: #F8E133;
  font-size: 16px;
  font-weight: 700;
}

用例: 「軽やかでハッとする味と香り」「トロピカルな香りのヘイジーIPA」—— ビールの特徴を1行で書いた円をボトル写真に重ねる。

Number Badge（醸造工程）

• border-radius: 52px（実質の円）/ background: #F8E133 / color: #000000
• Font: 32px / weight 700 / Border: 1px solid #000000

Tag（カテゴリ・地名）

• border-radius: 10px / background: #112240 / color: #ffffff
• Padding: 0 10px（カテゴリ）/ 7px 10px 8px（地名）
• Font: 14px / weight 700

Cards

• Border Radius: 10px（サイト内で最も多い角丸。17箇所）
• Background: #ffffff / Border・Shadow: なし
• 構成: 写真（上端を 10px で丸める）→ タグ（紺）→ タイトル → 本文（14px / 1.6）

Banner（適正飲酒）

• Background: #F1E2B0 / Color: #112240 / Border Radius: 10px
• Padding: 0 60px 0 120px — 左に大きくアキ（イラストが入る）
• Font: 24px / weight 700

酒類サイトの必須要素。フッター直前に常設する。

Navigation

ヘッダー（紺地の1層）

• 左: ロゴ（YOHO BREWING の白抜きロゴ・紺の角丸ブロック 0 0 10px）
• 中: サイト名テキスト 14px / white
• 右: 「ONLINE STORE / よなよなの里」「RECRUIT」（12〜16px / weight 500〜700 / #F8E133） ＋ 言語切替ピル ＋ ハンバーガー（黄の面）
• スクロール時: rgba(17, 34, 64, 0.85) の半透明に切り替わる

フッター

• 紺地に白文字。「お問い合わせ」「製品のこと」等のリンク（16px / 500）
• 20歳未満への配慮文（14px / 1.6 / white）を必ず置く

Decoration（斜めの帯）

ヒーロー下端に 黄 #F8E133 の斜めの帯（clip-path で切った三角）が入り、 写真セクションと次のセクションを繋ぐ。左端に縦の「SCROLL」。

5. Layout Principles

Container

写真セクションはフルブリード、テキストは 800px に絞る2段の版面。

Layout Structure

• 紺地（body）の上に、白 / 黄 / ベージュの面を積む1カラム
• トップは「ヒーロー写真＋吹き出し → 斜めの黄帯 → NEWS → 製品 → 会社情報 → 醸造所 → プレスルーム → 適正飲酒バナー → フッター」

Grid

• ニュースカード: 3〜4カラム
• 製品（円形バッジ付き）: 4カラム
• 醸造所カード: 2〜3カラム

Spacing Scale

6. Depth & Elevation

影を使わない。 奥行きは次の3つでつくる。

1. 面色の反転 — 紺地の上に白のカード、白地の上に紺のボタン
2. 4px の太いボーダー — ピル型ボタンの輪郭
3. border-radius: 10px — カードを地から切り離す

半透明を使うのは円形バッジの中身 rgba(0,0,0,.3) と スクロール時のヘッダー rgba(17,34,64,.85) の2箇所だけ。

7. Do's and Don'ts

Do（推奨）

• ページの地色を #112240（濃紺） にする。白地から始めない
• アクセントは #F8E133（黄）1色。紺と黄を反転させて階層をつくる
• font-weight は 500（本文）と 700（見出し・ボタン・バッジ）の2値に限る
• line-height の既定は 1.6。読み物の大見出しだけ 2.0〜2.4 に開く
• letter-spacing は 0。palt も使わない（ベタ組み）
• ボタンは3種とも border-radius: 80px / border: 4px / padding: 0 28px / 16px / weight 700 で揃え、面色と文字色だけ入れ替える
• カードの角丸は 10px で統一する
• 商品の特徴は円形バッジ（50% / 6px solid #F8E133 / rgba(0,0,0,.3)）で写真に重ねる
• 見出しは和文＋欧文の2行にする（「会社情報 / About YOHO Brewing」）
• 酒類サイトとして20歳未満への配慮文と適正飲酒バナーを必ず置く

Don't（禁止）

• 紺と黄以外の有彩色を UI に足さない（赤・緑・青のアクセントを作らない）
• box-shadow を使わない
• ボタンのボーダーを 1px / 2px にしない（4px）
• font-weight: 400 / 600 を使わない
• letter-spacing を開けない（0 のまま）
• palt をかけない
• タブのアクティブを下線やインジケーターで示さない（面色の反転で示す）
• 本文の line-height を 1.6 より詰めない
• ヒーローの写真の上に CSS のスクリムを重ねない（円形バッジの半透明だけが例外）

8. Responsive Behavior

Breakpoints

max-width: 768px と min-width: 769px の対で書かれており、 モバイルとデスクトップを 768/769px で明確に分ける（合計 40 箇所以上）。

モバイルでの変化

• ヘッダーのユーティリティ（ONLINE STORE / RECRUIT）→ ドロワーに格納
• カードグリッド 4カラム → 1〜2カラム
• 版面 1200px / 800px → 画面幅 - 左右パディング
• font-size: 16px / line-height: 1.6 は変えない（リセットでモバイルにも同値を再指定）
• ボタンは横幅いっぱいに伸ばす（border-radius: 80px は維持）

タッチターゲット

• ボタンは line-height: 1 ＋ 上下パディングで高さを確保する。 モバイルでは 48px 以上にする（4px のボーダーが上下に乗るため実効は +8px）
• 円形バッジは装飾。タップ領域にしない

9. Agent Prompt Guide

クイックリファレンス

Page Background: #112240（--yh-navy。ページ地色）
Accent:          #F8E133（--yh-yellow）
Soft Yellow:     #EABF4B（--yh-soft-yellow）
Beige:           #F1E2B0（--yh-profile-bg）/ #e8daaa（--yh-beige）
Ink:             #000000（白・黄の上）
On Navy:         #ffffff
Overlay:         rgba(0, 0, 0, 0.3)（円形バッジ）
Header Scrim:    rgba(17, 34, 64, 0.85)
Main Font:       "Noto Sans JP", sans-serif（font-optical-sizing: auto）
Latin Font:      "Inter", sans-serif（.inter クラスで明示）
Base Size:       16px
Line Height:     1.6（既定）/ 1.0（ボタン）/ 2.0（フォーム・メッセージ本文）/ 2.4（メッセージ見出し）
Letter Spacing:  0（明示指定。normal ではない）
Font Weight:     500（本文）/ 700（見出し・ボタン・バッジ）の2値のみ
Border Radius:   80px（ボタン）/ 44px（タブ）/ 26px（言語切替）/ 10px（カード・タグ）/ 50%（バッジ）
Border Width:    4px（ボタン）/ 2px（タブ）/ 6px（円形バッジの輪）
Shadow:          none（宣言ゼロ）
palt:            off
Container:       1200px（標準）/ 800px（読み物）/ 1264px（ワイド）
Breakpoints:     768px / 769px（主境界）/ 960px / 1000px / 1024px / 1108px / 1200px

プロンプト例

ヤッホーブルーイング（YOHO BREWING）のデザインシステムに従って、製品一覧ページを作成してください。
- ページの地色は濃紺 #112240。その上に白いカード面を置く
- アクセントは黄 #F8E133 の1色。紺と黄以外の有彩色を使わない
- フォントは "Noto Sans JP", sans-serif の1本（font-optical-sizing: auto）
  欧文の見出し・数字だけ "Inter", sans-serif を明示的に当てる
- 本文は 16px / font-weight 500 / line-height 1.6 / letter-spacing 0
- 見出しは font-weight 700。40px→line-height 1.35、32px→1.375、24px→1.375
- font-weight は 500 と 700 の2値だけ。400 も 600 も使わない
- palt は使わない。letter-spacing は 0 のままベタ組み
- ボタンは3種。すべて border-radius 80px / border-width 4px / padding 0 28px /
  16px / weight 700 / line-height 1 で、面色と文字色だけ入れ替える:
    Primary  背景 #F8E133 / 枠 4px solid #F8E133 / 文字 #112240
    Inverse  背景 #112240 / 枠 4px solid #F8E133 / 文字 #F8E133
    Outline  背景 transparent / 枠 4px solid #112240 / 文字 #112240
  右端に 8×14px の矢印を :after で置く
- カテゴリタブは border-radius 44px / border 2px solid #F8E133 / padding 0 32px 2px。
  アクティブは黄地×紺文字、非アクティブは紺地×黄文字（下線は使わない）
- 商品カードは border-radius 10px、影なし・枠なし。カテゴリタグは
  背景 #112240 / 文字 #ffffff / radius 10px / padding 0 10px / 14px / weight 700
- 商品写真の上に円形バッジを重ねる:
  border-radius 50% / background rgba(0,0,0,.3) / border 6px solid #F8E133 /
  color #F8E133 / 16px / weight 700。中身はビールの特徴を1行で
- box-shadow は一切使わない
- 版面は写真セクションがフルブリード、テキストは 800px、標準コンテナは 1200px
- 見出しは和文＋欧文の2行（例: 「クラフトビール一覧」の下に「Beer Lineup」）
- 酒類サイトなので、フッター直前に #F1E2B0 のベージュ地・radius 10px の
  「適正飲酒の取り組み」バナーと、20歳未満への配慮文を必ず置く