Recraftの実際の使い方：画像を作る、直す、ベクターにする、拡大する、モックアップにする、書き出す。場面ごとに、何を開き何を押すかを順に

この記事は、公式の資料を2026年10月25日に読んでまとめたものです。この記事は、実際に使って確かめた記録ではありません。

先に結論

• 場面ごとの入口は決まっています。 新しく作るのは左パネル、いま持っている画像を直すのは右パネル（画像を選ぶと出る）です。
• Createタブは、前の依頼を覚えません。 公式は、毎回が独立した依頼で、速くて予測しやすい、と書いています。会話の文脈を使うのはChatタブです。
• 画像を直す方法は2つで、結果は同じと公式が書きます。 画像を選んで右パネルの「Edit image」を使う方法と、Createタブで画像を参考として付けて変更を書く方法です。
• ベクターにできない画像もあります。 写真のようなもの、3Dのレンダリング、細かい質感の絵は、うまくベクター化できないことがある、と公式が書いています。
• 公式に書かれていないこと（Windowsのキー操作、クレジットを表示する画面の位置など）は、書いていません。

前提：用語をそろえる

• キャンバス：プロジェクトの中の作業台です。画像が枠（バウンディングボックス）に入って並びます。
• 右パネル／コンテキストパネル：画像を選ぶと出る、その画像を扱う場所です。公式の「Vector Editor」のページでは、右側のパネルに「Modify」「Reuse」「Finalise」の3つのまとまりがある、と書かれています。
• Selected object（選んだ画像）パネル：画像のプロンプト、モデル、スタイル、設定が出るパネルです。「Reuse」と「Copy」があります。Chatの中での扱いは、Generation modesのページではCreateの説明にだけ出てきます（Chatで使えないという明記は、公式で確認できていません）。
• ラスター／ベクター：ラスターは点（ピクセル）の画像、ベクターは線と面の図形データ（SVG）です。
• フレーム：キャンバスの中の枠で、部分的な生成や、ベクターの図形の分解などに使います（詳細は公式のフレームのページ。この記事では、ベクターの編集で出てくる範囲だけ）。
• スタイル：画像の見た目のまとまりです。カテゴリーは公式が「Photo、Illustration、Graphic design、Icon、Logo」と書いています。
• クレジット：生成や編集で使う量の単位です。料金の表は04を参照してください。

場面1：最初の画像を作る（Createタブ）

公式の「How to generate an image」の手順です。

1. プロジェクトを開きます（新しく作るか、recraft.newから始めます。05の手順1-2）。
2. 左パネルの「Create」タブを開きます。
3. プロンプトの欄に、作りたい画像の説明を書きます。

この記事の例（プロンプト）：

text A poster illustration of a lighthouse on a cliff at sunset, flat design, limited color palette

1. 必要なら、次の設定を調べます。公式が挙げる項目です。

1. 「Generate」を押します（Macでは、Enterキーでも生成できると、ショートカットの一覧にあります）。

期待される結果：数秒後に、キャンバスの枠の中に画像が出ます。

つぎに、直したいときは、画像をクリックして「Selected object」パネルを開き、「Reuse」を押します。同じ設定で作り直すか、設定を変えてから作り直せます。「Copy」はプロンプトだけをコピーします（How to generate のページに Copy の記載は見つからず、公式で確認できていません）。

場面2：話しかけて作る（Chatタブ、Agentic）

公式の「Agentic mode」のページの内容です。

1. 左パネルの「Chat」タブを開きます。別の設定を有効にする操作は、公式のページに書かれていません。
2. やりたいことを書きます。

この記事の例：

text SaaSのトップページ用のヒーロー画像を作りたい。プロンプト案を3つ出してください。

1. 返ってきた案を選び、手直しして続けます。公式が挙げる使い方は次のとおりです。
2. 提案されたプロンプトを選び、編集して、フラットやフォトリアルなどのスタイルを頼む。
3. 前の結果を指して、細部を変える（例：2枚目のフラットな画像に要素を足す）。
4. 参考画像を付けて、そのスタイルを他の画像に当てる。
5. 縦横比、枚数、背景の除去、ベクター化、拡大などのRecraftの機能を指定する。
6. 一連の作業をつなげる（商品の写真、背景の除去、ベクター版、の順など）。

