カミナシ（KAMINASHI） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-08-01 / 対象: https://kaminashi.jp/, /case/

1. Visual Theme & Atmosphere

ノンデスクワーカー向けの現場DXプラットフォーム。工場・食品製造・物流の現場が読者なので、 遠くからでも読める強さが全体の設計思想になっている。原色に近い青（#0360e5）を ヒーローに大きく敷き、CTAは黄色（#ffdb22）の巨大なピル。見出しは Noto Sans JP の Black（900） で、日本語Webでは最も重いウェイト帯を常用する。

• デザイン方針: 高コントラスト・大きい文字・迷わせない。B2B SaaS の縦長LPの定型を、 ウェイトと彩度で最大限に押し切る
• 密度: 中〜高。1セクション1メッセージだが、セクション数が多い縦長構成
• キーワード: コバルトブルー、イエローCTA、Black 900、ピル、現場

このSaaS LPの特徴的な癖（他サイトと違う点）

1. 見出しの標準ウェイトが 900。700 は「やや軽い」扱いで、強調は 900 が既定
2. line-height が全域 1.4。日本語本文の推奨（1.7〜2.0）よりかなり詰まっている
3. ヒーローの巨大文字だけ letter-spacing が負（-0.04em〜-0.05em）。 しかもかな・漢字で値を変えている（漢字は 0、かなは負）
4. CTAの黄色に 2 つの近似値が混在（#ffdb22 / #ffdf24）。トークン整理が追いついていない
5. STUDIO（ノーコード）製。CSS変数は --s-color-<hash> 形式で意味が読めない

2. Color Palette & Roles

Brand（ブランド）

