aesthetic-analysis

ランディングページの再デザイン

手順

参考デザインに基づいてランディングページの再デザインを依頼された場合：

1. ユーザーへのヒアリング

• 最初の依頼に記載されていない場合は、ユーザーに次の情報を尋ねます：
  • 参考 URL または画像：再現するランディングページまたはデザイン（公開中のウェブサイトの URL または画像の URL）
  • 対象ページ：デザインを適用するコードベース内のファイル（例：app/(tabs)/index.tsx、app/landing.tsx）
• 最初の依頼に詳細が記載されている場合は、ステップ 2 に進みます

2. 参考デザインのキャプチャ

• Playwright MCP を使用して参考 URL を開きます：
  • ページに移動します
  • 全体像を把握するため、ページ全体のスクリーンショットを撮影します
  • ウェブサイトを操作し、マウスをホバーしたり、クリックしたりします
  • ページを詳しく分析します
• ランディングページまたは画像を分析し、次の点を確認します：
  • レイアウト構造（ヘッダー、ヒーロー、セクション、フッター）
  • インタラクティブ要素
  • カラーパレット
  • タイポグラフィ（フォント、サイズ、ウェイト）
  • 余白とパディングのパターン
  • UI コンポーネント（ボタン、カード、フォームなど）
  • レスポンシブデザインのパターン

3. デザインの実装

• 対象ページのファイルを読み、現在の構造を把握します
• 次の原則に従ってデザインを実装します：
  • レイアウトを合わせる：セクション構成、グリッドレイアウト、フレックスパターンを再現します
  • インタラクションを合わせる：主要な要素に対するクリックやホバーなど、マウス操作とボタン操作を再現します
  • 色を合わせる：参考デザインから正確な 16 進数値を抽出して使用します
  • タイポグラフィを合わせる：類似したフォントを使用します（利用可能なシステムフォントに合わせるか、フォントのインポートを提案します）
  • 余白を合わせる：パディング、マージン、間隔を再現します
  • コンポーネントを合わせる：ボタン、カード、入力欄などに相当する React Native コンポーネントを構築します
  • プロジェクトのパターンに従う：CLAUDE.md のガイドラインに従い、StyleSheet.create() を使用します
  • モバイルファースト：モバイル（Expo/React Native）でデザインが機能するようにします
• 実装を対象ファイルに書き込みます

4. 実装の比較

• 参考デザインが公開中のウェブサイトの場合：
  • 実装したページのスクリーンショットを撮影します
  • Playwright を使用して実装を表示します
• 次の点を目視で比較します：
  • レイアウトの配置と比率
  • 色の正確さ
  • タイポグラフィの一貫性
  • 余白とパディング
  • コンポーネントのスタイルの詳細
• 見つかった差異を記録します

5. 反復と改善

• 比較に基づいて、具体的な不足点を特定します：
  • レイアウトの問題（配置、サイズ、位置）
  • 色の不一致
  • タイポグラフィの違い
  • コンポーネントや詳細の不足
  • 余白の不整合
• それぞれの不足点を解消するため、対象を絞って改善します
• 次の条件を満たすまで、ステップ 4〜5 を繰り返します：
  • 技術的に可能な限りデザインが一致している
  • 主要なビジュアル要素がすべて再現されている
  • ユーザーが満足を確認している
• 高い再現度を実現するため、最低 3〜5 回の反復を目指します

6. 最終レビュー

• 最終的な実装をユーザーに提示します
• 一致させた点と、意図的に異なる点をまとめます
• 今後の改善案（アニメーション、ホバー状態、レスポンシブ対応の調整など）を提案します

ベストプラクティス

• 細部に注意する：余白、色、タイポグラフィの小さな違いでも、視覚的な一貫性が損なわれる場合があります
• 正確な値を抽出する：カラーピッカーや計測ツールを使用して、スクリーンショットから正確な値を取得します
• コンポーネントの再利用性：繰り返し使うパターンを、再利用可能なコンポーネントとして切り出します
• プロジェクト標準を維持する：StyleSheet.create() のパターンと既存のアーキテクチャに従います
• トレードオフを記録する：React Native の制約によって完全な再現ができない場合は、その理由を記録します

実行例

ユーザーのリクエスト：「ランディングページを https://stripe.com/payments のような見た目にしてください」

1. ヒアリング：「このデザインを適用するファイルはどれですか？」と尋ねます → ユーザー：「app/(tabs)/index.tsx」
2. キャプチャ：
   • stripe.com/payments に移動します
   • ページ全体のスクリーンショットを撮影します
   • 詳細に分析します：ダークテーマ、グラデーションのヒーロー、機能グリッド、すっきりしたタイポグラフィ、ホバー／クリック時に色が変わるボタン
3. 実装：
   • app/(tabs)/index.tsx を読み込みます
   • 参考ページに基づいて作成します
4. 比較：
   • スクリーンショットでは、ヒーローのグラデーションが参考ページより明るく表示されています
   • ボタンの角丸が鋭すぎます
   • フォントの太さが一致していません
   • ホバー時にボタンが変化しません
5. 反復：
   • グラデーションの色を調整して一致させます
   • ボタンの角丸を小さくします
   • フォントの太さを上げます
   • ホバー／クリック時にボタンが変化するようにします
   • 再度比較します
6. 再度反復：
   • セクション間の余白を微調整します
   • アイコンのサイズを調整します
   • 色の値を正確に一致させます
7. 最終レビュー：一致させた要素の概要を添えて、ユーザーに提示します

技術上の注意点

• React Native に関する考慮事項：

  • Web フォントは、expo-font または google fonts を使って読み込む必要がある場合があります
  • 一部の Web 固有のエフェクト（box-shadow）には、React Native で対応するもの（shadowColor、shadowOffset）があります
  • レスポンシブなレイアウトには Dimensions API を使用します

• 反復の目標：

  • 1 回目：全体のレイアウトと構成
  • 2 回目：色とタイポグラフィ
  • 3 回目：余白とサイズの調整
  • 4 回目以降：細部の調整と仕上げ

参考資料

• Playwright MCP のドキュメント
• Expo スタイルガイド
• React Native StyleSheet