> ## 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.

# アセットを作成する

> 画像、動画、ベクターグラフィック、アニメーション、音声アセットを作成し、それぞれのワークフローの正式なガイドに従いましょう。

export const CreateAssetsCover = () => <div className="chat-mkt" role="img" aria-label="A creative canvas with image, video, vector, and audio elements" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -16%, rgba(255,255,255,.82), transparent 43%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 49%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  width: "100%",
  minHeight: "inherit",
  placeItems: "center",
  padding: "clamp(14px, 3vw, 28px)",
  boxSizing: "border-box"
}}>
        <div style={{
  position: "absolute",
  left: "clamp(14px, 9%, 88px)",
  top: "22%",
  width: "clamp(44px, 9vw, 72px)",
  height: "clamp(38px, 8vw, 62px)",
  padding: 7,
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.15)",
  backdropFilter: "blur(5px)",
  boxSizing: "border-box"
}}>
          <span style={{
  position: "absolute",
  top: "24%",
  right: "21%",
  width: 5,
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.86)"
}} />
          <span style={{
  position: "absolute",
  left: "-5%",
  right: "-5%",
  bottom: "-16%",
  height: "68%",
  transform: "rotate(27deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.18)"
}} />
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(14px, 9%, 88px)",
  top: "22%",
  display: "grid",
  width: "clamp(44px, 9vw, 72px)",
  height: "clamp(38px, 8vw, 62px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.15)",
  backdropFilter: "blur(5px)"
}}>
          <span style={{
  width: 0,
  height: 0,
  marginLeft: 4,
  borderTop: "10px solid transparent",
  borderBottom: "10px solid transparent",
  borderLeft: "15px solid rgba(255,255,255,.86)"
}} />
        </div>
        <div style={{
  position: "absolute",
  left: "clamp(22px, 14%, 128px)",
  bottom: "clamp(18px, 10%, 46px)",
  display: "grid",
  width: "clamp(38px, 7vw, 58px)",
  height: "clamp(38px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 12px 24px rgba(55,27,18,.13)",
  backdropFilter: "blur(5px)"
}}>
          <svg viewBox="0 0 24 24" width="56%" fill="none" stroke="rgba(255,255,255,.86)" strokeWidth="1.6">
            <path d="M5 19 12 4l7 15H5Z" />
            <circle cx="12" cy="12" r="2.2" fill="rgba(255,255,255,.26)" />
          </svg>
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(22px, 14%, 128px)",
  bottom: "clamp(18px, 10%, 46px)",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  gap: 3,
  width: "clamp(40px, 8vw, 62px)",
  height: "clamp(38px, 7vw, 58px)",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 12px 24px rgba(55,27,18,.13)",
  backdropFilter: "blur(5px)"
}}>
          {[10, 20, 14, 25, 12].map((height, index) => <span key={index} style={{
  width: 3,
  height,
  borderRadius: 999,
  background: index === 3 ? "rgba(255,255,255,.88)" : "rgba(255,255,255,.52)"
}} />)}
        </div>
        <div style={{
  position: "relative",
  display: "grid",
  width: "clamp(174px, 34vw, 280px)",
  minWidth: "min(54%, 250px)",
  minHeight: "clamp(154px, 26vw, 212px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.66)",
  borderRadius: 22,
  background: "linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12))",
  boxShadow: "0 22px 42px rgba(65,21,7,.24)",
  backdropFilter: "blur(8px)",
  boxSizing: "border-box"
}}>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
            {[0, 1, 2].map(dot => <span key={dot} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: dot === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.36)"
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "1.16fr .84fr",
  gap: 8,
  minHeight: "clamp(105px, 18vw, 150px)",
  marginTop: "clamp(13px, 2.3vw, 19px)"
}}>
            <div style={{
  position: "relative",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 10,
  background: "linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08))"
}}>
              <span style={{
  position: "absolute",
  left: "12%",
  bottom: "12%",
  width: "76%",
  height: "54%",
  transform: "skewY(-27deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.16)"
}} />
            </div>
            <div style={{
  display: "grid",
  gap: 8
}}>
              <span style={{
  border: "1px solid rgba(255,255,255,.42)",
  borderRadius: 9,
  background: "rgba(255,255,255,.16)"
}} />
              <span style={{
  border: "1px solid rgba(255,255,255,.32)",
  borderRadius: 9,
  background: "rgba(255,255,255,.08)"
}} />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

