UI全体の不均一性を排除するリプレイス(デザイントークン導入と表現の統一)

[ShinoharaTa]

問題

UIの実装がページ・コンポーネントごとに場当たり的で、色・ボタン・アイコン・ローディング・エラー表示などの表現が不均一。現状実装の調査で以下が確認できた。

• 色はVueファイル内に20種類以上のHEX直書き(#9a9a9a, #f08c3e, #402b1e …)。CSS変数はfont-familyのみでカラートークンが無い
• color.css の .text-twitter〜.text-connpass は使用箇所ゼロのdead code。.text-hatena が Twitter色(#1da1f2)のままなどコピペの痕跡。.bg-line .bg-hatena も未使用
• ボタン色に意味の一貫性が無い: 主要CTAが btn-primary(青)だったり btn-danger(おみくじ)だったり、エラーページの「トップに戻る」は btn-success(緑)
• アイコン体系が4系統混在: FontAwesome 5(kit)/インラインSVG(IconX・IconBluesky)/絵文字(⛩️📋)/static/brandlogo/*.svg(ほぼ未使用)
• ローディング表現が2系統: Loading コンポーネント(props も message 単数と messages 配列で揺れ)と spinner-border 直書き(omikuji)
• エラー表示が3系統: layouts/error.vue(500ページ)/ alert-warning(omikuji)/ 狐のセリフ形式(sanpai)
• コンポーネント命名の乱れ: sanpaiGrass.js と SanpaiGrass.vue の名前衝突でビルドごとにWARN、ranking.vue だけ小文字
• props宣言が不正な箇所: ranking.vue の props: { pagenation: false, max: 100 } は実行時に毎回 Vue warn(Invalid prop type)。pagenation はタイポでもある
• コンテンツ幅がインラインstyleで散在: 600px / 640px / 700px / 420px がページごとにバラバラ
• 見出しが fs-1〜fs-6 の直指定でページ間の階層感が不一致(h1 があるのはおみくじページ程度)

対応案(チェックリスト)

1. デザイントークンの導入(基盤)

• color.css を :root のCSS変数に再編(背景/サーフェス/文字/muted/アクセント/SNSブランド色)
• Vueファイル内のHEX直書きをトークン参照へ置換
• 未使用の .text-* SNSクラス・.bg-line・.bg-hatena・未使用brandlogo svgを削除
• コンテンツ幅トークン(例: --width-content: 600px)を導入しインラインmax-widthを排除

2. ボタン規約の統一

• 主要CTA / 副次 / 外部リンク(SNS) / 危険操作 の4種に整理し全ページ適用
• エラーページの緑ボタン等、規約から外れた色を是正

3. アイコン体系の統一

• FontAwesomeを基本とし、ブランドアイコン(X/Bluesky等)のみ Icon*.vue(インラインSVG)に統一
• 装飾絵文字の使用箇所を棚卸し(残す/置換の基準を決める)

4. ローディング/エラー表現の統一

• Loading コンポーネントに一本化(spinner-border 直書きを置換、props APIを統一)
• ページ内エラーの標準パターンを1つ定義(狐のセリフ形式に寄せる等)

5. コンポーネント衛生

• sanpaiGrass.js をリネームして SanpaiGrass.vue との名前衝突WARNを解消
• ranking.vue → Ranking.vue(PascalCase統一)
• 全コンポーネントのprops宣言を正規形({ type, default })に統一(pagenation タイポ修正含む)

6. タイポグラフィ/構造

• ページ=h1、セクション=h2 の見出し規約を適用
• fs-* 直指定を見出し規約+ユーティリティに整理

決めたいこと

• アクセントカラーの方針(現状の Bootstrap 青のままか、鳥居の朱色系をアクセントに立てるか)
• 絵文字装飾(⛩️🎉等)を意匠として残すか
• 一括PRか、基盤(トークン)→各表現の順で同一Issue内を複数PRに分けるか

[ShinoharaTa]

決定した方針と実装 → PR #167

全ページ・全16状態のUI監査(モック強制表示含む)の結果、UIには実装3世代のトーンが混在していた:

1. 第1世代(index/about/ranking): Bootstrap素組み。aboutのピンク見出し(実体はmarkdownのcodeにBootstrapピンクが当たっていたもの)、青枠カード+白リスト
2. 第2世代(おみくじ機能 Phase 1(バックエンド + 文言105個 + 簡易UI) #149〜#160のおみくじ演出・実績カード群): 「夜の神社×暖色(琥珀・金・木)」で一貫した最も完成度の高いデザイン言語
3. 検討過程の明朝+朱マーカー案: 第3のトーンを増やすため撤回

第2世代を基準に統一することで確定し、PR #167 で実装済み。

ビフォーアフター

ランキング(青枠・白リスト → ダークカード)

Before	After

about(ピンク → 琥珀)

Before	After

トップ(ログイン済み・琥珀CTA+絵文字見出し)

参拝成功(次アクション導線: おみくじ→マイページ)

チェックリストの消化状況

• 1. デザイントークン導入(HEX直書きの全量置換は残あり→継続)
• 2. ボタン規約の統一(琥珀=儀式系/outline=汎用)
• 3. アイコン体系の統一(未着手)
• 4. ローディング統一(spinner直書き置換)/エラーページのボタン是正
• 5. コンポーネント衛生(名前衝突WARN解消・props正規化)
• 6. 見出し規約の全ページ展開(トップのみ実施)
• [追加] 次アクション導線(参拝→おみくじ→マイページの循環)

残項目は本PRマージ後に継続する。

[ShinoharaTa]

残項目の実装 → PR #168

注意: PR #167 は base がfeatureブランチのままマージされたため main に反映されていませんでした。#168 は #167 の内容を main ベースに再発行し、残項目を追加したものです(#168 のマージで本Issueの内容がすべて main に入ります)。

残項目の内訳:

• 色トークンの残置換: #0d1117(サーフェス)×4箇所、#9a9a9a(muted)×9箇所をトークン参照へ。演出固有色は意匠として直書き維持
• 見出し規約: ページタイトルh1(ランキング/マイページ/プロフィール名)、実績カード群のセクション見出しh2(見た目は既存クラスで完全維持)
• アセット整理: 参照ゼロのbrandlogo SVG 5点削除+CommonFooterのコメントアウト残骸削除
• アイコン体系: 「絵文字見出し=意匠として採用/ブランドアイコンのみインラインSVG/その他はFontAwesome」の基準で整理完了