GO株式会社（GO Inc.） DESIGN.md

GO株式会社（https://goinc.jp/）のデザイン仕様書。 タクシーアプリ「GO」などを展開する日本のモビリティテック企業（旧 Mobility Technologies）。 タグライン「移動で人を幸せに。」。クリーンで信頼感のあるコーポレート／プロダクトデザイン。 実サイトの computed style 実測（2026-06-27 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白基調のクリーンで信頼感のあるコーポレート／プロダクトデザイン。ページ背景は純白 #ffffff、セクション地に off-white #fbfbfb / #f9f9f9 を敷き、テキストは #222222。フォントは Noto Sans JP のみに統一（明朝・欧文専用フォントを使わない）。アクセントは GO ブルー #2d68ae とディープネイビー #01034f。装飾を抑え、堂々とした大見出しと整った数字組みで「移動インフラを担う企業」の信頼感を出す
• GO について: タクシーアプリ「GO」を中核に、AI 配車・脱炭素・交通 DX を手がけるモビリティテック企業。サイトはニュース／プレスリリース／事業紹介が中心のコーポレート型。プロダクト写真と数字（KPI・実績）を端正に見せる構成
• 密度: 中密度。セクション大見出し h2 を 48px / 700 と大きく堂々と置き、本文は 16px / line-height 1.7 とゆったり読ませる。アイブロウ（小見出しラベル）は 0.16em の広いトラッキングで端正に
• キーワード: クリーン、信頼感、白基調、GO ブルー、堂々とした大見出し、ピル型 CTA、数字組み（lnum/pnum）
• 特徴:
  • フォントは "Noto Sans JP", sans-serif のみ。明朝も欧文専用フォントも使わず、和欧すべて Noto Sans JP で組む
  • font-feature-settings: "lnum", "pnum" がサイト全域に適用（ライニング数字＋プロポーショナル数字）。日付・KPI・年号などの数字を美しく見せる、GO の実装上の大きな特徴
  • CTA はピル型（border-radius 26px）のアウトラインボタン。透明地＋1px solid #222、左右に丸い矢印アイコンを持つため padding が非対称
  • アクセントは GO ブルー #2d68ae（リンク・主要アクセント）、プレス系タグ地 #265893、ディープネイビー #01034f（濃色の面・フッター）
  • 本文・補足はグレースケール（#222222 / 補足 #888b8c）で端正に。色数を絞り信頼感を出す
  • ダークモード非対応（実測時点。濃紺 #01034f の面が部分的に存在）

2. Color Palette & Roles

実サイトの computed style 実測値（rgb → hex 変換済み）。基調は白＋グレースケール、アクセントに GO ブルーとディープネイビー。

Brand / Accent

