9h ナインアワーズ（nine hours） DESIGN.md

ナインアワーズ（https://ninehours.co.jp/）のデザイン仕様書。 「汗を洗い流す 1h ／ 眠る 7h ／ 身支度する 1h ＝ 9h」というコンセプトで 2009 年に開業したカプセルホテル。 サインは廣村正彰、プロダクトデザインは柴田文江、ロゴタイプは廣村デザイン事務所。Web も同じ設計思想で、白と黒とグレー 10 段だけで組まれている。 最大の特徴は YakuHanJP（約物半角）をフォントスタックの先頭に置いていること。和文の約物（、。「」（））だけを半角字形に差し替える専用 Web フォントで、フォント指定 1 行で日本語の約物アキを詰める手法。ホテル・美術館系の日本語サイトで最も効果が出る組版テクニックだが、実装しているサイトは多くない。 もうひとつの見どころは ボタンの border が塗りと同色の 2px で必ず入っていること。塗りボタンと枠線ボタンがまったく同じ寸法になるので、状態や文脈で入れ替えてもレイアウトが 1px も動かない。 実サイトの computed style 実測（2026-07-31 取得。トップ＋店舗一覧）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 無彩色だけで組み、色は「注意」にしか使わない。 面は黒（#000000）・白（#ffffff）・グレー 10 段のみ。彩度を持つのは --key（赤 #e93a28）と --yellow（#fdd22b）の 2 色だけで、どちらもセクションラベルと注意喚起にしか出てこない。画面の色は全部、客室とアメニティの写真が持つ
• 9h について: カプセルホテルなので、「泊まる」ではなく「1h + 7h + 1h」という時間の分解がブランドの核。サイトもその通りで、ヒーローは黒地に写真、その下は白地に情報が淡々と積まれる。ホテルサイトにありがちな「情緒的なコピー ＋ 大きな明朝」を一切やらない
• 密度: 中程度。max-width: 960px の 1 カラムに、写真ブロックと表組みが交互に積まれる。文字は小さくないが、行間が広い（本文 1.98）ので圧迫感がない
• キーワード: 無彩色、YakuHanJP（約物半角）、Noto Sans JP 700、9 段の等間隔グレー、radius 8px、影ゼロ
• 特徴:
  • YakuHanJP がフォントスタックの先頭。YakuHanJP, "Noto Sans JP", sans-serif の 1 行で、約物だけ半角・それ以外は Noto Sans JP という混植が成立する（YakuHanJP は約物のグリフしか持たないため、残りは自動的に次のフォントへ落ちる）。font-feature-settings: "palt" は使っていない。palt が「全字の詰め」なのに対し、YakuHanJP は「約物だけの詰め」——効かせる範囲が違う
  • 本文の font-weight が 700。body からして 700 で、Noto Sans JP の Bold が地の文になる。ゴシック体の太い字面を、広い行間（1.98）と字間（0.06em）で緩めるという組み方。400 が出てくるのは CSS 変数 --fontWeight の定義だけで、実際の描画にはほぼ登場しない
  • ボタンは必ず border: 2px solid を塗りと同色で持つ。黒ボタンは background: #000000 ＋ border: 2px solid #000000、白ボタンは #ffffff ＋ 2px solid #ffffff。枠線ボタン（塗り透明 ＋ 黒 2px）と外形が完全に一致するので、同じ場所で入れ替えてもガタつかない
  • 影が 1 つも存在しない。トップ・店舗一覧の全要素で box-shadow: none。奥行きは黒地／白地の面の切り替えだけで作る
  • --key（赤 #e93a28）はセクション見出しの文字色であって、ボタンの色ではない。CTA は黒。「ブランドカラー＝ CTA の色」と短絡しない
  • グレーは --gray1 〜 --gray9 が 25 → 220 の完全な等間隔 9 段（1 段あたり 24.375）。--gray10 だけがこの数列から外れた 233 で、入力欄の面色専用に足されている
  • 2 つの組版系が同居している。サイト本体は「700 ／ 字間 0.06em ／ 行間 1.98」、予約ウィジェットは「600 ／ 字間 normal ／ 行間 1.5」。新規に作るなら本体側（700 / 0.06em / 1.98）に寄せる

2. Color Palette & Roles

CSS Custom Properties は :root に 20 個。色は --main / --body / --link / --white / --key / --yellow ＋ グレー 10 段だけ。

Brand（ブランド）

