> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# FlowstepのデザインをJPGまたはPNGの画像ファイルとしてダウンロード
> Flowstepはデザインをジェーペグまたはピングでエクスポートできます。ユースケースに適した形式を学び、わずか数クリックで画面をダウンロードする方法を確認してください。
デザインを共有またはハンドオフする準備ができたら、Flowstepを使用して静止画像（JPGまたはPNG）としてエクスポートできます。両方の形式は、デザインツール、プレゼンテーションソフトウェア、ブラウザなど、幅広くサポートされているため、生成されたデザインをどこにでも持ち運べます。
## デザインをエクスポートする方法
Flowstep内でエクスポートしたいデザインに移動します。
ツールバーまたはデザインパネルのエクスポートオプションを見つけます。それを選択してエクスポート設定を開きます。
ユースケースに応じて**JPG**または**PNG**を選択します（以下の比較を参照してください）。
選択を確認して、エクスポートされた画像をデバイスにダウンロードします。
## JPGとPNG：どの形式を使用すべきか？
| | JPG | PNG |
| ----------- | ------------------------------- | ----------------------- |
| **最適な用途** | プレビューの共有、プレゼンテーション、ステークホルダーレビュー | 透明な背景を備えたデザイン、高精度のハンドオフ |
| **ファイルサイズ** | より小さい—メールまたはメッセージング経由で共有しやすい | より大きい—フル画像詳細を保持 |
| **透明性** | サポートされていない | サポートされています |
| **品質** | わずかに圧縮 | ロスレス—品質低下なし |
デザインをスライドデッキに貼り付けたり、クライアントに素早いプレビューを送信したりする場合は、JPGが通常は正しい選択です。鮮明なエッジまたは透明な背景が必要な場合（例えば、別の画像上にデザインをオーバーレイするなど）、PNGを使用してください。
## コードをエクスポート
画像の他に、**Code**ボタンは画面をReact + Tailwindコードとしてエクスポートします。スニペットをコピーするか、完全なバンドルをZIPとしてダウンロードしてください。バンドルは自己完結型です。デザインで使用されている画像（チャットパネルに添付されたものを含む）は、`public/assets/`フォルダに含まれ、コードはローカルパスで参照されるため、エクスポートはそのまま実行されます。
ダウンロードされたファイル（画像とコードバンドルの両方）は、それらが属する画面にちなんで名付けられます（画面に名前がない場合はファイル名にフォールバック）。これにより、多くの画面を操作しているときに、エクスポートを簡単に識別できます。
デザインをベクター編集ワークフローに取り込む必要がある場合は、代わりにFigmaに直接コピーしてください。[Flowstepのデザインを即座にFigmaにコピー](/ja/figma-integration)を参照してください。