資料・デモを見る お問い合わせ

Design System Preview
hacomono

有彩色を 1 色も持たない完全モノクローム。CSS に現れる色は #1a1a1a #767676 #eff1f4 …とすべて無彩色で、青も緑も赤も 1 回も出てこない。和文の font-family 宣言はサイト全体で 1 つ、游ゴシック 1 本きり。以下はすべて computed style と template.css の実測値（2026-08-27 取得）。

#パーソナルジム #サッカー・バスケットボールスクール #公共施設
01 / Colors

有彩色ゼロ。明度だけで優先度を表す

Brand — この 2 色が CTA の優先度を決める
hacomono Black
#1a1a1a
主色。CSS 出現 90 回。主 CTA の面・本文・見出し
Secondary Gray
#767676
副 CTA の面。23 回。主 CTA と形は完全に同一
Text Gray
#4f4f4f
タグチップの文字。4 回
Muted
#818181
補助テキスト。6 回
Surface — 地 → パネル → カードの 3 段で階層を作る
BG Top
#e9ebee
トップのページ地。11 回
BG Sub
#f7f6f6
下層のページ地。わずかに赤み。21 回
Panel
#eff1f4
パネル・フッター。30 回で最頻の面
Card
#ffffff
カード・アウトラインボタンの地。100 回
Surface
#f2f2f2
画像プレースホルダ。8 回
Chip
#dadada
タグチップの面。4 回
Shadow Face
#ebedef
オフセット影に使う面。3 回
Line
#d2d2d2
罫。39 回
⚠️ CSS 変数は使ってはいけない
宣言されている変数値実装
--color-base-primary#012677（濃紺）未使用。HTML 中の 012677 は宣言の 1 回のみ
--color-base-secondary#FDD247（黄）未使用
--color-base-footerBackground#011748（濃紺）未使用。実際のフッターは #eff1f4
--border-radius-button200px（ピル）未使用。実装は 6px
--font-family-jaYakuHanJP, "Noto Sans JP", …未使用。実装は游ゴシック 1 本

これらはすべて sdk.gig.goleadgrid.com から読み込まれる LeadGrid（CMS）のテーマ既定値。HTML 中に leadgrid の文字列が 143 回出現する。変数を見て実装すると、紺と黄のピル UI という別物のサイトができあがる。

02 / Typography — 実測値

游ゴシック 1 本。字間は見出しだけ 0.04em

理想の運営はこれひとつで
40px / 700 / line-height: 48px (1.2) / letter-spacing: 1.6px (0.04em)Display
店舗・施設・スクールの
あらゆる業務をオンラインで完結
36px / 700 / line-height: 57.6px (1.6) / letter-spacing: normalh2 — 2 行想定はゆったり
導入事例
36px / 700 / line-height: 41.4px (1.15) / letter-spacing: normalh2 — 1 行は詰める
開業導入率 No.1
28px / 700 / line-height: 39.2px (1.4) / letter-spacing: 1.12px (0.04em)h2 — 小さめの見出し
機能
32px / 700 / line-height: 36.8px (1.15) / letter-spacing: normalh1 — 下層のページタイトル
予約・決済・会員管理をひとつに
24px / 700 / line-height: 36px (1.5)h3 — カード見出し
オンライン入会でスタッフの負担を減らす
18px / 700 / line-height: 27px (1.5)h3
入会手続き、月会費の決済、予約の受付、会員情報の管理まで、店舗運営に必要な業務を 1 つのシステムにまとめます。紙とエクセルで分かれていた作業がなくなり、スタッフは接客に時間を使えるようになります。
15px / 400 / line-height: 25.5px (1.7) / color: #1a1a1a本文（機能ページ）
全国のフィットネスジム・スイミングスクール・公共施設で導入されています。業種を問わず、同じ 1 つのシステムで運営できます。
14px / 400 / line-height: 22.4px (1.6)本文（トップ）
この行間（1.15）は body の初期値。日本語本文にそのまま使うと行が団子になる。
16px / 400 / line-height: 18.4px (1.15) ← body の既定値。本文には使わない⚠️ 罠
TOP ＞ 機能 ＞ 予約管理
12px / 400 / line-height: 18px (1.5) / color: #b0b0b0パンくず
font-family（CSS 全体でこの 1 つだけ）
対象指定
サイト全体"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif

※ template.css（390KB）に含まれる font-family 宣言は 4 つで、うち 2 つは monospace、1 つは inherit。和文スタックはこの 1 本きり。
※ 4 つの別名を並べるのは Windows と macOS で参照名が違うため。1 つに減らすと片方で当たらない。
※ yakuhanjp.css は CDN から読み込まれているが、和文スタックに YakuHanJP が入っていないので約物半角は効いていない。
※ このプレビューでは游ゴシック非搭載環境向けに Zen Kaku Gothic New（Google Fonts）を末尾に補っている。
※ font-feature-settings は全要素 normal。palt を使わない。
※ letter-spacing: 0.04em は CSS 中 17 回宣言。見出し専用で、本文は normal。

