Novasell DESIGN.md

Novasell（https://novasell.com/）のデザイン仕様書。 ラクスルグループの AI マーケティングエージェンシー。 Puppeteer による computed style 実測値（2026-04-06 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 大胆でエネルギッシュなエージェンシーデザイン。超巨大タイポグラフィとネオングリーンで強い印象を与える
• 密度: 極めてゆったり。1セクション=1メッセージの大胆な構成
• キーワード: 大胆、エネルギッシュ、ネオン、モノクロ+アクセント、テクノロジー感
• 特徴: 全テキスト font-weight: 700（bold）。Display 書体に最大 486px のサイズを使用。ネオングリーン #00fa27 がブランドカラー

2. Color Palette & Roles

Primary（CSS Custom Properties 実測値）

• Novasell Green (#00fa27 / --color--green): ブランドカラー。背景、テキスト、アクセントすべてに使用
• Black (#000 / --color--black): 背景、テキスト
• White (#fff / --color--white): テキスト、背景

Neutral

• Near Black (#101112 / rgb(16,17,18)): ヘッダーリンク、一部テキスト
• Dark Grey (#222426 / --dark-grey-for-button-text): ボタンテキスト
• Davys Grey (#7e8085 / --mono--dimgrey): プレースホルダー
• Silver (#cdcfd4 / --silver-for-disable): 無効状態、ボーダー
• White Grey (#f1f5f9 / --mono--white-grey): 背景
• Light Grey BG (#e9eef3 / --white-grey-for-bg): 背景
• Davys Grey BG (#525459 / --davys-grey-for-bg): ダーク背景

Semantic

• Error Red (#e4250e / --rederror-for-error-text-form): フォームエラー
• Green Link (#00aa14 / --novasell-green-for-button-text-link): テキストリンク（Green の暗いバリエーション）

3. Typography Rules

3.1 和文フォント

• Zen Kaku Gothic New: Google Fonts の角ゴシック体。本文・見出し・UI すべてに使用
• 特徴: 全テキストが font-weight: 700（bold）。通常ウェイト（400）はサイト上で確認されなかった

3.2 欧文フォント

3書体を用途で使い分け：

• gazzetta-variable: Variable Font。巨大な Display 見出し用（最大 486px）。weight 400〜700。Adobe Fonts でホストされており、novasell.com ドメインにライセンスされている。preview.html では Roboto ExtraBold (800) で代替
• neue-haas-grotesk-display: Neue Haas Grotesk（Helvetica の前身）。サンセリフ。中サイズの見出し・ラベル用。weight 500〜700。同じく Adobe Fonts。preview.html では Roboto で代替
• Zen Kaku Gothic New 内蔵の欧文グリフ: 本文中の英数字

3.3 font-family 指定

css/* 和文本文・UI */
font-family: "Zen Kaku Gothic New", sans-serif;

/* 巨大 Display（セクションタイトル・ヒーロー） */
font-family: gazzetta-variable, sans-serif;

/* 欧文ラベル・中見出し */
font-family: neue-haas-grotesk-display, sans-serif;

使い分け:

• 日本語テキスト → Zen Kaku Gothic New
• 英語の巨大セクション見出し（"CASE", "OUR SERVICES" 等）→ gazzetta-variable
• 英語の中サイズ見出し・ラベル（"CONTACT", "READY TO SAY" 等）→ neue-haas-grotesk-display

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

computed style 実測値。ビューポート幅 1440px 基準（--base-vw: 1440）

gazzetta-variable（巨大 Display）

neue-haas-grotesk-display（欧文中見出し）

Zen Kaku Gothic New（和文）

3.5 行間・字間

行間 (line-height) — 実測値:

• 巨大 Display: ×0.5〜×1.0 — 極めてタイト（文字が重なるレベル）
• 和文見出し: ×1.2 — タイト
• 和文本文: ×1.75〜×1.8 — ゆったり
• 欧文ラベル: ×1.0 — 1行分

字間 (letter-spacing) — 実測値:

• 巨大 Display: -7.8px〜-1.89px — 強い負のトラッキング
• 和文見出し: -0.24px〜-0.56px — 負のトラッキング
• 和文本文 20px: 1px（0.05em）— 唯一の正のトラッキング
• body デフォルト: normal

ガイドライン:

• 巨大サイズほど強く詰める（負の letter-spacing）
• 和文本文のみわずかに正の letter-spacing（1px）
• 全テキストが bold — weight 400 は gazzetta-variable のみ

3.6 禁則処理・改行ルール

• 特別な指定なし（ブラウザデフォルト）

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt は不使用

3.8 縦書き

• 該当なし

4. Component Stylings

Buttons

Primary（"資料請求"）

• Background: #000
• Text: #fff
• Border Radius: 16.5px
• Font Size: 12px
• Font Weight: 700
• Font: Zen Kaku Gothic New

Secondary（"お問い合わせ"）

• Background: #fff
• Text: #000
• Border Radius: 16.5px
• Font Size: 12px
• Font Weight: 700

Navigation

• Background: transparent（スクロールで変化する可能性あり）
• Height: ヘッダー固定
• Font: Zen Kaku Gothic New, 12px, weight 700
• Link Color: #000

5. Layout Principles

Content Width

• ビューポートベースのレイアウト（--base-vw: 1440）
• テキストサイズも vw 単位で可変する可能性あり

Spacing

• セクション間に大きな余白
• 1セクション=1メッセージの大胆な構成

6. Depth & Elevation

• CSS Custom Properties にシャドウ定義なし
• フラットデザイン
• 奥行きは色のコントラスト（黒背景 + ネオングリーン）で表現

Animation

• --ease-01: cubic-bezier(0.32, 0.48, 0, 1) — カスタムイージング

7. Do's and Don'ts

Do（推奨）

• 全テキストを font-weight: 700 にする（Novasell の最大の特徴）
• ネオングリーン #00fa27 を大胆に使う（背景・テキスト両方）
• Display 見出しは gazzetta-variable で超巨大に（100px 以上）
• 欧文ラベルは neue-haas-grotesk-display を使う
• 大きいサイズほど letter-spacing を負にする（詰める）
• 黒背景 + ネオングリーンの組み合わせを基本とする
• ボタンは小さめ（12px）の角丸ピル型

Don't（禁止）

• font-weight: 400 を和文テキストに使わない（サイト全体が bold）
• ネオングリーン #00fa27 を彩度の低いグリーンに変えない（ネオン感が失われる）
• 見出しを小さくしない（最低でも 40px 以上で大胆に）
• 3書体以外のフォントを混ぜない（gazzetta / neue-haas-grotesk / Zen Kaku Gothic New）
• 影やグラデーションを使わない（フラットに保つ）

8. Responsive Behavior

• ビューポート幅ベースのレスポンシブ（vw 単位の可能性）
• --base-vw: 1440 を基準としたスケーリング

9. Agent Prompt Guide

クイックリファレンス

Novasell Green: #00fa27
Black: #000
White: #fff
Error: #e4250e
Green Link: #00aa14

JP Font: "Zen Kaku Gothic New", sans-serif (all bold)
Display Font: gazzetta-variable, sans-serif
Label Font: neue-haas-grotesk-display, sans-serif

Body: 16px / weight: 700 / line-height: 1.75
JP Heading: 40px / weight: 700 / line-height: 1.2
Display EN: 100px+ / gazzetta-variable / weight: 400
All text: font-weight: 700 (except gazzetta display)
Letter Spacing: 大きいサイズほど負に詰める
palt: 不使用
Button: 12px / radius: 16.5px

プロンプト例

Novasell のデザインに従って、サービス紹介ページを作成してください。
- 和文フォント: "Zen Kaku Gothic New", sans-serif（すべて bold）
- 英語 Display: gazzetta-variable（100px 以上、セリフ系）
- 英語ラベル: neue-haas-grotesk-display（12px、weight 700）
- ブランドカラー: #00fa27（ネオングリーン）
- 背景: #000（黒）+ #00fa27（グリーン）の交互
- 全テキスト font-weight: 700
- 見出しは 40px 以上で大胆に
- 大きい見出しほど letter-spacing を負にする
- ボタン: 12px, radius 16.5px, 小さめのピル型
- 影やグラデーションは使わない