# 画像を扱う (/ja/docs/verdent-for-vscode/common-workflows/images)
> Verdent で画像をアップロードして活用する
Verdent for VS Code は強力なマルチモーダル機能を備えており、画像をアップロードして視覚的な分析、モックアップからのコード生成、スクリーンショットを使ったデバッグなどを利用できます。このガイドでは、開発プロセスで画像理解を活用する実践的なワークフローを紹介します。
***
## Verdent への画像のアップロード [#verdent-への画像のアップロード]
分析や参照のために Verdent と画像を共有したいとします。
クリップボードを使った素早い方法:
1. 画像をクリップボードにコピーします（スクリーンショット、ブラウザからのコピーなど）
2. Verdent の入力フィールドをクリックします
3. **Ctrl+V**（Windows/Linux）で貼り付けます
**重要:** macOS では画像を貼り付けるのに **Ctrl+V**（Cmd+V ではない）を使用します。
画像が会話に表示されます。
パスで画像を参照します:
```
Analyze this screenshot: /path/to/screenshot.png
```
Verdent は指定されたパスから画像を読み取ります。
```bash "Absolute Path"
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png
```
```bash "Relative Path (Project Root)"
./screenshots/error.png
./mockups/design.png
```
```bash "Relative Path (Current Directory)"
../images/diagram.png
../../assets/logo.png
```
一般的な形式: PNG、JPG、JPEG、WebP、GIF
複数の画像を扱います:
1. クリップボードから複数の画像を順番に貼り付けます
2. または複数のパスを参照します:
```
Compare these three mockups: design-v1.png, design-v2.png, design-v3.png
```
すべての画像が会話に表示され、まとめて参照できます。
**ヒント:**
* 対応形式: PNG、JPG、JPEG、WebP、GIF、BMP
* 画像は会話のコンテキストに残るため、複数ターンの議論が可能です
* アップロードした画像は後続の質問でも参照できます
* 鮮明な画質ほど分析結果が向上します
***
## デザインモックアップからのコード生成 [#デザインモックアップからのコード生成]
デザインモックアップがあり、Verdent に実装コードを生成させたいとします。
モックアップ画像（Figma のエクスポート、デザインツール、手描きのスケッチなど）をコピーするか、ファイルパスで参照します。
```
Generate React components to implement this dashboard design
```
Verdent が視覚的な構造を分析します。
Verdent は視覚要素を識別し、次を生成します:
```tsx
// DashboardLayout.tsx
import React from 'react';
import { StatCard } from './StatCard';
import { RecentActivity } from './RecentActivity';
import { UserChart } from './UserChart';
export function DashboardLayout() {
return (
);
}
```
コンポーネントはモックアップの構造に一致します。
```
Generate Tailwind CSS classes to match the mockup styling
```
Verdent は視覚デザインに基づいてスタイルを追加します:
```tsx
```
```
The spacing between stat cards should be larger, and add the blue accent color from the mockup
```
Verdent がデザインにより正確に合わせて調整します。
**ヒント:**
* 解像度の高いモックアップほど正確なコードが生成されます
* フレームワークを指定します: React、Vue、Angular、素の HTML/CSS
* スタイリング手法を明記します: Tailwind、CSS Modules、Styled Components
* 精度を高めるためカラーコードやデザインシステムの詳細を提供します
* 手描きのスケッチでも素早いプロトタイプには有効です
***
## スクリーンショットによるエラーのデバッグ [#スクリーンショットによるエラーのデバッグ]
エラーメッセージに遭遇し、その内容の理解に手助けが必要だとします。
エラーを表示しているブラウザコンソールのスクリーンショットを貼り付けます:
```
Here's the error I'm getting in the console. What's causing it?
```
Verdent は次を読み取ります:
* エラーメッセージのテキスト
* スタックトレースの情報
* ファイル名と行番号
* 関連するコンソールの警告
Verdent が診断を提供します:
```
This is a "Cannot read property 'map' of undefined" error. The 'users' array is undefined when the component first renders. Add a conditional check or default empty array.
```
Verdent が修正方法を提案します。
ターミナルのコンパイルエラーのスクリーンショットを貼り付けます:
```
My TypeScript build is failing with these errors
```
Verdent は次を分析します:
* 型エラー
* ファイルパス
* エラーコード
* コンパイルのコンテキスト
Verdent が説明します:
```
You have a type mismatch in UserProfile.tsx line 42. The 'age' property expects a number but you're passing a string. Cast it with Number(age).
```
アプリケーションログのスタックトレースのスクリーンショットを貼り付けます:
```
The application crashed with this exception
```
Verdent は次を調べます:
* 例外の種類
* スタックトレース
* メソッド名と行番号
* 文脈となるログメッセージ
根本原因を特定し、修正方法を提案します。
ブラウザの DevTools の Network タブのスクリーンショットを貼り付けます:
```
This API request is failing, here's the network tab
```
Verdent は次を分析します:
* HTTP ステータスコード
* リクエスト/レスポンスのヘッダー
* リクエストのペイロード
* レスポンスのボディ
API の問題を診断します。
**ヒント:**
* エラーメッセージは省略せず全文を含めます（重要な部分を切り取らない）
* 可能な限りスタックトレースを完全に表示します
* 周辺のコンテキストも含めます（他のコンソールメッセージやネットワークリクエストなど）
* テキストで説明するだけでなく、実際のエラーをスクリーンショットで示します
***
## よくある質問 [#よくある質問]
**最大ファイルサイズ:** 5MB（超過した場合は自動圧縮されます。圧縮後も 5MB を超える場合はエラーになります）
**最大解像度:** 2000×2000 ピクセル
**対応形式:** PNG、JPG、JPEG、GIF、BMP、WebP
**ベストプラクティス:** 最適なパフォーマンスと正確な分析のため、3MB 未満で 2000×2000 までの解像度の画像を使用してください。
はい。複数の画像を順番に貼り付けたり、1 つのプロンプトで複数のファイルパスを参照したりできます。Verdent はすべての画像にわたってコンテキストを保持し、比較や分析を行います。例: 「これら 3 つのモックアップを比較して、違いを指摘してください。」
クリップボードで貼り付けた画像やファイルパスで参照した画像は、会話セッション内で処理されます。画像は永続的に保存されず、新しい会話を開始すると消去されます。ファイルパスでの参照は、アップロードせずにローカルで画像を読み取ります。
Verdent はモックアップの視覚構造、レイアウト、スタイルを実装する機能的なスターターコードを生成します。通常は、ビジネスロジック、データ連携、アクセシビリティ機能、エラー処理、本番向けの最適化を追加して調整する必要があります。
修正のフィードバックを繰り返し与えてください。「ヘッダーはグレーではなく青にしてください」や「これらのカードは 4 列ではなく 3 列のグリッドにしてください」のように伝えます。Verdent はあなたの修正に基づいて実装を調整します。複数回の調整を行うのは通常のことです。
***
## 関連項目 [#関連項目]
Verdent を使って新しい機能やコンポーネントを作成する
コードの理解と探索のワークフロー