石屋製菓（ISHIYA） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-02 / 対象: https://www.ishiya.co.jp/, /about/, /shiroikoibito-cakes/

1. Visual Theme & Atmosphere

• デザイン方針: 白地にISHIYA ブルー #005bac 一色で構造をつくる。北海道の雪と空の情景写真を大きく敷き、UI は写真の上に薄く乗る。装飾は罫線と字間に寄せ、影をほぼ使わない
• 密度: ゆったり。コンテナは 1040px 固定で、左右に大きく余白を残す
• キーワード: 藍青、雪、広い字間、矩形、Playfair Display

このサイトの核心は「欧文が Playfair Display のセリフ、和文が Noto Sans JP のゴシック」という和欧の役割分担にある。About Lineup News Shop というグローバルナビの英字はすべて Playfair Display（セリフ）で組み、その真下に 11px のゴシックで「企業案内」「商品情報」と和文ルビのように添える。英字をゴシックで組むと、この上品さは丸ごと消える。

もうひとつの特徴が letter-spacing が全階層で一律 0.1em であること。本文 15px なら 1.5px、見出し 20.1px なら 2.01px と、サイズに比例して字間が開く。この「常に開いている字間」が全体の余韻をつくっている。

root の font-size が 15px（16px ではない）。rem で組むと 1rem = 15px になるので、1.34rem = 20.1px のような半端な実測値が並ぶ。

2. Color Palette & Roles

CSS Custom Properties は 0個。色はコンポーネント CSS に直書きされているので、以下はすべて computed style の実測値。

Primary（ブランドカラー）

