環伸精機 Bearing Lab

上の提案をもとに AI が起こした詳細ブリーフです。これがそのままコードを書く AI への入力になりました。原文のまま載せています。

# 環伸精機 Bearing Lab 強化版ブリーフ v1

設計リード: 製造業(精密ベアリング)コーポレートを「R&Dラボの公開実験端末」として作るインタラクティブLP。読者は機械設計者と開発購買。K95 から盗むのは「抽象3Dを一点だけ常駐させる抑制」で、それを装飾ではなく操作に応答する工学モデル(断面・荷重・寿命)に転用する。

ダイヤル: `DESIGN_VARIANCE: 7` / `MOTION_INTENSITY: 7` / `VISUAL_DENSITY: 6`
(理由: レイアウトは端末的で非対称だがカオスではない=7。モーションは操作応答が主役で常時駆動=7。数値・曲線・公差表が主コンテンツなので通常LPより高密度=6)

---

## ブランド軸

- **名前**: 環伸精機株式会社(Kanshin Seiki)。サイト名は「Kanshin Bearing Lab」
- **業種**: 精密ベアリングの設計・製造(深溝玉軸受・アンギュラ玉軸受・薄肉/中空特殊軸受)。高精度クラス(P4/P2 相当)の小ロット特注が主戦場
- **ペルソナ**: ロボット・工作機械・医療機器・半導体装置メーカーの機械設計者と開発購買。カタログの謳い文句ではなく**計算根拠と試験データ**で選定したい層。年齢 28〜50、CAD と寿命計算式を日常的に触る
- **価格帯**: 高単価。標準品の 1.5〜4 倍、試作 1 個から受ける。安さでは戦わない
- **ブランド人格**(5語): 実証的 / 寡黙 / 精密 / 開放的(データを隠さない) / 工学的に誠実
- **Why-This-Brand**: ベアリングは「壊れて初めて気づかれる部品」であり、選定は多くの場合カタログ表の孫引きで済まされている。環伸精機は、選定の根拠になる寿命計算・接触応力・公差の関係を**顧客が自分の手で触って確かめられる公開実験端末**としてコーポレートサイトを設計する。データを開くことが、下請けではなく「共同開発者」として指名される理由になる。サイト自体が「この会社は計算で嘘をつかない」という証明になっていること、それがこのブランドの存在理由

## 差別化軸

同業(ベアリング・精密部品メーカー)の凡庸な見せ方:

1. **青基調+工場外観写真+「技術力で社会に貢献」型スローガン**。どの会社か入れ替えても成立する
2. **製品はカタログ PDF の羅列**。スペックは静的な表で、読者の使用条件との関係が一切わからない
3. **沿革・社長挨拶・ISO 取得が最上段**。読者(設計者)が知りたい精度・納期・試験体制が最下層に沈む

この案の踏み外し方:

- 製品を「読む対象」ではなく**「操作する実験」**として出す。荷重・回転数・温度のスライダーを動かすと、断面図の接触応力と L10 寿命曲線がリアルタイムに応答する。スペック表が操作パネルになる
- コーポレートサイトなのに UI の作法が**計測器**。罫線・tabular 数値・単位表記の徹底で「会社案内」ではなく「試験成績書」の顔をさせる
- 3D は K95 式に**一点だけ**。ヒーローに常駐するベアリング断面リング(Three.js)以外に 3D を増やさない。重さで詰まないこと自体を精密さの表現にする

## トーン&マナー

- **人称**: 一人称「私たち」は最小限(会社セクションのみ)。基本の主語は**データと試験**(「この条件で、L10 は 21,400 時間」)。二人称「あなた」は避け、「あなたの機構」「その軸」のように読者の設計対象を指す
- **敬体/常体**: 見出しは常体・体言止め・断定(「回転を、実証する」)。本文は敬体だが 1 文 40 字以内の短文
- **抽象度**: 低。比喩より数値。「高い信頼性」ではなく「振動値 0.8 mm/s 以下」
- **リズム**: 短文+数値+単位。読点は少なく、句点で切る。段落は 2〜3 文まで
- **避ける言葉**: ソリューション / 高品質 / 安心・信頼 / 最先端 / 技術力 / 貢献 / 想いをカタチに / ものづくりの心 / シームレス。空語と情緒語を全面禁止。数値は必ず条件とセットで出す(条件なしの「精度 ±1μm」は禁止)