期待される結果：画像が、キャンバスに並んで出ます。結果を並べて見比べたり、前の出力を土台にしたりできる、と書かれています。

注意点（公式が書くこと）：

• Chatは、生成の記録を残しません。画像はキャンバスに残り、履歴は左上の「History」にあります。
• AI Chatは、言語モデルとのやり取りごとにクレジットを使います。簡単な依頼で約1クレジット、長い複数段の作業ではもっと使う、と書かれています。使う量を抑えるには、作業を替えるときに新しいセッションを始める、とあります。
• 旧インターフェースのトグルをオンにしていると、AI Chatは使えません。

場面3：自然な言葉で、画像の一部だけ直す

公式の「Editing images with natural language」の手順です。

1. 画像を、アップロードするか、生成して、キャンバスに置きます（アップロードは、ツールバーの「Upload image」ボタンか、ファイルのドラッグ＆ドロップ。公式のImportのページに書かれています）。
2. キャンバスで画像を選びます。
3. 右パネルの、Modifyの下にある「Edit image」を選びます。画像の隣にプロンプトの欄が出ます。
4. プロンプトパネルで、モデルを選びます。モデルは提供元ごとに並び、ほとんどは品質と速度の段階が複数あります。「Auto mode」を選ぶと、Recraftが選びます。
5. 変更の内容を書きます。

この記事の例（プロンプト）：

text Make the jacket red. Keep everything else unchanged.

1. 必要なら、クリップのアイコンで参考画像を付けます。
2. 生成のボタンを押します。

期待される結果：書いた部分だけが変わった画像が出ます。直した結果の上に、さらに直しを重ねられます。各編集で新しい版ができ、元の画像は残る、と公式のクイックスタートが書いています。

別の入口は、左パネルの「Create」で、既存の画像を参考として付け、変更を書く方法です。複数の参考画像をまとめたいときや、直前の生成から続けたいときに向く、と公式が書いています。結果は同じ、とも書かれています。

参考画像の上限（公式の表記）：

選ぶモデルでクレジットと時間が変わります。公式の例では、Nano Bananaは5クレジットで約12秒、GPT Image 2 Lowは2クレジットです。ほかに、モデルごとの縦横比があり、画像の縦横比が対応外のときは、最も近い形式になる、と書かれています。この編集では、Google、OpenAI、ByteDance、Black Forest Labs、Alibaba、Ideogram、Krea、ImagineArt、NVIDIA、xAIの外部のモデルが使われる、と公式が書いています（データの行き先は03）。

場面4：背景を抜く、背景を変える

公式の「Background tools」の手順です。

背景を取り除く

1. 画像を選びます。
2. コンテキストパネルの「Remove background」を押します。
3. 背景が消えて、被写体だけが残ります（透明）。

注意（公式の記載）：短い辺が1024ピクセル以上の画像で使える。大きな画像は、縁にノイズが出ることがあり、自動で縮小されて画質が下がることがある。

背景を変える

1. 生成した画像か、アップロードした画像を選びます。
2. コンテキストパネルの「Change background」を押します。
3. 背景の部分に、マスク（範囲）がかかるのを待ちます。
4. プロンプトパネルに、新しい背景の説明を書きます。

この記事の例（プロンプト）：

text A clean white studio backdrop with a soft shadow on the floor

1. 生成のボタンを押します。

期待される結果：新しい背景の画像が、別の画像としてキャンバスに出ます。

場面5：ラスターをベクター（SVG）にする

公式の「Vectorizing」の手順です。

1. ラスター画像（PNG、JPGなど）をキャンバスに置きます。
2. 画像を選び、コンテキストパネルの「Vectorize」のアイコンを押します。
3. 「Color Reduction」のスライダーで、色の数を減らします。複雑な画像を単純にしたり、印刷の準備をしたりするときに使う、と書かれています。
4. 色を直します。2つのモードがあります。
5. Swatches（初期）：色の見本をクリックして、特定の色を置き換える。
6. Spectrum：関連する色の範囲をまとめて動かす。例：青をすべて緑寄りに。細かい色の違いが多い画像に向く、と書かれています。
7. 満足したら、SVGで書き出します（場面9）。

