よーじや（よーじやグループ） DESIGN.md

よーじやグループ（https://www.yojiya.co.jp/）のデザイン仕様書。 明治 37 年創業、京都のあぶらとり紙で知られる。「みんなが喜ぶ京都にする」をビジョンに掲げるグループのコーポレートサイト。 縦書きが構造として組み込まれている。ヒーローのコピー（61px）だけでなく、セクションラベル（NEWS／お知らせ）と回遊カードの見出し（28.8px）も writing-mode: vertical-rl。このサイトで縦書きは装飾ではなく、レイアウトの骨格。 角丸を 1 つずつずらす。回遊カードは 8 枚それぞれ border-radius の当たる角が違う（50px 0 0、0 0 50px 50px、0 50px 0 0 …）。CSS 中の非対称 radius 宣言は 20 個以上あり、「全部同じ角丸」はこのサイトの流儀ではない。 影はぼかさない。box-shadow: 12px 12px 0 0 #DC878C / 0 8px 0 #5F5046 のように、ずらした無地の面を影の代わりに置く。ぼけた影は 0 0 4px 1px rgba(0,0,0,.08) の 3 回だけ。 色は温かい茶とベージュとサンゴ。文字色は黒でもグレーでもなく #5f5046（CSS 出現 186 回）。ブランドの赤 #af2e29 はハンバーガーメニューの 9×9px の四角 2 つにしか使われていない。 フォントは Adobe Fonts の DNP 秀英角ゴシック銀（dnp-shuei-gothic-gin-std） ＋ Proxima Nova。 実サイトの computed style 実測（2026-08-30 取得。トップ ＋ 会社案内 /company ＋ 店舗一覧 /archives/shop）＋ 読み込まれる CSS 340KB の直接集計に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 京都の景色を全画面で見せ、その上に縦組みのコピーを一本通す。ファーストビューは川と山の写真に「みんなが喜ぶ／京都にする」を 2 行の縦書きで右端に立て、左下に横組みのリードを小さく置く。縦と横を意図的に交差させるのがこのサイトの構図
• よーじやについて: あぶらとり紙・化粧品の製造小売に加え、カフェ・宿泊・企業向け事業を持つグループ。商品サイトではなくグループのステートメントサイトなので、EC 的な要素（価格・カート）を持たない
• 密度: 低い。コンテンツ幅は 1000px（1440px ビューポート）、本文の行間は 2.0（会社案内の長文は 2.25）。1 画面の情報量は少ない
• キーワード: 縦書き、#5f5046 の茶、ベージュ #ebe6dc、サンゴ #dc878c、非対称の角丸、ずらした無地の影
• 特徴:
  • 和文の下に必ず欧文を添える。お知らせ / NEWS、事業紹介 / BUSINESS、店舗一覧 / OUR SHOP。和文は秀英角ゴシック銀、欧文は Proxima Nova で、サイズ差ではなく書体差で階層を作る
  • letter-spacing: 0.06em がサイト全体の既定（16px に対し 0.96px。CSS 宣言 36 回）。見出しではさらに広げ、ステートメント見出しは 0.16em（38px に対し 6px）まで開く
  • ボタンはすべてピル、ただし半径がばらばら。999px（ニュース一覧）、60px（採用情報）、52px（フッターの大カード）、30px（カテゴリチップ）、20px（フッターの小ボタン）。「pill に統一」ではなく「要素の高さに応じて半径を選ぶ」
  • font-feature-settings の宣言が 0 個（＝ palt を使わない）。字詰めではなく letter-spacing で組む
  • 難読漢字にだけ font-family を差し替える。店舗一覧の「祇園」は font-family: "Hiragino Sans", "Yu Gothic", sans-serif に切り替えて、示す偏（礻ではなく示）の字形を出している。Web フォント側の字形が意図と違うとき、その字だけ OS フォントへ逃がすという実装
  • ハンバーガーアイコンが唯一の赤。.menu_icon_part の 9×9px の四角 2 つだけが #af2e29。ページ全体を見渡してもここにしか赤がない

2. Color Palette & Roles

地は #ffffff。トップは pageBackground.resolved が ua-default-canvas（html / body ともに塗り指定なし）。 下層ページで viewportTopByArea がベージュ #ebe6dc を返すことがあるが、これはフッター上部の面。コンテンツ領域は白のまま。

Brand（ブランド）

