UI Skillbook
2

SIGMA（シグマ） DESIGN.md

Japan

SIGMA（https://www.sigma-global.com/jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

Raw DESIGN.md

At a glance

Group
Japan
Main color
#fefefdBlack and white design systems
Fonts
Sigma SansSigma Serif headSigma SerifNoto Serif JP

Colors in this file

  • #333333

    Brand Dark

  • #fefefd

    独自のカスタムセリフ書体「Sigma Serif」

  • #ffffff

    Text on Dark

  • #cccccc

    Border Light

SIGMA（https://www.sigma-global.com/jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

1. Visual Theme & Atmosphere

  • デザイン方針: 会津（福島）で一貫生産を行うカメラ・レンズメーカー。独自のカスタムセリフ書体「Sigma Serif」 を全面的に使用し、光学機器メーカーとしての精密さとクラフツマンシップをタイポグラフィで表現。テックカンパニーでありながら serif-first のアプローチを取る希少な例。ウォームホワイト背景（#fefefd）と密度の高いエディトリアルレイアウトで、製品カタログと読み物を融合
  • 密度: エディトリアル型。大型のヒーローセクション（88px ディスプレイ）と製品カード、読み物記事を組み合わせた雑誌的レイアウト。本文は適度な密度で、技術的な情報も読みやすく伝える
  • キーワード: カスタムセリフ、Made in Aizu、セリフファースト、エディトリアル、精密工学、ウォームホワイト
  • 特徴: 「Sigma Serif」「Sigma Serif head」「Sigma Sans」 の3つのカスタムフォントを持つ独自タイポグラフィシステム。見出しには「Sigma Serif head」（ネガティブ letter-spacing -1.32px で密に詰める）、本文には「Sigma Serif」、ナビゲーション・UIテキストには「Sigma Sans」を使い分け。フォールバックは Noto Serif JP / Noto Sans JP。border-radius 0px で直線的、影なしのフラットデザイン

2. Color Palette & Roles

Primary（ブランドカラー）

