店舗が増えても、
経営の目が届く。

だから 売上が上がり、コストが下がり、利益が残る。
お問い合わせ 資料ダウンロード

※本キャンペーンは予告なく変更、または終了することがあります。あらかじめご了承ください。※新規でお取引を開始いただく法人様・個人事業主様が対象です。

ヒーロー見出しだけ letter-spacing: 0.03em。実サイトは 70px に対して 2.1px(PC)で、他の全要素が 0.04em なのに対してここだけ詰めている。375px では別要素(36px / weight 700 / 0.04em)に差し替わる。

Color

オレンジ1色と9段のグレースケール

ブランド色は #FF7500。グレーは --color-s0 〜 --color-s9 の9段で、文字は #6F7175(163 要素)、面は #3F4042(52 要素)が最多。

dinii Orange ★
#FF7500
面 10 要素 / 文字 19 要素
Orange Light
#FF8C00
下層の見出し面(8 要素)
Attention
#FF0046
NEW ラベルの文字・注意喚起
Black ★
#282828
本文・見出し(139 要素)
s9 ★
#3F4042
面として 52 要素(最多)。事例カードの帯
s7 ★
#6F7175
文字色として 163 要素(最多)
s3
#D0D4DB
罫線
s2
#E9EDF5
淡い罫線・面
s1 ★
#F2F7FF
ヒーローの地色(15 要素)
s0 ★
#F7FAFC
セクションの地色
Bluegray
#56698F
リンク色・NEW の面(26 要素)
Q Label
#172D57
Q&A の「Q.」(8 要素)

サービス別の識別色

POSレジ
ダイニー POSレジ
モバイルオーダー
ダイニー モバイルオーダー
顧客管理
ダイニー 顧客管理
予約台帳
ダイニー予約台帳
集客
ダイニー集客
キャッシュレス
ダイニー キャッシュレス
勤怠
ダイニー勤怠
経営管理
ダイニー経営管理