• Sumi Brown (#5f5046, rgb 95,80,70): 本文・見出し・ナビ・ボタン文字すべての色。CSS 出現 186 回でサイト最多。黒（#000000）もグレーも一切使わない
• Yojiya Coral (#dc878c, rgb 220,135,140): アクセント。英字ラベル（NEWS / VALUE 01）、ずらし影の色。CSS 出現 48 回
• Kyo Beige (#ebe6dc, rgb 235,230,220): 面色。採用情報ボタン、フッターの CTA ボタン、セクションの地。CSS 出現 29 回
• Sakura Pink (#e1b9b4, rgb 225,185,180): 大きな面（フッターの「店舗一覧 / OUR SHOP」カード、会社案内の代表あいさつブロック）。CSS 出現 10 回
• Beni Red (#af2e29, rgb 175,46,41): ハンバーガーメニューのアイコン（9×9px × 2）のみ。CSS 出現 4 回。面にも文字にも使わない

Neutral

⚠️ ブランド色として拾ってはいけない色

WordPress（ブロックエディタ）を使っているため、customProperties に --wp--preset--color--* が 11 色、グラデーションが 12 種類入っている（#cf2e2e / #ff6900 / #0693e3 など）。これらは 1 つも画面に出てこない WordPress の既定パレットで、--wp-admin-theme-color: #007cba も管理画面の色。customProperties を色の出典にしないこと。

3. Typography Rules

3.1 和文フォント

• ゴシック体: DNP 秀英角ゴシック銀（dnp-shuei-gothic-gin-std、Adobe Fonts）。フォールバックは sans-serif のみ
• 明朝体: 使用しない
• 例外: 「祇」など Web フォント側の字形を採りたくない漢字だけ "Hiragino Sans", "Yu Gothic", sans-serif に差し替える

秀英角ゴシック銀について: 大日本印刷の秀英体ファミリーのうち、角ゴシックの細めの系統（銀）。同ファミリーの「金」より線が細く、和文の中に空気が残る。よーじやの余白の多いレイアウトはこの書体を前提にしている。 Adobe Fonts はドメインライセンスのため、この DESIGN.md の preview.html では表示されない。代替として Google Fonts の Zen Kaku Gothic New（wght 300/400/500/700）を使う。

3.2 欧文フォント

• サンセリフ: Proxima Nova（proxima-nova、Adobe Fonts）。CSS 出現 46 回
• 用途: 英字のセクションラベル（NEWS / BUSINESS / OUR SHOP / MESSAGE / VALUE 01）、日付、コピーライト
• 等幅: 指定なし

Proxima Nova の Google Fonts 代替は Montserrat（幾何学サンセリフ）。wght 300 が使えるので、OUR SHOP（45px / 300）のような細い大文字組みも再現できる。

3.3 font-family 指定

和文優先の 2 本立て。和文と欧文で書体を明確に分ける。

css/* 和文（本文・見出し・ナビ・ボタン） */
font-family: dnp-shuei-gothic-gin-std, sans-serif;

/* 欧文（英字ラベル・日付・コピーライト） */
font-family: proxima-nova, sans-serif;

/* 字形を OS フォントへ逃がす例（「祇」園） */
.gi_shimesu { font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }

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

• 和文と欧文を同じ要素に混ぜない。お知らせ と NEWS は別の要素にして書体を分ける
• 欧文フォントを和文スタックの先頭に置かない（秀英の欧文グリフをそのまま使う場面がない設計）

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

ウェイトは 300 / 400 / 500 / 600 / 700 の 5 段を使い分ける。特に 300 を積極的に使う（ドロワーの子項目、OUR SHOP）のがこのサイトの特徴。

3.5 行間・字間

• 本文の行間: 2.0（16px → 32px）。長文セクションは 2.25（36px）
• 見出しの行間: 1.0〜1.5。縦書きの見出しは 1.0（＝字間 0 の行送り）
• 本文の字間: 0.06em（16px → 0.96px）。CSS 宣言 36 回でサイト既定
• 見出しの字間: 0.06em 〜 0.16em。文字が大きいほど字間を広げる（38px の MVV で 0.16em）

ガイドライン:

• 日本語本文は letter-spacing: 0.06em ＋ line-height: 2.0 をセットで使う。どちらか片方だけだと、このサイトの間延びした空気にならない
• 大見出しは line-height を 1.0〜1.5 に締め、代わりに letter-spacing を開く

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;
line-break: strict;

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

• ヒーローのコピーは <span> を 1 行 = 1 要素にして手で改行している（みんなが喜ぶ / 京都にする）。縦書きで自動折り返しに任せない

3.7 OpenType 機能

css/* よーじやは font-feature-settings を一切宣言しない */
font-feature-settings: normal;

• palt は使わない。CSS 全文に palt は 0 回
• 約物のアキは letter-spacing: 0.06em に吸収させる設計。palt を後から足すと字間が二重に効いて崩れる

3.8 縦書き

このサイトの中核。装飾ではなくレイアウトの骨格として使う。

css/* ヒーローのコピー */
.fv_copy_line {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 61px;
  font-weight: 500;
  line-height: 1;            /* 縦書きでは「行の間隔」＝列の間隔 */
  letter-spacing: 0.074em;
  color: #fff;
}

/* セクションラベル（和欧を縦に並べる） */
.top_news_en { writing-mode: vertical-rl; font-family: proxima-nova; font-size: 36px; color: #dc878c; }
.top_news_jp { writing-mode: vertical-rl; font-size: 16px; color: #5f5046; }

縦書きで使う要素:

• ヒーローのメインコピー（61px / 2 行）
• セクションラベル（NEWS ＋ お知らせ。英字も縦に流す）
• 回遊カードの見出し（事業紹介 28.8px ＋ BUSINESS 15px）

注意点:

• text-orientation: mixed により、欧文は 90° 回転して縦に流れる（NEWS が横倒しになる）。これは意図した表現。全角回転させたい場合は upright を使うが、このサイトは使っていない
• 縦書き要素では line-height が列と列の間隔になる。1.0 だと列が接するので、外側の要素の gap で間隔を作る
• 縦書きの高さは親の height で決まる。SP（≤ 767px）では横書きに戻す実装が必要

4. Component Stylings

Buttons

Pill（アウトライン）— ニュース一覧の「お知らせ一覧」

• Background: #ffffff
• Text: #5f5046
• Border: 1px solid #beb9af
• Padding: 0 0 0 30px（右端に矢印の丸を置くため右 padding は 0）
• Border Radius: 999px
• Font Size: 16px / Weight 400 / letter-spacing: 0.04em

Pill（ベージュ塗り）— 採用情報

• Background: #ebe6dc
• Text: #5f5046
• Padding: 0 54px 0 20px
• Border Radius: 60px
• Font Size: 14px / Weight 600 / letter-spacing: 0.06em

Pill（フッターの選択ボタン）

• Background: #ebe6dc（一般のお客さま／企業さま）または #ffffff（よーじや／10 そば）
• Padding: 0 16px
• Border Radius: 20px
• Font Size: 16px / Weight 400

Chip（ニュースのカテゴリ）

• Background: #ffffff
• Border: 1px solid #beb9af
• Padding: 0 10px
• Border Radius: 30px
• Font Size: 12px / Weight 400

半径の選び方: 要素の高さに合わせて 20px → 30px → 60px → 999px を選ぶ。すべて 9999px に統一しない。

Card（回遊カード）

8 枚それぞれ角丸の当たる角が違うのが最大の特徴。

css.top_link_card_img1 { border-radius: 50px 0 0 0; }
.top_link_card_img2 { border-radius: 0 0 50px 50px; }
.top_link_card_img3 { border-radius: 0 50px 0 0; }
.top_link_card_img5 { border-radius: 50px 50px 0 0; }
.top_link_card_img6 { border-radius: 0 0 50px 0; }
.top_link_card_img7 { border-radius: 0 0 0 50px; }
.top_link_card_img8 { border-radius: 0 50px 0 0; }

• 見出しは縦書き（28.8px / 600 / 白）＋ 英字（15px）
• 写真の上に文字を載せるため、スクリムを敷く

大カード（フッターの「店舗一覧 / OUR SHOP」）

• Background: #e1b9b4
• Padding: 70px 30px 40px
• Border Radius: 52px

Inputs

• Background: #ffffff
• Border: 1px solid #beb9af
• Border Radius: 30px（1 行入力） / 20px（テキストエリア）
• Padding: 12px 20px
• Font Size: 16px / letter-spacing: 0.06em
• Focus: box-shadow: 0 0 0 2pt #185abc（実サイトの実装。フォーカスリングだけブランド外の青）

5. Layout Principles

Spacing Scale

CSS 変数を持たない（WordPress の --wp--preset--spacing--* は未使用）。実測から導ける段階は以下。

Container

• Max Width: 1000px（1440px ビューポートでの実測）
• ヒーロー・回遊カードは全幅（100vw）

Grid

• 回遊カード: 4 カラム × 2 段 / gap 10px 12px
• ニュース一覧: 1 カラム（横並びのメタ ＋ タイトル）

6. Depth & Elevation

ぼかした影をほとんど使わない。ずらした無地の面を影に見立てる。

css/* このサイトらしい「影」の作り方 */
.block { box-shadow: 12px 12px 0 0 #dc878c; }   /* ぼかさない・ずらすだけ */

rgba(0,0,0,.2) のような一般的なドロップシャドウを足さないこと。ブランドの色面をずらして重ねるのがこのサイトの奥行き表現。

7. Do's and Don'ts

Do（推奨）

• 文字色は #5f5046。黒もグレーも使わない
• 本文は line-height: 2.0 ＋ letter-spacing: 0.06em を必ずセットで
• 見出しは大きいほど字間を広げる（38px なら 0.16em）
• 和文と欧文は別要素に分けて書体を切り替える（秀英角ゴシック銀 / Proxima Nova）
• ボタンはピル。ただし高さに応じて 20px / 30px / 60px / 999px を選ぶ
• カードの角丸は枚ごとにずらす（50px を 1〜2 箇所の角にだけ当てる）
• 影はずらした無地の面（12px 12px 0 0 #dc878c）
• 縦書きを使うときは text-orientation: mixed ＋ 手動改行

Don't（禁止）

• #af2e29（赤）を面や文字に使わない。ハンバーガーアイコンの 9×9px 専用
• customProperties の色を使わない。--wp--preset--color--* は WordPress の既定で、このサイトでは 1 色も使われていない
• palt を有効にしない。letter-spacing: 0.06em と二重に効いて字間が崩れる
• すべてのボタンを同じ半径に揃えない。半径のばらつきが設計の一部
• ぼかした影を足さない
• 縦書きの中に line-height: 2.0 を持ち込まない（列間が開きすぎる。縦書きは 1.0）
• 本文に font-weight: 700 を常用しない（強調は 700、既定は 400、補助は 300）

8. Responsive Behavior

Breakpoints

PC ファースト。max-width で下に落とす。

css/* 主分岐 */
@media screen and (max-width: 767px) { /* SP */ }

タッチターゲット

• 最小サイズ: 44px × 44px
• 採用情報ボタンは高さ 40px ＋ 上下の余白で 44px を確保

フォントサイズの調整

• ヒーローのコピー: 61px → SP では 32〜36px 程度
• 本文 16px は SP でも維持（line-height: 2.0 も維持する。ここを詰めると別のサイトになる）
• Statement 見出し 40px → SP 26px 程度
• SP では回遊カードの縦書きを横書きに戻す（縦書きのままだとカード高が画面を超える）

9. Agent Prompt Guide

クイックリファレンス

Text Color:    #5f5046
Accent:        #dc878c
Surface:       #ebe6dc     /* ベージュ */
Surface (大):  #e1b9b4     /* ピンク */
Border:        #beb9af
Sub Text:      #8a7c70
Background:    #ffffff
Font (JP):     dnp-shuei-gothic-gin-std, sans-serif
               → 代替: "Zen Kaku Gothic New", sans-serif
Font (EN):     proxima-nova, sans-serif
               → 代替: "Montserrat", sans-serif
Body Size:     16px
Line Height:   2.0（長文は 2.25）
Letter Spacing: 0.06em
Border Radius: 20 / 30 / 60 / 999px（高さで選ぶ）
Box Shadow:    12px 12px 0 0 #dc878c（ぼかさない）

プロンプト例

よーじやのデザインシステムに従って、店舗一覧ページを作成してください。
- 文字色は #5f5046（黒は使わない）、地は #ffffff
- 和文フォント: "Zen Kaku Gothic New", sans-serif
- 欧文フォント: "Montserrat", sans-serif（英字ラベル・日付のみ）
- 本文: 16px / line-height 2.0 / letter-spacing 0.06em
- セクションラベルは「SHOP（Montserrat 36px #dc878c）」と「店舗一覧（16px #5f5046）」を
  writing-mode: vertical-rl で縦に並べる
- カテゴリチップ: 白地 + 1px solid #beb9af + border-radius 30px + 12px
- 一覧ボタン: 白地 + 1px solid #beb9af + border-radius 999px + 右端に丸い矢印
- カードは 4 枚それぞれ違う角に border-radius: 50px を当てる
- 影はぼかさず box-shadow: 12px 12px 0 0 #dc878c

実装時の落とし穴

• letter-spacing: 0.06em を忘れると、行間 2.0 だけが効いて「間延びしただけ」に見える。字間と行間はセット
• 縦書き要素の line-height を 1.5 以上にしない。列がばらけて読めなくなる
• Adobe Fonts（秀英角ゴシック銀 / Proxima Nova）はドメインライセンス。自分のドメインでは表示されないので、代替フォントを前提に設計する
• 「祇」のように字形が意図と違う漢字は、その字だけ "Hiragino Sans", "Yu Gothic" に逃がす手が実サイトで使われている