注意（公式の記載）：写真のような画像、3Dのレンダリング、質感の強い絵は、SVGが単純な形・線・塗りしか扱えないため、ゴミ（artifact）が出ることがあります。

場面6：最初からベクターで作る、ベクターを編集する

6-1 ベクターを作る

1. 左パネルの「Create」で、Generation typeを「Vector」にします。
2. プロンプトを書きます。

この記事の例（プロンプト）：

text A set of 6 simple line icons for a weather app, consistent stroke width, white background

1. 「Generate」を押します。

公式の「Vector Editor」のページは、ベクターは別の生成の種類で、参考画像は使えない、と書いています。

6-2 ベクターの点と曲線を編集する

公式の「Vector Editor」の内容です。生成したベクターも、取り込んだSVGも編集できます。

1. ベクターを選びます。右側のパネルに、3つのまとまりが出ます。
2. Modify：Change background、Remove background、Edit area、Remix image、Adjust colors、Outpaint。
3. Reuse：Turn into frame、Turn into raster image、Reuse for video、Extract prompt。
4. Finalise：Export。
5. エディターに入る方法は2つです。
6. ベクターをダブルクリックする。一時的に図形に分かれる。外をクリックすると抜ける。
7. 「Reuse」の「Turn into frame」を選ぶ。図形が、フレームの中で恒久的に分かれる。
8. フレームの中の図形では、移動、拡大縮小、回転ができます。「Send to back」「Bring to front」で重なりを変え、図形を選んで塗りの色を変えます。CmdかCtrlを押しながらドラッグすると、複数の図形を選べます。
9. 図形をダブルクリックすると、点と曲線の編集に入ります。
10. 点や辺をドラッグして動かす。
11. パス（線）をクリックして点を足す。
12. CmdかCtrlを押しながら点をクリックして、接線（タンジェント）を足したり消したりし、端をドラッグして曲線の形を変える。
13. 点を選んでDeleteで消す。
14. ドラッグで複数の点を選ぶ。Shiftを押しながらクリックして、点を足し引きする。
15. 複数の点の移動、回転、拡大縮小ができる。Option（Mac）かAlt（そのほか）を押すと、選択範囲の中心から拡大縮小する。
16. 終わったら、ダブルクリックで入った場合は、ベクターの外をクリックして編集を確定します。1つの画像のままです。「Turn into frame」で入った場合は、フレームをいつでもベクターに戻せます。

書き出しの注意（公式の記載）：フレームをSVGかPDFで書き出せるのは、中身がすべてベクターのときだけです。ラスターが混ざっているときは、先にベクター化します。

場面7：画像を拡大する

公式の「Upscaling」の手順です。

1. キャンバスで画像を選びます。
2. コンテキストパネルの「Upscale」を押します。
3. モデルを選びます。Topazを選んだ場合は、倍率（×2、×3、×4）も選びます。
4. 拡大した版が、キャンバスに出るのを待ちます。
5. PNG、JPG、PDFで書き出します。

公式の記載：

制限：透明な画像は未対応。拡大すると、白い背景で戻ります。

画質を上げたいときは、公式は「Enhance details」を案内しています。小さな部分（手、顔、文字）を描き直して質を上げます。拡大と質の向上を一緒にする「Creative Upscale」も、そこにある、と書かれています。MCPのツール名には crisp_upscale と creative_upscale があります（07）。

場面8：スタイルを選ぶ、自分で作る

公式の「Styles」の概要です。

1. プロンプトパネルの「Style」ボタンを押すと、スタイルのライブラリが開きます。「Explore」と「My styles」の2つのタブがあります。
2. 「Explore」では、用意された（curated）スタイルとAIが作ったスタイルが出ます。カテゴリー（Photo、Illustration、Graphic design、Icon、Logo）で絞るか、「comics」「3D」「line art」のような語で検索します。「Type」と「Model」のプルダウンでも絞れます。
3. スタイルを使うとき、忠実度を選びます。
4. Precise：参考の素材にきっちり従う。正確な見た目が大事なとき。
5. Flexible：全体の雰囲気を保ち、モデルの自由度を増やす。
6. 自分のスタイルは、「Explore」の「Create style」から、参考画像を使って作ります。この記事では手順の細部（枚数など）が読めていません（公式には別のガイドがあるとされていますが、今回は読めていません）。
7. 作ったスタイルと、ハートで保存したスタイルは、「My styles」に並びます（「Created by me」と「Liked」）。

