WHILL DESIGN.md

WHILL（https://whill.inc/）のデザイン仕様書。 パーソナルモビリティ（次世代型電動車いす）メーカー。法人・個人向けに移動ソリューションを展開。 実サイトの computed style 実測（2026-05-29 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白を基調にした清潔感のあるプロダクトサイト。WHILL Blue #0075b8 のピル CTA が行動を促し、製品写真と余白で「自由な移動」の開放感を伝える
• 密度: 本文の line-height は 1.4〜1.5、letter-spacing は 0.016em〜0.02em と適度。見出しはタイト（line-height 1.0〜1.1）で製品名を力強く打ち出す。ゆとりのある余白設計
• キーワード: クリーン、プロダクトフォーカス、モダンヘルスケア、開放感、ユニバーサル
• 特徴:
  • 単色ブランド: メインカラーは #0075b8（WHILL Blue）のみ。CTA・リンク・セカンダリ枠すべてこの1色で統一
  • Noto Sans JP ベース: Tailwind CSS（Next.js）の font-family 定義で "Noto Sans JP" を先頭に、ヒラギノ・メイリオをフォールバック
  • ピル CTA: radius 900px の完全ピル形状がすべての CTA に適用される
  • テキスト色は温かみのあるニアブラック: 本文に #353537（純黒ではない）を使い、ヘルスケア分野に適したやさしい印象
  • カードは微細なマルチレイヤーシャドウ: rgba(162,164,169) 系の3段シャドウで、穏やかな浮きを表現
  • ダークモード非対応（実測時点）
  • word-break: keep-all を採用。日本語テキストが単語の途中で折り返さない

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• WHILL Blue (#0075b8): メインのブランドカラー。主要 CTA "試乗体験する"・"お問い合わせ" の背景、セカンダリ CTA の文字色・ボーダー色

CTA / Buttons

• Primary CTA: 背景 #0075b8 / 文字 #ffffff / radius 900px（pill）/ border 1px solid #0075b8 / padding 14px 32px / 16〜18px / weight 700
• Primary CTA (Hero): 背景 #0075b8 / 文字 #ffffff / radius 40px / border 1px solid #0075b8 / padding 0px 32px / 18px / weight 700
• Secondary CTA: 背景 #ffffff / 文字 #0075b8 / border 1px solid #0075b8 / radius 900px（pill）/ padding 0px 16px / 16px / weight 700

Neutral

Semantic（実測未確認・推奨値）

実サイトには明確なエラー／成功色は表面化していない。ヘルスケア SaaS 向けに推奨する補完値:

• Danger: #dc2626 程度のレッド
• Success: #16a34a 程度のグリーン
• Warning: #d97706 程度のオレンジ

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を最優先。Google Fonts 配信
• フォールバック: "Hiragino Kaku Gothic ProN" → Meiryo → sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• 専用の欧文書体は持たず、Noto Sans JP の欧文グリフ と Tailwind のシステムフォントスタック（ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial）をフォールバック
• セリフ・等幅は使用しない

3.3 font-family 指定

css/* 見出し・プロダクト名 */
font-family: "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";

/* body（Tailwind デフォルト + Noto Sans JP） */
font-family: ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif;

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

• 見出し・製品名は Noto Sans JP を最優先し、日本語の字面を安定させる
• body はTailwindのデフォルトスタックが先に来るが、日本語グリフは Noto Sans JP から供給される
• Google Fonts 配信のため、環境依存が少ない

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

実測値（トップ／製品ページ、2026-05-29 取得）

3.5 行間・字間

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

• 本文 (20px): 1.4（28px / 20px）
• ベース (16px): 1.5（24px / 16px）
• 注釈 (13px): 1.4（18.2px / 13px）
• ヒーロー見出し (48px): 1.1（52.8px / 48px）--- タイト
• モデル名 (48px): 1.0（48px / 48px）--- 最タイト
• ラベル・サブタイトル (20px): 1.0〜1.3

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

• 全テキスト共通: 正のトラッキング 0.02em が基本（0.016em〜0.02em）
• 見出しも本文も同じ正のトラッキングで統一されている（STORES のような見出しの負トラッキングはない）

ガイドライン:

• WHILL は 全テキストに一貫して +0.02em のトラッキング を適用。見出しと本文の差は line-height と weight で表現する
• 本文 line-height は 1.4〜1.5。ゆったりすぎず、ヘルスケア製品の信頼感と読みやすさのバランスを取る

3.6 禁則処理・改行ルール

css/* 実サイト準拠 */
word-break: keep-all;          /* 単語の途中で折り返さない */
overflow-wrap: break-word;     /* 長い英単語の折り返し */

• keep-all により日本語テキストが助詞の途中等で改行されない（読みやすさ重視）
• ヒーロー見出しは <br> で改行位置を手動指定

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• Noto Sans JP のデフォルトメトリクスに任せ、letter-spacing で見た目を調整する方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（ブルーピル） --- "試乗体験する"・"お問い合わせ"

• Background: #0075b8
• Text: #ffffff
• Padding: 14px 32px
• Border: 1px solid #0075b8
• Border Radius: 900px（完全ピル）
• Font: Noto Sans JP, 16〜18px, weight 700
• Hover: opacity 0.85（推奨）

Primary CTA（ヒーロー版）

• Background: #0075b8
• Text: #ffffff
• Padding: 0px 32px（高さは line-height で確保）
• Border: 1px solid #0075b8
• Border Radius: 40px
• Font: Noto Sans JP, 18px, weight 700

Secondary CTA（白ピル＋ブルー文字） --- "詳しく見る"

• Background: #ffffff
• Text: #0075b8
• Border: 1px solid #0075b8
• Padding: 0px 16px
• Border Radius: 900px（完全ピル）
• Font: Noto Sans JP, 16px, weight 700

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #b7c2cd
• Border (focus): 1px solid #0075b8
• Border Radius: 8px
• Padding: 12px 16px
• Font: Noto Sans JP, 16px, weight 400
• Height: 48px

Cards / Surfaces

• Background: #ffffff
• Border: なし
• Border Radius: 4px
• Shadow: rgba(162,164,169,0.05) 0px 10px 23px, rgba(162,164,169,0.04) 0px 41px 41px, rgba(162,164,169,0.03) 0px 93px 56px（3層の微細シャドウ）
• Padding: 24px

Header

• Background: #ffffff（白）
• Border Bottom: なし
• Position: fixed top: 0
• Logo + ナビリンク + CTA の水平レイアウト

Footer

• Background: #252525（ニアブラック）
• Text: #ffffff
• Padding: 48px 24px

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1280px（Tailwind xl breakpoint）
• Padding (horizontal): mobile 16px / desktop 32px

Border Radius Scale

Grid

• Flexbox ベースのレイアウト（Tailwind CSS）
• 製品カードは 2〜3 列構成
• Gutter: 24px

6. Depth & Elevation

• 実測ではカードに3段のマルチレイヤーシャドウが適用されている
• rgba(162,164,169,...) 系の青みのあるグレーで、WHILL Blue と親和性のある穏やかな影

7. Do's and Don'ts

Do（推奨）

• 和文フォントは Noto Sans JP を最優先、フォールバックは Hiragino Kaku Gothic ProN → Meiryo → sans-serif
• 本文の line-height は 1.4〜1.5 を基本にする
• letter-spacing は 全テキスト共通で +0.02em を適用する
• 主要 CTA は #0075b8 のブルーピル（radius 900px）、セカンダリは 白＋ブルー文字＋ブルーボーダー のピル
• テキスト色は #353537（ウォームニアブラック）を使い、純黒 #000000 を避ける
• カードには 3層マルチレイヤーシャドウ を使い、穏やかな浮き上がりを表現する
• word-break: keep-all で日本語の折り返しを自然にする

Don't（禁止）

• 主要 CTA に 黒や赤を使わない --- WHILL の CTA は常に #0075b8 のブルー
• テキストに 純黒 #000000 を使わない（#353537 を使う）
• 角張った直角ボタン（border-radius 0）や 小角丸（4〜8px）の CTA を使わない --- ピル 900px が基本
• 本文に line-height: 1.2 以下 を使わない（可読性が著しく低下する）
• 見出しに 負の letter-spacing を使わない（WHILL は見出しも正のトラッキング）
• 派手な装飾色やグラデーションを使わない（単色ブランドの統一感を壊す）
• word-break: break-all を使わない（keep-all が基本方針）

8. Responsive Behavior

Breakpoints（Tailwind 互換）

モバイル時の調整

• ヒーロー H1: 48px → 28〜32px
• モデル名 H2: 48px → 32〜36px
• 本文サイズは 16px を維持（line-height も 1.5 維持）
• 製品カードは 1 列に切り替え

タッチターゲット

• 主要 CTA: 高さ 48px 以上（padding 14px 32px + font で確保）
• 最小タップ領域: 44px x 44px（WCAG 基準）

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

WHILL Blue (CTA): #0075b8
Dark Text: #353537
Near Black (Footer): #252525
Muted Blue-Gray (Disabled): #b7c2cd
Light Gray Surface: #fafafa
White (Background): #ffffff

Font (heading): "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
Font (body): ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif

Body Size: 16px / line-height 1.5 / weight 400 / letter-spacing 0.02em
Large Body: 20px / line-height 1.4 / weight 400 / letter-spacing 0.016em
Hero H1: 48px / line-height 1.1 / weight 600 / letter-spacing 0.02em
Model Name: 48px / line-height 1.0 / weight 700 / letter-spacing 0.02em
Small: 13px / line-height 1.4 / weight 700 / letter-spacing 0.02em

Border Radius: 4px（カード）／8px（入力欄）／900px（CTA ピル）
Shadow (Card): rgba(162,164,169,0.05) 0px 10px 23px, rgba(162,164,169,0.04) 0px 41px 41px, rgba(162,164,169,0.03) 0px 93px 56px

プロンプト例

WHILL のデザインに従って、パーソナルモビリティの製品一覧ページを作成してください。
- フォント: "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
- セクション見出し: 48px / weight 700 / line-height 1.0 / letter-spacing 0.02em / color #353537
- 本文: 16px / weight 400 / line-height 1.5 / letter-spacing 0.02em / color #353537
- 主要 CTA: 背景 #0075b8 / 白文字 / border-radius 900px / padding 14px 32px / 16px / weight 700
- セカンダリ CTA: 背景 白 / 文字 #0075b8 / border 1px solid #0075b8 / radius 900px / padding 0 16px
- カード: 背景 白 / radius 4px / shadow 3層（rgba(162,164,169) 系）
- フッター: 背景 #252525（ニアブラック）/ 白文字
- テキスト色は #353537（純黒を使わない）
- word-break: keep-all
- ピル CTA 以外の角丸ボタンは使わない