検索画面

キーワード・タグでランキングを検索

v1.1 画面ID: RS-SEARCH-01

目的・役割

キーワード・タグ・期間などでランキングを絞り込んで発見する画面。Tab.search のメイン画面。

UI 構成

要素	種類	説明
検索バー	SearchField	title / description にマッチ
タグフィルター	Picker / FlowLayout	主タグ・副タグでフィルタ
ステータスフィルター	Picker	すべて / 受付中 / 終了
並び順	Picker	新着 / 人気（voteCount降順） / 終了間近
結果リスト	List	RankingCardView（後述のレイアウト刷新版）
RankingCardView レイアウト	VStack	・右上に大きめランクバッジ（32px円、Sは虹グラデ） ・投票タイプバッジ（シングル / TOP3）をタグ群の上に配置 ・大タグ・小タグを別行で表示 ・左下に作成者アイコン + 表示名（匿名は別表記） ・クイズ通過バッジは hasQuiz=true のみ
バナー広告	共通配置	MainTabView の safeAreaInset(.bottom) でタブバー直上に配置（プレミアム時は非表示）。検索画面個別の広告領域は持たない

状態

状態	表示内容
検索前	人気ランキング・最近のランキング
検索中	ProgressView
結果あり	カードリスト
結果なし	「該当するランキングがありません」

遷移

操作	遷移先
カードタップ	RankingDetailView
タグタップ	同画面（タグフィルタON）

使用するデータモデル

// SearchViewModel が保持
struct SearchCriteria {
    var keyword: String
    var majorTag: String?
    var minorTag: String?
    var status: RankingStatus?
    var sortBy: SortOrder  // newest / popular / endingSoon
}

実装メモ

• SearchViewModel が検索条件を保持
• debounce 入力（タイピング即時に走らない）
• 検索履歴の保存（v1.1検討）

関連

• ランキング詳細

変更履歴

バージョン	日付	変更内容
1.0	2026-05-09	初版作成
1.1	2026-05-10	RankingCardView レイアウト刷新（右上ランクバッジ・投票タイプバッジ・タグ縦並び・作成者表示・クイズ通過バッジ条件表示）／バナー広告を MainTabView 共通配置へ移動