自信のコーポレート Corp Confident

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/corp-confident/DESIGN.md

# DESIGN.md — 自信のコーポレート / corp-confident

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

「実在の中堅企業のちゃんとしたコーポレートサイト」。代理店がコーポレート案件で最初に見せる王道を、
テンプレ臭くならずに作る。無彩色＋1アクセントの規律、人文ゴシックの誠実さ、そして適度な奥行きと
動きで「静止画のパンフレット」ではなく「動いている会社」を伝える。数字は実績として静止して置き、
カウントアップさせない。ロゴ雲に頼らず、事業内容の具体語で信頼を語る。

**キーワード**: 誠実 / 実業 / 規律 / 奥行き / 動いている会社
**この見た目が向く場面**: 製造業・BtoB企業・中堅メーカー・インフラ・設備関連の企業サイト

## 2. タイポグラフィ

- 和文見出し: Noto Sans JP / ウェイト 700
- 和文本文: Noto Sans JP / ウェイト 400 / サイズ 16px / 行間 1.85 / 字間 0.01em
- 欧文・数字: IBM Plex Sans（型番・数値・単位・年号・DWG番号は必ずこちらで組む。
  実績数字は `font-feature-settings: "tnum" 1` で等幅数字にし桁をそろえる。**Interに置換しない**）
- 見出しスケール: h1 44px / h2 30px / h3 20〜22px（モバイルは h1 28〜34px / h2 24px）
- 特記: キャッチコピーは具体語・数値で書く（例:「0.5℃の精度で、生産ラインを止めない。」）。
  「〜を、もっと。」「シームレスな◯◯へ。」型の空虚な体言止めコピーを書かない。
  英語だけの機械翻訳eyebrow禁止はヒーロー限定ではなく**サイト全体に適用**する。
  事業領域・製品・実績・会社情報・お問い合わせなど、どのセクション見出しの直上にも
  『BUSINESS』『COMPANY』『CONTACT』のような、見出しの直訳・意味の薄い大文字ラテン語ラベルを
  機械的に反復配置しない（全節に同じ調子のeyebrowを付けると典型的なAIスロップになる）。
  セクション見出し（sec-head/section-head）はh2＋補足文のみで構成し、英字ラベルを追加しない。
  ヒーローの小見出しに限り、和文の短い一言（例:「熱制御機器メーカー」）のみ例外的に許可する
  （下線1本のkicker形式。バッジ／ピル形の背景色チップにはしない）

## 3. カラー

無彩色ベース＋**深い青緑1色**（mono-accent）。紫・青のグラデーションを作らない。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（ベース） | #fbfbfa | 55% |
| 地（節替え） | #f0f1f2 | — |
| テキスト（主） | #1c2024 | 30% |
| テキスト（弱・ラベル） | #5b6266 | — |
| アクセント（深い青緑） | #10665e | 8%以下 |
| アクセント濃（ホバーのみ） | #0c4f49 | — |
| アクセント淡（バッジ地のみ） | #e4efee | — |
| 罫線・境界 | #dfe2e3 | — |

- 配色ルール: アクセントは①リンク・ホバー下線 ②主ボタンの塗り ③図版・グラフの主線
  ④アイコンの線色 ⑤節番号・強調1語 の5用法に**排他的に**限定する。面（背景）全体に
  アクセントを敷かない。ボタンは常にフラットな単色塗り（グラデーションにしない）。
  紫・青・信号色（緑/黄/赤）を新たに追加しない。純白 #ffffff・純黒 #000000 を地・文字に使わない
  （ボタン内の白文字のみ地色 #fbfbfa を流用してよい）

### コントラスト実測値（WCAG 4.5:1以上・両方向）

```
text        #1c2024 on bg        #fbfbfa  → 15.83:1
text        #1c2024 on bg-alt    #f0f1f2  → 14.49:1
accent      #10665e on bg        #fbfbfa  →  6.58:1  (本文中のリンク色として使用可)
accent      #10665e on bg-alt    #f0f1f2  →  6.02:1
bg(白文字)  #fbfbfa on accent    #10665e  →  6.58:1  (主ボタンの文字色として使用可)
bg(白文字)  #fbfbfa on accent-dk #0c4f49  →  9.09:1  (主ボタンhover)
text-weak   #5b6266 on bg        #fbfbfa  →  5.99:1
text-weak   #5b6266 on bg-alt    #f0f1f2  →  5.49:1
accent      #10665e on accent-soft #e4efee →  5.80:1 (バッジ文字)
text        #1c2024 on accent-soft #e4efee → 13.95:1
```

すべて4.5:1を超える。新しい色面×文字ペアを追加する場合は、この一覧に実測値を追記してから使うこと。

## 4. レイアウト・余白

- コンテンツ最大幅: 1200px
- **split-screen**: ヒーロー・事業領域・製品技術・会社情報・お問い合わせは左右2カラムで組む。
  中央寄せの単カラムヒーローを作らない
