コンセプト
グラスモーフィズムを取り入れた Bento スタイルのゲーミフィケーション UI を採用しています。Duolingo のようなポップさと、モダンな質感を融合させた親しみやすいデザインを目指しています。グラスモーフィズム
- 背景:
backdrop-blur-md,bg-white/70による透け感 - 境界線:
border border-white/40など控えめな境界 - 角丸:
rounded-3xl,rounded-[2.5rem]を多用
Bento スタイル
ダッシュボードやリストでは、情報の優先度に応じてサイズの異なる角丸カードを整然と並べます。ゲーミフィケーション
メインカラー
「NetTree」の名に因み、緑（Emerald / Green） を主体とした配色です。- 基本: エメラルド
- アクセント: ブルー、イエロー（進捗強調用）
ボタン
border-b-4で立体感を演出- クリック時:
active:translate-y-1で押し込む演出 - フォーム送信以外は
type="button"を指定
アクセシビリティ
- インタラクティブ要素はキーボード操作に対応
- SVG には
<title>とaria-labelを付与 - セマンティックな HTML を使用（
<button>を優先） - フォーム要素には
<label htmlFor="...">を関連付け