メモ：APIの側では、スタイルを作るエンドポイントが別にあります（08）。

場面9：書き出す

公式の「How to export an image」の手順です。

1. キャンバスで、画像を1つか複数選びます。
2. コンテキストパネルの「Export」を押します（クイックスタートは、右上の「Export」とも書いています）。
3. 寸法、形式、解像度を設定します。形式は、PNG、JPG、TIFF、PDF、SVG、Lottieが挙げられています。ベクターはSVGかPDFで書き出せます。
4. もう一度「Export」を押します。

右クリックして「Export as...」を選んでもできます。

公式のこのページは、拡大率、透明な背景、共有については、書かれていません。共有は別のページ（How to share an image／How to share a project）がありますが、今回は読めていません。

場面10：モックアップ（商品に絵柄をのせる）

公式の「How to create a mockup」の手順です。

方法A：用意されたモックアップを使う

1. 「Get started」の窓を開きます。
2. コレクションを選びます。公式が挙げるのは、Apparel、Packaging、Devices、Outdoor adsの4つです。
3. 気に入ったモックアップを選ぶと、キャンバスに入ります。
4. 自分のデザインを当てる手順は、公式の別のガイド「Applying your design to the mockup」にあります。今回は読めていません。

方法B：文章から作る

1. プロンプトパネルで、Generation typeを「Mockup」にします。
2. 商品を書きます。

この記事の例（プロンプト）：

text A white T-shirt, front view, plain background

1. Enterキーか、上向き矢印のボタンを押します。

期待される結果：生成した画像が、自動でモックアップのフレームになります。

方法C：手持ちの画像を変換する

1. 画像をキャンバスに置きます。
2. 選んで、右パネルの「Convert to mockup」を押します。

Tシャツ、カップ、パッケージ、ノートのような物に向く、と書かれています。写真のような商品の画像（生成したものも）も変換できます。

任意：リアルさを上げる

平らな面（パッケージ、デバイス）では、「Enhance realism」が、遠近や画面へのはめ込みを合わせます。Nano Banana 2を使い、11クレジットです。必要かどうかはモックアップで変わる、と書かれています。

場面11：Design Agent（ひとまとまりの素材）

公式の「Design Agent」のページの内容です。

• 何か。 プロンプトから、ロゴ、配色、書体、アプリのアイコン、アイコン群、ランディングのビジュアル、SNSの投稿、グッズなど約12点のまとまりを作る機能です。ロゴと配色が全体に引き継がれます。まとまりは「Design Kit」として保存できます（今は、エージェントの「スキル」として保存される、と書かれています）。
• 開き方。 特別なコマンドは要らず、Studioのチャットで頼みます。ブランドやアイデンティティなど、まとまりが必要な頼みに反応する、と書かれています。
• 条件。 現在は、購読している利用者だけ、とあります。クレジットを使い、素材と試行が増えるほど増えます。

この記事の例（Chatで頼む文）：

アプリ用のブランドキットを作りたい。名前は「Sample」で、やさしい雰囲気にしたい。

流れ（公式）：

1. エージェントがプロンプトを読み、参考があるかを聞く。
2. 4つの方向性が出るので、1つ選ぶ。
3. キットに入れる素材を確認すると、まとまりが作られる。
4. Design Kitとして保存するかを聞かれる。

後から、新しいチャットで「キットの素材を使って新しい素材を」と頼むと、既存のものに合わせる、と書かれています。初期のリリースは、アプリやWebサイト向けに調整されている、ともあります。

場面12：プロジェクトと履歴を扱う

公式のHistoryのページは、履歴をどれくらいの期間保つかについて記載がない、と読めます（この記事で読んだ範囲では見つかりませんでした）。

場面13：スマホで使う

公式の「Mobile Apps」のページの内容です。

