hacomono DESIGN.md

hacomono（https://www.hacomono.jp/）のデザイン仕様書。 フィットネスジム・スクール・公共施設向けの会員管理／予約／決済 SaaS のサービスサイト。 有彩色を 1 色も持たない完全モノクローム。template.css（390KB）に現れる色は #fff #1a1a1a #d2d2d2 #eff1f4 #767676 #f7f6f6 #e9ebee … とすべて無彩色で、青も緑も赤も 1 回も出てこない。色は写真とプロダクト UI のスクリーンショットだけが持つ 和文の font-family 宣言は CSS 全体でたった 1 つ。"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif ——Web フォントを使わず游ゴシック 1 本で組む 影はブラーを持たない。box-shadow: 20px 20px 0 0 #F7F6F6 のように面をずらして重ねるのが既定で、ぼかした影は全 CSS で 2 か所しかない CSS Custom Property は全部が罠。--color-base-primary: #012677（濃紺）も --border-radius-button: 200px（ピル）も --font-family-ja: YakuHanJP, "Noto Sans JP"… も、LeadGrid という埋め込み CMS のテーマ既定値であって hacomono 本体では 1 か所も使われていない（第 2 節末に詳述） 実サイトの computed style 実測（2026-08-27 取得。トップ ＋ 機能ページ /function/）＋ template.css の直接 grep に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白とグレーだけで階層を作る。ブランド色で誘導するのではなく、#1a1a1a のほぼ黒い塗りボタンと #eff1f4 の薄い面、そして余白の量だけで「どこを見るか」を決めさせる。SaaS のサービスサイトとしては珍しく、彩度が完全にゼロ
• hacomono について: 店舗・施設・スクールの入会・予約・決済・会員管理をオンラインで完結させる業務システム。導入対象がジム／スクール／公共施設と幅広いため、業種の色（フィットネス＝赤、スクール＝青、のような連想）を UI 側で持たない設計になっている
• 密度: 中。1200px（75rem）のコンテナに大きめの余白を取り、カードは 6px の角丸で細かく刻まない。本文は 14〜15px と小さめだが行間を 1.6〜1.7 取って詰まらせない
• キーワード: モノクローム、游ゴシック 1 本、6px の角丸、ブラーなしのオフセット影、letter-spacing: 0.04em の見出し、写真だけが色を持つ
• 特徴:
  • 有彩色ゼロ。template.css 中の色指定は #fff（100 回）#1a1a1a（90 回）#d2d2d2（39 回）#eff1f4（30 回）#767676（23 回）#f7f6f6（21 回）#e9ebee（11 回）#f2f2f2（8 回）#818181（6 回）#dadada #4f4f4f（各 4 回）#ebedef #d9d9d9（各 3 回）で、有彩色は 1 つも無い
  • 主 CTA と副 CTA を「濃さ」で分ける。「資料・デモを見る」は #1a1a1a、「お問い合わせ」は #767676。同じ形・同じ大きさで、明度差だけが優先度を表す
  • 影がブラーを持たない。box-shadow: 20px 20px 0 0 #F7F6F6 / 1.25rem 1.25rem 0 0 #EFF1F4 ——単色の面を右下 20px にずらして敷く「版ズレ」風の表現。ぼかした影（0px 4px 24px rgba(0,0,0,0.25)）は全 CSS で 2 回だけ
  • 和文は游ゴシックのみ。font-family 宣言は CSS 全体で 4 つしかなく（うち 2 つは monospace、1 つは inherit）、和文スタックは 1 本きり。ヒラギノも Noto Sans JP も指定していない
  • letter-spacing: 0.04em は見出し専用。CSS 上 17 回宣言されており、実測でも 40px 見出しが 1.6px、28px 見出しが 1.12px ＝いずれも 0.04em。本文は normal
  • font-feature-settings は全要素 normal。palt を使わない
  • ブレイクポイントが実質 1 本。@media screen and (max-width: 767px) が 739 回で、他は 10 回程度。768px を境に 2 レイアウトしか持たない

2. Color Palette & Roles

地は白ではなく淡いグレー。pageBackground.resolved はトップが rgb(233,235,238) ＝ #e9ebee（根拠 viewportTopBySample (4/6)）、機能ページが rgb(247,246,246) ＝ #f7f6f6（同 4/8）。白 #ffffff はページ地ではなくカードの面。

Brand（ブランド）

