🌊 制作事業（TERASU）

03_ブランドガイド

最終更新 2026年04月29日 ／ 41_制作事業部/scale-hp-corporate/03_ブランドガイド.md

scale-group.co.jp ブランドガイド

「動かない、けれど呼吸している黒。」
Mercedes-Benz の威厳 + Anthropic の知的さ + Linear の現代タイポ。
AI 作成感ゼロ、ハンドクラフトの上質さ。

30秒で全体像

観点 一言
核心 黒×洗練×高級×大手企業感の完全ガイド
キーワード 完全黒 / 大胆余白 / 控えめ動き / ハンドメイド感 / オレンジ極小
使う人 制作チーム / Claude（実装時の正本）
読了目安 8分

0. デザイン哲学

動かない、けれど呼吸している黒。
原則 内容
動きは控えめ 派手アニメ NG、気づかれない上品さ
余白で語る 詰め込まず、1セクション1主張
黒の濃淡で奥行き グラデではなく階調
タイポでメッセージ 写真より文字
オレンジは "ここぞ" CTA と強調のみ
ハンドメイド感 テンプレ感ゼロ、微調整された世界観

1. デザイン頂上 3 サイト

サイト URL 取り入れる要素
Anthropic anthropic.com 大胆な余白・Mission ファースト・知的なタイポ
Mercedes-Benz mercedes-benz.com 高級感・重厚な黒・写真の使い方・控えめな動き
Linear linear.app 黒の美しさ・タイポ強度・微妙なグラデ・モーション

2. カラーパレット（完全黒ベース）

Primary

役割 カラー HEX 使用場所
背景メイン 完全黒 #000000 全ページ背景
背景サブ ほぼ黒 #0a0a0a カード差別化・微階調
背景サブ2 濃灰 #111111 hover・差別化
ボーダー 暗灰 #1a1a1a 仕切り線
ボーダー強 中灰 #2a2a2a hover ボーダー

テキスト

役割 カラー HEX 使用場所
メイン 純白 #ffffff 見出し
サブ 灰白 #cccccc 本文
弱 灰 #888888 補助
極弱 暗灰 #555555 キャプション

アクセント（極小使用）

役割 カラー HEX 使用場所
アクセント オレンジ #ff6b2b CTA / Mission の "めぐる" / 強調のみ

→ オレンジは "ここぞ" のみ。多用禁止。

グラデーション

