PILOT（パイロット） DESIGN.md

PILOT（https://www.pilot.co.jp/）のデザイン仕様書。 万年筆・ボールペン・文房具を中心とする老舗筆記具ブランドのコーポレート＆製品サイト。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ライトテーマ基調（白〜淡いライトブルーグレーの面 + ブランドブルー #002f9e のアクセント）で、筆記具ブランドとしての誠実さ・品格・伝統を表現。「かく、がスキ」というタグラインが示す通り、書くことへの愛着を中心に据えた、清潔感のある上質なコーポレートデザイン
• 密度: ヒーローセクションはフルワイドのビジュアル。製品グリッドは余白を十分に確保したゆったりした構成で、紙のような清澄感を演出
• キーワード: 清潔・品格・ブランドブルー・シャープなエッジ・広い字間・和文 medium ウェイト
• 特徴:
  • ブランドカラーは PILOT ブルー #002f9e（ヘッダーナビ、見出し、CTA、フッター背景に一貫適用）
  • ボタンの角丸は一切なし（radius 0px） — シャープな正方形コーナーがブランドの特徴的な意匠
  • 見出しの letter-spacing は 0.15〜0.175em と広め — 和文 medium ウェイト（500）と組み合わせて品格ある佇まいを実現
  • フォントは Noto Sans JP を中心に、製品カタログページではヒラギノ・メイリオのフォールバックを追加
  • 面の背景色は Surface Light Blue #e9edf1 と Surface Lightest #f6f7f9 の2階調を使い分け、紙のような柔らかい奥行きを演出
  • フッターはブランドブルー背景に白テキストで、ブランドの存在感を締める

2. Color Palette & Roles

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

Brand