1. アプリを開き、プロンプトを入力して、生成のボタンを押す。結果は数秒で出ます。
2. 結果をタップして、見る、保存する、編集を続ける。
3. スマホのStudioで使える道具として、「Edit Image」「Upscale」「Remove Background」「Vectorize」が挙げられています。写真を撮るか、スマホの画像をアップロードして始められます。
4. 参考画像は、プロンプトパネルの画像アイコンから、カメラロールの写真を付けます。
5. 動画は、動画のアイコンで切り替えます（有料の購読者のみ。モデルはKling、Veo、Grok）。
6. 続きをデスクトップでやるときは、生成した画像が「History」に出ます。フレーム、モックアップ、高度な編集はデスクトップ側、と書かれています。

キーボードショートカット（Macの表記）

公式のページはMacの記号だけを載せ、Windowsの表記は書いていません（読んだ範囲）。「Erase area」と「Merge objects」が、どちらも「E」になっていて、ページの誤記の可能性があります。

最初の1時間の順番（この記事の案）

ここは公式の手順ではなく、この記事が公式の手順を並べ直した案です。時間の目安は、公式の記載ではありません。

途中で、画面のクレジットの表示を見て、どの操作がどれだけ減るかを控えておくと、04の料金の表と照らせます。

たとえ話

Recraft Studioは、大きな作業机（キャンバス）に仕上げの道具箱（右パネル）が付いたようなものです。新しいものは左の窓口（Create／Chat）に頼み、できた物は机に置いて、道具箱で磨きます。

気をつけること

• 手順は「公式の手順を順に並べたもの」です。「この記事の例」「この記事の案」と書いたものは、公式の記載に合わせてこの記事で組んだもので、動作は確かめていません。画面の表記は変わるので、手元の画面と照らして読んでください。
• この記事は、実際に使って確かめた記録ではありません。公式の資料を読んだ範囲です。
• 公式ページは要約の形で取得しました。ボタンの位置や名前、メニューの階層は、手元の画面と照らして確かめてください。公式に書かれていない画面の経路は、書いていません。
• 「How to share an image」「Applying your design to the mockup」「How to create a custom style」などは読めていません。それらの手順は書いていません。
• 無料のアカウントで作った画像の扱い（公開、権利、商用利用）は04を参照してください。ここで挙げたクレジットの数字は、公式のページに書かれた例で、画面の表示が優先されます。
• 編集に使うモデルは外部の提供元のものがあります。プロンプトや画像の行き先は03を参照してください。
• 人の顔や個人情報の入った画像、仕事の画像を使う前に、04のデータの扱いを自分で確かめてください。この記事は法律の助言ではありません。

出典

• Quick start（Recraft Docs、確認日 2026-10-25）
• How to generate an image（Recraft Docs、確認日 2026-10-25）
• Prompt panel（Recraft Docs、確認日 2026-10-25）
• Generation modes（Recraft Docs、確認日 2026-10-25）
• Agentic mode（Recraft Docs、確認日 2026-10-25）
• Editing images with natural language（Recraft Docs、確認日 2026-10-25）
• Background tools（Recraft Docs、確認日 2026-10-25）
• Vectorizing（Recraft Docs、確認日 2026-10-25）
• Vector Editor（Recraft Docs、確認日 2026-10-25）
• Upscaling（Recraft Docs、確認日 2026-10-25）
• Styles overview（Recraft Docs、確認日 2026-10-25）
• How to create a mockup（Recraft Docs、確認日 2026-10-25）
• How to export an image（Recraft Docs、確認日 2026-10-25）
• How to import an image（Recraft Docs、確認日 2026-10-25）
• Design Agent（Recraft Docs、確認日 2026-10-25）
• Projects（Recraft Docs、確認日 2026-10-25）
• History（Recraft Docs、確認日 2026-10-25）
• Interface overview（Recraft Docs、確認日 2026-10-25）
• Keyboard shortcuts（Recraft Docs、確認日 2026-10-25）
• Mobile Apps（Recraft Docs、確認日 2026-10-25）
• MCP Tools（Recraft Docs、確認日 2026-10-25）
• Documentation index（Recraft Docs、確認日 2026-10-25）