<CreateAssetsCover />

作業に必要なメディアの作成を Replit に依頼し、その結果を Conversation またはそのワークフローを担う各プロダクト画面で仕上げましょう。目指す成果に合ったアセットの種類を選びます。

## アセットの種類を選ぶ

<section className="chat-mkt chat-workflow-grid has-visuals catalog-three-up">
  <a className="chat-example has-visual" href="/ja/features/agent/image-generation">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="image" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="image" size={19} />
    </span>

    <div className="chat-card-title">画像を生成する</div>

    <p>
      プロジェクト向けにカスタム画像、イラスト、背景、アイコンなどのビジュアルコンテンツを作成します。
    </p>

    <div className="chat-card-link">画像生成を開く →</div>
  </a>

  <a className="chat-example has-visual" href="/ja/design/toolbar#generate">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="photo-film" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="photo-film" size={19} />
    </span>

    <div className="chat-card-title">動画クリップを生成する</div>

    <p>
      Replit Design の Generate media ツールで短いモーションクリップやアニメーションを作成します。
    </p>

    <div className="chat-card-link">Design ガイドを開く →</div>
  </a>

  <a className="chat-example has-visual" href="/ja/design/toolbar#generate">
    <div className="chat-use-case-visual palette-orange">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="bezier-curve" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="bezier-curve" size={19} />
    </span>

    <div className="chat-card-title">ベクターグラフィックを生成する</div>

    <p>
      Replit Design で SVG アイコン、ロゴ、図版、スタイライズされたイラストを作成します。
    </p>

    <div className="chat-card-link">Design ガイドを開く →</div>
  </a>

  <a className="chat-example has-visual" href="/ja/features/artifact-types/animated-videos">
    <div className="chat-use-case-visual palette-ink">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="film" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="film" size={19} />
    </span>

    <div className="chat-card-title">アニメーション動画を作成する</div>

    <p>
      Conversation を通じてプログラムによるモーショングラフィックスを構築し、結果を動画としてエクスポートします。
    </p>

    <div className="chat-card-link">アニメーション動画を開く →</div>
  </a>

  <a className="chat-example has-visual" href="/ja/features/agent/audio-generation">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="waveform" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="waveform" size={19} />
    </span>

    <div className="chat-card-title">音声を生成する</div>
    <p>アプリ向けに音楽、効果音、ナレーションを作成します。</p>
    <div className="chat-card-link">音声生成を開く →</div>
  </a>
</section>

アセット作成はその場で結果を生み出します。スケジュールに沿って繰り返すべき作業には、[Routine タスクを実行する](/ja/chat/routines)に進んでください。

生成された動画クリップとアニメーション動画は異なるワークフローを使用します。アニメーション動画は MP4 としてエクスポートできるプログラムによるモーショングラフィックスです。ビジュアルアセットの例については、[最初の画面をデザインする](/ja/design/design-your-first-screen)をご覧ください。

## 最新の情報を取り入れる

Web Search はアセットを作成しません。画像、音声クリップ、動画、グラフィックが最新情報に基づくべきときに使用し、その方向性をもとに適切なアセットの作成を Replit に依頼しましょう。

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/ja/features/agent/web-search">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="globe" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="globe" size={19} />
    </span>

    <div className="chat-card-title">ウェブを検索する</div>

    <p>
      アセットを作成する前に、最新の情報と出典を伴った情報源を集めます。
    </p>

    <div className="chat-card-link">Web Search を開く →</div>
  </a>
</section>