bitFlyer（ビットフライヤー） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-17 / 対象: https://bitflyer.com/ja-jp/, /ja-jp/s/how-to-start

1. Visual Theme & Atmosphere

• デザイン方針: 数字を読ませるための設計。 青みを帯びた白（#fdfdff / #f5f8fd）の上に、等幅数字のティッカーと角丸カードを並べる。彩度の高い青 1 色を CTA に集中させる
• 密度: 非常に高い。 トップページの可視テキストは 759 要素（うち価格ティッカーが約 350）。字間を一切触らず、行間 1.00 で詰める
• キーワード: tnum、Nunito の数字、weight 600 が既定、青い白、ブルー ＆ オレンジ

このサイトの核心は 5 つある。

1. font-feature-settings: "tnum" が 366 要素に効いている。palt は 6 要素しかない。 日本語サイトとしては極めて珍しく、主役の OpenType 機能が「詰め」ではなく「等幅数字」。 価格が 1 秒ごとに更新されても桁がガタつかないための設計
2. 数字は和文書体で組まない。Nunito が 351 要素。 11,943,452 円 +1.36% といったティッカーの数値はすべて Nunito（600 が loaded）。本文の Noto Sans JP とは別の書体
3. font-weight の既定が 600。 実測 600 が 618/759 要素、400 はわずか 84 要素（注記と免責のみ）。日本語 UI の「普通」を Semi Bold に置いている
4. CSS 変数 150 個は、ほとんどが描画されていない。 own: 150 / platform: 0 だが、ruby emerald yellow orange red grey primary の 12 段パレット（計 84 色）のうち、この LP の可視要素に出てくるのは 5 色程度。しかも主 CTA の青は --primary-color-bg: #1980e5 ではなく実測 #0050d7 ——変数の値をそのまま実装値として書かないこと
5. トップページと下層ページは別のデザインシステム。 トップは "Noto Sans JP" 先頭・weight 600 既定・radius 12px・コンテナ 1170px。下層 /s/how-to-start は -apple-system 先頭・weight 400 既定・radius 4px・コンテナ 1080px。新規に組むならトップ側（新しい世代）に合わせる

2. Color Palette & Roles

Primary（ブランドカラー）

--primary-color-bg（#1980e5）は使われていない。 実装は一段濃く沈んだ #0050d7。150 個の変数は取引ツール（bitFlyer Lightning）と共有のトークンが LP にも配信されているだけで、この LP の実装値ではない。

値上がりが青、値下がりがオレンジ。 日本の株式慣行（赤＝上げ）ではなく、青＝プラス / オレンジ＝マイナス。--color-red-* --color-emerald-* のパレットは可視 0 要素で、赤と緑は使っていない。

Neutral（ニュートラル）

「白」が 3 段ある。 #fdfdff（body）→ #f5f8fd（セクション）→ rgba(255,255,255,0.42)（カード）。どれも青が混ざっている。純白 #ffffff はテキスト色としてしか出てこない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（既定）: Noto Sans JP。Web フォントで 400 / 500 / 600 / 700 が loaded
• font-weight: 300 と可変フォント（100 900）は unloaded。Light と可変軸を前提に組まないこと

3.2 欧文フォント

• 数字（ティッカー・価格・変動率）: Nunito（600 が loaded / 700 は unloaded）。可視 351 要素
• 実績の巨大数字: Poppins（600 が loaded）。可視 5 要素（No.1 95.7% 95.1%）
• 本文中の欧文: Roboto（400 が loaded）をスタックに持つが、実際は Noto Sans JP の欧文グリフが先に当たる
• 等幅: --font-family-mono: 'SF Mono','Roboto Mono',monospace（可視 0 要素）

3.3 font-family 指定

css/* 実際に描画されているスタック（可視 402 要素） */
font-family: "Noto Sans JP", -apple-system, "Segoe UI", Roboto, sans-serif;

/* 数字・価格・変動率（可視 351 要素） */
font-family: Nunito, sans-serif;

/* 実績の巨大数字（可視 5 要素） */
font-family: Poppins, sans-serif;

宣言と実装が食い違っている（重要）：