• hacomono Black (#1a1a1a, rgb 26,26,26): 主色。CSS 出現 90 回。主 CTA の面、本文と見出しの文字色、アウトラインボタンの罫。この 1 色がブランドカラーの役割を全部担う
• Secondary Gray (#767676, rgb 118,118,118): 副 CTA の面（「お問い合わせ」）。23 回。主 CTA と形は同一で、明度だけを落とす
• Text Gray (#4f4f4f, rgb 79,79,79): タグチップの文字。4 回
• Muted (#818181, rgb 129,129,129): 補助テキスト。6 回

Neutral（ニュートラル）

Surface（面色）

#e9ebee / #eff1f4 / #ebedef / #f2f2f2 / #f7f6f6 は近接した 5 つの灰で、区別を諦めて 1 色に丸めると版面の階層が崩れる。地 → パネル → カードの 3 段だけは必ず守る。

⚠️ CSS Custom Property は使ってはいけない

抽出された customProperties にはもっともらしいブランドトークンが並ぶが、hacomono 本体は 1 つも使っていない。すべて sdk.gig.goleadgrid.com から読み込まれる LeadGrid（CMS）のテーマ既定値で、HTML 中に leadgrid の文字列が 143 回出現する。

変数を見て実装すると、紺と黄のピル UI という別物のサイトができあがる。 必ず computed style（本ファイルの値）に従うこと。 yakuhanjp.min.css も CDN から読み込まれているが、template.css の和文スタックに YakuHanJP は含まれない ——約物半角は効いていない。

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック 1 本（"Yu Gothic" → "游ゴシック" → YuGothic → "游ゴシック体"）
• 明朝体: 使用しない
• Web フォントを読み込まないため、表示は OS 依存。macOS では游ゴシック、Windows では Yu Gothic（後述の Medium 問題に注意）

3.2 欧文フォント

• サンセリフ: 専用指定なし。游ゴシックに内蔵された欧文グリフをそのまま使う（sans-serif に落ちるのは游ゴシック非搭載環境のみ）
• 等幅: monospace, monospace（normalize 由来。UI では使用しない）

3.3 font-family 指定

css/* サイト全体（これ 1 つだけ。CSS 全体で和文スタックはこの宣言のみ） */
font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;

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

• 和文優先・欧文指定なし。数字やアルファベットも游ゴシックの欧文グリフで組む
• 4 つの別名（"Yu Gothic" / "游ゴシック" / YuGothic / "游ゴシック体"）を並べるのは、Windows と macOS で参照名が違うため。1 つに減らすと片方で当たらない
• Windows の游ゴシックは Regular が細すぎる。font-weight: 400 が Light にマッピングされる環境があるため、本文で薄く見える場合は @font-face で Medium を割り当てる（SmartHR の AdjustedYuGothic と同じ対処）

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

body の line-height: 1.15（18.4px / 16px）を本文にそのまま使わない。 これは normalize 相当の初期値で、実際の段落 <p> はすべて 14px/1.6 か 15px/1.7 に上書きされている。16px/1.15 のまま日本語を流すと行が団子になる。

3.5 行間・字間

• 本文の行間: 1.6〜1.7（14px → 22.4px、15px → 25.5px）
• 見出しの行間: 1.15〜1.6 と幅がある。同じ 36px の h2 に 1.6 / 1.5 / 1.15 の 3 種が併存しており、1 行に収まる短い見出しは詰め、2 行以上になるものは広げるという使い分け
• 本文の字間: normal
• 見出しの字間: 0.04em（CSS 上 17 回宣言。40px → 1.6px、28px → 1.12px で実測一致）。ただし全部の見出しに付くわけではなく、36px 系の h2 は normal

3.6 禁則処理・改行ルール

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

• 見出しは意図した位置で改行させる（<br> を入れる）運用。「店舗・施設・スクール。／理想の運営はこれひとつで」のように句点で 2 行に割るのがトップの型

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* 全要素。palt を使わない */

• palt を適用しない。中黒（・）と読点で区切る見出しが多く、詰めると語の切れ目が失われるため
• yakuhanjp.css は CDN から読み込まれているが、和文スタックに YakuHanJP が入っていないので効いていない。約物を半角にしたい場合は自分でスタック先頭に足す必要がある

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Primary（資料・デモを見る）

• Background: #1a1a1a
• Text: #ffffff
• Padding: 14px 12px 14px 24px（右だけ 12px。矢印アイコンを右端に置くため）
• Border Radius: 6px（0.375rem）
• Font Size: 14px / Weight: 700
• Shadow: none

Secondary（お問い合わせ）

• Background: #767676
• Text: #ffffff
• 他は Primary と完全に同一（padding・radius・サイズ・ウェイト）
• 形を変えず、面の明度だけで優先度を落とすのが hacomono の型

Outline（詳しく見る / 一覧を見る / hacomonoとは）

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #1a1a1a
• Border Radius: 6px
• Padding: 14px 12px 14px 24px ／ 14px 32px（アイコン無しの場合）
• Font Size: 14px / Weight: 700

Outline（もっと見る — 一覧の追加読み込み）

• Border Radius: 4px（0.25rem。他の 6px と違う）
• Padding: 16px 13px 16px 32px

Large CTA（フッター上の 2 枚組）

• Background: #1a1a1a（資料・デモダウンロード） / #767676（お問い合わせ）
• Padding: 34px 32px ／ Font Size: 16px / Weight: 400
• Border Radius: 6px

Chips / Tags

• Background: #dadada
• Text: #4f4f4f
• Border Radius: 2px（ピルにしない）
• Padding: 3px 11px 4px（上下非対称）
• Font Size: 12px / Weight: 700
• 表記は #パーソナルジム のように先頭にハッシュを付ける

Badge（オプション機能）

• Background: #767676 / Text: #ffffff
• Border Radius: 5px（0.3125rem）／ Padding: 6px ／ 13px / 700

Cards

• Background: #ffffff（記事カード） / #eff1f4（ナビカード）
• Border Radius: 6px。画像を含むカードの上端は 8px 8px 0 0（0.5rem 0.5rem 0 0、CSS 6 回）
• Padding: 36px 24px 24px 36px（ナビカード。左右非対称）
• Shadow: なし。必要なら §6 のオフセット面

Panels

• Background: #eff1f4
• Border Radius: 6px
• フッター全体も #eff1f4 の面

5. Layout Principles

Spacing Scale

rem ベース（1rem = 16px）。gap の実出現順：

Radius Scale

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

Container

• Max Width: 75rem（1200px）（7 回）。狭いブロックは 50rem（800px、6 回）、最大幅は 90rem（1440px、2 回）
• Padding (horizontal): 32px 前後

Grid

• カードは 2〜4 カラム。gap: 0.75rem〜1.5rem

6. Depth & Elevation

ブラー付きの影をほぼ使わない。 深さは「面を右下にずらして重ねる」ことで表す。

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

7. Do's and Don'ts

Do（推奨）

• 無彩色だけで組む。色が必要なら写真かプロダクト UI のスクリーンショットで持ち込む
• 主 CTA #1a1a1a / 副 CTA #767676 と、形を変えずに明度だけで優先度を落とす
• ボタンの radius は 6px。カードは 8px
• 本文は 14px/1.6 または 15px/1.7。body の 16px/1.15 を本文に使わない
• 見出しに字間を入れるときは 0.04em
• 地 #e9ebee or #f7f6f6 → パネル #eff1f4 → カード #ffffff の 3 段の面で階層を作る
• 影を使うなら 20px 20px 0 0 のブラー無しオフセット
• 和文スタックは 4 つの別名を全部書く（"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体"）

Don't（禁止）

• --color-base-primary: #012677 などの CSS 変数を使わない。LeadGrid CMS のテーマ既定値であって hacomono の色ではない
• --border-radius-button: 200px に従ってピルにしない。実装は 6px
• 有彩色のアクセントを足さない。青いリンク・緑の成功表示を入れた時点でトーンが崩れる
• ぼかした影を多用しない（CSS 全体で 2 回しかない）
• palt を有効にしない（font-feature-settings は全要素 normal）
• 日本語本文に line-height: 1.15 を使わない
• Noto Sans JP やヒラギノをスタックに足さない（游ゴシックの字面で設計されている）

8. Responsive Behavior

Breakpoints

補助的に 1439px / 1350px / 1320px / 1240px が各 2 回だけ現れる。

タッチターゲット

• ボタンは padding: 14px 上下 ＋ 14px 行高 ＝ 約 45px。44px の WCAG 基準を満たす

フォントサイズの調整

• 見出しは 768px 未満で 36px → 24〜28px 相当に縮む。本文（14〜15px）は据え置き

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #1a1a1a       （副 CTA は #767676）
Text Color:    #1a1a1a
Background:    #e9ebee（地） / #eff1f4（パネル） / #ffffff（カード）
Border:        #d2d2d2
Font:          "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif
Body Size:     14px（line-height 1.6） または 15px（1.7）
Heading:       36px / 700 / line-height 1.5、字間は 0.04em（付ける場合のみ）
Radius:        ボタン 6px / カード 8px（ピルは使わない）
Shadow:        なし。使うなら 20px 20px 0 0 #f7f6f6（ブラー 0）
palt:          off

プロンプト例

hacomono のデザインシステムに従って、料金プラン比較テーブルを作成してください。
- 有彩色は一切使わない（無彩色のみ）
- 推奨プランの CTA は #1a1a1a 塗り・白文字・radius 6px・14px/700、
  他プランの CTA は同じ形のまま面を #767676 に落とす
- テーブルのヘッダー行は #eff1f4、セルの地は #ffffff、罫は 1px solid #d2d2d2
- フォントは "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif
- 本文 14px / line-height 1.6、見出し 24px / 700 / line-height 1.5
- 影は付けない。強調したいカードだけ box-shadow: 20px 20px 0 0 #f7f6f6（ブラー 0）
- font-feature-settings は normal（palt を使わない）