- 事業領域（3事業）は**交互配置**（1件目: テキスト左／図版右、2件目: 図版左／テキスト右、
  3件目: テキスト左／図版右）。3カラムの角丸カード羅列にしない
- 実績（選ばれる理由）は「創業1968 / 社員320名 / 国内3工場」＋補助的に海外拠点数を、
  大きな数字＋ラベルで静止して横並びに置く。ロゴ雲は使わない
- セクション間余白: 上下96px基準（モバイル64px）/ 要素間は8pxの倍数
- ヒーローの構成: 左にメッセージ（1文の見出し＋短い補足文）＋資料請求ボタン1つのみ。
  右に製品/工場を示す図版を大きく配置する。「特大中央見出し＋サブコピー＋ボタン2つ」を作らない

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 地色ベース・下線なし・ホバー時にアクセント色＋下線が左から伸びる
  （transform ではなく `right` を0にするアニメーションで表現）。本文リンクと同じ色を使ってよいが、
  ナビの通常状態は文字色（#1c2024）で、ホバー時のみアクセントに変わる
- 角丸: 8px に統一（パネル・ボタン・アイコンバッジの外形すべて共通）
- 影: `--shadow-soft: 0 10px 40px rgba(28,32,36,0.06)` の1種類のみ。強い影・複数レイヤーの影・
  カラー影を作らない
- 奥行きの作り方: 影1種類に加え、**レイヤーの重なり**（`.layered::before` で背後にオフセットした
  淡色パネルを1枚敷く＝図面が重なった紙束のイメージ）で立体感を出す。backdrop-filter は使わない
- ボタン: 主ボタンはアクセント単色塗り・白文字・角丸8px・ホバーで背景がアクセント濃に変わり
  わずかに浮く（translateY(-1px)）。副ボタンはアクセント色の1.5px枠線＋透明地・ホバーで
  アクセント淡の面が敷かれる。1画面でボタンを並置する主要導線は常に1つに絞る
  （資料請求と個別の「詳しく見る」テキストリンクは共存してよいが、同格の2ボタン並置はしない）
- カード的要素: 事業領域・製品は「交互配置＋パネル（影1種）」で構成し、角丸カード3連の羅列は
  機能紹介に使わない。仕様データは罫線区切りの表（スペック表）で組む
- フォーム要素: input/select/textarea は地（bg-alt）背景・1px罫線・角丸6px、
  フォーカス時に枠線がアクセント色に変わり背景がbgに戻る
- 画像・図版の扱い: 写真は使わず、**線画SVGの図面・グラフ・簡略図**で統一する
  （線色はアクセントまたはテキスト、面色はアクセント淡または地色のみ）。装飾フィルタをかけない
- アクセント色の適用範囲: §3の5用法に限定。ナビ全体・フッター全体・大面積の背景に
  アクセントを敷かない

## 6. モーション

- 量: **rich**（役割差＋階段ディレイ）。全要素が同じ0.6sで均一に下からフェードする実装を禁止する
- ヒーローはページ読み込み時に、見出し→補足文→CTA→右の図版の順に**階段状の遅延**
  （0s / 0.08s / 0.18s / 0.32s）でフェードイン（スクロール待ちにしない。above the foldのため）
- スクロール連動（IntersectionObserver）: 事業領域はテキストが左から・図版が右から寄る
  （役割差: テキストは0.5s、図版は0.8sとやや長く・大きく見せる＝主役は遅く長く）。
  **テキスト側だけでなく図版側にも必ず reveal 系クラスを付与すること**
  （`.biz-text` に `reveal reveal-left`／`.biz-fig`（または `.biz-figure`）に
  `reveal reveal-right` を両方付ける。図版側にreveal系クラスを一切付けず静止画のまま
  出す実装は不可。図版が常時フル表示のまま動かないのは§6違反）
  実績数字は横並びの各項目に0.09s刻みの階段ディレイをつけて順にフェードインする
- 数字のカウントアップは**一切使わない**。数字は最終値で静止して現れるだけにする
- ホバー: ボタンはわずかな浮き上がり（translateY(-1px)）、ナビリンクは下線が左から伸びる。
  全カードが同じ量だけ持ち上がる単調なホバーにしない
- prefers-reduced-motion: reduce 時はすべての reveal 要素の transform/opacity 遷移を無効化し、
  即座に表示する

## 7. 写真・イラスト・図版

- 写真は使わない（CC0写真の調達に依らず、線画図版で統一する設計判断）。図版はすべて
  「線＋淡面」のインラインSVGで描く（線: アクセント #10665e またはテキスト #1c2024、
  面: アクセント淡 #e4efee または地色）。3Dレンダリング・グラデーションの抽象ブロブを使わない
