メンバーカラーバッジ設計書

概要

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

メンバーカラー

期	氏名	メンバーカラー名	カラーコード (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

// 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	初版作成