css/* 変数の宣言（body だけがこれを使う。可視 1 要素） */
--font-family-japanese:
  -apple-system, BlinkMacSystemFont, Roboto,
  'Hiragino Kaku Gothic Pro', 'Noto Sans JP', sans-serif;

変数では -apple-system が先頭で Noto Sans JP は 5 番目。だが実際の描画は Noto Sans JP が先頭。 body の 1 要素だけが変数のスタックを持ち、子要素はすべて Noto Sans JP 先頭のスタックで上書きされている。 body の font-family を見て「システムフォントのサイト」と判断してはいけない。実体は Noto Sans JP の Web フォントサイト。

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

• 和文 Web フォント優先。 Noto Sans JP を先頭に置く
• 数字だけ別書体に切り替える。 Nunito はヒラギノや Noto の数字より字幅が安定し、tnum と組み合わせて桁を揃えられる

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

line-height: 1.00 が 617/759 要素。 ティッカーとラベルとボタンがすべて 1.0。読ませる文章だけ 1.40〜1.95 に開くという、極端な二層構造。

3.5 行間・字間

• line-height: 1.00 が 617 要素（81%） ——数値・ラベル・ボタン
• 本文の行間: 1.75（body の 16px / 28px）。フッターのリンク列は 1.95（40 要素）
• 免責・長文注記: 1.85（12 要素）
• 見出し: 1.40（10 要素）/ カード見出し 1.35
• 字間は normal が 755/759 要素。 例外は 2 つだけ：
  • Poppins の巨大数字 -5.6px（-0.091em） ——欧文を強く詰める
  • 最短9分・口座開設無料 の 0.36px（0.024em）

ガイドライン:

• 日本語に letter-spacing を足さない。 このサイトは Noto Sans JP の素の字送りで組む
• 60px 級の欧文数字だけ -0.09em 前後で詰める。 和文には絶対に適用しない
• 数値・ラベル・ボタンは line-height: 1.00。高さは padding で作る

3.6 禁則処理・改行ルール

• 価格は tnum で桁を揃え、line-height: 1.00 で行の高さを固定する（更新のたびに行が動かない）
• word-break: break-all は使わない

3.7 OpenType 機能

このサイトの主役は palt ではなく tnum。

css/* 価格・数値を表示する要素すべてに */
font-feature-settings: "tnum";
font-family: Nunito, sans-serif;
line-height: 1.00;

数値が更新され続ける UI では tnum を必ず入れる。 入れないと 1 と 8 の字幅差で桁がずれて目がちらつく。日本語サイトで palt を足す前に、数字があるなら tnum を検討すること。

3.8 縦書き

該当なし（writing-mode: vertical-rl は 0 要素）。

4. Component Stylings

border-radius は 8 種。10px（117 要素・カード）と 990px（18 要素・ピル）が主役。

Buttons

Primary（主 CTA）

• Background: #0050d7 / Text: #ffffff
• Border: なし / Shadow: なし
• Border Radius: 12px
• Padding: 0 24px（上下 0 ——高さは height と line-height: 1.00 で作る）
• Font: Noto Sans JP / 15px（ヒーローは 18px）/ weight 700 / line-height 1.00

Header CTA（新規登録）

• Background: #0050d7 / Text: #ffffff
• Border Radius: 8px / Padding: 0 16px
• Font: 14px / weight 600

Lightning CTA（別ブランド）

• Background: #ff6400 / Text: #ffffff
• Border Radius: 12px / Padding: 0 24px / 15px / weight 700

Tag / Pill（機能について 料金について）

• Background: #eef4ff（#ebf1fc の版もあり）/ Text: #0050d7
• Border Radius: 990px
• Padding: 5px 10px / Font: 11px / weight 600

Chip（少額からスタート）

• Background: #eef4ff / Text: #111827
• Border Radius: 990px / Padding: 8px 14px / 13px / weight 500

Step Badge（STEP 1）

• Background: #ebf1fc / Text: #13161b
• Border Radius: 22.5px（円）/ Font: 14px / weight 600

下層ページの CTA（別世代・参考）

• Background: #ffffff / Text: #1077dd / Border Radius: 4px / Padding: 8px 32px / 14px / weight 700

Cards

Ticker Card（価格一覧）

• Background: rgba(255, 255, 255, 0.42)（半透明の白）
• Border Radius: 10px / Shadow: なし
• 中身: 銘柄名 13px/600、価格 Nunito 11px/600（tnum）、変動率 #0050d7 / #ff6400

