ダイニー（dinii） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: オレンジ1色と9段のグレースケールで組む飲食店向け SaaS。角丸 4px の小さい面を大量に並べ、影をほとんど使わない。見出しは太く詰めて「殴る」
• 密度: 高い。可視テキストはトップ 511 要素・下層 414 要素。本文 12px の注記が最多（114 要素）という、情報量で押す構成
• キーワード: オレンジ、0.04em、ベタな角丸4px、影なし、9段グレー

このサイトの核心は4つある。

1. letter-spacing: 0.04em を「要素ごとに」当てている。 body は normal なのに、実測の字間は 12px→0.48px / 14px→0.56px / 15px→0.6px / 16px→0.64px / 18px→0.72px / 20px→0.8px / 24px→0.96px / 11px→0.44px とすべて font-size の 4%。サイズに比例して px が変わる＝継承ではなく各要素が em を持っている（下記 3.5）
2. 行間は 1.50 の一本槍。 トップは 420 / 511 要素、下層は 336 / 414 要素が 1.50。日本語サイトとしては詰まった値を、ほぼ全要素で揃えている
3. ヒーロー見出しに font-weight: 900 を当てているが、読み込んでいる Noto Sans JP は可変フォントの 400..700。 店舗が増えても、経営の目が届く。 の 900 と、キャンペーン帯の 900（計 2 要素）、800（9 要素）はいずれもレンジ外で、実際には 700 相当にクランプされて描画される
4. 影が実質ゼロ。 トップで rgba(0,0,0,0.05) 0 4px 12px が 1 要素だけ、下層は 0 種。段差は影ではなく地色（#F7FAFC / #F2F7FF / 白）の切り替えで作る

font-feature-settings: "palt" は 1 要素も無く、CSS 全文の palt 出現も 0 回。 縦組みも 0 件。

サイトは WordPress 製（CSS が wp-content/themes/service-website/）。CSS Custom Properties は 83 個あるが、自社トークンは 23 個で、残り 60 個は WordPress / Gutenberg（49）と WordPress admin（11）の既定値。--wp--preset--* を自社の色として採用しないこと。

2. Color Palette & Roles

Primary（ブランドカラー）

CTA は単色ではなくグラデーション。 面を #FF7500 のベタで塗るのはセクション帯で、ボタンは4段のグラデ。この使い分けを守ると実サイトの印象になる。

Service Accent（サービス別の識別色・宣言はあるが可視 2 要素ずつ）

9 サービスを色で見分けさせる設計。面積は小さく、アイコンとラベルにしか使わない。

Neutral（9 段グレースケール）

• Background: ヒーローは #F2F7FF、下層は #F7FAFC（pageBackground.resolved はトップ rgb(242,247,255) / 下層 rgb(247,250,252)。どちらも viewportTopBySample 根拠）
• body の background-color は rgba(0,0,0,0)（透明）。地色はセクション側で塗る設計なので、body に白を書かず、セクションで #F7FAFC / #FFFFFF を切り替える
• Q&A の Q. ラベル: #172D57（8–9 要素）

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP（Google Fonts・可変フォント wght@400..700）
• 明朝体は使わない

3.2 欧文フォント

• サンセリフ（本文の欧文）: Noto Sans（Google Fonts・可変 wght@400..700）。和文より先に置かれている
• サンセリフ（見出し・番号）: Poppins（Google Fonts・500 / 600 / 700）。Benefits Function Support System、番号 01 02 03（トップ 24 要素 / 下層 18 要素）
• 数字（キャンペーン）: DIN 2014（2 要素のみ。40万円 の数字）。@font-face を持たないため環境に無ければ落ちる

Poppins の 600 は @font-face が unloaded のまま（500 と 700 は loaded）。600 を指定しないこと。

3.3 font-family 指定

css/* 本文・UI（既定）— 実サイトの宣言そのまま */
font-family: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial,
             "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
             メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;

/* 欧文見出し・番号 */
font-family: Poppins, sans-serif;

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

