ポイント交換ページレイアウト修正プレビュー
🐛 修正した問題点
- 問題1: 寄付セクション（PC版）のカードが縦1列で表示される → 横2列（3行）に修正
- 問題2: 提携プログラム（SP版）が横5列のまま → 横2列に修正
- 問題3: 寄付セクションとエラーメッセージが重なる → 自動高さ調整に修正
- 問題4: エラーメッセージの余白不足 → margin-top: 40px 追加
✅ 実施した修正内容
- 修正1:
.nav_kifu formに横並びスタイル追加（display: inline; float: left; width: 49%;） - 修正2:
.nav_kifuのheight: 350pxを削除して自動高さ調整 - 修正3: 提携プログラムのPC版/SP版HTML分離（Tailwind
hidden md:block/block md:hidden） - 修正4: エラーメッセージ4箇所に
style="margin-top: 40px;"追加
PC版（画面幅 721px以上）
💻 デスクトップ表示
提携プログラムにポイント交換
500P～
500P～
500P～
500P～
500P～
寄付する
修正前 ❌ 縦1列
WWF
100P～
100P～
Florence
100P～
100P～
KATARIBA
100P～
100P～
日本ユネスコ
100P～
100P～
むすびえ
100P～
100P～
日本財団
100P～
100P～
申し訳ありませんが...
⚠️ 余白不足 & コンテンツ重なり
修正後 ✅ 横2列（3行）
WWF
100P～
100P～
Florence
100P～
100P～
KATARIBA
100P～
100P～
日本ユネスコ
100P～
100P～
むすびえ
100P～
100P～
日本財団
100P～
100P～
申し訳ありませんが...
✅ 適切な余白 & 重なり解消
SP版（画面幅 720px以下）
📱 スマートフォン表示
提携プログラムにポイント交換
修正前 ❌ 横5列（狭い）
PeX
500P～
AMZ
500P～
WAN
500P～
Edy
500P～
ナナコ
500P～
⚠️ カードが小さすぎて見づらい
修正後 ✅ 横2列
500P～
500P～
500P～
500P～
500P～
✅ カードが大きく見やすい
寄付する
WWF
100P～
100P～
Florence
100P～
100P～
KATARIBA
100P～
100P～
日本ユネスコ
100P～
100P～
むすびえ
100P～
100P～
日本財団
100P～
100P～
エラーメッセージの余白改善
修正前 ❌ 余白不足
カード1
カード2
申し訳ありませんが、現在のポイントでは交換することができません。
⚠️ 上のコンテンツとの間隔が狭い
修正後 ✅ 適切な余白
カード1
カード2
申し訳ありませんが、現在のポイントでは交換することができません。
✅ 40pxの余白で視覚的に明確
📝 技術的な実装詳細
- ・寄付セクション横並び:
.nav_kifu form { display: inline; float: left; width: 49%; } - ・高さ自動調整:
.nav_kifu { height: 350px; }を削除 - ・レスポンシブ切り替え: Tailwind
hidden md:block/block md:hidden - ・SP版2列グリッド:
grid grid-cols-2 gap-3 - ・エラーメッセージ余白:
style="margin-top: 40px;"
関連ブランチ: feature/fix-point-exchange-layout
修正ファイル: irs/webapp/monitor/view/tpl/mypage/point_exchange_ver4.tpl