Setsunaのユーザーインターフェースとユーザー体験の仕様を定義します。
ダークテーマ : 目に優しく、モダンな印象ブルータリスト : 太い線、強いコントラスト、Rawな美学モノスペースフォント : テクニカル・プログラマティックな印象
シンプル : 余計な装飾を排除、テキスト共有に集中スピーディ : 最小限のステップで目的を達成レスポンシブ : スマホでもPCでも快適に使用可能アクセシブル : 高コントラストで視認性を確保
用途
カラー
CSS変数
背景（プライマリ）
#0a0a0a
--bg-primary
背景（セカンダリ）
#141414
--bg-secondary
テキスト（プライマリ）
#f5f5f5
--foreground-rgb
テキスト（セカンダリ）
#a3a3a3
--text-secondary
テキスト（ミュート）
#525252
--text-muted
用途
カラー
CSS変数
プライマリ（ネオングリーン）
#00ff88
--accent-primary
エラー（ビビッドピンク）
#ff3366
--accent-error
警告（イエロー）
#ffff00
--accent-warning
用途
カラー
CSS変数
強調
#f5f5f5
--border-strong
中間
#525252
--border-medium
薄い
#262626
--border-subtle
用途
フォント
備考
本文・UI
Fira Code (モノスペース)
デフォルト
見出し
Fira Code (モノスペース)
大文字・太字
要素
サイズ
スタイル
Tailwind
ロゴ
4-6rem
Bold, 大文字
text-4xl md:text-6xl font-bold
見出し1
1.25rem
Bold, 大文字, 追跡
text-xl font-bold uppercase tracking-wider
本文
1rem
Normal
text-base
小テキスト
0.875rem
Normal
text-sm
キャプション
0.75rem
Normal, 大文字
text-xs uppercase tracking-wider
interface ButtonProps {
variant : 'primary' | 'secondary' | 'outline' | 'ghost' ;
size : 'sm' | 'md' | 'lg' ;
disabled ?: boolean ;
loading ?: boolean ;
children : React . ReactNode ;
}
角丸なし : 角ばったエッジ太いボーダー : border-2大文字 : uppercase tracking-widerホバー : 色反転エフェクトアクティブ : translate-x-[2px] translate-y-[2px]
バリアント
背景
テキスト
ボーダー
primary
#00ff88
black
#00ff88
secondary
neutral-900
white
white
outline
transparent
white
white
ghost
transparent
neutral-400
transparent
interface CardProps {
title ?: string ;
children : React . ReactNode ;
className ?: string ;
}
背景: bg-neutral-900
ボーダー: border-2 border-white
パディング: p-6
タイトル: 下線付き、大文字
interface InputProps extends React . InputHTMLAttributes < HTMLInputElement > {
error ?: string ;
}
背景: bg-black
ボーダー: border-2 border-white（エラー時: border-[#ff3366]）
フォーカス: focus:bg-neutral-900
角丸なし
通常: border-neutral-600 text-neutral-400
ホバー: border-white text-white
成功: border-[#00ff88] text-[#00ff88] bg-[#00ff88]/10
言語切替コンポーネント。ヘッダーやホームページに配置し、英語/日本語を切り替える。
// src/components/LanguageSwitcher.tsx
'use client' ;
import { useLocale } from 'next-intl' ;
import { usePathname , useRouter } from '@/i18n/navigation' ;
import { routing } from '@/i18n/routing' ;
export function LanguageSwitcher ( ) {
const locale = useLocale ( ) ;
const router = useRouter ( ) ;
const pathname = usePathname ( ) ;
const handleChange = ( newLocale : string ) => {
router . replace ( pathname , { locale : newLocale } ) ;
} ;
return (
< div className = "flex items-center gap-2 font-mono text-sm" >
{ routing . locales . map ( ( loc ) => (
< button
key = { loc }
onClick = { ( ) => handleChange ( loc ) }
className = { `px-2 py-1 uppercase tracking-wider transition-colors duration-100 ${
locale === loc ? 'text-[#00ff88] border-b-2 border-[#00ff88]' : 'text-neutral-500 hover:text-white' } `}
aria-current = { locale === loc ? 'true' : undefined }
>
{ loc }
</ button >
) ) }
</ div >
) ;
}
状態
スタイル
非選択
text-neutral-500 hover:text-white
選択中
text-[#00ff88] border-b-2 border-[#00ff88]
レイアウト
flex items-center gap-2 font-mono text-sm
クリックで言語を即時切替（ページリロードなし）
router.replace() でブラウザ履歴を汚さない現在の言語は aria-current="true" でアクセシビリティ対応
URL構造: /en（英語）、/ja（日本語）
統計値を表示するカードコンポーネント。
interface StatsCardProps {
title : string ;
value : number ;
description : string ;
}
背景: bg-gray-800
ボーダー: border border-gray-700
角丸: rounded-lg
パディング: p-6
値: text-3xl font-bold text-white
タイトル: text-sm text-gray-400
AdminHeader
管理画面のヘッダーコンポーネント。ナビゲーションとログアウトボタンを含む。
// src/components/admin/AdminHeader.tsx
export function AdminHeader ( ) {
// ナビゲーション: Dashboard, Rooms
// ログアウトボタン
}
背景: bg-gray-900
ボーダー: border-b border-gray-800
アクティブリンク: text-[#00ff88]
非アクティブリンク: text-gray-400 hover:text-white
ロゴ: text-white font-bold
┌──────────────────────────────────────────┐
│ [EN][JA] │ ← LanguageSwitcher
│ 背景: #0a0a0a │
│ │
│ SETSUNA_ │ ← 白 + 緑カーソル
│ [REAL-TIME TEXT SHARING] │ ← グレー、大文字
│ │
│ ┌────────────────────────────────────┐ │
│ │ 新規ルーム作成 │ │ ← 白ボーダー2px
│ │ ────────────────────────── │ │ ← タイトル下線
│ │ │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ ルーム作成 │ │ │ ← 緑背景、黒文字
│ │ └──────────────────────────────┘ │ │
│ └────────────────────────────────────┘ │
│ │
│ ────── //OR// ────── │ ← コード風セパレーター
│ │
│ ┌────────────────────────────────────┐ │
│ │ 既存ルームに参加 │ │
│ │ ────────────────────────── │ │
│ │ ルームコード │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ A B C D 2 3 │ │ │ ← 黒背景、白ボーダー
│ │ └──────────────────────────────┘ │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ 参加 │ │ │ ← 白背景、黒文字
│ │ └──────────────────────────────┘ │ │
│ └────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────┘
ルームページ (/en/room/[code], /ja/room/[code]) ┌──────────────────────────────────────────┐
│ [戻る] ABCD23 [EN][JA] [コピー]│ ← ヘッダー + LanguageSwitcher
│ TTL: 23:45:30 │ ← 緑文字、TTL表示
├──────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────┐ │
│ │ テキストを入力... │ │ ← 入力エリア
│ │ │ │
│ │ 0 / 10,000 文字 [送信] │ │
│ │ CTRL + ENTER で送信 │ │
│ └────────────────────────────────────┘ │
│ │
│ [共有テキスト] │
│ │
│ ┌────────────────────────────────────┐ │
│ │ メッセージ内容... [コピー]│ │
│ │ 10:30:45│ │
│ └────────────────────────────────────┘ │
│ │
│ ■ │ ← 接続インジケーター
└──────────────────────────────────────────┘
管理画面は通常のユーザー向けUIとは別のデザインで、シンプルなダークグレーベースのUIを採用。
┌──────────────────────────────────────────┐
│ │
│ SETSUNA_ ADMIN │
│ │
│ ┌────────────────────────────────────┐ │
│ │ Password │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ •••••••••• │ │ │ ← type="password"
│ │ └──────────────────────────────┘ │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ Login │ │ │ ← 緑背景ボタン
│ │ └──────────────────────────────┘ │ │
│ └────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────┘
┌──────────────────────────────────────────┐
│ SETSUNA ADMIN [Dashboard] [Rooms] │ ← AdminHeader
├──────────────────────────────────────────┤
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ 42 │ │1234│ │ 5 │ │ 67 │ │ ← StatsCard x 4
│ │Act.│ │Msgs│ │Tdy │ │Tdy │ │
│ └────┘ └────┘ └────┘ └────┘ │
│ │
│ Activity (Last 7 days) │
│ ┌────────────────────────────────────┐ │
│ │ 12/28 ████████░░░░ 10 rooms │ │ ← 日別統計グラフ
│ │ 12/27 ██████████████░░ 50 msgs │ │
│ │ ... │ │
│ └────────────────────────────────────┘ │
│ │
│ Manual Cleanup │
│ ┌────────────────────────────────────┐ │
│ │ Run Cleanup Now │ │ ← 赤背景ボタン
│ └────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────┘
┌──────────────────────────────────────────┐
│ SETSUNA ADMIN [Dashboard] [Rooms] │
├──────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────┐ │
│ │ 🔍 Search... [All ▼] │ │ ← 検索・フィルター
│ └────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────┐ │
│ │ Code │ Created │ Msgs │ Status│ │ ← テーブルヘッダー
│ ├────────────────────────────────────┤ │
│ │ ABCD23 │ 12/28 10:30│ 5 │ Active│ │
│ │ XYZ789 │ 12/27 15:45│ 12 │Expired│ │
│ └────────────────────────────────────┘ │
│ │
│ ◀ 1 2 3 4 5 ▶ │ ← ページネーション
│ │
└──────────────────────────────────────────┘
ルーム詳細 (/admin/rooms/[code]) ┌──────────────────────────────────────────┐
│ ← Back Room ABCD23 │
├──────────────────────────────────────────┤
│ │
│ Created: 2024-12-28 10:30:00 │
│ Expires: 2024-12-29 10:30:00 │
│ Status: Active │
│ │
│ ┌────────────────────────────────────┐ │
│ │ Delete Room │ │ ← 赤背景ボタン
│ └────────────────────────────────────┘ │
│ │
│ Messages (5) │
│ ┌────────────────────────────────────┐ │
│ │ メッセージ内容... │ │
│ │ 10:30:45 │ │
│ ├────────────────────────────────────┤ │
│ │ 別のメッセージ... │ │
│ │ 10:31:20 │ │
│ └────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────┘
要素
アニメーション
時間
ボタンホバー
色反転
100ms
カードホバー
ボーダー色変更
100ms
新メッセージ
フェードイン
150ms
アクティブボタン
translate(2px, 2px)
即座
@theme {
--animate-fadeIn : fadeIn 0.15s linear;
@keyframes fadeIn {
from {
opacity : 0 ;
transform : translateY (-4px );
}
to {
opacity : 1 ;
transform : translateY (0 );
}
}
}
ボーダー: border-[#ff3366]
テキスト: text-[#ff3366]
背景: bg-[#ff3366]/10
背景: bg-[#ffff00]/10
ボーダー: border-[#ffff00]
テキスト: text-[#ffff00]
テキスト: text-[#00ff88]
アニメーション: animate-pulse
キー
動作
Tab
次のフォーカス要素へ
Shift + Tab
前のフォーカス要素へ
Enter
ボタンクリック、フォーム送信
Ctrl + Enter
テキストエリアから送信
カラー
コントラスト比
WCAG AA (4.5:1)
WCAG AAA (7:1)
白テキスト (#f5f5f5) / 黒背景
19.3:1
✅
✅
ネオングリーン (#00ff88) / 黒背景
12.5:1
✅
✅
ビビッドピンク (#ff3366) / 黒背景
5.2:1
✅
❌
すべてのカラーがWCAG AA基準を満たしています。ビビッドピンクはAAA基準（7:1）を満たしませんが、エラー表示に限定して使用し、テキストサイズを大きくするなどの配慮をしています。