• 欧文優先の二層。Noto Sans（欧文）→ Noto Sans JP（和文）の順で、数字と英字を Noto Sans に寄せる
• フォールバックが長い。 Web フォントが落ちたときのために ヒラギノ → メイリオ → ＭＳ Ｐゴシック まで積んである。ＭＳ Ｐゴシック は Windows の旧環境向けで、現行環境では到達しない。新規実装では省いてよい
• 実測は トップ 483 / 511 要素・下層 396 / 414 要素がこの1スタック。書体の使い分けをほぼしない設計

body の computed value は "Hiragino Kaku Gothic ProN" 1 つだけに見えるが、これは宣言ではなくブラウザ既定（フォールバックが書かれていない＝CSS が body に font-family を与えていない）。実体は上のスタックが 483 要素に当たっている。 body の値を見て「ヒラギノのサイト」と読まないこと。

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

サイズは 11 / 12 / 14 / 15 / 16 / 18 / 20 / 24 / 32 の 9 段。 奇数サイズ（11 / 15）を実際に使っているのが特徴。

3.5 行間・字間

字間 — 0.04em を要素ごとに当てる

実測した letter-spacing の px 値は、すべて font-size × 0.04：

body の letter-spacing は normal。 つまり 0.04em は継承ではなく、要素ごとに書かれている。 唯一の例外がヒーロー見出しで、70px に対して 2.1px ＝ 0.03em と他より詰めている（大きい字ほど字間が目立つための調整）。SP 版（36px）は 1.44px ＝ 0.04em に戻る。 これを body に 1 回書く実装に置き換えてはいけない。 em を body に書くと body の font-size（16px）× 0.04 = 0.64px が全サイズに固定継承され、12px の注記が相対的に空きすぎる。実サイトはサイズに比例させている。 例外は数字（3,000 2,000）の normal（13 要素）。数字だけ字間を足さない。

行間 — 1.50 で統一

ガイドライン:

• 行間は 1.50 を既定にする。 見出しは 1.40 に詰め、長い説明文だけ 1.80 に広げる
• 字間は 0.04em を要素に書く（body に書かない）。数字には足さない

3.6 禁則処理・改行ルール

css/* 実測: body の既定値 */
word-break: normal;
overflow-wrap: normal;
line-break: auto;

• line-break の指定は無し（auto）。word-break: auto-phrase も不使用（CSS 全文で 0 回）
• CSS 全文の word-break 宣言は 1 回だけ。改行制御をほとんど CSS に委ねていない
• 代わりに HTML 側で改行位置を決めている（見出しの 店舗が増えても、 / 経営の目が届く。 は実測でも 2 行に分かれたテキストノード）

3.7 OpenType 機能

css/* このサイトは palt を使わない */
font-feature-settings: normal;

• palt は 1 要素も無く、CSS 全文にも 0 回。字詰めは letter-spacing だけで作る

3.8 縦書き

該当なし（writing-mode: vertical-rl は 0 件）。

4. Component Stylings

Buttons

Primary（CTA・グラデーション）

