ui: 公開サイト・管理画面の全体最適化

[aster-void]

Summary

公開サイト ((site)) と管理画面 ((admin))、共有コンポーネントを横断したUI最適化。各エリアを5体の並列エージェントで担当分けし、デザインシステム(docs/knowledges/ui-design.md / CLAUDE.md)への整合性を高めた。

主な改善カテゴリ

アクセシビリティ (a11y)

• focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary を Pagination / 検索結果 / モバイルドロワー / サインアウト / QuickActions / image-upload dropzone / login OAuth ボタン に追加
• confirm-modal の aria-labelledby を id と紐付け
• MemberEditor の name / slug 入力に aria-invalid / aria-describedby を付与しエラーメッセージを aria-live="polite" 化
• 装飾画像に role=\"presentation\"、活動ページ等のコンテンツ画像には説明的な日本語 alt を補強
• モバイルドロワーに <h2 class=\"sr-only\">Navigation</h2> を追加

ホバー / フォーカスの一貫性

• サイト/管理ナビ・検索ボタン・フッター social 等を CLAUDE.md 規定の hover:bg-primary/5 hover:border-primary/30 (or hover:text-primary) に統一
• 管理サイドバーは暗背景に合わせ hover:bg-primary/10 hover:text-primary を採用
• プロジェクト詳細のメンバーリストに hover:shadow-md hover:shadow-primary/5 を追加

レスポンシブ・情報密度

• StatsSection の gap を gap-4 sm:gap-6 lg:gap-8 に
• 活動ページ h1 を text-2xl sm:text-3xl md:text-4xl に
• 記事リスト カバー画像のモバイル高さを max-h-32 sm:max-h-none で抑制
• メンバー一覧グリッドを lg:grid-cols-2 xl:grid-cols-3 に
• 分析ページの統計グリッドに md:grid-cols-2 追加、viewTrend 空時のフォールバック追加
• 移行ページ統計グリッドに sm:grid-cols-3
• ArticleFormHeader をモバイルで縦並び・主要アクションを w-full

ポリッシュ・微調整

• Sponsors 空状態をカード化 (rounded-2xl border bg-white/80 backdrop-blur-md)
• Markdown に prose-headings:text-zinc-900 prose-p:text-zinc-700 prose-a:text-primary で色を明示
• 検索結果の "クエリ未入力" と "結果なし" を視覚的に区別
• プロジェクトカードのカテゴリバッジに bg-black/40 text-white を加えて画像コントラストを担保
• 画像ホバーズームを scale-105 に統一 (articles / projects)
• 保存成功インジケータを 2s → 3.5s に延長 (Article / Project)
• スラッグビルダーに「公開日」「スラッグタイトル」ラベルを可視化
• ImageSection の <img> に loading=\"lazy\" decoding=\"async\"
• 設定ページ select にフォーカスリング、submit ボタンに disabled:cursor-not-allowed

影響範囲

• 公開サイト: layout / home (Hero, Stats, Sponsors) / activities / search / projects[slug] / members[slug]
• 管理画面: layout / dashboard widgets / confirm-modal / 記事/プロジェクト/メンバー一覧 / 分析 / 移行 / 設定
• 共有: Pagination / Markdown / ImageSection / image-upload / 各種 *-form コンポーネント
• login

機能 (auth / DAL / 保存ロジック) は一切変更していません。

Test plan

• bun type-check — 0 errors / 0 warnings
• bun test-check — 102 pass
• bun lint-check / bun format-check — クリーン
• bun run build — 成功 (15.4s)
• 手動確認: モバイル幅(375px / 768px)で記事/プロジェクト/メンバー一覧の崩れがないか
• 手動確認: キーボードのみでサイト/管理ナビ・モーダル・フォームを操作してフォーカスリングが見えるか
• 手動確認: 記事/プロジェクト保存時に成功インジケータが 3.5 秒残るか
• 手動確認: 検索 "クエリ未入力" と "結果なし" の表示差

🤖 Generated with Claude Code

[deploy-coolify-utcode-net]

The preview deployment for cms.utcode.net failed. 🔴

Open Build Logs | Open Application Logs

Last updated at: 2026-05-22 05:34:15 CET