• Kaminashi Blue (#0360e5): ブランドの主色。ヒーローの地、見出しの強調、 チップの枠と文字、FAQ の開閉ボタン。面としても文字としても使う唯一の色
• Blue Deep (#0046a9 / #004fbf): グラデーションの終端。単色では使わない
• Cyan (#00afea): 補助のアクセント。図版やアイコンに少量

css/* ヒーロー／CTA帯のグラデーション（実測） */
background: linear-gradient(#0360e5 0%, #0046a9 100%);
background: linear-gradient(169deg, #0060e5 0%, #004fbf 100%);

CTA（行動喚起）

• Kaminashi Yellow (#ffdb22): 主要CTAの面色。ヘッダーの「資料ダウンロード」、 ヒーローの巨大ボタン
• Yellow Alt (#ffdf24): 同用途で併存する近似値（CSS変数 --s-color-77804c76）
• CTA Text (#333333): 黄色の上に載る文字。白ではなく濃いグレー。 黄色地に白文字はコントラストが取れないため

Surface（面）

• Background (#ffffff): ページ地色
• Surface Blue Pale (#e8f2ff): 業種リスト等の淡い青面。最頻出のセクション背景
• Surface Blue Pale 2 (#ebf4ff): 課題リストの面。上とほぼ同値で併存
• Surface Gray (#f5f5f5): FAQ・導入フローの面
• Surface Gray 2 (#eeeff0): 区切りの面
• Surface Beige (#f6f2ed): 一部セクションの温かい面
• Border (#d9d9d9): 罫・枠

Service Accent（サービス別の識別色）

4つのプロダクトを見出しの文字色だけで区別する。面は塗らない。

Neutral（ニュートラル）

• Text Primary (#333333): 本文・ナビ。純黒 #000000 は見出しの一部にのみ使う
• Text Heading (#000000): セクション見出し
• Text Muted (#888787): 補助ラベル（「現場DXプラットフォーム」等）
• Text on Blue (#ffffff): 青地の上の文字
• Danger (#e5412b): 警告・注意

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（唯一の和文書体）
• 明朝体: 使用しない

ウェイトは 500 / 700 / 900 の3段を使う。900（Black）が見出しの既定。

3.2 欧文フォント

• Lato: フッターのカテゴリ名など、欧文まじりの小さいラベル
• Poppins: CSS変数に定義（--s-font-05aeaf10）。数字・見出しの一部
• Material Symbols Outlined / Material Symbols Rounded / Material Icons: アイコンフォント。file_download mail chevron_right play_arrow 等をリガチャで表示

3.3 font-family 指定

css/* 本文・見出し（和文） */
font-family: "Noto Sans JP";

/* 欧文ラベル */
font-family: Lato;
font-family: Poppins;

/* アイコン */
font-family: "Material Symbols Outlined";
font-feature-settings: "liga";

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

• sans-serif すらチェーンに書いていない箇所が多い（STUDIO の出力）。 実装するときは "Noto Sans JP", sans-serif と generic family を必ず足すこと
• ページ骨格（body / レイアウト用 div）は sans-serif のまま。 文字を持つ要素にだけ Noto Sans JP が当たる構造

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

3.5 行間・字間

• line-height は全域 1.4。日本語本文の一般的推奨（1.7〜2.0）よりかなり詰まっている。 1文が短くセンタリングされた見出しが主体のLPなので成立しているが、 長い本文をこの行間で組むと読みにくくなる。段落主体の画面では 1.7 以上に緩めること

• letter-spacing は 0.08em が基準。16px 換算で 1.28px。見出しから小ラベルまで一貫

• ヒーローの巨大文字だけ負のトラッキング。しかも文字種で値を変えている:

  • 漢字（「現場」72px / 「DX」89px）… 0 〜 0.01em
  • かな（「なら」44px / 「まるっと」46px / 「カミナシ」70px）… -0.05em / -0.05em / -0.04em

  かなは字面が小さいため、ベタ組みだと漢字より間延びして見える。それを負の字送りで 詰めて、漢字とかなの見た目の密度を揃えている。大きい見出しほどこの補正が要る

css/* 基準 */
body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #333;
}

/* セクション見出し */
.section-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* ヒーロー — かなだけ詰める */
.hero-kanji { font-size: 72px; font-weight: 700; letter-spacing: 0; }
.hero-kana  { font-size: 70px; font-weight: 700; letter-spacing: -0.04em; }

3.6 禁則処理・改行ルール

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

• ヒーローのコピーは改行位置を人手で決めている（「現場DXなら／まるっと／カミナシで」）。 自動折り返しに任せず、<br> かブロック分割で意図した位置に折る
• 「現場DXプラットフォーム「カミナシ」」のように鉤括弧が語中に入る表記が頻出。 行頭に 」 が来ないよう禁則を効かせる

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使わない */

• palt は無効（アイコンフォントの "liga" を除き実測 normal）
• 字詰めは palt ではなく letter-spacing（正負両方向）で制御する

3.8 縦書き

該当なし。全ページ横組み。

4. Component Stylings

Buttons

Primary CTA（資料ダウンロード）— 黄色のピル

• Background: #ffdb22
• Text: #333333（白文字にしない。黄色地とのコントラストが取れない）
• Border Radius: 60px（ヒーロー等の大型）/ 32px（ヘッダー内）
• Padding: 0 16px ＋ 高さで調整（大型は 72px 前後、ヘッダーは 48px 前後）
• 右端に Material Symbols の file_download アイコンを添える
• Shadow: 0 6px 15px rgba(0,0,0,.2)（大型CTAのみ。押せる感じを出す）

Secondary（お問い合わせ）— 白のピル

• Background: #ffffff
• Text: #333333
• Border: 1px solid #d9d9d9（青地の上では枠なし）
• Border Radius: 32px
• 右端に mail アイコン

Blue CTA（帯の中）

• Background: linear-gradient(#0360e5 0%, #004fbf 100%)
• Text: #ffffff / Border Radius: 100px
• Padding: 16px 16px 16px 24px

FAQ Toggle

• Background: #0360e5 / Border Radius: 32px / Padding: 16px 32px
• 右端に keyboard_arrow_down

Chips / Tags

機能タグ（枠線のピル）

• Background: #ffffff / Text: #0360e5
• Border: 1px solid #0360e5
• Border Radius: 24px / Padding: 4px 16px
• Font: 14px / Weight 900 / letter-spacing: 0.08em

業種リンク（面のみ）

• Background: #e8f2ff / Text: #333333 / Border Radius: 0px / Padding: 5px 0

Cards

• Background: #ffffff
• Border Radius: 8px（標準）/ 32px（大きい訴求カード）
• Shadow: 0 0 24px rgba(0,0,0,.08)
• Padding: 24–40px

Section Shape（このLP固有の造形）

セクションの下端だけを大きく丸める形を多用する。

cssborder-radius: 0 0 32px 32px;

左右どちらかだけを丸める変種もある（32px 0 0 32px / 0 32px 32px 0）。

5. Layout Principles

Container

• Max Width: 1200px 前後（セクションごとに calc() で可変）
• Padding (horizontal): 20px（モバイル）/ 40px（デスクトップ）

Spacing Scale

Grid

• 業種リスト: 4カラム（calc(25% - 15px)）
• 導入事例: 2カラム（calc(46% - 28.62px)）
• 課題カード: 3カラム

Border Radius Scale

6. Depth & Elevation

影の使い分けが明確: カードは方向を持たない広い影、ボタンは下方向の濃い影。

7. Do's and Don'ts

Do（推奨）

• 見出しは Noto Sans JP の 900（Black） を既定にする
• letter-spacing は 0.08em を全体に効かせる
• 巨大な見出しのかなだけ -0.04em 程度に詰める（漢字は 0 のまま）
• 主要CTAは黄色 #ffdb22 のピル、文字は #333333
• 青 #0360e5 は面にも文字にも使ってよい唯一の色
• 淡い青面（#e8f2ff）でセクションを区切る
• CTAには下方向の影（0 6px 15px rgba(0,0,0,.2)）を付ける
• ヒーローのコピーは改行位置を明示的に指定する

Don't（禁止）

• 黄色いCTAに白文字を載せない（コントラスト不足）
• font-feature-settings: "palt" 1 を足さない
• 長い本文を line-height: 1.4 で組まない。段落主体の画面では 1.7 以上に緩める
• サービス識別色（#3b5bdb 等）を面色に使わない。見出しの文字色専用
• 角丸を中途半端な値にしない。8 / 24 / 32 / 60 / 100 / 50% のスケールに乗せる
• 見出しウェイトを 400 にしない（このブランドの声は 700〜900）

8. Responsive Behavior

Breakpoints

モバイルでの変化

• ヒーロー 72–89px → 36–44px 前後。負のトラッキングは維持する
• セクション見出し 48px → 28px 前後
• CTAは横幅いっぱいのピル（border-radius: 60px のまま）
• 業種リスト 4カラム → 2カラム

タッチターゲット

• 最小 44px × 44px。主要CTAは高さ 64px 以上取る

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff
Brand Blue:      #0360e5
CTA Yellow:      #ffdb22（文字は #333333）
Surface Pale:    #e8f2ff
Text Primary:    #333333
Text Heading:    #000000
Text Muted:      #888787
Font:            "Noto Sans JP", sans-serif
Heading Weight:  900（既定）/ 700
Body Size:       14–16px
Line Height:     1.4
Letter Spacing:  0.08em（巨大見出しのかなのみ -0.04em）
Radius:          8 / 24 / 32 / 60 / 100 / 50%
palt:            off

プロンプト例

カミナシのデザインシステムに従って、SaaS のサービス紹介LPを作成してください。
- 背景 #ffffff、本文 #333333、見出し #000000
- フォント: "Noto Sans JP", sans-serif
- 見出しの既定ウェイトは 900（Black）。ナビは 700
- line-height は 1.4、letter-spacing は 0.08em を全体に
- ヒーローは背景 linear-gradient(#0360e5 0%, #0046a9 100%) に白文字
  コピーは 70px 前後で、かなの部分だけ letter-spacing: -0.04em で詰める
  （漢字部分は letter-spacing: 0 のまま）
- 主要CTA: 背景 #ffdb22 / 文字 #333333 / border-radius 60px /
  box-shadow 0 6px 15px rgba(0,0,0,.2)。白文字にしない
- セカンダリ: 背景 #ffffff / 文字 #333333 / border-radius 32px
- 機能タグ: 背景 #ffffff / 文字と枠 #0360e5 / 1px / radius 24px /
  14px / weight 900
- セクションの区切りは背景 #e8f2ff の淡い青面で
- カードは radius 8px、box-shadow 0 0 24px rgba(0,0,0,.08)
- セクションの下端だけ border-radius: 0 0 32px 32px で丸める
- コンテナ幅 1200px