• Background: linear-gradient(#F15D96, #FF3D70 23.56%, #FF0047 42.31%, #D70228)
• Text: #FFFFFF
• Border Radius: 4px
• Font Size: 14px / Weight 700 / Letter Spacing 0.56px
• Line Height: 1.50

Secondary（白地・枠）

• Background: #FFFFFF
• Text: #FF0046（または #282828）
• Border Radius: 4px
• Font Size: 14–18px / Weight 700 / Letter Spacing 0.04em

Section CTA（オレンジのベタ面）

• Background: #FF7500
• Text: #FFFFFF
• Border Radius: 4px / Font Size 16px / Weight 700

Dark（ヘッダー右端）

• Background: #282828 / Text #FFFFFF / Radius 4px / 14px / Weight 700

Badges

• NEW: Background #56698F、Text #FFFFFF、Radius 2.71px、小サイズ
• 業種タグ（#居酒屋 #1~5店舗）: 12px / Weight 400 / Letter Spacing 0.48px、Radius 2px

Cards

• Background: #FFFFFF
• Border Radius: 8px（説明カード 29 要素 / Q&A 17 要素）
• Shadow: 原則なし（トップで rgba(0,0,0,0.05) 0 4px 12px が 1 要素のみ、下層は 0 種）
• 段差は地色の切り替え（#F7FAFC ↔ #FFFFFF ↔ #F2F7FF）で作る

Radius の分布

角丸は 4px が圧倒的。 迷ったら 4px。

5. Layout Principles

Spacing Scale（gap の実測）

Container

• Max Width: 1152px（トップ 7 回・下層 15 回で最多）
• 併用: 1000px（7 回）、1120px、1360px
• カード: 312px / calc(50% - 12px)

Grid

• カードは 2〜3 列。gap は 10px または 12px と狭い

6. Depth & Elevation

このサイトは影で階層を作らない。 影を足すと別物になる。面（白 / #F7FAFC / #F2F7FF）と罫線（#D0D4DB / #E9EDF5）で段を作る。

7. Do's and Don'ts

Do（推奨）

• letter-spacing: 0.04em を要素ごとに書く（body には書かない）
• 行間は 1.50 を既定に、見出し 1.40、長文 1.80
• 角丸は 4px（ボタン・小面）／ 8px（カード）
• 地色は #F7FAFC（セクション）／ #F2F7FF（ヒーロー）／ 白を切り替える
• 文字色は #282828（本文）／ #6F7175（補助）／ #56698F（リンク）
• お問い合わせ ボタンはグラデーションにする

Don't（禁止）

• font-weight: 800 / 900 を書かない。 可変フォントのレンジが 400..700 なので 700 にクランプされる（実サイトのヒーロー見出しがそれ）
• Poppins の 600 を使わない（unloaded）
• 影を足さない。 段差は地色と罫線で作る
• palt を足さない
• body に letter-spacing: 0.04em を書かない（12px の注記が空きすぎる）
• 数字（価格・店舗数）に字間を足さない（実サイトは normal）
• --wp--preset--* の色を自社トークンとして扱わない

8. Responsive Behavior

Breakpoints

max-width の宣言が圧倒的に多い（デスクトップ基準で下へ上書きする設計）。 モバイルファーストではない。

ルートは固定

• html / body は 4 幅（1440 / 1200 / 834 / 375px）すべて 16px 固定。rem 換算は常に 16px 基準
• 見出しだけメディアクエリで切り替わる: セクション見出し 32px（1025px 以上）→ 375px で 24px。字間も 1.28px → 0.96px と 0.04em のまま追従する
• ヒーロー見出しは PC と SP で別の要素を出し分けている（h1.TopHeroMid__title = 70px / weight 900 と、h1.TopHeroMid__spTitle = 36px / weight 700）。同じ要素をリサイズしているのではないので、文言を変えるときは 2 箇所直す必要がある

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #FF7500
CTA: linear-gradient(#F15D96, #FF3D70 23.56%, #FF0047 42.31%, #D70228)
Text Color: #282828 / 補助 #6F7175 / リンク #56698F
Background: #F7FAFC（セクション）/ #F2F7FF（ヒーロー）/ #FFFFFF
Font: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif
Body Size: 16px
Line Height: 1.5
Letter Spacing: 0.04em（要素ごとに書く）
Radius: 4px（ボタン）/ 8px（カード）
Shadow: なし
Container: 1152px
font-weight: 400 と 700 のみ

プロンプト例

ダイニーのデザインシステムに従って、導入事例の一覧カードを3枚作成してください。
- フォント: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif
- 本文 16px / line-height 1.5 / letter-spacing 0.04em（要素ごとに指定）
- カードのタイトル: 18px / weight 700 / letter-spacing 0.72px
- タグ（#居酒屋 など）: 12px / weight 400 / letter-spacing 0.48px
- カード: 背景 #FFFFFF、角丸 8px、影なし。セクションの地色は #F7FAFC
- カード上部の帯: 背景 #3F4042、白文字 12px で「顧客インタビュー」
- 末尾の CTA ボタン: グラデーション linear-gradient(#F15D96, #FF3D70 23.56%, #FF0047 42.31%, #D70228)、白文字 14px / weight 700、角丸 4px
- font-weight は 400 と 700 だけ使う（800/900 は禁止）
- palt は使わない。コンテナ幅 1152px、カード間の gap は 12px