カード検索

画面イメージ

（モックアップ作成後に追加）

概要

MTGカードを高速検索し、詳細情報を表示する画面。Algolia検索エンジンにより50ms以下のレスポンスを実現。

画面構成

┌─────────────────────────────────────────────────────────┐
│ 検索バー（インスタント検索）                              │
├─────────────────────────────────────────────────────────┤
│ フィルターバー（色・タイプ・マナコスト・フォーマット）      │
├─────────────────────────────────────────────────────────┤
│                                                         │
│                 検索結果グリッド                         │
│              （カード画像サムネイル）                     │
│                                                         │
├─────────────────────────────────────────────────────────┤
│ ページネーション                                         │
└─────────────────────────────────────────────────────────┘

検索条件

項目	種別	備考
カード名	テキスト	インスタント検索（300msデバウンス）
色	トグルボタン	W/U/B/R/G + 無色 + 多色
カードタイプ	マルチセレクト	クリーチャー、インスタント、ソーサリー等
マナコスト	レンジスライダー	0〜16+
フォーマット	セレクト	スタンダード〜レガシー
レアリティ	チェックボックス	コモン〜神話レア
テキスト検索	テキスト	能力テキスト内検索

入力チェック

項目	チェック内容	エラーメッセージ
マナコスト	Min > Max	「最小値は最大値以下にしてください」

検索結果

No	表示項目	表示形式	操作
1	カード画像	サムネイル（AVIF/WebP）	クリックで詳細モーダル
2	カード名	文字列	-
3	マナコスト	マナシンボル	-
4	価格（日本）	円表示	クリックで価格比較へ
5	価格（米国）	ドル表示	クリックで価格比較へ

表示切替

• グリッドビュー（デフォルト）
• リストビュー
• コンパクトビュー

カード詳細モーダル

項目	説明
高解像度画像	3D回転対応
英語/日本語名	言語切替可能
オラクルテキスト	最新エラッタ適用
フレーバーテキスト	イタリック表示
リーガリティ	フォーマット別使用可否
価格履歴	折れ線グラフ
収録セット	セット一覧・レアリティ

操作

アクション	動作
初期表示	人気カードを表示
検索実行	入力に応じてリアルタイム検索
クリアボタン	全フィルターをリセット
デッキに追加	ドラッグまたはボタンクリック
お気に入り	ブックマーク登録

データベース

操作	テーブル/API	説明
検索	Algolia Index	カード検索
参照	Cards	カード詳細情報
参照	Prices	価格情報
参照	Scryfall API	画像・オラクルテキスト

パフォーマンス目標

項目	目標値
検索レスポンス	< 50ms
画像読み込み	< 200ms（サムネイル）
モーダル表示	< 100ms