レストラン・飲食店の方へ ヘルプ
📍 日本🌐 JA ログイン

全国の人気
レストランを探す

01 / Colors

紫は差し色だけ。CTA は黒

CSS Custom Properties は 282 個。色は 6 系統 × 8〜12 段でトークン化されている。

Brand Static
#7935d2
ロゴ・見出しの強調語・Pay バナー。ボタンには使わない
Grey 900
#292929
本文の色 かつ 主 CTA の面色
Grey 300
#e5e5e5
カード・入力欄・非選択チップの枠。UI の骨格
Grey 750
#666666
補助テキスト
Grey 100
#f9f9f9
セクションの地
Purple 50
#f7efff
選択中チップの面・ユーティリティヘッダー
Purple 600
#8e4ae7
選択中チップの枠
Rating
#f69709
★ の色(--rating-color)

Purple Scale

50100150 200300400 500600700 800900950

Grey Scale

50100150 200300400 500600700 750800850 900950

Semantic 700 / Badge

infosuccess warningorange error
pinkpurpleblue green1green2green3 cream
⚠️ トークンの値をそのまま実装しない。 ブランド紫は --brand-static: #7935d2(実測値)を使う。--purple-700: #7832d2 は 1 トーンずれる。 また --h1-line-height: 48px の宣言に対し実測は 44px、--swiper-theme-color: #007aff は Swiper の既定値で TableCheck の色ではない。

IBM Plex Sans 先頭の欧文優先。行間は px 固定

和文 Web フォントは読み込まず、ヒラギノ角ゴ ProN → Yu Gothic UI → 游ゴシック体 → Meiryo UI の OS フォントに任せる。

headline
54px / 700 / lh 64px
予約をもっと自由に
h1
36px / 600 / lh 48px
(実測 44px)
全国の人気レストランを探す
h2
24px / 400 / lh 32px
人気の条件から探す
h3
20px / 600 / lh 24px
ジャンルから探す
h4
20px / 400 / lh 24px
エリアから探す
h5
16px / 600 / lh 24px
ダイナースクラブ フランス レストランウィーク
body-1
16px / 400 / lh 24px
フランス料理をとことん楽しむ 1 ヶ月間。今年のコーステーマは「サステナブルフレンチ」です。
body-2
14px / 400 / lh 20px / #666
環境にやさしい取り組みとフランス料理ならではの魅力が調和した特別コースをお楽しみいただけます。
label
14px / 600 / lh 20px
ご来店人数
small
12px / 400 / lh 18px
2026 年 9 月 18 日 – 2026 年 10 月 18 日

line-height を比率ではなく px で持つ(16px→24px / 14px→20px)。カードの高さを揃えるための実装なので、比率に置き換えるとグリッドが崩れる。 letter-spacing は すべて normal(明示的に宣言)、font-feature-settings: normal も 3 箇所で明示して palt の継承を切っている。

03 / Product — 組版サンプル

人気の条件から探す

カードの中にさらに 3 段の店舗リストが入る。1120px に 3 列。

Restaurant Naz
🍽 イタリア料理, 現代イタリアン
プレゼンテ スギ (PRESENT…
🍽 イタリア料理, パスタ, インタ…
静龍苑
🍽 焼肉
6 店舗すべてを表示
銀座 ちかみつ 六丁目
🍽 焼肉
薈 YORONIKU
🍽 焼肉, ホルモン焼き
炭火焼ホルモンぐう築地
🍽 焼肉, ホルモン焼き, 居酒屋
10 店舗すべてを表示
ガストロノミー “ジョエル・…
🍽 フランス料理, 現代フレンチ
HOMMAGE
🍽 フランス料理
Restaurant Ryuzu
🍽 フランス料理
7 店舗すべてを表示

店舗名・ジャンルは 1 行で text-overflow: ellipsis。日本語の途中で切ることを許容する。

CTA は黒・radius 4px・weight 400。チップだけ pill

① プライマリ #292929 / 白文字 / 1px solid #292929 / radius 4px / 16px 400 / padding 9px 11px ② セカンダリ 1px solid #e5e5e5 / radius 8px / padding 12px ③ テキスト radius 4px / padding 8px

Chips(絞り込み・pill)

選択中は「面 #f7efff / 枠 1px solid #8e4ae7 / 文字 #292929」、非選択は「面 #fff / 枠 1px solid #e5e5e5 / 文字 #666」。radius は 999px。

Badges(属性表示・radius 4px / weight 600)

居酒屋飲み会大人数向け カフェ銀座落ち着いた Fastpass TableCheck Pay

チップ(pill / 400 / 絞り込み)とバッジ(4px / 600 / 表示専用)は別物。混同しない。

05 / Cards

枠 1px + radius 8px。既定では影を持たない

APERO AOYAMA Wine Bar
ワインとフレンチの小皿を、青山のカウンターで。
フレンチワイン
ルグドゥノム ブション リヨネ
リヨンの郷土料理を一皿ずつ。予約は 2 ヶ月先まで。
フランス料理記念日
2026 年 9 月 18 日 – 10 月 18 日

ダイナースクラブ フランス レストランウィーク 2026

フランス料理をとことん楽しむ 1 ヶ月間。

すべてのレストランを見る

写真の上に重ねる半透明カード

居酒屋 金曜日 夜
居酒屋飲み会大人数向け

半透明カードは rgba(255,255,255,.7) の面 + 1px solid var(--lighter-grey-border)(#0000001a)/ radius 8px。

Default / Focus / Error

外枠のコンテナが枠と角丸を持ち、input 自体は完全に透明。フォーカスリングは box-shadow のスプレッドで描く。

Default: 1px solid #e5e5e5 / radius 8px
Focus: box-shadow: 0 0 0 2px var(--focus)(border は太らせない)
電話番号を正しく入力してください

input の font-size は 16px を死守する(iOS の自動ズーム回避)。

07 / Elevation

2 層構造 + 負のスプレッド

近い小さな影と遠い大きな影を重ね、どちらも負のスプレッドで要素の外にはみ出させない。

--elevation-small-raised0 1px 2px -1px rgb(0 0 0 / .2),
0 2px 6px -2px rgb(0 0 0 / .1)
--elevation-medium-raised0 1px 4px -1px rgb(0 0 0 / .2),
0 2px 6px -2px rgb(0 0 0 / .1)
--elevation-large-raised0 2px 8px -1px rgb(0 0 0 / .2),
0 2px 12px -4px rgb(0 0 0 / .1)
--elevation-light-small0 0 3px 0 rgba(0, 0, 0, .1)

実測で最も多いのは --elevation-small-raised(14 箇所)。カードは既定で影を持たず、浮くもの(ドロップダウン・ポップオーバー)にだけ当てる。

1120px・3 列。radius は 4 / 8 / 999px の 3 種で足りる

コンテンツ幅 1120px(内側のグリッド 1088px)
3 列
3 列
3 列

Spacing Scale(--spacing-l1〜l8)

4
8
12
16
24
32
40
48

Radius Scale

トークン値CSS 参照用途
--border-radius-micro2px—極小の装飾
--border-radius-small4px140 回ボタン・バッジ
--border-radius-medium8px8 回(large と同値)
--border-radius-large8px123 回カード・入力欄
--border-radius-x-large16px6 回ヒーロー画像・大きなパネル
--border-radius-full999px17 回絞り込みチップ

Z-index Scale

--z-index-1: 10 / --z-index-2: 20 / --z-index-3: 30 / --z-index-4: 40 — 10 刻みの 4 段だけ。