- 図版の題材は実務に即したもの（ヒーター断面図、温度制御グラフ、点検チェックリスト、拠点地図）に限る。
  意味のない装飾イラストを埋め草として置かない
- アイコンは線幅1.75px・角丸端点で統一した自作インラインSVG線画のみ。絵文字・既製アイコンフォント・
  素材サイトのアイコンセットの寄せ集めを使わない
- 情報を持つ線画SVG図版（ヒーロー図・事業領域図・地図など）には `role="img"` と、
  図版の内容を要約する `aria-label` を付与する

## 8. 禁止事項（must not）

- Inter / Roboto / Arial をデフォルトで使わない（和文 Noto Sans JP、欧文 IBM Plex Sans で組む）
- 紫〜青のグラデーションおよびグラデーション自体を一切使わない（背景・文字・ボタンすべて）
- backdrop-filter を使わない（奥行きは影1種＋レイヤーの重なりのみで作る）
- 統計数字をカウントアップさせない（0→数値がカタカタ上がる実装を禁止。数字は静止して置く）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋同格ボタン2つ）を作らない
- 「アイコン＋見出し＋説明の3カラム角丸カード」を機能紹介・事業紹介に使わない
  （事業領域は交互配置、仕様は表組みで構成する）
- 導入企業のロゴ雲を使わない（実績は数字と具体的な事業内容の記述で語る）
- 全要素が同じ0.6sで均一にフェードする実装をしない（§6の役割差＋階段ディレイを守る）
- 絵文字をアイコンとして使わない（線幅1.75pxの自作インラインSVGのみ）
- 「AI-Powered」「次世代」「シームレス」「圧倒的」「革新」等の広告スロップ語彙を本文に使わない
- 見出しの直上に大文字の英語eyebrowラベル（BUSINESS/COMPANY等の直訳）を全セクションへ
  機械的に反復配置しない（ヒーロー以外では一切使わない。docs/ai-slop-signatures.mdの
  既知シグネチャ）
- 事業領域の図版（biz-fig/biz-figure）にreveal系クラスを付け忘れて、テキストのみ
  アニメーションさせ図版を静止画のまま出さない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #fbfbfa;
  --color-bg-alt: #f0f1f2;
  --color-text: #1c2024;
  --color-text-weak: #5b6266;
  --color-accent: #10665e;
  --color-accent-dark: #0c4f49;
  --color-accent-soft: #e4efee;
  --color-line: #dfe2e3;
  --font-heading: "Noto Sans JP";
  --font-body: "Noto Sans JP";
  --font-latin: "IBM Plex Sans";
  --space-unit: 8px;
  --radius: 8px;
  --max-width: 1200px;
  --shadow-soft: 0 10px 40px rgba(28, 32, 36, 0.06);
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap`
- font-family 指定は `var(--font-latin), var(--font-body), sans-serif` の順
  （英数字が自動で IBM Plex Sans になる）
- 実績数値・型番・表の数字は `font-feature-settings: "tnum" 1;` で等幅数字にし桁をそろえる

**soft-depth（影1種＋レイヤーの重なり）の実装例:**
```css
.panel {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-line);
}
.layered { position: relative; }
.layered::before {
  content: "";
  position: absolute;
  inset: 14px -10px -10px 14px;   /* 背後に紙が1枚ずれて重なっているイメージ */
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  z-index: -1;
}
```

**rich motion（役割差＋階段ディレイ）の実装例:**
```css
.reveal {
  opacity: 0;
  transition: opacity var(--r-dur, 0.6s) cubic-bezier(0.16,1,0.3,1) var(--r-delay, 0s),
              transform var(--r-dur, 0.6s) cubic-bezier(0.16,1,0.3,1) var(--r-delay, 0s);
}
.reveal.visible { opacity: 1; transform: none !important; }
.reveal-left  { transform: translateX(-36px); --r-dur: 0.5s; }  /* 脇役: 短く速く */
.reveal-right { transform: translateX(36px);  --r-dur: 0.5s; }
.reveal-figure{ transform: translateY(14px) scale(0.98); --r-dur: 0.8s; } /* 主役: 長くゆっくり */
```
```html
<!-- 実績数字に階段ディレイをインラインで付与 -->
<div class="stat reveal reveal-num" style="--r-delay:0s">…</div>
<div class="stat reveal reveal-num" style="--r-delay:0.09s">…</div>
<div class="stat reveal reveal-num" style="--r-delay:0.18s">…</div>
```
```html
<!-- 事業領域1行分：テキストと図版の両方にreveal系クラスを付ける -->
<div class="biz-item">
  <div class="biz-copy reveal reveal-left">…</div>
  <div class="biz-fig panel reveal reveal-right">…</div>
</div>
```
```js
// IntersectionObserver で .visible を付与。prefers-reduced-motion: reduce では即時表示に切り替える
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) { document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible')); }
```