📱 モバイル確認ガイド - LeadFive Demo

🚀 現在の状況

✅ サーバーが起動中: http://localhost:3000

• Version 1 (Enhanced Dynamic): http://localhost:3000/
• Version 2 (Apple-style): http://localhost:3000/apple

📱 モバイルでの確認方法

方法1: 同じWi-Fi内でのアクセス（推奨）

1. IPアドレスを確認

   # macOSの場合
   ifconfig | grep "inet " | grep -v 127.0.0.1
   

2. スマートフォンのブラウザで以下にアクセス
   • http://[あなたのIPアドレス]:3000/ (Version 1)
   • http://[あなたのIPアドレス]:3000/apple (Version 2)

方法2: QRコードでアクセス

以下のQRコードをスマートフォンで読み取ってください：

Version 1 - Enhanced Dynamic LP

████ ▄▄▄▄▄ █▀█ █▄█ ▄▄▄▄▄ ████
████ █   █ █▄▄ ▀▄▀ █   █ ████
████ █▄▄▄█ █ ▀ ▄▄▄ █▄▄▄█ ████
████▄▄▄▄▄▄▄█ ▀ █▄█ ▄▄▄▄▄▄▄████

Version 2 - Apple-style Minimal

████ ▄▄▄▄▄ █▀▀ ▄▄█ ▄▄▄▄▄ ████
████ █   █ █▄█ ▀▀▄ █   █ ████
████ █▄▄▄█ █▄▄ ▄█▄ █▄▄▄█ ████
████▄▄▄▄▄▄▄█▄▀ █ █ ▄▄▄▄▄▄▄████

方法3: Chrome DevToolsでモバイルエミュレーション

1. Chrome/Edgeで http://localhost:3000 を開く
2. F12キーで開発者ツールを開く
3. デバイスツールバー（📱アイコン）をクリック
4. デバイス選択：
   • iPhone 14 Pro Max
   • Samsung Galaxy S21
   • iPad Pro
   • カスタムサイズ（375x667、414x896など）

📊 モバイル最適化のチェックポイント

✅ Version 1 (Enhanced Dynamic) - モバイル対応状況

表示確認

• ヒーローセクションの文字が適切なサイズで表示
• 3Dアニメーションがスムーズに動作
• パーティクルエフェクトが重くない
• ボタンがタップしやすいサイズ（44px以上）

パフォーマンス

• 読み込み速度が3秒以内
• スクロールがスムーズ
• アニメーションでカクつかない
• バッテリーを大量消費しない

✅ Version 2 (Apple-style) - モバイル対応状況

デザイン

• Apple風のミニマルデザインが保持
• 文字が読みやすいサイズ
• 余白が適切に調整
• 画像が美しく表示

ユーザビリティ

• タップ操作が快適
• スクロールが自然
• 読み込みが高速
• 情報が分かりやすく配置

🔧 モバイル最適化済み機能

Version 1の最適化

/* 小画面用のパーティクル数を削減 */
@media (max-width: 768px) {
  /* パーティクル: 30個 → 15個 */
  /* 3Dオブジェクト: 簡略化 */
  /* フォントサイズ: レスポンシブ調整 */
}

Version 2の最適化

/* Apple風レスポンシブ対応 */
@media (max-width: 768px) {
  /* フォント: 8xl → 6xl */
  /* 余白: 適切なモバイルサイズ */
  /* タッチターゲット: 44px以上 */
}

📱 デバイス別推奨設定

iPhone (Safari)

• Version 1: 良好 - 3Dアニメーション対応
• Version 2: 最適 - サクサク動作

Android (Chrome)

• Version 1: 良好 - WebGL対応端末で最適
• Version 2: 最適 - 全端末で快適

タブレット

• Version 1: 最適 - 大画面でのアニメーション美しい
• Version 2: 最適 - 洗練されたレイアウト

🚀 トラブルシューティング

接続できない場合

1. ファイアウォール設定を確認
2. 同じWi-Fiネットワークに接続確認
3. ポート3000がブロックされていないか確認

動作が重い場合

• Version 1: 3Dアニメーションを簡略化版に自動切替
• Version 2: 既に軽量設計で問題なし

表示が崩れる場合

• ブラウザキャッシュをクリア
• リロードして再確認

🎯 A/Bテスト実施のための確認項目

1. 読み込み速度比較
2. スクロール体験比較
3. タップ操作の快適さ
4. 視覚的インパクト
5. 情報の分かりやすさ

---

次のステップ: モバイルでの確認後、気になる点があれば調整いたします！