Claude会話全集

タスク概要¶

LINE風デザインの検索インターフェース開発

目的¶

• 直感的な操作画面の提供
• レスポンシブデザインの実装
• ユーザビリティの向上

実施内容¶

1. React/Vue.js プロジェクト作成
2. LINE風UIコンポーネント設計
3. 検索インターフェース実装
4. 結果表示コンポーネント開発
5. レスポンシブデザイン対応
6. Docker化とデプロイ設定

期待成果¶

• 直感的でモダンなUI
• 高速な検索・表示機能
• モバイル端末対応

試験内容と合格基準¶

# 1. UI表示確認
curl https://history.call2arm.com/
# → 200 OK + HTML応答 = 合格

# 2. 検索機能確認
# ブラウザで検索実行 → 結果表示 = 合格

# 3. レスポンシブ確認
# モバイルサイズで表示確認 → レイアウト正常 = 合格

デザイン仕様¶

• UIライブラリ: ChakraUI/MUI
• デザインパターン: LINE風チャット形式
• カラーパレット: グリーン系（#00C300）
• 検索バー: 固定下部配置