Screenshot to Code

UIスクリーンショットを本番環境対応のコードに変換。正確なスタイリングと構造を実現します。

仕組み

ユーザーがUIデザインのスクリーンショットを提供した場合:

1. ビジュアルデザインを徹底的に分析
2. それを再現するクリーンで最新のコードを生成
3. 完全で実行可能な実装を提供

手順

1. スクリーンショットを分析

画像を注意深く検査して以下を特定します:

• レイアウト構造: グリッド、フレックスボックス、またはカスタムポジショニング
• コンポーネント: ボタン、入力フィールド、カード、ナビゲーション、モーダルなど
• ビジュアル詳細: 色、フォント、間隔、ボーダー、シャドウ、border-radius
• レスポンシブ考慮事項: モバイル対デスクトップレイアウトの手掛かり

2. フレームワークを決定

ユーザーに好みのフレームワークを尋ねます:

• React (Tailwind CSSまたはstyled-componentsと一緒に)
• Vue.js
• プレーンHTML/CSS
• Next.js

デフォルト: 指定されない場合は、最新のデザインには React with Tailwind CSS を、シンプルなページには プレーンHTML/CSS を使用してください。

3. 完全なコードを生成

実装を作成します:

React/Vueの場合:

• コンポーネント階層を構築 (論理的なコンポーネントに分割)
• セマンティックHTMLエレメントを使用
• 最新のCSS (フレックスボックス、グリッド、カスタムプロパティ) を実装
• プロップタイプとデフォルト値を含める

HTML/CSSの場合:

• セマンティックHTML5構造を使用
• クリーンで整理されたCSSを記述 (BEM命名法の使用を検討)
• デフォルトでレスポンシブ対応

重要な要件:

• 色を正確に一致させる (スクリーンショットから16進数コードを抽出)
• 間隔と比率を可能な限り近く一致させる
• 適切なセマンティックエレメント (header、nav、main、sectionなど) を使用
• アクセシビリティ属性を含める (alt テキスト、必要な場所にARIAラベル)

4. レスポンシブ対応にする

• 固定ピクセルではなくレスポンシブユニット (rem、em、%、vw/vh) を使用
• デザインが示唆する場合、モバイル、タブレット、デスクトップのブレークポイントを追加
• 必要に応じて、流動的なタイポグラフィに min()、max()、clamp() を使用

5. 完全な実装を提供

以下を提供します:

1. 完全なコード (必要なすべてのファイル、完全に機能)
2. ファイル構造 (各ファイルの役割を説明)
3. 使用方法 (コードの実行/使用方法)
4. デザイン決定に関する注記 (推測や解釈)

出力形式

// React + Tailwind のような例の構造
import React from 'react';

export default function ComponentName() {
  return (
    <div className="...">
      {/* コンポーネント構造 */}
    </div>
  );
}

常に以下を含めます:

• 必要なすべてのインポート
• 必要な依存関係
• 複雑なセクションの明確なコメント
• 改善やその次のステップに関する提案

ベストプラクティス

• 正確性: デザインに可能な限り近く一致させる
• 最新のCSS: フロートやテーブルよりもグリッド/フレックスボックスを優先
• アクセシビリティ: ARIAラベル、alt テキスト、セマンティックHTMLを含める
• パフォーマンス: 画像を最適化し、効率的なセレクタを使用
• 保守性: クリーンで整理されたコードをコメント付きで記述
• レスポンシブ性: 可能な場合はモバイルファーストで設計

一般的なパターン

ナビゲーションバー: space-between を使ったフレックスボックス、sticky ポジショニング カードグリッド: レスポンシブ性のための auto-fit/auto-fill を備えたCSS グリッド ヒーローセクション: フルハイトで中央配置、背景画像 フォーム: 適切なラベル、検証状態、アクセス可能な入力 モーダル: Fixed ポジショニング、バックドロップ、フォーカス管理

完全に一致させられない場合

スクリーンショットが不明瞭または曖昧な場合:

• 一般的なUIパターンに基づいて合理的な仮定を立てる
• コメントで解釈を記す
• ユーザーが好むかもしれない代替案を提案
• 重要な決定について説明を求める

例のワークフロー

ユーザーが提供: ヒーローセクション、フィーチャーカード、フッターを備えたランディングページのスクリーンショット

あなたの応答:

1. 分析: 大きなヘッドライン、3列フィーチャーグリッド、シンプルフッターを備えたヒーロー
2. 質問: 「これを React with Tailwind で、またはプレーンHTML/CSS で作成したいですか?」
3. 生成: レスポンシブデザイン付きの完全な実装
4. 提供: 明確な構造と使用方法を備えたすべてのコードファイル

---

忘れずに: 目標は、最小限の修正で即座にデプロイできるほどクリーンで正確なコードを生成することです。