## デザイン原則

- **配色**(ライト単一テーマで固定。計測器の白が主役というブランド判断であり、ダーク反転は作らない。テーマロック):
  - ベース: 工業白 `#F4F5F2` 系オフホワイト(純白 #FFFFFF 禁止)。パネル面はわずかに沈む `#ECEEEA` 系
  - インク: `#17191B` 系オフブラック(純黒禁止)
  - **警告橙(唯一のアクセント)**: 彩度 75% 以下の橙。用途を「操作中の値・閾値超過・主 CTA」に限定し、装飾に使わない。ページ全体でこの 1 色をロック
  - **摩耗青**: アクセントではなく**データの意味色**(寿命曲線の系列、断面の応力グラデ低域)。UI 装飾には一切使わない。橙=人間の操作、青=機械の応答、という色の文法を全ページで守る
- **タイポ体系**(grotesk UI 主導+高密度 data mono):
  - 欧文見出し/UI: grotesk 1 種(Geist または Archivo。Inter は使わない)
  - 和文: IBM Plex Sans JP(grotesk と骨格が合う)
  - 数値: mono 1 種(Geist Mono または IBM Plex Mono)。**画面上のすべての数値を mono・tabular で組み、桁ブレを起こさない**。単位は数値の 60% サイズで後置
  - セリフは使わない。強調は同ファミリーの weight 差のみ
- **グリッド/レイアウト**: 12col、`max-w-[1400px]`。1px 罫線で画面を計器パネルに分割する(カード・影は原則使わない)。ヒーローは**左 4col 操作パネル+右 8col 断面ビュー**の非対称スプリット。セクション間余白は端末らしく詰め(py-16 前後)、ヒーローの 3D 領域だけ大きく抜いて対比を作る。モバイルは操作パネルがビューの下に回る単カラム
- **モーション言語**: **操作応答が主、スクロール演出が従**。スライダー入力から描画更新まで 100ms 以内、スプリング補間(stiffness 100 / damping 20 目安)。寿命曲線は再描画ではなく**モーフ**で追従。exploded view(内輪・外輪・保持器・転動体の分解)はクリックまたはスクラブで 1 回だけ。装飾目的の無限ループは 0。`prefers-reduced-motion` では 3D 自転と曲線モーフを止め、値の即時反映のみ残す
- **写真/動画の役割**: 従。部品の標本写真(白背景・薄影・真上または真横)を工程セクションに 1〜2 点だけ。工場外観・握手・作業風景の多用は禁止。ヒーローの視覚は 3D 断面リングが担うため写真を置かない

## ページ構成

1. **Hero: 公開実験端末**(主張: 触れば、精度はわかる)
   - 3D ベアリング断面リング常駐(一点主義)/ 荷重・回転数・温度の 3 スライダー / L10 寿命の大型 mono 数値 / 見出し+サブコピー+主 CTA 1 つ。テキスト要素は 4 つ以内
2. **この端末の読み方**(主張: 表示はすべて ISO 281 の実計算)
   - 計算式の明示(L10 = (C/P)³ × 10⁶/60n)/ 入力と出力の対応図 / 「シミュレーション値」の明記。飾りの数値を置かない根拠セクション
3. **性能曲線**(主張: 条件が変われば、寿命は桁で変わる)
   - 荷重×寿命の曲線(操作連動)/ 代表 3 条件のプリセットボタン / 曲線は摩耗青、現在値マーカーは警告橙
4. **精度・公差**(主張: P4 は言葉ではなく数値である)
   - 精度クラス比較(内径公差・振れ、tabular mono)/ 表は罫線を間引きグループ化(全行 border 禁止)/ 測定環境の記載(20±0.5℃)
5. **製品ライン**(主張: 特注は 1 個から図面で受ける)
   - 型番グリッド(hover で断面サムネイルが差し替わる)/ 内径レンジ・精度クラス・用途タグ / 「図面を送る」導線
6. **工程・品質**(主張: 精度は工程の温度管理でできている)
   - 研削→超仕上げ→検査のフロー / 標本写真 1〜2 点 / クリーンルームクラスと検査機器名
7. **会社+コンタクト**(主張: 試験データごと引き渡す)
   - 会社概要は 5 行以内 / 主 CTA「試験依頼・図面相談」1 種のみ(CTA 意図の重複禁止。全ページ同一ラベル)/ 所在地は 1 行

レイアウトファミリーは 1〜7 で「非対称スプリット/縦積み解説/全幅チャート/密テーブル/グリッド/横フロー/縦積み CTA」と全て変える。eyebrow は最大 2 箇所(Hero と製品ライン)まで。

## コピー方針

**Hero 見出し草案**(2 行以内・断定):

1. 「回転を、実証する。」
2. 「その荷重で、何時間回るか。」
3. 「精度は、触って確かめられる。」
4. 「カタログより、実験を。」

推し: 案 2(読者の設計条件を主語にし、端末の操作をそのまま誘発する)。サブコピー例: 「荷重・回転数・温度を動かすと、寿命計算が応答します。表示はすべて ISO 281 準拠の実計算です。」(20 語以内・2 文)

**各セクションの言葉のトーン**:

- 読み方/性能曲線: 試験成績書の文体。主語はデータ、述語は断定
- 精度・公差: 数値+条件のみ。形容詞をゼロにする
- 製品ライン: 名詞句中心(「薄肉・中空。内径 6〜120mm。」)
- 工程・品質: 工程名+管理値。物語らない
- 会社/CTA: ここだけ「私たち」を解禁し、1 段落だけ人の声にする(「計算で嘘をつかないこと。それだけを 40 年続けています。」)

**数値の規律**: 画面上の数値は「実計算値(スライダー連動)」か「架空カタログとして一貫した値」のどちらかに限定。根拠なく雰囲気で置く精密風の数字は禁止

## クラフトの肝

1. **スライダーの機械的クリック感**: つまみにディテント(代表値でわずかに吸着+触覚的な 1px スナップ)。値表示は tabular mono で桁が 1px も動かない。ここが「計測器」か「ただの Web フォーム」かの分水嶺
2. **断面図の応答速度と物理の正しさ**: 荷重で接触楕円と応力グラデ(青系)が変形し、閾値超過で橙が「発火」する。応答 100ms 以内。橙は通常時ゼロ、超過時のみ、という抑制が警告色を本物にする
3. **寿命曲線のモーフ**: 曲線は消えて描き直さず、パスが連続変形して追従する。現在値マーカー(橙)がスプリングで滑る。1 本のモーフが下手な演出 10 個に勝つ
4. **色の文法の貫徹**: 橙=人間の操作、青=機械の応答、灰=構造。この 3 役をフッターまで一度も破らない。CTA も橙、hover はわずかに沈む(scale 0.98)だけで発光させない
5. **余白の対比**: 全体は端末らしく詰めるが、ヒーローの 3D リング周りだけ大きく抜く。密→疎→密のリズムが「禁欲的な構成に 3D 一点」という K95 の骨法の翻訳になる

## ロゴ

- **モチーフ**: 「環」の字義そのもの=**内輪と外輪、二重の同心円環と、その間に挟まれる転動体**。回転を止めた静的な幾何(正円・等幅の線)で構成し、動きはサイト側の 3D に任せる。幾何/線主体、面のベタは使わない。「二つの環の間にだけ荷重が通る」という構造的事実を図形の意味づけにする
- **言葉の扱い**: 欧文主体「KANSHIN」(grotesk、サイトの UI 書体と同族)+和文「環伸精機」を従とする二段構え。サイト文脈では「Bearing Lab」をロックアップ外のラベルとして併置(タグラインではなく施設名の扱い)。略称は「KS」等のモノグラムには**しない**(既視感が強い)
- **避けたい既視感**: ベアリング写真そのままのドーナツ形 / 歯車 / 無限ループ(∞)/ 地球儀・軌道リング / スウッシュ系の回転矢印。いずれも「回転機械」の一次連想で、精密・実証のブランド人格を運ばない
- **注**: シンボル有無・線幅・字間・サイズ比などの「作り」はここで決め打ちしない。次工程 Step 1 で参考サイトの型紙(ref-structure.json の logo)に合わせて確定する