• GO Blue (#2d68ae／rgb 45,104,174): リンク・主要アクセント。最も使われるブランド色
• Press Tag Blue (#265893／rgb 38,88,147): プレスリリースのタグ地（濃いめのブルー）
• Deep Navy (#01034f／rgb 1,3,79): 濃紺の面・フッター・強調ブロック等のダークサーフェス

Neutral / Text

Semantic（推奨値）

実サイトに明確なエラー／成功色は確認されなかった（アクセントは GO ブルー系のみ）。クリーンなトーンを崩さない範囲で推奨する補完値:

• Danger: #c0392b（落ち着いた赤。エラー枠・バリデーション）
• Success: #2d68ae（GO ブルーで完了を示す）／チェックアイコンで表現
• Link / Link Hover: #2d68ae → ホバーは #265893（プレスタグの濃いブルーへ寄せる）

3. Typography Rules

3.1 和文フォント

• ゴシック体（メイン）: Noto Sans JP のみ（"Noto Sans JP", sans-serif）。和文はすべて Noto Sans JP で描画する
• 明朝体: 使用しない（全面ゴシック）
• weight は 400（本文・リンク）／ 600〜700（見出し・ラベル・強調）／ 900（必要に応じた極太見出し） を使い分ける

3.2 欧文フォント

• 欧文専用フォントは使わない。英字・数字も Noto Sans JP の欧文グリフで組む（Helvetica 等を先頭に置かない）
• 数字は後述の lnum / pnum（ライニング＋プロポーショナル）で美しく見せる
• 等幅: SFMono-Regular, Consolas, Menlo, monospace（コード／トークン表記用）

3.3 font-family 指定

css/* 全テキスト共通 */
font-family: "Noto Sans JP", sans-serif;

/* 数字を美しく組む（サイト全域に適用） */
font-feature-settings: "lnum", "pnum";

/* 等幅（コード等） */
font-family: SFMono-Regular, Consolas, Menlo, monospace;

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

• 和文・欧文・数字をすべて Noto Sans JP に統一する（フォント切替による字面のばらつきを避ける）
• 最後に sans-serif を generic family として置く
• Noto Sans JP は Google Fonts で配信されるため、400 / 700 / 900（必要なら 600）を読み込む。300 は不要

preview.html での注記: 実サイトと同じく Noto Sans JP を Google Fonts から読み込む。font-feature-settings: "lnum", "pnum" を body に適用して数字組みを再現する。

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

実測値（トップページ、2026-06-27 取得）。h2 48px / 700（大きく堂々と）と 本文 16px / line-height 1.7 / letter-spacing 0.04em が核。letter-spacing は px → em 換算（例: 1.92px / 48px = 0.04em）。

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (16px): 1.7（27.2px。ゆったり読ませる日本語本文）
• リンク・ナビ (16px): 2.0（32px。クリックしやすく行間を確保）
• 大見出し h2 (48px): 1.4〜1.5（67〜72px）
• リスト (16px): 1.4（22.4px）

字間 (letter-spacing) — 実測:

• 本文・見出し・リスト: 0.04em（本文 0.64px / 48px 見出し 1.92px）。やや開けて端正に
• アイブロウ／ラベル (14px): 0.16em（2.24px）。広いトラッキングでラベルらしく
• 濃色地タグ (11px): 0.15em（1.65px）

ガイドライン:

• 本文は 16px / line-height 1.7 / letter-spacing 0.04em が基準。日本語をゆったり読ませる
• 大見出しは 48px / 700 / letter-spacing 0.04em で堂々と。詰めすぎない
• アイブロウ（"NEWS" "ABOUT" 等の小見出しラベル）は 0.16em の広いトラッキングで他要素と差をつける

3.6 禁則処理・改行ルール

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

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《
• 長い英数字（URL・型番）は overflow-wrap: break-word で折り返す
• サービス名「GO」は欧文 2 文字。途中で折り返さない（white-space: nowrap 推奨）

3.7 OpenType 機能

css/* サイト全域に適用（GO の特徴） */
font-feature-settings: "lnum", "pnum";

• lnum（ライニング数字）: 数字をベースラインに揃った大文字高さで組む。日付・年号・KPI が整列して見える
• pnum（プロポーショナル数字）: 数字を等幅ではなく字幅に応じて詰める。本文中の数字が自然に流れる
• GO は このペアをサイト全域に適用しており、数字組みの美しさがブランドの実装的特徴。必ず明記・再現する
• palt は未採用（letter-spacing で字間を制御）

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

実測値。CTA はピル型（border-radius 26px）のアウトラインが基調。

Buttons / CTA

Primary Pill Outline Button（実測） — "GOについて知る" 等（左にアイコン）

• Background: transparent
• Text: #222222（Noto Sans JP 16px / weight 400）
• Border: 1px solid #222222
• Border Radius: 26px（ピル型）
• Padding: 6.5px 24px 6.5px 68px（左に丸い矢印アイコンを持つため左 padding が大きい非対称）
• Hover（推奨）: 塗り反転 — background #222222 / text #ffffff

Primary Pill Outline Button（実測・右アイコン） — "ニュース一覧" 等

• Background: transparent
• Text: #222222（16px / weight 400）
• Border: 1px solid #222222
• Border Radius: 26px
• Padding: 6.5px 84px 6.5px 24px（右に丸い矢印アイコンを持つため右 padding が大きい非対称）
• Hover（推奨）: 塗り反転 — background #222222 / text #ffffff

Accent / Navy Solid Button（推奨） — 強調 CTA

• Background: #01034f（ディープネイビー）または #2d68ae（GO ブルー）
• Text: #ffffff（16px / weight 700）
• Border: なし
• Border Radius: 26px（ピルを維持）
• Padding: 12px 32px（アイコンなしなら左右対称）
• Hover（推奨）: わずかに暗く（opacity 0.9）

Tag / Badge

Press Tag（実測） — プレスリリースの分類タグ

• Background: #265893（または #2d68ae）
• Text: #ffffff（11px / weight 600 / letter-spacing 0.15em）
• Padding: 4px 12px（推奨）
• Border Radius: 4px（角を少しだけ。CTA のピルとは区別）

Inputs

Text Input（推奨）

• Background: #ffffff（または #f9f9f9）
• Border: 1px solid #d9d9d9
• Border Radius: 8px（フォームは控えめな角丸。CTA のピルは使わない）
• Padding: 12px 14px
• Font: 16px / weight 400 / #222222
• Focus: border #2d68ae（GO ブルー）＋薄いリング 0 0 0 3px rgba(45,104,174,0.15)
• Error: border #c0392b

Cards / Surfaces

News / Service Card（推奨）

• Background: #ffffff（off-white #fbfbfb の地に置く）
• Border: 1px solid #eeeeee（または影 Level 1）
• Border Radius: 8px
• Padding: 24px
• 構成: アイブロウ（"NEWS" など 14px / 700 / 0.16em）→ 見出し → 本文 → 日付（12px / 700 / #888b8c）。プレスカードには #265893 のタグを添える

Dark Surface（実測・濃紺面）

• Background: #01034f（ディープネイビー）
• 見出し・本文: #ffffff
• タグ: #265893 地に白文字（11px / 600 / 0.15em）

5. Layout Principles

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

Container

• Max Width: 1120〜1200px（推奨）
• Padding (horizontal): mobile 20px / desktop 40px
• セクションごとに白 #ffffff と off-white #fbfbfb / #f9f9f9 を交互に敷いてリズムを作る

Border Radius Scale

Grid

• Columns: 推奨 12 カラム
• Gutter: 24px
• ニュース／サービスカード: 3列（desktop）→ 2列（tablet）→ 1列（mobile）

6. Depth & Elevation

• 基調はフラット寄り。立体感は主に 白 #ffffff と off-white #fbfbfb / #f9f9f9 の面差と、濃紺 #01034f のダークサーフェスで表現する
• 影を使う場合もごく薄く（クリーンさを保つ）。GO ブルーの強い影は使わない

7. Do's and Don'ts

Do（推奨）

• フォントは "Noto Sans JP", sans-serif に統一する（和文・欧文・数字すべて）
• font-feature-settings: "lnum", "pnum" を全域に適用し、数字（日付・年号・KPI）を美しく組む
• 本文は 16px / line-height 1.7 / letter-spacing 0.04em / color #222222 で組む
• セクション大見出し h2 は 48px / 700 / letter-spacing 0.04em と大きく堂々と置く
• アイブロウ（小見出しラベル）は 14px / 700 / letter-spacing 0.16em の広いトラッキングにする
• ページ背景は白 #ffffff、セクション地に off-white #fbfbfb / #f9f9f9 を交互に敷く
• CTA はピル型（border-radius 26px）のアウトライン（透明地＋1px solid #222、矢印アイコンで非対称 padding）。ホバーで塗り反転
• アクセントは GO ブルー #2d68ae（リンク）、#265893（タグ）、#01034f（濃紺面）に限定する
• 補足・メタは #888b8c（12px / 700）で控えめに

Don't（禁止）

• 明朝体や欧文専用フォント（Helvetica 等）を先頭に置かない（Noto Sans JP に統一する）
• lnum / pnum を外さない（GO の数字組みの特徴。数字が等幅になると印象が崩れる）
• 本文を line-height 1.5 未満に詰めない（日本語本文は 1.7 が基準）
• 大見出しを小さく組まない（h2 は 48px / 700 で堂々と）
• CTA を直角や強い塗りの長方形にしない（ピル型 radius 26px のアウトラインが基調）
• アクセント色を増やさない（GO ブルー系＋濃紺のみ。多色化しない）
• テキストに純黒 #000000 を使わない（#222222 を使う）
• アイブロウのトラッキングを詰めない（0.16em を保つ）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Section Heading h2: 48px → 28〜32px（堂々さは保ちつつ収める）
• 本文 16px / line-height 1.7 は維持
• カード: 3列 → 2列 → 1列
• ピル CTA は横幅いっぱいに伸ばしてもよい（radius 26px・非対称 padding は維持）
• アイブロウ 14px / 0.16em は維持

タッチターゲット

• ピル CTA: 高さ 44px 以上
• ナビ項目・リンク: 高さ 44px 以上（line-height 2.0 で確保済み）
• カード: カード全体をタップ可能に

ダークモード

• 該当なし（実測時点で未対応。濃紺 #01034f のダークサーフェスが部分的に存在する）

9. Agent Prompt Guide

クイックリファレンス

Text Primary: #222222
Text Secondary: #888b8c
Background (Main): #ffffff
Surface (off-white): #fbfbfb / #f9f9f9

GO Blue (accent / link): #2d68ae
Press Tag Blue: #265893
Deep Navy (dark surface): #01034f

Font: "Noto Sans JP", sans-serif（和文・欧文・数字すべて統一）
font-feature-settings: "lnum", "pnum"（全域・GO の特徴）
Mono: SFMono-Regular, Consolas, Menlo, monospace

Page Title (h1): 32px / weight 700 / #222
Section Heading (h2): 48px / weight 700 / line-height 1.4-1.5 / letter-spacing 0.04em / #222
Body (p): 16px / weight 400 / line-height 1.7 / letter-spacing 0.04em / #222
Link / Nav (a): 16px / weight 400-700 / line-height 2.0 / #2d68ae
Eyebrow / Label: 14px / weight 700 / letter-spacing 0.16em / #222
Tag on Dark: 11px / weight 600 / letter-spacing 0.15em / #fff on #265893
List (li): 16px / weight 400 / line-height 1.4 / letter-spacing 0.04em
Meta / Caption: 12px / weight 700 / #888b8c

Primary Pill Outline CTA: transparent / text #222 / border 1px #222 / radius 26px
  ・左アイコン: padding 6.5px 24px 6.5px 68px
  ・右アイコン: padding 6.5px 84px 6.5px 24px
  ・hover: 塗り反転（bg #222 / text #fff）
Navy Solid CTA: bg #01034f or #2d68ae / text #fff / weight 700 / radius 26px
Tag: bg #265893 / text #fff / radius 4px
Input: bg #fff / border 1px #d9d9d9 / radius 8px / focus border #2d68ae
Card: bg #fff on #fbfbfb / radius 8px / 影は薄く
Radius: pill 26px / card 8px / tag 4px
Shadow: ごく薄く（フラット寄り。面差と濃紺サーフェスで奥行きを出す）

プロンプト例

GO株式会社（GO Inc.）のデザインシステムに従って、ニュース一覧セクションを作成してください。
- フォント: "Noto Sans JP", sans-serif（和文・欧文・数字すべて統一。明朝・欧文専用フォントは使わない）
- font-feature-settings: "lnum", "pnum" を body に適用（数字を美しく組む。GO の特徴）
- ページ背景は白 #ffffff、セクション地に off-white #fbfbfb を敷く
- 本文: 16px / weight 400 / line-height 1.7 / letter-spacing 0.04em / color #222222
- セクション大見出し: 48px / weight 700 / letter-spacing 0.04em / #222222（堂々と）
- 各カード上部のアイブロウ "NEWS": 14px / weight 700 / letter-spacing 0.16em / #222222
- 日付・メタ: 12px / weight 700 / color #888b8c
- リンクは GO ブルー #2d68ae、line-height 2.0
- 「ニュース一覧」CTA はピル型アウトライン: transparent / 1px solid #222 / border-radius 26px /
  右に矢印アイコン（padding 6.5px 84px 6.5px 24px）。ホバーで塗り反転（bg #222 / text #fff）
- プレス分類タグは #265893 地に白文字（11px / weight 600 / letter-spacing 0.15em / radius 4px）
- カードは白地・radius 8px・影はごく薄く。アクセントは GO ブルー系＋濃紺 #01034f のみ