• PILOT ブルー (#002f9e): ブランドの核心。セクション見出し、ナビリンク（アクティブ）、CTA ボタン背景、フッター背景に使用
• PILOT ブルー alt (#002f9c): 製品カタログページでのわずかに異なる実測値（RGB 0, 47, 156）。実用上は同色として扱う
• Dark Navy (#001e5a): フッター・ナビの一部に現れる深みのあるネイビー（RGB 0, 30, 90）

CTA / Buttons

• Primary CTA: 背景 #002f9e / 文字 #ffffff / radius 0px / 例: "かく、がスキ"
• Language Toggle: 背景 #858585 / 文字 #ffffff / radius 0px
• Category Button: 背景 #ffffff または #f2f2f2 / 文字 #000000 / radius 0px
• Search リンク: 文字 #002f9c（青テキスト、背景なし）

Neutral

Surface

3. Typography Rules

3.1 和文フォント

• ゴシック体（トップページ）: Noto Sans JP を単独使用（シンプルなスタック）
• ゴシック体（製品カタログ）: Noto Sans JP → ヒラギノ角ゴ ProN → メイリオ → MS PGothic の順

3.2 欧文フォント

• サンセリフ: Noto Sans JP の欧文グリフを使用（専用欧文フォントの指定なし）
• フォールバック末尾は sans-serif のみ

3.3 font-family 指定

css/* トップページ */
font-family: "Noto Sans JP", sans-serif;

/* 製品カタログページ */
font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
  メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

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

• トップページはモダンブラウザを前提に Noto Sans JP 単独
• 製品カタログは幅広い環境に対応するため、macOS 系（ヒラギノ）→ Windows 系（メイリオ → MS PGothic）の順でフォールバック

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

実測値（トップページ／製品カタログページ、2026-05-09 取得）

3.5 行間・字間

• 本文の行間 (line-height): 1.5（24px / 16px、製品カタログ）〜 1.57（20.625px / 13.125px、説明文）
• 見出しの行間: 1.0（H2・H3 は tight — 24.375px / 24.375px）
• 本文の字間 (letter-spacing): 0〜0.075em（ボディ）
• 見出しの字間: 0.15〜0.175em（H2: 0.175em、H3: 0.15em）— 広い字間が品格を演出

ガイドライン:

• H2・H3 の line-height は 1.0（tight）のため、複数行になる見出しは避ける
• 見出しの letter-spacing は大きめ（0.15em 以上）に保つこと — これがブランドの特徴
• 見出し weight は 500（Medium） を使う。700（Bold）は使わない

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

• 特定の font-feature-settings 指定は確認されていない（Noto Sans JP のデフォルト動作に委ねる）
• palt 適用なし（広い letter-spacing との組み合わせでバランスを取っている）

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（"かく、がスキ"）

• Background: #002f9e
• Text: #ffffff
• Border Radius: 0px（シャープなエッジ — ブランドの特徴）
• Font: Noto Sans JP

Language Toggle

• Background: #858585
• Text: #ffffff
• Border Radius: 0px

Category Button

• Background: #ffffff または #f2f2f2
• Text: #000000
• Border Radius: 0px

Submit Button（製品カタログ）

• Background: #002f9e（推定）
• Text: #ffffff
• Font Size: 25.6px
• Line Height: 48px

重要: 全ボタン・全 CTA に border-radius: 0px を適用する。角丸は使用しない。

Cards

• Background: #ffffff
• Border Radius: 0px（角丸なし）
• 製品カード境界線: #d7d7d7

Navigation

• デスクトップ: ブランドブルー #002f9e またはダークネイビー #001e5a を背景に白テキスト
• アクティブリンク: #002f9e
• 通常リンク: #000000
• ナビゲーション文字色（大）: #333333

Footer

• Background: #002f9e（PILOT ブルー）
• Text: #ffffff
• ブランドカラーで締めくくる構造

5. Layout Principles

Spacing Scale

Container

• Max Width: 1440px 程度（実測ベース）
• Content Width: 1200px 程度
• Padding（horizontal）: デスクトップ 40〜80px / モバイル 16px

Grid

• 製品グリッド: 3〜4 カラム（デスクトップ）/ 2 カラム（タブレット）/ 1 カラム（モバイル）
• カテゴリナビ: 水平スクロール対応のフレックスレイアウト

6. Depth & Elevation

フラットデザインが基本。陰影ではなく 面の背景色の差 (#ffffff / #f6f7f9 / #e9edf1) で奥行きを表現する。ボタンの角丸もなく、装飾的な shadow も使わない清潔なビジュアルが特徴。

7. Do's and Don'ts

Do（推奨）

• ブランドブルー #002f9e をアクセント・CTA・見出しに一貫して使う
• 全ボタンの border-radius は 0px に設定する（シャープなエッジを保つ）
• 見出し（H2・H3）には weight 500（Medium） を使う — 700（Bold）は避ける
• 見出しの letter-spacing は 0.15em 以上 を確保して品格を演出する
• 面の背景色は #e9edf1 と #f6f7f9 の2階調でセクションの奥行きを表現する
• フッターはブランドブルー #002f9e を背景に白テキストで締める
• フォントは Noto Sans JP を基本に、必要に応じてヒラギノ・メイリオのフォールバックを追加する

Don't（禁止）

• ボタンに border-radius を設定しない（pill 型や角丸ボタンはブランドイメージに反する）
• 見出しに weight 700（Bold）を使わない（Medium 500 がブランドのトーン）
• 見出しの letter-spacing を 0.1em 以下に縮めない（品格が損なわれる）
• アクセントカラーにブランドブルー以外の有彩色を使わない
• ページ背景に濃い色やダークテーマを適用しない（ライトテーマが前提）
• H2・H3 を複数行にならないよう文字量を管理する（line-height 1.0 のため詰まって見える）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• モバイルでは H2（24.375px）を 18〜20px 程度に縮小
• 製品グリッドはデスクトップ 3〜4 列 → モバイル 1〜2 列に変更
• ナビゲーションはハンバーガーメニューに切り替え

9. Agent Prompt Guide

クイックリファレンス

Brand Color (PILOT Blue): #002f9e
Text Primary: #000000
Surface Light Blue: #e9edf1
Surface Lightest: #f6f7f9
Footer BG: #002f9e
Font (top): "Noto Sans JP", sans-serif
Font (catalog): "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
Body Size: 16px / Weight 400
Body Line Height: 1.5
H2 Size: 24.375px / Weight 500 / Letter Spacing 0.175em
H3 Size: 18.75px / Weight 500 / Letter Spacing 0.15em
Button Border Radius: 0px (all buttons)

プロンプト例

PILOT のコーポレートサイトのデザインシステムに従って、製品カテゴリセクションを作成してください。
- 背景: #e9edf1（Surface Light Blue）
- セクション見出し: #002f9e / 24.375px / weight 500 / letter-spacing 0.175em
- フォント: "Noto Sans JP", sans-serif
- ボタン: 背景 #002f9e / 文字 #ffffff / border-radius 0px（角丸なし）
- 製品カード: 白背景 / border-radius 0px / border 1px solid #d7d7d7
- フッター: 背景 #002f9e / 文字 #ffffff