Feature Card

• Background: rgba(255, 255, 255, 0.92) または rgba(255, 255, 255, 0.1)（暗い面の上）
• Border Radius: 15px / Shadow: なし

Service Card（bitFlyer かんたん積立）

• Border Radius: 28px
• Shadow: 0 4px 20px rgba(16, 42, 75, 0.06)

Press Card

• Border Radius: 6px
• Shadow: 0 1px 3px rgba(16, 42, 75, 0.06)

5. Layout Principles

Root Font Size

csshtml { font-size: 10px; }   /* 実測。rem 計算を 10 基準にする */
body { font-size: 16px; line-height: 28px; }  /* 1.75 */

html が 10px なので、変数の rem はすべて ×10 が px。 --spacing-4x: 1.6rem = 16px、--font-size-320: 3.2rem = 32px。

Spacing Scale（変数どおり。1rem = 10px）

実測の gap は 16px（16 要素）/ 9px（9 要素）/ 24px / 8px / 48px。

Font Size Scale（変数）

Line Height Scale（変数）

--line-height-125: 1.25 / -152: 1.52 / -153: 1.53 / -167: 1.67 / -171: 1.71 / -175: 1.75

Container

• Max Width: 1170px（実測 7 要素で最多）
• ワイド: 1280px（3 要素）/ 1920px（2 要素）/ 1638px
• 本文カラム: 620px（3 要素）
• 下層ページ: 1080px（別世代）

Motion

css--easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
--easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
--easing-custom:     cubic-bezier(0, 0.4, 0, 1);
--easing-duration-fast: 240ms;
--easing-delay-fast:    80ms;

6. Depth & Elevation

影は rgba(16, 42, 75, …) ——黒ではなく濃紺。 アルファは 0.06 で統一。rgba(0,0,0,0.1) に置き換えないこと。 ティッカーカードは影の代わりに rgba(255,255,255,0.42) の半透明白で浮かせている。

7. Do's and Don'ts

Do（推奨）

• 数値を出す要素には必ず font-feature-settings: "tnum" を入れる（実測 366 要素）
• 数字は Nunito, sans-serif に切り替える（和文書体の数字を使わない）
• 60px 級の実績数字は Poppins 600 / letter-spacing: -5.6px（-0.091em）
• 和文の font-weight 既定を 600 にする（400 は注記のみ）
• font-family は "Noto Sans JP" を先頭に置く
• 数値・ラベル・ボタンは line-height: 1.00、読ませる文章は 1.75（フッターは 1.95）
• CTA は #0050d7 / radius 12px / padding 0 24px / 15〜18px weight 700 / 影なし
• タグは radius 990px のピル、面 #eef4ff、文字 #0050d7、11px weight 600
• 地色は 3 段の青い白：#fdfdff（body）→ #f5f8fd（セクション）→ rgba(255,255,255,0.42)（カード）
• 値上がり #0050d7 / 値下がり #ff6400
• 影は rgba(16, 42, 75, 0.06)（濃紺・アルファ 0.06 で統一）
• html { font-size: 10px } を置いてから rem で組む

Don't（禁止）

• --primary-color-bg（#1980e5）を CTA に使わない。 実装は #0050d7
• --color-text（#242428）を本文色にしない。 実測は #13161b
• ruby / emerald / yellow / red のパレット（48 色）を使わない（LP の可視要素に 1 つも出ない）
• 値上がりを赤、値下がりを緑にしない（このサイトは青とオレンジ）
• 日本語に letter-spacing を足さない（755/759 要素が normal）
• palt を全体に足さない（実測 6 要素のみ）。数字があるなら先に tnum
• Noto Sans JP の font-weight: 300 と可変フォント指定を使わない（unloaded）
• CTA に box-shadow を足さない
• 影を rgba(0,0,0,…) にしない（濃紺 rgba(16,42,75,…)）
• body の font-family 宣言（-apple-system 先頭）を真似しない。 子要素で Noto Sans JP 先頭に上書きされている
• 下層ページの流儀（radius 4px / weight 400 / コンテナ 1080px）を新規実装に持ち込まない

8. Responsive Behavior

