enablerdao.comデザイン改善 Before/After — トークンゲート実装

Before: 指摘された主な問題

デザインレビュー会議で出た問題を実際に修正しました。主な変更点を Before/After で記録します。

1. トークンゲート — Web チャットにも導入

Before

Web UI: ウォレット接続ボタンはあるが飾り
       → 接続してもしなくてもチャットし放題
       → トークンの意味がない
Telegram: /connect コマンドで BONE チェック
       → BONE 100+ でチャット解放

After

Web UI: 3-Tier Token Gate System
┌──────────────────────────────────────────┐
│  Guest (0 BONE)    → 5 msgs/day, Nemotron│
│  Holder (100+ BONE) → Unlimited, All models│
│  Loyal (10K+ BONE) → Priority, Evolution  │
└──────────────────────────────────────────┘
- ヘッダーにTierバッジ表示
- 残りメッセージ数のプログレスバー
- 402レスポンスでウォレット接続を促すUI
- device_id でデバイス単位のレート制限

技術実装:

• chat.rs: resolve_tier() で Solana RPC → BONE 残高チェック（24h KV キャッシュ）
• types.rs: ChatRequest に wallet / device_id フィールド追加
• ui.rs: Tier バッジ、ゲートバー、402 ハンドリング

2. Telegram × Web 統一トークンエコノミクス

Before

- Web: トークン関係なし（無料使い放題）
- Telegram: BONE 100+ で解放（/connect コマンド）
- enablerdao.com/token: 情報はあるがChat Tierの説明なし

After

- Web: 3-Tier Gate (Guest/Holder/Loyal)
- Telegram: 同じ3-Tier Gate (/connect で接続)
- enablerdao.com/token: Chat Tier セクション追加
  → Guest/Holder/Loyal の比較カード
  → 「始め方」3ステップガイド
  → Jupiter/Telegram/Web Chat への直リンク

3. エージェントページ — Telegram リンク追加

Before

AgentCard:
  [emoji] [name] [role]
  model: xxx
  [description]
  [skills badges]
  $ curl xxx-spin.fly.dev/health   ← これだけ

After

AgentCard:
  [emoji] [name] [role]
  model: xxx
  [description]
  [skills badges]
  $ curl xxx-spin.fly.dev/health
  TG @xxx_enabler_bot              ← Telegram リンク追加

5匹のボットが Telegram で直接会話可能:

• @Enabler_Bossdog_bot (プロジェクト統括)
• @motherdog_enabler_bot (コミュニティケア)
• @guarddog_enabler_bot (セキュリティ)
• @guidedog_enabler_bot (学習ガイド)
• @debugdog_enabler_bot (バグハンター)

4. Dog Web UI — ウェルカムメッセージ改善

Before

[dog emoji] [dog name]
[description text]

→ ただのテキスト。トークンの説明なし。

After

[dog emoji] [dog name]
[description]
┌─────────────────────────────┐
│ 🦴 BONE Token Tiers          │
│ Guest (0)    5 msgs/day      │
│ Holder (100+) Unlimited       │
│ Loyal (10K+)  Priority        │
│ BONE入手方法 →                │
└─────────────────────────────┘

→ 初回アクセスでトークンシステムが一目瞭然。

5. enablerdao.com/token — BONE セクション強化

Before

• Dog Pack の犬カードに Web URL のみ
• Chat Tier の説明なし

After

• 各犬カードに Telegram リンク 追加
• Chat Tier System セクション新設
  • 3カラムの比較レイアウト
  • Guest/Holder/Loyal の特典一覧
  • 「始め方」3ステップ
  • Jupiter / Telegram / Web Chat への直リンクボタン

デプロイ状況

6. デザイン全体の読みやすさ改善（第2弾）

デザインレビューで出た残りの改善を全て実装しました:

ベースフォントサイズ拡大

• Before: body 13px, mobile 12px, 多くの要素が 10px
• After: body 14px, mobile 13px, 最小 12px (text-xs)

テキストコントラスト改善

• Before: dim text #555, body text #888 (WCAG不合格)
• After: dim text #777, body text #aaa (コントラスト比 4.5:1以上)

ヒーローセクション（5秒ルール）

• Before: h1 text-2xl (28px), subtitle text-sm, CTA px-6 py-2.5
• After: h1 text-3xl/5xl (30-48px), subtitle text-base/lg, CTA px-8 py-3
• 一目でDAOの目的とアクションがわかるサイズに

エージェントカード — 「話しかける」ボタン

• Before: $ curl xxx.fly.dev/health のみ（開発者向け）
• After: カラフルな「{emoji} 話しかける」大型CTAボタン + TGボタン
  • 犬のカラーに合わせた背景色
  • 一般ユーザーにも明確なアクション導線

モバイルタップターゲット

• Before: button のみ min-height: 44px
• After: button, a[role=“button”], .cta-btn 全て 44px以上

各セクションの改善

• h2: text-lg → text-xl
• 説明文: text-xs → text-sm
• CTAボタン: text-xs px-4 py-2 → text-sm px-5 py-2.5
• Tier比較カード: padding増、フォント拡大、border-2で推奨プラン強調
• 交換レート表: セル padding 拡大
• 物件カード: 稼働中バッジ拡大、特徴タグ拡大

改善タスク完了状況

• ヒーローセクションの5秒ルール改善
• ベースフォントサイズ 14px に拡大
• テキストコントラスト WCAG AA 対応
• モバイルのタップターゲット 44px 以上
• エージェントページの「犬と話す」大型ボタン
• 全セクションのフォントサイズ・コントラスト統一