表示の不具合
表示/UIの不具合、ちらつき、スタイルの間違い、レイアウト崩れの修正方法。
表示の不具合とは？
表示の不具合は、アプリをクラッシュさせないが見た目がおかしくなる視覚的な問題です：
- ボタンが間違った位置にある
- テキストが他の要素と重なっている
- モバイル画面でレイアウトが崩れる
- ページ読み込み時にコンテンツがちらつく
- 色やスタイルが間違っている
- 読み込み中に要素が「ジャンプ」する
視覚的な問題をClaudeに説明する
表示の不具合は視覚的なので、正確に説明する必要があります：
- どの要素が影響を受けているか（ボタン、ヘッダー、カード、フォーム）
- ページのどこに表示されるか
- どう見えるか vs. どう見えるべきか
- 画面サイズ — デスクトップ、モバイル、または両方で起こるか？
レイアウトの問題を報告
Claudeプロンプトmy-app-name: モバイル画面でナビゲーションバーがページコンテンツと重なっています。
デスクトップ（幅広い画面）では問題ないですが、モバイル（狭い画面）ではナビバーがコンテンツの上部を覆っています。
モバイルでコンテンツがナビゲーションの下から始まるように、レスポンシブレイアウトを修正してください。
よくある不具合の種類
モバイルでのレイアウト崩れ
最もよくある不具合です。デスクトップでは問題ないが、モバイルで要素が重なったり、小さすぎたり、崩れたりします。
レスポンシブデザインを修正
Claudeプロンプトmy-app-name: カードグリッドはデスクトップ（3列）では良く見えますが、モバイルではカードが小さすぎてテキストが読めません。
モバイルではカードが縦に並び（1列）、デスクトップでは3列表示になるようにレスポンシブレイアウトを調整してください。
コンテンツのちらつき
ページが一瞬何かを表示し、その後別のものに切り替わります。ローディング状態やハイドレーションの不一致が原因であることが多いです。
コンテンツのちらつきを修正
Claudeプロンプトmy-app-name: ダッシュボードページが最初の読み込み時にちらつきます。古いコンテンツが一瞬表示された後、消えて新しいコンテンツが表示されます。
ローディング状態やハイドレーションの問題かもしれません。調査してちらつきを修正してください。
読み込み中の要素ジャンプ
ページの読み込み中に要素が位置を変え、不快な体験を生みます。
レイアウトシフトを修正
Claudeプロンプトmy-app-name: ページが読み込まれるとき、要素が最終位置に落ち着く前にジャンプします。ヘッダーが最初に読み込まれ、その後コンテンツがすべてを押し下げます。
要素がジャンプせずにスムーズに読み込まれるよう、レイアウトシフトを修正してください。
モバイルでのテスト方法
スマートフォンは不要です — Chrome DevToolsでモバイル画面をシミュレーションできます：
Chromeでモバイルビューをシミュレーションtext
1. Chrome DevToolsを開く（F12 または Cmd+Option+I）
2. デバイスツールバーアイコンをクリック（または Ctrl/Cmd + Shift + M）
3. ドロップダウンからデバイスを選択（例：iPhone 14）
4. ページをリロードしてモバイル表示を確認CSSとTailwindのデバッグ
このプロジェクトではスタイリングにTailwind CSSを使用しています。レスポンシブブレークポイントはプレフィックスを使用します：
| プレフィックス | 画面サイズ |
|---|---|
| （なし） | モバイルファースト（デフォルト） |
sm: | 640px以上 |
md: | 768px以上 |
lg: | 1024px以上 |
モバイルで何かがおかしい場合、レスポンシブクラスが欠けている可能性が高いです。
クイズ
Quiz
アプリはデスクトップでは完璧ですが、モバイルでレイアウトが崩れます。最も考えられる原因は何ですか？