Breakpoints

境界は 690px と 1280px の 2 本。 (691px <= width <= 1279px) のような range 構文で中間帯を直接書くのがこのサイトの流儀。

タッチターゲット

• 主 CTA: padding: 0 24px ＋ height 指定。高さは実装側で 48px 前後を確保すること（line-height: 1.00 なので padding だけでは高さが出ない）
• タグ（11px / padding 5px 10px）: 高さ約 25px — 44px を下回る。モバイルでは縦 padding を増やすこと
• ティッカーの行: 高さ約 40px — わずかに下回る

フォントサイズの調整

• ティッカー 11〜13px、ナビ 14px、本文 16px はブレークポイントをまたいで固定
• 実績数字（61.2434px）と一部の gap（24.0048px / 8.64px）は clamp() / vw で可変（端数がその証拠）

9. Agent Prompt Guide

クイックリファレンス

Primary Blue:   #0050d7      ← 変数の #1980e5 ではない
Lightning Orange:#ff6400
Text Primary:   #13161b      ← 変数の #242428 ではない
Text Secondary: #42516a
Text Muted:     #697ca9      ← 可視 356 要素で最多
Page BG:        #fdfdff
Section BG:     #f5f8fd      ← 実際に目に入る地色
Card BG:        rgba(255,255,255,.42)
Tint:           #eef4ff / #ebf1fc
Root: html { font-size: 10px }
Font (和文): "Noto Sans JP", -apple-system, "Segoe UI", Roboto, sans-serif   /* 400/500/600/700 */
Font (数字): Nunito, sans-serif      /* 600 */
Font (実績): Poppins, sans-serif     /* 600 / letter-spacing -0.091em */
Default Weight: 600
Body Size: 16px / line-height 1.75
Line Height: 1.00（数値・ラベル・ボタン） / 1.75（本文） / 1.95（フッター） / 1.40（見出し）
Letter Spacing: normal（例外は Poppins の -5.6px のみ）
Radius: 10px（カード） / 12px（CTA） / 990px（ピル） / 28px（特集）
Container: 1170px / 本文 620px
Shadow: 0 1px 3px rgba(16,42,75,.06) / 0 4px 20px rgba(16,42,75,.06)
OpenType: font-feature-settings: "tnum"（366要素）。palt はほぼ使わない
Breakpoint: width <= 690px / 691px <= width <= 1279px / width >= 1280px

プロンプト例

bitFlyer のデザインシステムに従って、暗号資産取引所のトップページを作成してください。
- html { font-size: 10px } を置き、以降 rem で組む
- 和文は font-family: "Noto Sans JP", -apple-system, "Segoe UI", Roboto, sans-serif
  font-weight の既定は 600（400 は注記・免責だけ）
- 価格・変動率・桁区切りの数字は font-family: Nunito, sans-serif / 600 に切り替え、
  必ず font-feature-settings: "tnum" を入れる（更新のたびに桁がずれないため）
- 実績の巨大数字（No.1 / 95.7%）は Poppins 600 / 61px / letter-spacing -5.6px
- 日本語に letter-spacing を足さない（normal のまま）
- 数値・ラベル・ボタンは line-height 1.00、読ませる文章は 1.75、フッターのリンク列は 1.95
- 地色は青い白を3段：body #fdfdff、セクション #f5f8fd、カードは rgba(255,255,255,.42)
- 価格ティッカーのカードは radius 10px / 影なし / 半透明の白
  銘柄名 13px weight 600、価格 Nunito 11px、単位「円」10px
- 値上がりは #0050d7、値下がりは #ff6400（赤と緑は使わない）
- 主CTAは背景 #0050d7 / 白文字 / radius 12px / padding 0 24px / 15px weight 700 / 影なし
  ヒーローのCTAだけ 18px。ヘッダーの「新規登録」は radius 8px / 14px weight 600
- タグは radius 990px のピル、面 #eef4ff、文字 #0050d7、11px weight 600
- サービスカードは radius 28px / box-shadow 0 4px 20px rgba(16,42,75,.06)（黒ではなく濃紺）
- コンテナ 1170px、本文カラム 620px、gap は 16px を基準に
- メディアクエリは width <= 690px / 691px <= width <= 1279px / width >= 1280px の range 構文で書く