---
title: "メンバーカラーバッジ設計書"
---

## 概要

各メンバーに紐づくバッジ（期バッジ・メンバータグ）のスタイルを統一し、
ダークモードでも視認できるよう暗色メンバーカラーを自動的に白に切り替える。

## メンバーカラー

| 期 | 氏名 | メンバーカラー名 | カラーコード (HEX) | RGB (10進数) | 備考 |
| :--- | :--- | :--- | :--- | :--- | :--- |
| 1期 | 中澤裕子 | 紫 | `#800080` | `rgb(128, 0, 128)` | 従来は濃緑 (グリーン：#006400)、後年は紫も使用 |
| 1期 | 石黒彩 | 黒 | `#000000` | `rgb(0, 0, 0)` | 在籍当時のユニットイメージ等 |
| 1期 | 飯田圭織 | 紺 (ネイビー) | `#000080` | `rgb(0, 0, 128)` | 後年はラベンダー（#E6E6FA） |
| 1期 | 安倍なつみ | 赤 | `#FF0000` | `rgb(255, 0, 0)` | |
| 1期 | 福田明日香 | 緑 | `#00FF00` | `rgb(0, 255, 0)` | 2021年M-line Special等で採用 |
| 2期 | 保田圭 | ライトピンク | `#FFC0CB` | `rgb(255, 192, 203)` | 卒業後は黄緑なども使用 |
| 2期 | 矢口真里 | ライトパープル | `#D8BFD8` | `rgb(216, 191, 216)` | ミニモニ。等では黄（#FFFF00） |
| 2期 | 市井紗耶香 | 青 | `#0000FF` | `rgb(0, 0, 255)` | |
| 3期 | 後藤真希 | ゴールド | `#FFD700` | `rgb(255, 215, 0)` | オレンジ（#FFA500）とされる場合もあり |
| 4期 | 石川梨華 | チャーミーピンク | `#FF69B4` | `rgb(255, 105, 180)` | 濃いめのピンク |
| 4期 | 吉澤ひとみ | ライトブルー | `#87CEEB` | `rgb(135, 206, 235)` | |
| 4期 | 辻希美 | リボンピンク | `#FF1493` | `rgb(255, 20, 147)` | |
| 4期 | 加護亜依 | ホットピンク | `#FF69B4` | `rgb(255, 105, 180)` | |
| 5期 | 高橋愛 | Yellow | `#FFFF00` | `rgb(255, 255, 0)` | |
| 5期 | 紺野あさ美 | ピンク | `#FFC0CB` | `rgb(255, 192, 203)` | |
| 5期 | 小川麻琴 | 青 | `#0000FF` | `rgb(0, 0, 255)` | |
| 5期 | 新垣里沙 | 黄緑 | `#ADFF2F` | `rgb(173, 255, 47)` | 最初期のみ黄 |
| 6期 | 藤本美貴 | 赤 | `#FF0000` | `rgb(255, 0, 0)` | |
| 6期 | 亀井絵里 | オレンジ | `#FFA500` | `rgb(255, 165, 0)` | |
| 6期 | 道重さゆみ | ピンク | `#FFC0CB` | `rgb(255, 192, 203)` | |
| 6期 | 田中れいな | 水色 | `#00FFFF` | `rgb(0, 255, 255)` | 公式表記はライトブルー |
| 7期 | 久住小春 | ミラクル☆ピンク | `#FF69B4` | `rgb(255, 105, 180)` | 赤やグレーの時期あり |
| 8期 | 光井愛佳 | 薄紫 | `#DA70D6` | `rgb(218, 112, 214)` | 公式表記はパープル |
| 8期 | ジュンジュン | 青 | `#0000FF` | `rgb(0, 0, 255)` | |
| 8期 | リンリン | エメラルドグリーン | `#00FA9A` | `rgb(0, 250, 154)` | |
| 9期 | 譜久村聖 | ホットピンク | `#E0115F` | `rgb(224, 17, 95)` | |
| 9期 | 生田衣梨奈 | 黄緑 | `#7CFC00` | `rgb(124, 252, 0)` | 公式表記はブライトグリーン / 初期は紫 |
| 9期 | 鞘師里保 | 赤 | `#FF0000` | `rgb(255, 0, 0)` | |
| 9期 | 鈴木香音 | 緑 | `#008000` | `rgb(0, 128, 0)` | |
| 10期 | 飯窪春菜 | ハニー色 | `#FFF8DC` | `rgb(255, 248, 220)` | 初期はチョコレート色（#8B4513） |
| 10期 | 石田亜佑美 | ロイヤルブルー | `#4169E1` | `rgb(65, 105, 225)` | |
| 10期 | 佐藤優樹 | エメラルドグリーン | `#00FA9A` | `rgb(0, 250, 154)` | |
| 10期 | 工藤遥 | オレンジ | `#FF7F50` | `rgb(255, 127, 80)` | 公式表記はブライトオレンジ |
| 11期 | 小田さくら | ラベンダー | `#E6E6FA` | `rgb(230, 230, 250)` | |
| 12期 | 尾形春水 | シーブルー | `#00BFFF` | `rgb(0, 191, 255)` | |
| 12期 | 野中美希 | 紫 | `#800080` | `rgb(128, 0, 128)` | |
| 12期 | 牧野真莉愛 | ライトピンク | `#FFB6C1` | `rgb(255, 182, 193)` | |
| 12期 | 羽賀朱音 | ライトオレンジ | `#FFD700` | `rgb(255, 215, 0)` | 初期はオレンジ（#FFA500） |
| 13期 | 加賀楓 | イタリアンレッド | `#D01B1B` | `rgb(208, 27, 27)` | 濃い赤 |
| 13期 | 横山玲奈 | ゴールド | `#FFD700` | `rgb(255, 215, 0)` | イエローと表現される場合もあり |
| 14期 | 森戸知沙希 | 白 | `#FFFFFF` | `rgb(255, 255, 255)` | |
| 15期 | 北川莉央 | シーブルー | `#00BFFF` | `rgb(0, 191, 255)` | |
| 15期 | 岡村ほまれ | デイジー | `#FFF352` | `rgb(255, 243, 82)` | 黄色系 |
| 15期 | 山﨑愛生 | ブルー | `#1E90FF` | `rgb(30, 144, 255)` | 2026-07-08 変更（旧: ブライトグリーン #00FF7F） |
| 16期 | 櫻井梨央 | ミルクティー | `#F5F5DC` | `rgb(245, 245, 220)` | |
| 17期 | 井上春華 | ミントグリーン | `#98FB98` | `rgb(152, 251, 152)` | |
| 17期 | 弓桁朱琴 | ピュアレッド | `#FF0000` | `rgb(255, 0, 0)` | |
| 18期 | 杉原明紗 | ライトブルー | `#87CEEB` | `rgb(135, 206, 235)` | |
| 18期 | 石川華望 | オレンジ | `#FF8C00` | `rgb(255, 140, 0)` | |
| 18期 | 鈴木もあ | ホットピンク | `#FF36A6` | `rgb(255, 54, 166)` | |
| 18期 | 安田美結 | グリーン | `#2E8B57` | `rgb(46, 139, 87)` | |

## 対象コンポーネント

| コンポーネント | バッジ種別 | 使用場面 |
|---|---|---|
| `components/EventCard.tsx` | memberTag（メンバー名ピル） | タイムライン画面 |
| `components/MemberCard.tsx` | genBadge（期バッジ） | メンバー一覧画面 |
| `components/MemberDetailView.tsx` | 期バッジ（ヘッダー） | メンバー詳細画面 |

## スタイル仕様

タイムライン（EventCard）のスタイルを基本とし、輝度に応じて3段階で切り替える。

| 輝度(L) | ケース | border | color（text） | background |
|---|---|---|---|---|
| L < 0.16 | 暗色 | メンバーカラー | メンバーカラー | `#ffffff`（白） |
| 0.16 ≤ L ≤ 0.7 | 中間色 | メンバーカラー | メンバーカラー | なし（システムカラー） |
| L > 0.7 | 明色すぎる | メンバーカラー | `rgba(0,0,0,0.75)` | メンバーカラー（fill） |

- **暗色**: 暗い文字・線がダーク背景に埋もれないよう白背景で浮かせる
- **中間色**: メンバーカラーそのままで十分視認できる
- **明色すぎる**: 彩度が低く白と区別しにくいため、バッジ全体をメンバーカラーで塗りつぶして色を明示する

member.color が未設定の場合は `var(--text-muted)` をフォールバックとする。

## 輝度計算ロジック（`lib/color-utils.ts`）

W3C WCAG 2.0 で定義された相対輝度（relative luminance）を使用する。

```
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin

各チャンネルのリニア変換:
  c_sRGB = c_8bit / 255
  c_lin  = c_sRGB ≤ 0.04045 ? c_sRGB / 12.92 : ((c_sRGB + 0.055) / 1.055)^2.4
```

### 代表的なメンバーカラーの判定例

| メンバーカラー | 例 | 輝度(L) | 判定 | スタイル |
|---|---|---|---|---|
| 黒 `#000000` | 石黒彩 | 0.000 | 暗色 | outline + 白背景 |
| 紺 `#000080` | 飯田圭織 | 0.007 | 暗色 | outline + 白背景 |
| 紫 `#800080` | 中澤裕子 / 野中美希 | 0.061 | 暗色 | outline + 白背景 |
| 青 `#0000FF` | 市井紗耶香 ほか | 0.072 | 暗色 | outline + 白背景 |
| 暗緑 `#008000` | 鈴木香音 | 0.155 | 暗色 | outline + 白背景 |
| 赤 `#FF0000` | 安倍なつみ ほか | 0.213 | 中間色 | outline |
| ゴールド `#FFD700` | 後藤真希 ほか | 0.699 | 中間色 | outline |
| ライトピンク `#FFC0CB` | 保田圭 ほか | 0.632 | 中間色 | outline |
| ラベンダー `#E6E6FA` | 小田さくら | 0.819 | 明色すぎる | fill |
| 白 `#FFFFFF` | 森戸知沙希 | 1.000 | 明色すぎる | fill |

## 公開 API

```typescript
// lib/color-utils.ts

export interface BadgeStyle {
  borderColor: string;
  color: string;
  background?: string;
}

// 輝度に応じて3段階のバッジスタイルを返す
export function getMemberBadgeStyle(memberColor: string): BadgeStyle;
```

## 改訂履歴

| 版  | 更新日     | 変更内容                                                                 |
| --- | ---------- | ------------------------------------------------------------------------ |
| 1.2 | 2026-07-08 | 18期メンバー（杉原明紗・石川華望・鈴木もあ・安田美結）のメンバーカラーを追加。山﨑愛生のメンバーカラーをブライトグリーンからブルーに変更（#1298） |
| 1.1 | 2026-05-30 | スタイル仕様を3段階化（暗色・中間色・明色すぎる）。明色すぎる色を fill スタイルに変更 |
| 1.0 | 2026-05-29 | 初版作成                                                                 |