> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 画像生成

> Agent を使って AI 画像を生成し、プロジェクトに追加する方法を学びましょう。

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

Agent の画像生成 <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/image.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=59ae41afbef6d40fb7b7de59d2ffc26b" alt="画像生成アイコン" width="24" height="24" data-path="images/icons/image.svg" /> 機能を使って、アプリケーション用のビジュアルコンテンツを作成しましょう。

アイデアをカスタム画像、イラスト、グラフィックスに変換して、プロジェクトのニーズに完璧にマッチさせましょう。ウェブサイト、モバイルアプリ、あらゆるクリエイティブプロジェクトを構築する際に、Agent はあなたのビジョンを現実にする画像を生成します。

<Frame>
  <img src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/image-generation/imagegen.png?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=1afcbec6348249b8ab3fa34e29906602" alt="Agent がアプリ開発用に AI 画像を生成している様子" width="870" height="482" data-path="images/image-generation/imagegen.png" />
</Frame>

画像生成により、デザインスキルや外部ツールなしでユニークなビジュアルコンテンツを作成できます。アイコンやイラストから背景や UI 要素まで、開発ワークフロー内で直接すべてを生成できます。

## 機能

Agent の画像生成を使ってビジュアル的に魅力的なアプリケーションを構築しましょう。これにより、ストックフォト、外部デザインツール、基本的なビジュアルコンテンツのためのデザイナー雇用の必要がなくなります。ポートフォリオサイトの作成、ゲームの構築、モバイルアプリインターフェースのデザインなど、画像生成はプロジェクトに合わせたカスタムビジュアルを提供します。

Agent が実行できる画像生成アクション：

* **カスタム画像作成**: 詳細な説明と仕様に基づいて画像を生成します
* **スタイル適応**: リアルからカートゥーン風まで、さまざまなアーティスティックスタイルで画像を作成します
* **透明背景**: 透明な PNG として画像を生成するか、既存の画像から背景を削除します — ロゴ、アイコン、ステッカー、製品の切り抜きに最適です
* **プロジェクト統合**: 生成された画像をアプリのコードベースに直接シームレスに追加します
* **反復的な改良**: フィードバックに基づいて画像を修正・改善します

## 使い方

画像生成は Agent に組み込まれています — 設定をオンにする必要はありません。Agent が有効になっている任意の Replit アプリを開いて、必要なビジュアルコンテンツを作成するよう Agent に依頼してください。Agent はあなたのリクエストに基づいて画像を生成するタイミングを自動的に判断し、仕様に合ったカスタム画像を作成します。

### Agent が画像生成を使用するタイミング

Agent はプロジェクトのビジュアルコンテンツをリクエストしたときに画像生成を起動します：

| ユースケース           | プロンプト例                                |
| ---------------- | ------------------------------------- |
| **アプリアイコンとロゴ**   | 「フィットネストラッキングアプリのモダンなロゴを生成してください」     |
| **ウェブサイトの背景**    | 「ポートフォリオサイト用の繊細なグラデーション背景を作成してください」   |
| **ゲームアセット**      | 「プラットフォーマーゲーム用のピクセルアートスプライトを生成してください」 |
| **UI イラスト**      | 「アプリの空の状態画面のイラストを作成してください」            |
| **マーケティングビジュアル** | 「ランディングページ用のヒーロー画像を生成してください」          |
| **製品モックアップ**     | 「異なるデバイスで動作するアプリのモックアップ画像を作成してください」   |
| **透明なロゴとアイコン**   | 「透明な背景でアプリのロゴを生成してください」               |

### 画像生成のベストプラクティス

Agent の画像生成から最良の結果を得るために、これらのガイドラインに従ってください：

**具体的で詳細に**

* スタイル、色、構図、ムードに関する詳細を含めてください
* 関連する場合はサイズやアスペクト比を指定してください
* 使用目的（アイコン、背景、イラストなど）を明記してください
* ロゴ、アイコン、ステッカー、または他のコンテンツの上に重ねるカットアウトが必要な場合は、透明な背景を要求してください

**反復して改良する**

* 基本的な説明から始めて、結果に基づいて改良してください
* 生成された画像の特定の部分を修正するよう Agent に依頼してください
* バリエーションをリクエストして、さまざまなクリエイティブな方向性を探ってください

**プロジェクトのスタイルを考慮する**

* アプリ全体でビジュアルの一貫性を維持してください
* ブランドやデザインシステムに合ったスタイルの好みを指定してください
* 既存のビジュアル要素を補完する画像を依頼してください

### プロンプトの例

画像生成を始めるために、これらのサンプルプロンプトを試してみてください：

<AiPrompt>
  タスク管理アプリのクリーンでモダンなアイコンを生成してください。
  アイコンは青から紫へのグラデーション背景の円形で、
  白いシンプルなチェックマークシンボルを特徴としてください。
  アプリアイコンとして使用できるものにしてください。
</AiPrompt>

<AiPrompt>
  コーディングチュートリアルウェブサイトのヒーローイラストを作成してください。
  コードが映った画面でパソコンに向かっている親しみやすいキャラクターを描いてください。
  青とオレンジの温かい色調パレットを使用してください。
  スタイルは初心者にとって親しみやすく励みになるものにしてください。
</AiPrompt>

<AiPrompt>
  レトロスタイルのプラットフォーマーゲーム用のピクセルアートの敵キャラクターを生成してください。
  飛んでいるコウモリ、歩いているキノコ、ジャンプするスライムが必要です。
  それぞれ 8 色の限定カラーパレットで 32x32 ピクセルにしてください。
  かわいいけど少し凶悪な感じにしてください。
</AiPrompt>

### プロジェクト統合

Agent は生成された画像をコードベースにシームレスに統合します：

* **自動ファイル作成**: 生成された画像はプロジェクトファイルに直接保存されます
* **コードの更新**: Agent は新しい画像ファイルを参照するようにコードを更新します
* **アセットの整理**: 画像はプロジェクト構造内の論理的なディレクトリに配置されます

この効率的なワークフローにより、開発環境を離れることなくビジュアルコンテンツを生成・実装できます。

<Note>
  Replit の画像生成は、高品質でフォトリアリスティックな画像の作成と精細なテキストレンダリング機能に優れた最先端のテキストから画像へのモデルである [Google の Imagen 4](https://deepmind.google/models/imagen/) によって動作しています。
</Note>

[Agent での作業](/ja/references/agent/overview)についてさらに詳しく学ぶか、他の [AI ツール](/ja/build/welcome)を探索してください。