• Main (#000000, --main): 面積で見た実質のブランド色。ヒーローの地、CTA の塗り、本文の色すべて
• Body (#000000, --body): 本文の文字色。--main と同値
• Link (#000000, --link): リンクの文字色。リンクを色で区別しない（下線と位置で示す）
• White (#ffffff, --white): コンテンツページの地、反転 CTA の塗り

注: --main / --body / --link が全部 #000000 の別名になっている。役割ごとにトークンを分けたうえで、いまは同じ値を入れてある状態。実装でもこの 3 つは分けて参照する（あとでリンクだけ色を持たせられる）。

Accent（差し色。2 色だけ）

• どちらも「面」ではなく「文字と小さな下地」でしか使わない。ボタンやカードを赤で塗らない

Gray Scale（9 段の等間隔 ＋ 1）

• --gray1 〜 --gray9 は 25 + 24.375 × (n−1) の等間隔。9 段が数学的にきれいに並ぶ（25 / 49 / 74 / 98 / 122 / 147 / 171 / 196 / 220）
• --gray10 = 233 だけがこの数列に乗らない。220 の次は 244 のはずなので、入力欄の面色として意図的に足された 1 段。検索フォームの背景がこれ
• グレーは文字と罫にしか使わない。カードの面はグレーではなく白のまま

Semantic（意味的な色）

専用のセマンティック色トークンは存在しない。

Overlay

• Scrim on photo (rgba(255, 255, 255, 0.3)): 写真の上に置くゴーストボタンの下地。写真の上では白を透かす（黒を敷かない）

3. Typography Rules

3.1 和文フォント

• 約物: YakuHanJP（約物半角）。、。，．：；！？「」『』（）〔〕［］｛｝〈〉《》 の約物グリフだけを持つ Web フォント。スタックの先頭に置くことで、約物が半角字形に、それ以外は次のフォントに落ちる
• ゴシック体: Noto Sans JP。約物以外のすべて（かな・漢字・欧文）
• 明朝体: 使用しない

YakuHanJP とは: 日本語の約物は全角ボックスの中で描かれるため、」。 のように連続すると 1 文字分以上のアキができる。YakuHanJP は約物だけを半角幅のグリフに差し替える Web フォントで、font-feature-settings: "palt" と違って「約物だけ」を対象にする。palt は欧文・数字を含む全字を詰めるので数字の並びが崩れることがあるが、YakuHanJP にはその副作用がない。CDN（jsDelivr 等）または npm の yakuhanjp から読み込む。

3.2 欧文フォント

• サンセリフ: Noto Sans JP の内蔵欧文グリフをそのまま使う。欧文専用フォントを併用しない
• 等幅: 定義なし

3.3 font-family 指定

css/* 全域（--fontFamily） */
font-family: YakuHanJP, "Noto Sans JP", sans-serif;

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

• 約物 → 和文 → generic の 3 段だけ。游ゴシック・ヒラギノへのフォールバックは持たない（Noto Sans JP を Web フォントとして必ず読み込む前提）
• YakuHanJP を必ず先頭に置く。2 番目以降に置くと約物が Noto Sans JP の全角字形で描かれてしまい、効果が消える
• 欧文は Noto Sans JP に任せる。Helvetica 系を先頭に置くと約物より欧文の優先度が上がり、YakuHanJP の意図と競合する

css/* YakuHanJP の読み込み例（約物のみのサブセット） */
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.min.css");

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

letter-spacing は px 直書きで、見出し 0.08em ／ 本文 0.06em の 2 系統（下の「実測 em 換算」列を参照）。

• letter-spacing は 0.96px が既定として継承される。16px の本文では 0.06em だが、継承されたまま 11px まで落ちると 0.087em に膨らむ。小さい文字ほど相対的に字間が広がるので、キャプションが「ゆったり見える」のはこの副作用
• 見出しだけは px を上書きして 0.08em に揃えている（34px→2.72 / 30px→2.4 / 26px→2.08）。見出しは em 一定、本文以下は px 一定という二重構造
• ウェイトは 700 と 600 の 2 段のみ。400 は --fontWeight に定義されているが実描画にはほぼ出ない。和文の地の文が 700 というのがこのサイトの最大の癖

3.5 行間・字間

• 本文の行間: 1.98（16px → 31.68px）。日本語サイトの中でも広い部類
• 反転面・キャプションの行間: 2.0（14px → 28px、11px → 22px）
• 見出しの行間: 1.4 〜 1.6（26px → 1.4 / 30px・34px → 1.6）
• 本文の字間: 0.06em（0.96px）
• 見出しの字間: 0.08em

ガイドライン:

• 行間は「見出し 1.4–1.6／本文 1.9–2.0」の 2 極に振る。中間の 1.7 前後をあまり使わない
• 本文が 700 と太いぶん、行間と字間で緩めるという設計。ウェイトだけ 400 に落とすと字間・行間が過剰に見えるので、3 つはセットで変える

3.6 禁則処理・改行ルール

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

• 約物のアキは YakuHanJP が処理するので、font-feature-settings での追い込みは不要
• 見出しは手で改行位置を決めている（「1h + 7h + 1h」のような要素を行またぎさせない）

3.7 OpenType 機能

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

• palt は使っていない。約物の詰めは YakuHanJP（フォント差し替え）で解決している
• palt と YakuHanJP を併用しない。両方効かせると約物が二重に詰まって食い込む
• kern も明示していない

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

すべてのボタンが border-radius: 8px と border: 2px solid を持つ。 塗りボタンの border は塗りと同色。これにより塗り／枠線を入れ替えても外形が変わらない。

Primary（黒・大）

• Background: #000000
• Text: #ffffff
• Border: 2px solid #000000
• Border Radius: 8px
• Padding: 13px 20px
• Font: 16px / 700

Primary（黒・小）

• Background: #060606
• Text: #f9f9f9
• Border: 2px solid #060606
• Border Radius: 8px
• Padding: 5px 10px
• Font: 14px / 600

注: 小サイズだけ #060606 / #f9f9f9 という純黒・純白から 6 だけずらした値を使う。小さい面積で純黒が沈みすぎるのを避けるための微調整と見られる。大サイズは #000000 / #ffffff。

Secondary（枠線）

• Background: transparent
• Text: #060606
• Border: 2px solid #060606
• Border Radius: 8px
• Padding: 5px 10px（小）／ 13px 20px（大）
• Font: 14px / 600（小）／ 16px / 700（大）

Inverse（黒地の上の白ボタン）

• Background: #ffffff
• Text: #000000
• Border: 2px solid #ffffff
• Border Radius: 8px
• Padding: 13px 20px
• Font: 16px / 600

Ghost（写真の上）

• Background: rgba(255, 255, 255, 0.3)
• Text: #ffffff
• Border: なし
• Border Radius: 8px
• Padding: 13px 20px
• Font: 12px / 600

Tags / Labels

• Background: transparent
• Text: #000000
• Border: 2px solid #000000
• Border Radius: 0px ← ボタンと違い角丸を持たない
• Padding: 0.5px 5px
• Font: 11px / 700 / letter-spacing: 0.96px

タグだけ radius 0。「押せるもの＝ 8px の角丸」「状態を示す札＝直角」という形の役割分担になっている。

Inputs

検索フォーム（グレー地・角丸なし）

• Background: #e9e9e9（--gray10）
• Border: なし
• Border Radius: 0px
• Padding: 5px 27px
• Font: 14px / 600

予約フォーム（白地・角丸 8px）

• Background: #ffffff
• Border Radius: 8px
• Padding: 4px 20px
• Font: 16px / 600（iOS の自動ズーム回避）

Select

• Background: #ffffff
• Border Radius: 8px
• Padding: 9px 35px 9px 13px（右の 35px は矢印アイコン分）
• Font: 16px / 600

Label / Placeholder

• Label: 16px / 700 / #000000
• Placeholder: 16px / 700 / #ababab（--gray7）

Cards

• Background: #ffffff
• Border: なし、または 1px solid #dcdcdc（--gray9）
• Border Radius: 8px
• Shadow: なし（下記 Elevation 参照）

5. Layout Principles

Container

• Max Width: 960px — サイト全体の基準幅。CSS 中 143 箇所で max-width: 960px が指定される
• サブ幅: 823px（読み物）／ 1200px（ワイドな写真ブロック）／ 1037px（ヘッダー）
• Padding (horizontal): デスクトップ 0（960px のまま）／ モバイルは 16px〜20px

Spacing

--dimension-* のような寸法トークンは存在しない。実測値から読み取れる刻みは次のとおり。

• 4px グリッドではない。5 / 10 / 13 / 20 という5 と 10 を基準にした刻み

Grid

• 1 カラム（960px）が基本。店舗一覧・アメニティは 2〜3 カラム
• 写真ブロックだけ 960px を超えて 1200px まで広がる

6. Depth & Elevation

影は 1 つも使われていない。 トップ・店舗一覧の全要素で box-shadow: none。

• 奥行きは「黒地 ↔ 白地」の面の切り替えだけで作る。ヒーローと反転セクションが #000000、それ以外が #ffffff
• カードを浮かせたい場合も、影ではなく 1px solid #dcdcdc（--gray9）の罫で分ける

Motion

• ほぼ全部が 0.4s。速度差でヒエラルキーを作らない
• ヒーローの写真だけ 2s でゆっくり出す

7. Do's and Don'ts

Do（推奨）

• YakuHanJP を font-family の先頭に置く（YakuHanJP, "Noto Sans JP", sans-serif）
• 和文の地の文を font-weight: 700 にする。そのうえで行間 1.98・字間 0.06em で緩める（3 点セット）
• ボタンには塗りと同色の border: 2px solid を必ず入れる（塗り／枠線を入れ替えても寸法が変わらない）
• 角丸は 8px（押せるもの）／ 0px（札・検索欄） の 2 択に寄せる
• グレーは --gray1 〜 --gray10 から選ぶ。中間値を新規に作らない
• リンクを色で区別しない（--link は #000000）。下線と配置で示す
• 見出しの字間は 0.08em、本文以下は 0.96px 固定
• トランジションは 0.4s / cubic-bezier(.33, 1, .68, 1) に統一する

Don't（禁止）

• font-feature-settings: "palt" を併用しない。YakuHanJP と二重にかかって約物が食い込む
• --key #e93a28 でボタンを塗らない。赤はセクション見出しの文字色。CTA は黒
• 影を付けない（box-shadow は 1 箇所も使われていない）。階層は黒地／白地で作る
• 本文の line-height を 1.5 に下げない（700 の地の文が詰まって読めなくなる）
• タグ・ラベルに角丸を付けない（radius 0 が「押せない札」の目印）
• グレーをカードの面色に使わない（面は白のまま、罫で分ける）
• 予約ウィジェット側の組版（600 / 字間 normal / 行間 1.5）を新規ページの基準にしない
• 欧文専用フォント（Helvetica 等）をスタックの先頭に足さない

8. Responsive Behavior

Breakpoints

デスクトップファースト（max-width）。max-width: 960px が実質唯一の分岐点で、CSS の 143 箇所で使われる。

• 961px という半端な値は 960px の 1px 上。max-width: 960px と min-width: 961px で穴なく分ける書き方
• ヘッダーだけ 1037px で先に畳む。コンテンツ（960px）より先にナビが窮屈になるため

タッチターゲット

• 大ボタン: 24px（行）+ 13px × 2 + 2px × 2（border）= 54px → 44px 基準を満たす
• 小ボタン: 21px + 5px × 2 + 2px × 2 = 35px → 基準未満。主要 CTA には小サイズを使わない

フォントサイズの調整

• 本文 16px はブレークポイントで変えない
• ヒーロー見出しは 34px → モバイルで 26px 前後へ。字間は 0.08em のまま維持する（px 直書きなので、サイズを変えたら px も再計算する）

9. Agent Prompt Guide

クイックリファレンス

Main / Body / Link:  #000000（--main / --body / --link。3 つとも同値）
Background:          #ffffff（コンテンツ） / #000000（ヒーロー・反転）
Key (accent):        #e93a28（--key。セクション見出しの文字色。塗りに使わない）
Yellow:              #fdd22b（--yellow。注意喚起）
Gray:                #191919 #313131 #4a4a4a #626262 #7a7a7a
                     #939393 #ababab #c4c4c4 #dcdcdc #e9e9e9（--gray1〜10）
Input Surface:       #e9e9e9（--gray10）
Placeholder:         #ababab（--gray7）
Font:                YakuHanJP, "Noto Sans JP", sans-serif
Body Size:           16px / weight 700
Line Height:         1.98（本文） / 1.4〜1.6（見出し） / 2.0（反転・注記）
Letter Spacing:      0.96px（本文以下・固定） / 0.08em（見出し）
Font Feature:        なし（palt は使わない。約物は YakuHanJP が処理）
Radius:              8px（ボタン・入力欄・カード） / 0px（タグ・検索欄）
Border:              2px solid（ボタンは塗りと同色で必ず入れる）
Shadow:              none（1 箇所も使わない）
Container:           960px
Breakpoint:          max-width 960px（主分岐）
Motion:              .4s cubic-bezier(.33, 1, .68, 1)

プロンプト例

9h ナインアワーズのデザインシステムに従って、客室タイプの比較セクションを作成してください。
- font-family: YakuHanJP, "Noto Sans JP", sans-serif（YakuHanJP を必ず先頭に）
- font-feature-settings は使わない（palt を併用しない）
- コンテナ: max-width 960px
- セクション見出し: 18px / 700 / line-height 32.4px / color #e93a28
- 大見出し: 30px / 700 / line-height 48px / letter-spacing 2.4px（0.08em）
- 本文: 16px / 700 / line-height 31.68px / letter-spacing 0.96px
- カード: 背景 #ffffff / radius 8px / 影なし / 罫は 1px solid #dcdcdc
- CTA: 背景 #000000 / 文字 #ffffff / border 2px solid #000000 / radius 8px /
       padding 13px 20px / 16px / 700
- 副 CTA: 背景 transparent / 文字 #060606 / border 2px solid #060606（外形は CTA と同一）
- 「満室」等のタグ: 背景 transparent / border 2px solid #000000 / radius 0 / 11px / 700
- 影は一切使わない。階層は白地と黒地の切り替えで作る
- ブレークポイントは max-width: 960px の 1 本