名前 仕様 用途
Hero Gradient radial-gradient(circle at 50% 30%, rgba(20,20,20,0.5) 0%, #000000 70%) ヒーロー背景
Subtle Glow radial-gradient(circle, rgba(255,107,43,0.05) 0%, transparent 50%) 微細な暖色光源

3. タイポグラフィ

フォント

言語 フォント ウェイト 用途
英語 Inter Display 400/600/700/900 見出し・数字
日本語 Noto Sans JP 400/500/700/900 本文・見出し
サブ英 Inter 400/500 本文・キャプション

CDN

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">

サイズスケール（PC基準）

用途 サイズ クラス ウェイト
Hero H1 120-160px text-[120px] md:text-[160px] font-black (900)
H2 64-80px text-6xl md:text-7xl font-bold (700)
H3 32-48px text-3xl md:text-5xl font-bold (700)
H4 24-32px text-2xl md:text-3xl font-semibold (600)
本文大 18-22px text-lg md:text-xl font-normal (400)
本文 16-18px text-base md:text-lg font-normal (400)
補助 14px text-sm font-medium (500)
キャプション 12px text-xs font-medium (500)・大文字

モバイル時の調整

用途 PC モバイル
Hero H1 120-160px 56-72px
H2 64-80px 36-48px
H3 32-48px 24-32px

行間・字間

要素 line-height letter-spacing
Hero H1（英） 1.0 -0.04em
Hero H1（和） 1.15 -0.02em
本文（和） 1.85 0.04em
キャプション英 1.5 0.3em（大文字広め）

4. レイアウト・余白

コンテナ

ブレイクポイント 最大幅 パディング
Mobile (〜640px) 100% px-6 (24px)
Tablet (641-1024px) 100% px-12 (48px)
Desktop (1025-1440px) 1280px px-16 (64px)
Wide (1441px〜) 1280px mx-auto

スペーシング（Anthropic 級の大胆余白）

サイズ 値 クラス 用途
xs 8px p-2 アイコン
sm 16px p-4 小要素間
md 24-32px p-6 p-8 標準
lg 48px p-12 カード内
xl 80-96px py-20 py-24 セクション内
2xl 160-240px py-40 py-60 セクション間（高級感）
3xl 240-320px py-60 py-80 大セクション間

セクション標準（高級版）

<section className="py-40 md:py-60 bg-[#000000]">
  <div className="max-w-7xl mx-auto px-6 md:px-16">
    {/* コンテンツ */}
  </div>
</section>

→ セクション間 240-320px で Anthropic / Mercedes-Benz 級の余裕。

5. コンポーネント

5-1. ボタン

Primary（オレンジ・CTA のみ）

[Business を見る →]
  • 背景：bg-[#ff6b2b]
  • 文字：text-[#000000]
  • パディング：px-10 py-5
  • 角丸：rounded-none（角ばり）
  • フォント：font-bold text-base tracking-[0.05em]
  • ホバー：背景明度UP + 矢印 8px 右移動 (200ms)

Secondary（白枠・透過）

[Contact →]
  • 背景：bg-transparent
  • 文字：text-white
  • ボーダー：border border-white
  • ホバー：背景 → 白 + 文字 → 黒

Ghost（テキストのみ）

詳細を見る →
  • 文字：text-white → ホバー text-[#ff6b2b]
  • 下線：なし
  • ホバー：矢印 4px 右移動

5-2. カード（高級感）

┌────────────────┐
│  [余白多め]      │
│                │
│  タイトル       │
│                │
│  本文.........  │
│                │
│  [余白多め]      │
└────────────────┘
  • 背景：bg-[#0a0a0a]
  • ボーダー：border border-[#1a1a1a]
  • パディング：p-12 md:p-16（大胆余白）
  • 角丸：rounded-none
  • ホバー：ボーダー → #2a2a2a + 上 4px translate (300ms ease)
  • 影：なし（ボーダーのみ）

5-3. 数字 / カウンター

要素 仕様
数字 text-[120px] font-black tracking-[-0.04em]
色 text-white（オレンジ NG）
ラベル text-sm font-medium tracking-[0.2em] uppercase text-[#888888]

→ 「By the Numbers」 系のセクションでは、数字は白。色は使わない。

5-4. ナビ項目

About / Business / Products / News / Recruit / Contact
  • フォント：text-sm font-medium tracking-[0.05em]
  • 色：text-white → ホバー text-[#ff6b2b]
  • ホバー：下線アニメ（細・控えめ・200ms）

5-5. リンク（インライン）

  • 色：text-[#ff6b2b]
  • 下線：underline underline-offset-8 decoration-1（細い）
  • ホバー：明度UP

6. アイコン

Lucide React（細い stroke）

import { ArrowRight } from 'lucide-react'

<ArrowRight strokeWidth={1} className="w-5 h-5 text-white" />
サイズ 用途 strokeWidth
16px インライン 1.2
20px 標準 1
32px 大 1
64px ヒーロー 0.8（極細）

→ stroke を細く で高級感UP

7. アニメーション・モーション

採用ライブラリ

用途 ライブラリ
基本アニメ Framer Motion
数字 react-countup
ヒーロー演出 Framer Motion + CSS

モーション原則（控えめ・上品）

原則 内容
速度 短い 200-300ms / 中 600-800ms / 長 1200ms
イージング cubic-bezier(0.16, 1, 0.3, 1)（高級イージング）
同時発生 順次フェード（stagger 0.1s）
派手アニメ NG（パーティクル多用、3D回転、スパイラル等）

標準アニメーション

Fade Up（標準）

<motion.div
  initial={{ opacity: 0, y: 16 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
  viewport={{ once: true, margin: "-100px" }}
>

→ duration を 1.2s と長めに（高級感）

Hero Text（特別演出）

  • 文字を 1 行ずつフェードイン
  • "めぐる" の文字色がオレンジに変わる微演出
  • 全体 2-3 秒かけて完成

Hover

  • カード：y: -4, transition: 0.3s ease
  • ボタン：背景明度のみ
  • ナビ：下線細アニメ

NG モーション

NG 理由
パーティクル爆発 AI 感・チープ
3D 回転 高級感喪失
スパイラル 派手すぎ
スクロール強制制御 UX 悪化
bouncy 軽い印象

8. ビジュアル素材

写真

用途 仕様
メンバー写真 黒背景 / モノクロ・自然光 / 600×600px
オフィス写真 高解像度・コントラスト強め
抽象背景 暗いグラデ + 微細なノイズ

イラスト

  • 線画ベース（細い・1pxストローク）
  • 単色（白 or オレンジ）
  • 装飾過多 NG

NG ビジュアル

NG 理由
ストックフォト感 テンプレ感
多色イラスト ブランド統一性破壊
AI 生成画像（明らかに） ハンドメイド感喪失
動画背景の自動再生 パフォーマンス + UX

9. ライティング・トーン

基本トーン

軸 採用 不採用
文体 断定 / 短文 推測 / 長文
距離感 プロフェッショナル フランク
温度 静かな熱 押し付け
自慢 行動で示す 形容詞で誇張

例

OK NG
良いものがめぐる、世の中をつくる。 私たちは社会に貢献していきます。
妥協なく、つくる。 高品質を目指します。
過程より、結果。 結果を重視しています。

10. アクセシビリティ

項目 基準
コントラスト比 白文字 / 黒背景 = 21:1（最大）
キーボード操作 Tab で全要素到達
altテキスト 全画像
フォーカス focus:ring-2 focus:ring-[#ff6b2b]
prefers-reduced-motion 全アニメ無効化

11. パフォーマンス

項目 目標
Lighthouse Performance 95+
Lighthouse Accessibility 95+
LCP 2.0s 以下
CLS 0.05 以下
INP 150ms 以下

12. ブランド NG リスト（決定版）

絶対やらない

NG 理由
絵文字使用 軽い印象
オレンジ多用 高級感喪失（CTA のみ）
派手モーション AI 感・チープ
ストックフォト テンプレ感
角丸の多用 高級感喪失（rounded-none 標準）
影 / shadow フラット維持（ボーダーのみ）
「業界No.1を目指す」表記 「目指す」ではなく「つくる」「取る」
装飾過多のヒーロー toB 信頼感喪失
動画背景の自動再生 パフォーマンス + UX
数字 + カラフル 数字は白で統一

13. 完了判定

このブランドガイドの完了判定

  • [x] 完全黒ベース（#000000）定義
  • [x] オレンジ極小使用ルール
  • [x] 大胆余白（240-320px）定義
  • [x] フォント階層（120-160px から）
  • [x] 控えめモーション原則
  • [x] AI 作成感 NG リスト

関連ノート

更新履歴

日付 内容
2026-04-29 初版作成（Phase 0）
2026-04-29 MVV 反映 + 「黒×洗練×高級×大手感」全面更新（Anthropic + Mercedes-Benz + Linear 融合）