SIGMA のカラーパレットは極めて抑制的。ブランドカラーは特定の色ではなく、ダークグレーとウォームホワイトのコントラストで精密さを表現。

  • Brand Dark (#333333): CTA ボタン背景・フッター・ダークセクション背景（rgb 51, 51, 51）
  • Text Primary (#333333): 本文テキスト（見出し・本文共通）

Text & Neutral

  • Text Primary (#333333): 本文・見出しテキスト（rgb 51, 51, 51）
  • Text on Dark (#ffffff): ダークセクション上のテキスト
  • Border Light (#cccccc): 製品カードのセパレータ・ボーダー（rgb 204, 204, 204）— レンズ一覧ページで多用

Surface

  • Surface Warm White (#fefefd): 標準背景（rgb 254, 254, 253）— 純白ではないウォームホワイト
  • Surface Dark (#333333): ダークセクション・フッター背景
  • Surface Overlay (rgba(0,0,0,0.6)): モーダル・オーバーレイ
  • Surface Frosted (rgba(253,253,252,0.9)): ヘッダー（スクロール時の半透明背景）

3. Typography Rules

3.1 和文フォント

SIGMA はカスタム Web フォント + Noto ファミリーのフォールバックの構成。

  • Sigma Serif / Sigma Serif head: 本文・見出し用のカスタムセリフ書体。SIGMA が独自に開発・ホスティング
  • Noto Serif JP: Sigma Serif のフォールバック和文セリフ
  • Noto Sans JP: Sigma Sans のフォールバック和文ゴシック

3.2 欧文フォント

  • Sigma Serif head: ディスプレイ・大見出し用。ネガティブ letter-spacing で密に詰める
  • Sigma Serif: 本文・中見出し用セリフ
  • Sigma Sans: ナビゲーション・UI テキスト用サンセリフ

3.3 font-family 指定

css/* ディスプレイ・大見出し（Sigma Serif head） */
font-family: "Sigma Serif head", "Sigma Serif", "Noto Serif JP", sans-serif;

/* 本文・中見出し（Sigma Serif） */
font-family: "Sigma Serif", "Noto Serif JP", serif;

/* ナビゲーション・UI テキスト（Sigma Sans） */
font-family: "Sigma Sans", "Noto Sans JP", sans-serif;

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

  • カスタムフォントが読み込まれない環境では Noto ファミリーで代替
  • Sigma Serif head のフォールバック先に Sigma Serif を挟み、段階的にフォールバック
  • ディスプレイ用フォントスタックの generic family が sans-serif なのは実サイトの設定に準拠（serif の可能性もあるが実測値を尊重）

preview.html 向け代替: Sigma Serif はドメインライセンスのカスタムフォントのため、preview.html では Noto Serif JP（Google Fonts）で代替する

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

RoleFontSizeWeightLine HeightLetter Spacing備考
Display (hero)Sigma Serif head88px5001.5 (132px)-0.015em (-1.32px)"the bf camera" 等。ネガティブスペーシング
Display (sub)Sigma Serif head84px5001.5 (125px)-0.015emレスポンシブ縮小版
Heading 1 (section)Sigma Serif head48px5001.5 (72px)-0.015em"本質に宿る美しさ"
Heading 2 (card)Sigma Serif28px4001.5 (42px)0.005em製品名・記事タイトル
Heading 3 (label)Sigma Serif15.2px5001.5 (22.8px)0.005em"NEW PRODUCT" 等
BodySigma Serif15.2px5001.7 (25.84px)0.005em本文
NavSigma Sans13px4001.25 (16.25px)0.02emナビゲーション
Nav ENSigma Sans13.5px4001.25 (16.875px)0.02em英文ナビ "Made in Aizu" 等
UI SmallNoto Sans JP13px5001.54 (20px)0.01emフッターテキスト

3.5 行間・字間

  • 本文の行間 (line-height): 1.7（15.2px / 25.84px）
  • 見出しの行間: 1.25〜1.5（ディスプレイ・セクション見出し）
  • ディスプレイの字間 (letter-spacing): -0.015em（ネガティブスペーシング）— 大きな文字を密に詰めて力強い印象
  • 本文の字間: 0.005em（ほぼニュートラル）
  • ナビの字間: 0.02em

ガイドライン:

  • ディスプレイサイズ（48px 以上）ではネガティブ letter-spacing を使用し、密度と迫力を出す
  • 本文サイズではほぼニュートラルな letter-spacing で可読性を優先
  • weight 500 を標準とし（通常の 400 より少し太め）、精密さと存在感を両立

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

  • font-feature-settings: normal — カスタムフォント自体にカーニング情報が組み込まれていると推定

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（ダークグレー・角丸なし）

  • Background: #333333
  • Text: #ffffff
  • Padding: 12px 16px
  • Border Radius: 0px
  • Font: Sigma Sans / Noto Sans JP, 13px, weight 500
  • Border: なし

Links

  • Color: #333333（本文と同色）
  • Decoration: underline（hover 時）
  • Font: コンテキストに応じて Sigma Serif または Sigma Sans

Cards（製品）

  • Background: #fefefd（ウォームホワイト）
  • Border: なし（またはセパレータとして #cccccc）
  • Border Radius: 0px
  • Shadow: なし

Inputs

  • Background: #fefefd
  • Border: 1px solid #cccccc
  • Border Radius: 0px
  • Font: Sigma Sans, 13px

5. Layout Principles

Spacing Scale

TokenValue
XS8px
S16px
M24px
L40px
XL64px
XXL120px

Container

  • Max Width: 約 1280px
  • Padding (horizontal): 24〜40px

Grid

  • Columns: 1〜3（製品一覧）
  • Gutter: 24px

6. Depth & Elevation

LevelShadow用途
0noneすべての通常要素
Overlay背景 rgba(0,0,0,0.6)モーダル・オーバーレイ
Header背景 rgba(253,253,252,0.9)スクロール時のヘッダー（backdrop-filter 使用）

SIGMA はフラットデザインを採用。影ではなくコンテンツの密度とタイポグラフィで階層を表現。

7. Do's and Don'ts

Do（推奨）

  • ディスプレイサイズ（48px 以上）の見出しにはネガティブ letter-spacing（-0.015em）を使用する
  • 本文は Sigma Serif（またはフォールバック Noto Serif JP）の weight 500 で統一する
  • ナビ・UI テキストには Sigma Sans（またはフォールバック Noto Sans JP）を使い分ける
  • 背景色はウォームホワイト #fefefd を使用する（純白 #ffffff ではない）
  • border-radius は 0px を維持する
  • テキストカラーは #333333 で統一する

Don't（禁止）

  • 純白 #ffffff を背景に使用しない（#fefefd を使用）
  • ディスプレイ見出しに正の letter-spacing を使用しない（密に詰めるのが SIGMA のスタイル）
  • セリフ体の代わりにサンセリフを本文・見出しに使用しない（ナビ・UI テキストのみサンセリフ）
  • weight 300 や 700 を使用しない（400〜500 の範囲に収める）
  • border-radius や box-shadow を追加しない
  • アクセントカラーを導入しない（モノトーンを維持）

8. Responsive Behavior

Breakpoints

NameWidth説明
Mobile≤ 767pxモバイルレイアウト
Tablet≤ 1023pxタブレットレイアウト
Desktop> 1023pxデスクトップレイアウト

タッチターゲット

  • ナビゲーション: padding 8〜16px で十分なタッチ領域
  • ボタン: padding 12px 16px

フォントサイズの調整

  • ディスプレイは 88px → 48px 程度に縮小（レスポンシブ）
  • 本文 15.2px はほぼ維持
  • ナビ 13px は維持

9. Agent Prompt Guide

クイックリファレンス

Text Color: #333333
Background: #fefefd (warm white)
Dark Section BG: #333333
Border: #cccccc
Heading Font: "Noto Serif JP", serif (Sigma Serif 代替)
Body Font: "Noto Serif JP", serif
Nav Font: "Noto Sans JP", sans-serif
Display Size: 88px / Weight 500 / Letter Spacing -0.015em
Body Size: 15.2px / Weight 500 / Line Height 1.7
Border Radius: 0px (everywhere)
Button: #333333 bg, white text, 12px 16px padding

プロンプト例

SIGMA のデザインシステムに従って、製品一覧ページを作成してください。
- 見出し: Noto Serif JP, 48px, weight 500, letter-spacing -0.015em
- 本文: Noto Serif JP, 15.2px, weight 500, line-height 1.7
- ナビ・UI: Noto Sans JP, 13px, weight 400
- 背景: ウォームホワイト #fefefd
- テキストカラー: #333333
- ボタン: #333333 背景、角丸なし
- 影なしのフラットデザイン
- 全体的にセリフ体ベースの落ち着いたエディトリアルトーン

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/sigma.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "sigma" })

Related Design.md files

DECORTE

Japan · Noto Serif JP

DECORTE（https://www.decorte.com/）のデザイン仕様書。 KOSE の最高峰ラグジュアリーコスメティクスブランド。実サイトの computed style に基づく。

SUWADA（諏訪田製作所）

Japan · Source Sans Pro

SUWADA（諏訪田製作所）のデザイン仕様書。

ライゾマティクス（Rhizomatiks）

Japan · Noto Serif JP

ライゾマティクス（Rhizomatiks）のデザイン仕様書。

ファクトリエ（Factelier）

Japan · Avenir

ファクトリエ（https://factelier.com/）のデザイン仕様書。 「世界に誇る、ファクトリーブランド」を掲げる日本製アパレルの D2C。工場と直接つながる販売モデルを取る。 Avenir が和文より先頭。Avenir, 游ゴシック体, YuGothic, … で、欧文グリフを Avenir に取らせてから和文に渡す body の font-size が 12px。本文は 14px、見出しは 18px。全体に小さく、詰まっ…

IPSA（イプサ）

Japan · MFW-HiraKakuProN-W3

IPSA（https://www.ipsa.co.jp/）のデザイン仕様書。 資生堂グループのパーソナライズドスキンケアブランド。肌診断に基づく "ME" ローションのカスタマイズシステムで知られる。 ブランド哲学: 「人の美しさは、生命力がつくりだすもの」。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

SOU・SOU（そうそう）

Japan · Noto Serif JP

SOU・SOU（https://www.sousou.co.jp/）公式オンラインショップのデザイン仕様書。 「日本の伝統と現代の融合」をコンセプトに、地下足袋・テキスタイル・和装を現代的なグラフィックで再解釈する京都発のテキスタイルブランド。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

All Design.md filesBrowse by font