CSS 変数 83 個のうち 60 個は WordPress / Gutenberg 由来。--wp--preset--color--*(#cf2e2e #ff6900 等)を自社の色として採用しないこと。自社トークンは 23 個。

02 / Typography
Typography

0.04em を要素ごとに書く

body の letter-spacing は normal なのに、実測の字間はすべて font-size の 4%。サイズに比例して px が変わる=継承ではなく各要素が em を持っている。

font-sizeletter-spacing件数(トップ)見え方
11px0.44px52ダイニー POSレジ
12px0.48px112(最多)顧客インタビュー
14px0.56px84サービスのご紹介
16px0.64px35各店舗の状態が正しく把握できない
18px0.72px60オペレーションの標準化
20px0.8px59コストを下げる
24px0.96px30導入事例
70px(ヒーロー)2.1px = 0.03em1※ここだけ 0.03em
111214 151618 202432 406070
Hero Heading(PC)★Noto Sans JP / 70px / 900
lh 1.25 / ls 0.03em
経営の目が届く。
Hero Heading(SP)36px / 700
lh 1.25 / ls 0.04em
店舗が増えても、経営の目が届く。
Section Heading32px / 700
lh 1.40 / ls 0.04em
店舗数が増えるたびに、こんな”壁”にぶつかっていませんか?
Card Heading24px / 700
lh 1.50 / 色 #FF7500
1. 見えない
Lead20px / 700
lh 1.50 / ls 0.8px
コストを下げる/コストを見える化する
Eyebrow(EN)Poppins / 20px / 700
lh 1.50 / 色 #56698F
Benefits
Item Heading18px / 700
lh 1.40 / ls 0.72px
追加注文を促進する滞在時間アラート機能
Body ★16px / 400
lh 1.50 / ls 0.64px
レジを起点に売上を最大化する、飲食店特化型のPOSシステムです。注文内容はリアルタイムでキッチンディスプレイに表示されます。
Body Long16px / 400
lh 1.80(12 要素)
全店舗の売上・QSC・利益を、いつでも・どこでも把握できます。「店長の力量に依存しない“仕組み”化」により、オペレーションを標準化します。
Nav / Button14px / 700
lh 1.50 / ls 0.56px
サービスのご紹介
Caption ★12px / 400
lh 1.50 / ls 0.48px(最多 114)
※条件・注意事項詳細はこちら
Micro11px / 400
lh 1.50 / ls 0.44px
ダイニー モバイルオーダー

body に letter-spacing: 0.04em を書き直してはいけない。em を body に書くと 16px × 0.04 = 0.64px が全サイズに固定継承され、12px の注記(実サイトは 0.48px)が相対的に空きすぎる。実サイトはサイズに比例させている。例外は数字(3,000 2,000)の normal(13 要素)。

font-weight: 800 / 900 を書かない。読み込んでいる Noto Sans JP / Noto Sans は可変フォントの wght@400..700で、レンジ外は 700 にクランプされる。実サイトのヒーロー見出し(900)とキャンペーン帯(900・9 要素の 800)がそれ。Poppins の 600 も unloaded なので使わない。

palt は 1 要素も無く、CSS 全文にも 0 回。字詰めは letter-spacing だけで作る。word-break の宣言も CSS 全文で 1 回だけで、改行位置は HTML 側の <br> で決めている。

Buttons

CTA はベタ塗りではなくグラデーション

面を #FF7500 のベタで塗るのはセクション帯で、「お問い合わせ」ボタンは4段のグラデーション。角丸は 4px(実測 165 要素)。

お問い合わせ お問い合わせ ダイニーの解決策 お問い合わせ 資料ダウンロード 導入事例一覧を見る NEW #居酒屋 #1~5店舗
既定(165 要素)
4px
カード(29)
8px
タグ(24)
2px
円(26)
50%

角丸は 4px が圧倒的。迷ったら 4px。カードだけ 8px に上げる。

04 / Cards
Cards

影を使わず、地色で段を作る

実測の影はトップで 1 要素だけ、下層は 0 種。段差は #F7FAFC ↔ #FFFFFF ↔ #F2F7FF の地色と、#D0D4DB / #E9EDF5 の罫線で作る。

顧客インタビュー
店長の力量に依存しない仕組みへ
オペレーションを標準化し、新店の立ち上げ期間を半分に短縮した事例。
#居酒屋#11~30店舗
顧客インタビュー
モバイルオーダーでクチコミを増やす
注文画面からクチコミ投稿を依頼し、返信文を AI が自動で作成する運用。
#カフェ#1~5店舗
顧客インタビュー
全店舗の利益を一画面で把握する
売上・原価率・人件費率を店舗別に並べ、異常値をその日のうちに拾う。
#焼肉#31店舗~

壁は3つある

1. 見えない

各店舗の状態が正しく把握できない

2. 育成できない

店舗は増やせても任せられる人が育たない

3. 利益が残らない

売上は伸びてもコストが見えず利益が残らない

導入店舗
3,000
利用会員数
2,000

数字だけ letter-spacing: normal。実測 13 要素。価格・店舗数には字間を足さない。

Elevation

影はサイト全体で 1 要素だけ

トップの 511 要素のうち影を持つのは 1 つ。下層の 414 要素は 0。影を足すと別物になる。

Level 0
none — 既定。トップ 510/511、下層 414/414
Level 1
0 4px 12px rgba(0,0,0,0.05)
キャンペーン帯(1 要素のみ)
06 / Layout
Layout

コンテナ 1152px / gap は 10・12 と狭い

ブレークポイントは max-width の宣言が圧倒的(768px が 213 / 255 件、1024px が 90 / 110 件)。デスクトップ基準で下へ上書きする設計で、モバイルファーストではない。

--container: 1152px(下層 15 回で最多)
1000px(トップ 7 回)
312px(カード)

html / body は 4 幅(1440 / 1200 / 834 / 375px)すべて 16px 固定。rem 換算は常に 16px 基準でよい。見出しだけメディアクエリで切り替わり、字間は 0.04em のまま追従する(32px → 1.28px、24px → 0.96px)。