Spiber DESIGN.md

Spiber Inc.（https://spiber.inc/）のデザイン仕様書。 実サイトの computed style および CSS Custom Properties に基づく。抽出日: 2026-06-07。

1. Visual Theme & Atmosphere

• デザイン方針: 研究機関とファッションブランドの中間に位置する、知的で洗練されたコーポレートサイト。Brewed Protein（構造タンパク質素材）を開発するバイオテック・ベンチャーとして、自然科学の真摯さとプロダクトの美しさを両立するデザイン
• 密度: ゆったりとしたホワイトスペース。セクション間の余白が大きく、1画面に情報を詰め込まない。ファーストビューはキャッチコピー＋フルブリード画像の構成
• キーワード: インテレクチュアル、サステナブル、モノトーン、静謐、タイポグラフィドリブン
• 特徴: 自社カスタムウェブフォント "Spiber" をブランドの軸とし、#121212（ほぼ黒）と白の2色構成で世界観を表現。font-feature-settings: "palt" をグローバルに適用し、和欧混植の組版密度を統一的に引き締めている

2. Color Palette & Roles

Primary（ブランドカラー）

• Primary (#121212): ブランドの基調色。CTAボタン塗り、フッター背景、テキストに使用。純黒 #000000 ではなく、わずかに柔らかいほぼ黒

Neutral（ニュートラル）

• Text Primary (#121212): 本文テキスト
• Text Body (#000000): body 直下のデフォルト文字色（実測）
• Text Secondary (#a1a1a1): ラベル、補足テキスト、非アクティブな言語切替
• Background (#ffffff): ページ背景、ナビゲーション
• Surface Light (#f2f2f2): コンテンツセクションの交互背景
• Surface Alt (#f3f3f3): サブナビゲーションエリア
• Surface Cookie (#e0dddb): クッキーバー背景（暖みのあるグレー）
• Border (#121212): ボタン枠線、セクション区切り
• Footer Background (#121212): フッター背景
• Footer Text Primary (#ffffff): フッターのテキスト
• Footer Text Secondary (rgba(224, 221, 219, 0.4)): フッターの補助テキスト

CSS Custom Properties（shadcn/ui パターン）

• --primary: 0 0% 9% (≈ #171717)
• --background: 0 0% 100%
• --foreground: 0 0% 3.9%
• --radius: 0.5rem
• --bodyFont: 0, 0%, 7% (≈ #121212)
• --greyFont: 30, 7%, 87%
• --bgGreyLight: 0, 0%, 95% (≈ #f2f2f2)
• --bgGreyDark: 15, 5%, 24%

3. Typography Rules

3.1 和文フォント

ゴシック体（フォールバック）:

• 游ゴシック体 Pr6N M（"A+EqpB-游ゴシック体 Pr6N M" として独自マッピング）
• 游ゴシック / YuGothic
• YuGoPr6N
• YuGothicStd-R（クッキーバー領域で追加）

注意: 見出し・本文の第一候補は自社カスタムウェブフォント "Spiber"。游ゴシック系はそのフォールバック。"A+EqpB-游ゴシック体 Pr6N M" は Adobe Fonts / TypeSquare 等で独自ビルドされた游ゴシック Pr6N Medium の別名と推測される

3.2 欧文フォント

• カスタムフォント: Spiber（ジオメトリック・サンセリフ系の自社書体）
• システムフォールバック: ui-sans-serif, system-ui, sans-serif
• 絵文字対応: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

preview.html 用の代替: Spiber フォントはドメインライセンスのため外部では表示不可。Google Fonts の Inter がジオメトリック・サンセリフとして最も近い代替

3.3 font-family 指定

css/* 見出し・本文（メイン） */
font-family: Spiber, "A+EqpB-游ゴシック体 Pr6N M", 游ゴシック, YuGothic,
  YuGoPr6N, ui-sans-serif, system-ui, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

/* ナビゲーション・UI */
font-family: Spiber, ui-sans-serif, system-ui, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

/* クッキーバー・一部 body 要素 */
font-family: Spiber, "A+EqpB-游ゴシック体 Pr6N M", 游ゴシック, YuGothic,
  YuGoPr6N, YuGothicStd-R, ui-sans-serif, system-ui, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

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

• 自社カスタムフォント Spiber を最優先に指定
• 和文フォールバックは游ゴシック Pr6N M の独自マッピング名を経由して游ゴシック系に落ちる
• ナビゲーション・UI 要素では和文フォールバックを省略し、system-ui に直接落とす（欧文のみの想定）
• 最後に絵文字フォントを追加

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

以下は DevTools の computed style による実測値（2026-06-07 取得）

3.5 行間・字間

行間 (line-height) — 実測値:

• body グローバル: 24px (16px × 1.5)
• 記事本文 (p): 24px (16px × 1.5) — 業務的な記述のためコンパクト
• ミッション本文: 36px (24px × 1.5) — 大きめの文字で統一的に 1.5
• Display (h1): 66px (60px × 1.1) — 大文字見出しは詰まった行間
• Heading 2: 57.6px (48px × 1.2) — やや詰まった行間
• Nav: line-height: 2.5（250%） — タッチターゲットの確保

字間 (letter-spacing) — 実測値:

• Display (h1): -3% (= -0.03em) — トラッキングを詰める（英語見出し向け）
• Heading 2: -3% (= -0.03em) — 同上
• Heading 3: -2% (= -0.02em) — やや緩い詰め
• 本文 (p): normal
• ナビゲーション: 1.1px (= 0.1em) — 大きく広げる（小文字 uppercase 向け）

ガイドライン:

• 見出しはネガティブ・トラッキング（-0.02em 〜 -0.03em）でタイトに詰める。英語ベースの欧文組版思想
• ナビゲーションは逆にポジティブ・トラッキング（0.1em）で広げ、大文字・小文字の区別を強調
• 本文は normal のまま。palt がグローバル適用されているため、和文はプロポーショナル字詰めで自然に詰まる

3.6 禁則処理・改行ルール

css/* 推奨設定 */
overflow-wrap: break-word;

• 長い URL や英単語の折り返しに対応
• 日本語テキストは標準的な禁則処理に従う

3.7 OpenType 機能

css/* body にグローバル適用 — 実測確認済 */
font-feature-settings: "palt";

• palt: 和文のプロポーショナル字詰め。body 要素に適用されており、全要素に継承される
• Spiber のサイトでは見出し専用ではなくグローバル適用。カスタムフォント "Spiber" 自体がプロポーショナル字詰めを前提に設計されていると推測される
• kern は Spiber フォント内蔵のカーニングテーブルに依存

3.8 縦書き

• 該当なし。Spiber は横書きのみ

4. Component Stylings

Buttons

Primary（Contact Us）

• Background: #121212
• Text: #ffffff
• Border: 1px solid #121212
• Padding: 8px 30px
• Border Radius: 50px（pill 形状）
• Font Size: 13px

Secondary（Careers）

• Background: transparent
• Text: #121212
• Border: 1px solid #121212
• Padding: 8px 30px
• Border Radius: 50px（pill 形状）

Ghost on Dark（About us / Contact us — ダーク背景上）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 10px 30px
• Border Radius: 50px（pill 形状）

Wide CTA（View all projects →）

• Background: transparent
• Text: #121212
• Border: 1px solid #121212
• Padding: 10px 90px
• Border Radius: 50px（pill 形状）

Text Link（Learn more → / Read more →）

• Background: なし
• Text: #121212
• Border: なし
• Border Radius: 6px
• Font Size: 13px
• 矢印（→）付きのインラインリンク形式

Cookie Bar Button

• Background: transparent / #121212
• Text: #121212 / #ffffff
• Border: 2px solid #121212
• Padding: 8px 27px
• Border Radius: 2px（角張ったスタイル — 他のボタンと異なる）

Navigation

• Background: #ffffff（透過グラデーションの場合あり）
• テキスト: 11px / bold / uppercase / small-caps / letter-spacing: 0.1em
• 言語切替: active #121212 / inactive #a1a1a1

Footer

• Background: #121212
• Text Primary: #ffffff
• Text Secondary: rgba(224, 221, 219, 0.4)

5. Layout Principles

Spacing Scale

• サイト全体でゆったりとした余白を採用。セクション間は 80px〜120px 程度のマージン
• 見出しとコンテンツ間は 24px〜40px
• カード内パディングは 24px〜32px

Container

• Max Width: 約 1200px（コンテンツ幅）
• Padding (horizontal): 24px〜40px

Grid

• ホーム: フルブリード画像 + テキストオーバーレイの構成が中心
• プロジェクト一覧: 2〜3カラムのカードグリッド
• 会社概要: シングルカラムの情報レイアウト

Section Pattern

• ライトグレー (#f2f2f2) と白 (#ffffff) のセクションを交互に配置し、視覚的なリズムを作る

6. Depth & Elevation

• フラットデザイン志向: ドロップシャドウやエレベーションは極力排除。境界はセクション背景色の切り替え（白 / #f2f2f2）で表現する
• --radius: 0.5rem（8px）がCSS変数で定義されているが、ボタンは pill（50px）で独自のスタイル

7. Do's and Don'ts

Do（推奨）

• テキスト色は #121212 を基調とし、純粋な #000000 とのわずかな差を保つ
• ボタンはすべて pill 形状（border-radius: 50px）にする — Spiber のアイデンティティ
• font-feature-settings: "palt" をグローバルに適用する（Spiber フォント前提の設計）
• 見出しの letter-spacing はマイナス値（-0.02em 〜 -0.03em）でタイトに詰める
• ナビゲーションは 11px / uppercase / small-caps / letter-spacing: 0.1em の組み合わせで統一する
• セクション背景は白と #f2f2f2 の交互配置でリズムを作る
• ダーク背景上のボタンは ghost スタイル（白枠・白文字・透明背景）を使う
• テキストリンクの CTA には矢印（→）を付ける

Don't（禁止）

• pill 以外の角丸（4px, 8px 等）をメインの CTA に使わない（クッキーバーの 2px は例外的な扱い）
• ブランドカラーとして彩度のある色を使わない。Spiber のパレットは完全にモノトーン（黒・白・グレー）
• ナビゲーションのテキストを通常の大文字小文字混在にしない（uppercase + small-caps が必須）
• 本文のフォントサイズを 16px 未満にしない
• 見出しに positive な letter-spacing を使わない（見出しは詰める方向）
• シャドウを多用しない。セクション分けは背景色の切り替えで表現する
• "Spiber" フォントの代わりに Noto Sans JP を指定しない。代替が必要な場合は Inter（Google Fonts）を使う

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px
• ナビゲーションリンクは line-height: 2.5（= 27.5px 相当）で確保

フォントサイズの調整

• モバイルでは Display (h1) を 32px〜36px 程度に縮小
• Heading 2 を 28px〜32px 程度に縮小
• 本文は 16px を維持
• ナビゲーションの 11px は共通

9. Agent Prompt Guide

クイックリファレンス

Brand Color: #121212（モノトーンパレット — ほぼ黒が唯一のブランドカラー）
Text Primary: #121212
Text Secondary: #a1a1a1
Background: #ffffff
Surface Light: #f2f2f2
Footer: bg #121212 / text #ffffff

Font (main): Spiber, "A+EqpB-游ゴシック体 Pr6N M", 游ゴシック, YuGothic,
  YuGoPr6N, ui-sans-serif, system-ui, sans-serif
Font (nav): Spiber, ui-sans-serif, system-ui, sans-serif
Font (preview substitute): Inter, 游ゴシック, YuGothic, sans-serif

Body: 16px / weight 400 / line-height: 1.5 / letter-spacing: normal
Display (h1): 60px / weight 500 / line-height: 1.1 / letter-spacing: -0.03em
Heading 2: 48px / weight 400 / line-height: 1.2 / letter-spacing: -0.03em
Nav: 11px / weight 700 / uppercase / small-caps / letter-spacing: 0.1em

OpenType: font-feature-settings: "palt" — グローバル適用
Buttons: pill (border-radius: 50px) — 全ボタン共通

プロンプト例

Spiber のデザインに従って、プロジェクト一覧ページを作成してください。
- フォント: Inter, 游ゴシック, YuGothic, sans-serif（Spiber フォントの代替）
- テキスト色: #121212
- セカンダリテキスト: #a1a1a1
- 背景: #ffffff と #f2f2f2 をセクション交互に使用
- ボタン: pill 形状（border-radius: 50px）、#121212 塗り / 白文字
- 見出し: letter-spacing: -0.03em でタイトに詰める
- ナビ: 11px / bold / uppercase / small-caps / letter-spacing: 0.1em
- font-feature-settings: "palt" をグローバルに適用
- シャドウは使わず、セクション背景色で区切る