• ISHIYA Blue (#005bac): ブランドの中核。ロゴの角版、ヘッダーのピル CTA、セクション CTA の面色、ナビのリンク色。実測で最多（面色 5件・文字色 50件）
• Deep Navy (#003767): フッター最下部「関連サイト」バーの面
• Navy (#00498a): #005bac の暗い対。ホバー・押下用

Secondary（第二の差し色）

• ISHIYA Gold (#be9a60): 「ブランドについて」CTA の面、ページトップへ戻る円形ボタン、一部の見出し文字色。青の対になる金茶で、ここぞの1箇所にだけ置く
• Park Green (#124819): 「白い恋人パーク 公式サイトへ」CTA 専用。グループ施設の識別色であり、汎用の success ではない

Surface（面色）

• Background (#ffffff): ページ背景。body に明示指定
• Cream (#fff4d5): お知らせの強調帯などに稀に出る淡い面
• Product Navy (#021336): 商品特設ページ（白い恋人ケーキ）の全面背景。コーポレート側では使わない

Neutral（ニュートラル）

• Text Primary (#2d2622): 本文。純黒ではなく、わずかに赤みのある焦茶。実測 388 要素で圧倒的多数
• Text on Dark (#ffffff): 写真・濃色面の上
• Border (#cccccc): 入力欄の枠、区切り線
• Border Light (#dddddd): 淡い罫線

2.5 混入している別サービスの色（採用禁止）

uniqueBackgrounds と interactive に #0e6cc1 が 4〜5件出るが、これはチャットボットウィジェット（「価格や取扱店舗などよくある質問」）由来でブランド色ではない。

判別は簡単で、該当要素の getBoundingClientRect() が すべて 0×0px（未展開の吹き出し）。_textPreview も チャットを開始する / 適用 / キャンセル と、サイト本体のラベルとは語彙が違う。

同様に、#0e6cc1 の要素だけ border-radius が 3px / 4px / 10px 10px 0 0 と半端な値を持つ。サイト本体の radius は 0 か 36px（ピル）か 50%（円）の3つしかない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文・ラベルの既定）: Noto Sans JP → 游ゴシック → メイリオ
• 明朝体（ヘッダーの一部ボタン）: Noto Serif JP → 游明朝 → メイリオ

明朝は「法人窓口」のようなヘッダー内の限定的なラベルにだけ現れる。本文には使わない。

3.2 欧文フォント

• セリフ（見出し・ナビの英字）: Playfair Display。Google Fonts から読み込み。ハイコントラストのディドネ系で、和文の Noto Sans JP と組み合わせて「洋菓子の格」を出す役
• サンセリフ: 独立した欧文サンセリフの指定は無い（和文スタックの Noto Sans JP が欧文も担当する）
• 等幅: 定義なし

3.3 font-family 指定

css/* 本文・ナビの和文（既定） */
font-family: "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic",
             Meiryo, メイリオ, sans-serif;

/* 見出し・ナビの英字 */
font-family: "Playfair Display", YuMincho, "Yu Mincho", Meiryo, メイリオ, serif;

/* ヘッダーの明朝ラベル（「法人窓口」等） */
font-family: "Noto Serif JP", YuMincho, "Yu Mincho", Meiryo, メイリオ, serif;

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

• 和文先頭型。Noto Sans JP を先頭に置き、欧文を先に置かない
• 欧文セリフのスタックにも和文（游明朝）を混ぜてある。Playfair Display に日本語グリフは無いので、英字用のクラスをうっかり和文に当てても明朝で落ちる、という保険になっている
• Web フォントは Noto Sans JP と Playfair Display の2つだけ

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

root が 15px のため、実測値は 15 の倍数まわりに寄る。

ウェイトは 400 と 700 の2段だけ（明朝ラベルの 500 が例外）。500・600 は使わない。

3.5 行間・字間

• 本文の行間: 2.0（15px / 30px）。日本語本文としてもかなり広い部類で、余白の多いレイアウトと釣り合わせている
• 見出しの行間: 1.12〜1.6。サイズが大きいほど詰める（36px→1.12、20px→1.6）
• 本文の字間: 0.1em。全階層で一律
• Playfair Display の英字: 0.08em。和文より1段だけ狭い。極小サイズ（10px）だけ 0.18em まで開く

ガイドライン:

• 字間を 0 にしない。このサイトは 0.1em が既定で、詰めると別ブランドの見た目になる
• 逆に本文で 0.1em を超えて開かない。開くのは 10px 級の英字ラベルだけ

3.6 禁則処理・改行ルール

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

写真の上に白文字を重ねる場面が多いため、見出しは意図した位置で <br> を入れて改行を固定している。自動折り返しに任せていない。

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

css/* 使用していない */
font-feature-settings: normal;

palt は使っていない。 DOM 全走査 583 要素のうち font-feature-settings が normal 以外の要素は 1件のみ（サードパーティのチャットウィジェット由来）。

字間は palt ではなく letter-spacing: 0.1em のベタ組みで作られている。詰め組みではなく開き組みのサイトなので、palt を足すと設計と逆方向に動く。

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Primary（セクション CTA・矩形）

• Background: #005bac
• Text: #ffffff
• Border: 1px solid #005bac
• Padding: 11px 50px（小）/ 17px 50px（大）
• Border Radius: 0
• Font Size: 15px / Weight: 400

Primary Pill（ヘッダーの Online Shop）

• Background: #005bac
• Text: #ffffff
• Border: 1px solid #005bac
• Padding: 1px 17px 3px
• Border Radius: 36px
• Font Size: 15px / Weight: 400
• カートアイコンを左に添える

Secondary（金茶）

• Background: #be9a60
• Text: #ffffff
• Border: なし
• Padding: 14px 60px 16px
• Border Radius: 0

Ghost（写真・濃色面の上）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 4px 6px 4px 8px
• Border Radius: 0
• Font: Noto Serif JP / Weight 500（明朝）

Inverse（濃色面の上の白ボタン）

• Background: #ffffff
• Text: #005bac
• Border: 1px solid #ffffff
• Padding: 9px 50px
• Border Radius: 0

Scroll to Top

• Background: #be9a60 / Text: #ffffff
• Border Radius: 50%

padding が上下非対称（1px 17px 3px / 14px 60px 16px）。和文の字面が視覚的に上寄りになるのを、下パディングを 2px 厚くして補正している。左右のパディングは 50〜60px と極端に広い。

Inputs

問い合わせフォームは Bootstrap の form-control をそのまま使用している（サイト本体のデザインシステムとは別系統）。

• Background: #ffffff
• Border: 1px solid #cccccc
• Border Radius: 4px
• Shadow: inset 0 1px 1px rgba(0,0,0,0.075)
• Font Size: 14px
• Placeholder: #555555

新規実装では本体側に合わせて border-radius: 0 / border: 1px solid #cccccc / 影なしに寄せるほうがサイトの意匠と揃う。

Cards

• Background: #ffffff
• Border: なし（画像と余白だけで区切る）
• Border Radius: 0
• Shadow: なし
• 見出しは 15px / 700 / letter-spacing: 0.08em

5. Layout Principles

Spacing Scale

明示的なトークンは無い。実測から読み取れる値：

Container

• Max Width: 1040px（サイト全体の基準。実測 6要素）
• 全幅セクション: 1280px
• 記事系の読み物幅: 800px
• Padding (horizontal): 左右は % 指定（6% / 12.67%）

Grid

• ニュース: 3カラム / gutter 40px
• ナビの英字＋和文ペア: 縦積み（英字 22px の下に和文 11px）

6. Depth & Elevation

ほぼフラット。影を使うのは可視要素で 3件だけ。

奥行きは影ではなく「白地 / 写真 / 濃色面」の3層で表現する。 カードに影を足さないこと。

7. Do's and Don'ts

Do（推奨）

• 英字は Playfair Display（セリフ）で組む。 About Lineup News Shop などのナビ・見出しの英字はすべてこれ
• 英字ナビの下に 11px の和文ラベルを添える（About / 企業案内）。この2段組みがナビの型
• letter-spacing は和文 0.1em、Playfair Display の英字 0.08em を守る
• 本文の line-height は 2.0（15px / 30px）
• 面色は #005bac を主、#be9a60 を従とし、1画面に金茶は1箇所まで
• ボタンの padding は下を 2px 厚くする（11px 50px 13px のように）
• root を 15px 前提で組む（rem を使うなら 1rem = 15px）

Don't（禁止）

• 英字をゴシック（Noto Sans JP）で組まない。 Playfair Display を落とすとブランドの上品さが消える
• font-feature-settings: "palt" を足さない。 このサイトは開き組みで、詰め組みは設計と逆
• letter-spacing: normal にしない。字間 0 は別ブランドの見た目になる
• 角丸を安易に足さない。radius は 0 / 36px（ピルのみ）/ 50%（円のみ）の3つだけ。4px や 8px の中途半端な角丸は本体には存在しない
• カード・ボタンに影を付けない
• #0e6cc1（チャットウィジェットの青）をブランド色として使わない
• 商品特設ページの Zen Maru Gothic / #021336 をコーポレート側に持ち込まない（8. 参照）
• 本文テキストに #000000 を使わない（#2d2622）

8. 商品特設ページは別系統（重要）

/shiroikoibito-cakes/ のような商品キャンペーンページは、コーポレートサイトとは別のデザインシステムで組まれている。ヘッダー／フッターだけが共通で、中身は総取り替えになる。

「ISHIYA のデザイン」として実装を頼まれたら、コーポレート側（本ドキュメント 1〜7章）を採用する。 特設ページは商品ごとの一過性の意匠であり、ブランドの恒常的なシステムではない。

9. Responsive Behavior

Breakpoints

メディアクエリの出現回数で見ると、実質 960px の1本でモバイル／デスクトップを切り替えている。

print, screen and (min-width: 961px) という書き方を全体で使っている。印刷時にデスクトップレイアウトを当てる意図。

タッチターゲット

• 最小サイズ: 44px × 44px
• ヘッダーのピル CTA は実測高さ 34px なので、モバイルでは縦パディングを増やして 44px を確保する

フォントサイズの調整

• 本文は 15px を維持（モバイルでも縮めない）
• Playfair Display の見出しは 48px → 28px 前後まで縮める
• ナビの英字 22px + 和文 11px の2段組みは、モバイルではハンバーガー内の縦積みに変わる

10. Agent Prompt Guide

クイックリファレンス

Primary Color:   #005bac   (ISHIYA Blue)
Secondary Color: #be9a60   (Gold)
Text Color:      #2d2622
Background:      #ffffff
Font (和文): "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, メイリオ, sans-serif
Font (英字): "Playfair Display", YuMincho, "Yu Mincho", Meiryo, メイリオ, serif
Root Size:       15px
Body Size:       15px
Line Height:     2.0
Letter Spacing:  0.1em (和文) / 0.08em (英字)
Radius:          0 / 36px (pill) / 50% (circle)
Shadow:          none
Container:       1040px
Breakpoint:      960px

プロンプト例

石屋製菓（ISHIYA）のデザインシステムに従って、商品一覧セクションを作成してください。

- root の font-size は 15px。1rem = 15px として組む
- セクション見出しは英字を "Playfair Display" 36px / letter-spacing 0.08em で置き、
  その下に和文の小見出しを Noto Sans JP 11px / 0.1em で添える
- 本文は Noto Sans JP 15px / line-height 2.0 / letter-spacing 0.1em / color #2d2622
- カードは白背景・角丸なし・影なし。画像と余白だけで区切る
- 主 CTA は背景 #005bac / 文字 #ffffff / border-radius 0 / padding 11px 50px 13px
- ヘッダーの EC 導線だけ border-radius 36px のピルにする
- font-feature-settings は指定しない（palt は使わない）
- 金茶 #be9a60 は1画面に1箇所まで