03 / Case Study — 組版サンプル

導入事例

紙の入会申込書をなくし、受付の待ち時間を 15 分短縮

総合フィットネスクラブ 8 店舗を運営する事業者の事例。入会手続きをオンラインに移したことで、フロントの業務時間が 1 日あたり約 3 時間削減された。

これまでは入会希望者に紙の申込書を書いてもらい、スタッフが会員管理システムへ手入力していました。繁忙期には受付に列ができ、最大で 20 分ほど待たせてしまうこともありました。

WEB 入会を導入してからは、来店前にスマートフォンで手続きが完了します。フロントでは本人確認とロッカーの案内だけで済むようになりました。

  • 入会手続きの平均所要時間：20 分 → 5 分
  • フロント業務の削減：1 日あたり約 3 時間
  • 入会申込書の印刷コスト：年間で約 40 万円削減

決済も同じシステムで完結するため、月会費の請求漏れや二重請求の確認作業もなくなりました。

詳しく見る
04 / Buttons

形を変えず、面の明度だけで優先度を落とす

資料・デモを見る
Primary
#1a1a1a / #fff / radius 6px
padding 14px 12px 14px 24px
14px / 700
お問い合わせ
Secondary
#767676 / #fff / radius 6px
padding・サイズは Primary と同一
詳しく見る
Outline
#fff / 1px solid #1a1a1a
radius 6px / 14px / 700
hacomonoとは
Outline (wide)
padding 14px 32px
アイコン無し
Load more
radius 4px（他の 6px と違う）
padding 16px 13px 16px 32px
Chips & Badges — radius 2px / 5px。ピルにしない
#パーソナルジム #スイミングスクール #公共施設 オプション機能

chip: #dadada / #4f4f4f / radius 2px / padding 3px 11px 4px（上下非対称）/ 12px・700　｜　badge: #767676 / #fff / radius 5px / padding 6px / 13px・700

Large CTA — フッター上の 2 枚組
資料・デモダウンロード
hacomono の機能と料金がわかる資料をお送りします お問い合わせ
hacomono に関するご相談を承ります
05 / Cards

カードは radius 8px、パネルは 6px

WEB 入会で受付を無人化する

来店前にスマートフォンで手続きが完了。フロントは本人確認だけで済みます。

2026.08.20 ／ 機能紹介

月会費の決済を自動化する

クレジットカード・口座振替に対応。請求漏れと二重請求の確認作業がなくなります。

2026.08.12 ／ 機能紹介

予約枠をリアルタイムで管理する

レッスンの空き状況が会員アプリに即時反映。電話での問い合わせが減ります。

2026.07.30 ／ 導入事例
Nav Cards — #eff1f4 の面 / radius 6px / padding 36px 24px 24px 36px（左右非対称）
機能 導入事例 料金プラン よくある質問
06 / Forms

Default / Focus / Error

Default — 1px solid #d2d2d2 / radius 6px
Focus — border #1a1a1a ＋ outline #d2d2d2
メールアドレスの形式で入力してください

※ hacomono はエラー色に赤を使わない（CSS に有彩色が存在しない）。エラーは #4f4f4f の太字とボーダーの濃さで示す。

07 / Elevation

影はブラーを持たない。面をずらして重ねる

Level 0
none
ほぼすべての要素
Level 1
20px 20px 0 0 #f7f6f6
ブラー 0。CSS 2 回
Level 1'
1.25rem 1.25rem 0 0 #eff1f4
同上（rem 指定版）。2 回
Level 2
0 4px 24px rgba(0,0,0,.25)
CSS 全体で唯一のぼかし影。2 回

カードにふわっとした影を付けない。 hacomono らしさは「ずらした単色の面」にある。

08 / Layout

radius / spacing / breakpoint

Radius Scale（rem 指定・CSS 出現順）
宣言px出現用途
0.5rem8px55 回カード・画像
0.375rem6px20 回ボタン・パネル
1.25rem20px19 回大きめのブロック
0.25rem4px17 回小さいボタン
50%—16 回アイコンの円
0.3125rem5px6 回バッジ
0.5rem 0.5rem 0 08px 上端のみ6 回画像付きカードの頭

ピル（9999px / 200px）は 1 つも無い。

Spacing（gap の実出現）
TokenValue出現
XS0.375rem（6px）15 回
S0.5rem（8px）23 回
M0.75rem（12px）32 回で最頻
L1.25rem（20px）21 回
XL1.5rem（24px）17 回
XXL2rem（32px）14 回
Container & Breakpoints
項目値備考
Container75rem（1200px）7 回。狭いブロックは 50rem（800px、6 回）、最大 90rem（1440px、2 回）
Mobilemax-width: 767px739 回。実質これ 1 本
Desktopmin-width: 768px10 回のみ