IllustratorとFigma、どちらか一方に寄せたい気持ちはよく分かります。でも現場では両方が必要になることが多いです。ロゴの最終データはIllustrator、画面設計はFigma、という分担をどう決めるかで、作業時間とトラブルが大きく変わります。私はWebディレクションとデザインを兼任しているので、クライアントへの納品形式と自分の作業効率の両方を見ながら切り分けています。この記事では、迷いやすい場面ごとに「どちらで作るか」「どう連携するか」を整理します。
先に結論
- 向いている人: IllustratorとFigmaの両方を触る機会があり、役割分担を明確にしたいデザイナー・ディレクター
- 向いていない人: どちらか一方しか使わない、またはチームでツールが完全に固定されている
- 私のおすすめ: ベクター原稿・印刷物はIllustrator、UI・プロトタイプ・共有はFigma。境界は「誰が・いつ・何形式で触るか」で決める
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
私は実装直前の手戻りを減らすために、Illustratorの手順を短く固定しています。
IllustratorとFigmaの役割比較
| 項目 | Illustrator | Figma |
|---|---|---|
| 向く人 | ロゴ・イラスト・印刷物を扱う人 | UI設計・チーム共有が多い人 |
| 強み | ベクター編集、細かいパス操作、印刷入稿 | 画面設計、コンポーネント、リアルタイム共同編集 |
| 弱み | UIの繰り返し作業、開発連携 | 複雑なイラスト・ロゴの精密調整 |
| 納品形式 | .ai / .eps / .svg | .fig / 開発向けエクスポート |
| 料金の目安（2026年9月時点） | Creative Cloud単体 月額2,728円〜 | Professional 月額$15〜（年払い） |
Illustratorは「形を作る専門職」、Figmaは「画面を組み立てて共有する場所」と考えると迷いにくいです。ロゴの微調整や複雑なベクターイラストはIllustratorの方が圧倒的に速いです。一方、ボタンやカード、フォームなどUI部品の量産とバリエーション管理はFigmaのコンポーネント機能が向いています。両方契約するコストは気になりますが、案件の種類によっては片方だけだと逆に時間がかかることもあります。
ロゴ・アイコンはIllustratorで作る理由
ロゴやアイコンは、最終的にベクターデータとして納品されることがほとんどです。クライアントから「AIデータとSVGが欲しい」と言われたとき、Figmaから書き出したSVGだけでは不十分と判断されるケースがあります。Illustratorならアウトライン化、カラーモード（CMYK/RGB）の切り替え、細かいアンカーポイントの調整が一貫して行えます。
私の現場では、ロゴのラフはFigmaで素早く方向性を出すこともあります。ただし確定版は必ずIllustratorに移して仕上げます。理由はシンプルで、印刷会社や他のデザイナーがIllustrator形式を期待しているからです。Figmaで作ったアイコンをそのまま納品すると、「パスが複雑すぎる」「アウトラインが取れていない」といった指摘を受けることがあります。
アイコンのセット制作でも同じです。24px用と48px用で線の太さを変える作業は、Illustratorのシンボル機能やアートボード管理の方がやりやすい場面が多いです。Figmaでもアイコンは作れますが、最終納品前にIllustratorで整える工程を挟むと後戻りが減ります。
UI・ワイヤー・プロトタイプはFigmaに寄せる
Webサイトやアプリの画面設計は、迷わずFigmaに寄せています。理由は共同編集とフィードバックのしやすさです。クライアントやエンジニアにリンクを渡してコメントしてもらう運用は、Figmaの方が圧倒的に楽です。Illustratorで同じことをしようとすると、PDF書き出しやファイル共有のたびにバージョンが増えて混乱しがちです。
コンポーネントとバリアントの管理もFigmaの得意分野です。ボタンの状態（通常・ホバー・無効）を一括管理できるので、画面数が増えても修正コストを抑えられます。デザインシステムを小規模から始める場合も、Figmaのライブラリ機能が現実的です。
プロトタイプ機能を使えば、画面遷移の確認までFigma内で完結します。Illustratorにはこの機能がないので、画面フローの確認用に別ツールを用意する必要が出てきます。制作の初期段階で方向性を固めるなら、Figma一本の方がチーム全体の認識が揃いやすいです。
イラスト・装飾素材の切り分け
イラストや装飾の扱いは、案件によって分かれます。シンプルな幾何学模様やフラットイラストならFigmaでも十分です。複雑な曲線、グラデーションの細かい調整、ブラシを使った表現が必要ならIllustratorの方が向いています。
私の切り分け基準は「後からパス単位で修正されるかどうか」です。クライアントや別のデザイナーがパスをいじる可能性がある素材はIllustratorで作ります。Webに載せてほぼ固定の装飾なら、Figmaで作ってPNGまたはSVGで書き出す形でも問題ないことが多いです。
写真やラスター画像の加工は、どちらのツールでもできますが、Illustratorのクリッピングマスクやトレース機能を使う場面はIllustratorに寄せています。Figmaは画像の配置と軽いマスク程度に留めると、ファイルサイズの肥大化を防げます。
ファイル連携の実践手順
IllustratorからFigmaへの持ち込みは、SVG書き出しが基本です。Illustratorで「ファイル → 書き出し → SVG」を選び、Figmaにドラッグ＆ドロップします。書き出し前にアウトライン化しておくと、フォントの欠落トラブルを防げます。色はRGBに統一しておくと、Web表示でのズレが少なくなります。
FigmaからIllustratorへの逆方向は、SVGまたはPDFで書き出してIllustratorで開きます。ただしFigmaのオートレイアウトやコンポーネント構造は引き継がれないので、Illustrator側で再構成が必要になることが多いです。だからこそ、最終的にIllustratorで仕上げる素材は最初からIllustratorで作る方が効率的です。
バージョン管理のルールも決めておくと安心です。私は「Figmaが画面設計の正本、Illustratorがロゴ・ブランド素材の正本」と決めています。どちらが最新か迷ったときに、正本を確認するだけで済みます。ファイル名に日付を入れる習慣も、トラブル防止に効きます。
チームやクライアントとのすり合わせ
ツールの切り分けは、個人の好みだけで決められないことがあります。クライアントがIllustratorデータを必須としているなら、それに合わせます。開発チームがFigmaのデザイントークンを参照しているなら、UI側はFigmaを正とします。
初回のキックオフで「納品形式」を確認するのが最も大事です。ロゴはAI+SVG、画面はFigmaリンク、印刷物はPDF+AI、といった形で合意しておけば、途中でのツール変更に悩まされにくくなります。私は見積もりの段階で納品物リストにファイル形式を明記しています。
共同編集が必要なのはどの工程かも確認ポイントです。クライアントがデザインに直接触らない案件なら、Illustrator中心でも問題ありません。コメントベースのレビューが多いなら、Figmaの方がコミュニケーションコストが下がります。
印刷物・DTP案件での切り分け
名刺、チラシ、パンフレットなど印刷物が絡む案件では、Illustratorがほぼ必須です。印刷会社の入稿データは.aiまたは.eps形式が標準で、CMYKカラーモードでの作業が求められることが多いです。FigmaはRGB前提のツールなので、印刷用の色管理には向いていません。
私の現場では、Webと印刷を同時に進める案件がよくあります。ロゴとキービジュアルはIllustratorで制作し、Web版のバナーやLP素材はFigmaで組み立てる、という分担が定番です。同じロゴでも、印刷用とWeb用でファイルを分けて管理しています。印刷用はCMYK・アウトライン済み、Web用はRGB・SVG書き出し済み、とフォルダを分けると後から探しやすいです。
DTPソフト（InDesign）との連携も考慮が必要です。InDesignにIllustratorの.aiを配置するのは一般的なワークフローですが、Figmaから直接InDesignに持っていくのは手間がかかります。印刷物が主な案件なら、Illustrator→InDesignの流れを前提に設計した方がいいです。
フォント管理とライセンスの違い
IllustratorとFigmaでは、フォントの扱い方が異なります。Illustratorはローカルにインストールされたフォントを使い、Figmaはクラウド経由でフォントを同期します。Adobe Fonts（旧Typekit）は両方で使えますが、設定方法が違うので注意が必要です。
クライアントに納品するとき、フォントのライセンスは必ず確認します。Illustratorでアウトライン化すればフォント自体は不要ですが、編集可能な状態で渡す場合は、クライアント側にフォントのライセンスがあるか確認が必要です。Figmaの場合、チームメンバーが同じフォントを持っていないと表示が変わることがあります。
私はプロジェクトごとにフォントリストをドキュメント化しています。どのフォントをどこで使ったか、ライセンスの種類（商用可/要購入）、アウトライン化の有無を記録しておくと、納品後のトラブルを防げます。
学習コストと覚える優先順位
両方を使いこなすには、それぞれの学習コストがかかります。Illustratorはパス操作、ペンツール、レイヤー管理の習得に時間がかかります。Figmaはコンポーネント、オートレイアウト、プロトタイプの理解が必要です。
覚える優先順位は、案件の種類で決まります。Web制作が8割なら、Figmaを先に深く学び、Illustratorはロゴ修正とSVG書き出しができる程度から始めるのが現実的です。ブランディング案件が多いなら、Illustratorのベクター操作を先に固めて、Figmaは画面設計の基礎を押さえる形です。
ショートカットキーは両方覚えると混乱します。頻繁に行き来する操作だけ、メモにまとめておくと切り替えが楽です。私はIllustratorではペンツール（P）と直接選択（A）、Figmaではフレーム（F）とコンポーネント（Ctrl+Alt+K）を、それぞれ体に染み込ませる程度に絞っています。
失敗しやすい点と対策
よくある失敗は、Figmaでロゴを作り切ってしまい、後からIllustratorデータが必要になったケースです。印刷や看板、名刺の制作に入った段階で「AIデータください」と言われ、作り直しになることがあります。ロゴ案件では最初に納品形式を確認するのが鉄則です。
もう一つは、SVGの書き出し設定の雑さです。IllustratorからSVGを書き出すとき、不要なメタデータやグループが残っていると、Web表示で想定外の挙動をすることがあります。書き出し後にブラウザで表示確認する習慣をつけると安心です。
フォントの扱いも要注意です。Illustratorで使ったフォントがFigmaにない場合、書き出し時に代替フォントに置き換わります。商用フォントのライセンスも、クライアントに渡すデータに含まれるフォントが利用範囲内か確認しておきましょう。
コストと運用の目安
Creative CloudとFigmaの両方を契約すると、月額で数千円〜1万円程度のコストになります（2026年9月時点。プランやキャンペーンで変動します）。フリーランスで案件数が少ない初期は、まず案件に合わせて片方から始めるのも手です。ロゴ・印刷案件が多いならIllustrator優先、Web制作中心ならFigma優先が現実的です。
Figmaの無料プランでも個人の画面設計は十分できます。Illustratorは単体プランかCreative Cloud全体のどちらかを選ぶ形になります。学生・教育向けの割引がある場合もあるので、該当するなら確認する価値はあります。
運用面では、両方のショートカットキーが違うので、切り替え時に操作ミスが出ることがあります。頻繁に行き来する作業は、テンプレートやプリセットを揃えておくと切り替えコストが下がります。
価格やキャンペーンは執筆時点（日本時間）の情報です。変わることがあります。
案件タイプ別のワークフロー例
Webサイト制作案件を例に、IllustratorとFigmaの使い分けを具体的に書きます。キックオフ後、ロゴとブランドカラーはIllustratorで制作します。クライアントにAIデータとSVGを納品し、FigmaのデザインファイルにはSVGを配置して画面設計を進めます。ワイヤーフレームはFigmaで作成し、クライアントにリンクを共有してコメントをもらいます。デザイン確定後、開発者にFigmaのリンクを渡し、Inspect機能でCSSの値を参照してもらいます。
LP（ランディングページ）制作では、ヒーロー画像やアイコンはIllustratorで作成し、ページ全体のレイアウトはFigmaで組み立てます。イラストが多い案件では、Illustratorでの作業時間が増えます。UI中心の案件では、Figmaの作業時間が8割を占めることもあります。見積もりの段階で、どちらのツールをどれだけ使うかを想定しておくと、工数の見積もりが正確になります。
アプリUI案件では、Figmaがほぼ唯一の選択肢です。iOS/Androidの画面サイズごとにフレームを作成し、コンポーネントライブラリでボタンやフォームを統一します。Illustratorは、アプリアイコンやスプラッシュ画面の制作に限定して使います。アイコンは複数サイズが必要なので、Illustratorのアートボード機能が活きます。
クライアントへの説明の仕方
「なぜIllustratorとFigmaの両方を使うのか」とクライアントに聞かれたとき、どう説明するか。私は「ロゴや印刷物は業界標準のIllustrator形式で納品し、画面設計はチームで共有しやすいFigmaで進めます」と伝えています。ツール名を並べるのではなく、納品物と作業効率の話にすると理解されやすいです。
「Figmaだけで全部やってほしい」と言われることもあります。その場合は、ロゴの最終納品形式（AI/SVG）がFigmaで問題ないか確認します。問題なければFigmaだけで進めても構いません。ただし、印刷物が後から発生する可能性があるなら、最初からIllustratorでロゴを作っておく方が安全です。
料金に影響する話も、事前に伝えておくとトラブルが減ります。IllustratorとFigmaの両方を使う案件は、ツールのライセンスコストを制作費に含めている場合があります。クライアントに「どちらの形式で納品が必要か」を確認する工程は、見積もりに含めておきましょう。
ツール更新と互換性の注意
AdobeとFigmaは、それぞれ定期的にアップデートされます。Illustratorの新バージョンで保存したファイルが、古いバージョンで開けないことがあります。納品時は、クライアントの環境に合わせたバージョンで保存するか、PDFやSVGで渡す方が無難です。
Figmaのファイルはクラウド上にあるので、バージョン管理は自動で行われます。ただし、Figmaの新機能（Variables、Dev Modeなど）を使ったデザインは、古いFigmaアカウントでは正しく表示されないことがあります。クライアントや開発者のFigma環境を確認してから、新機能を使うかどうか判断しましょう。
SVGの書き出し互換性も、定期的に確認が必要です。Illustratorの新バージョンで書き出したSVGが、ブラウザやFigmaで意図通りに表示されるか。大きなアップデートのあとは、書き出しテストを1回行う習慣をつけると安心です。
綺麗さより再現性——Illustratorではそこを優先しています。
まとめの前に：今日からできる3つのアクション
IllustratorとFigmaの切り分けを実践に移すための、今日からできることを3つ挙げます。
1つ目は、現在進行中の案件の納品物リストを書き出すことです。ロゴ、画面設計、印刷物、それぞれどの形式で納品するか。リストを見れば、どちらのツールが必要かが見えてきます。
2つ目は、正本のルールを1行で決めることです。「Figmaが画面の正本、Illustratorがロゴの正本」など。チームやクライアントがいなくても、未来の自分のために決めておくと、半年後にファイルを開いたとき迷いません。
3つ目は、SVG書き出しのテストを1回やることです。IllustratorからSVGを書き出し、Figmaに読み込んで、ブラウザで表示確認する。この一連の流れを一度通しておけば、連携の感覚が掴めます。
よくある質問
Q. Figmaだけで全部やればいいのでは？
A. Web制作だけなら可能性はあります。ただしロゴのAI納品や印刷入稿が必要な案件では、Illustratorが求められることが多いです。案件の種類次第で判断してください。
Q. Illustratorの画面設計機能は使わないの？
A. 個人や小規模チームではほとんど使いません。共同編集とプロトタイプのしやすさで、UI設計はFigmaに軍配が上がる印象です。Illustratorはベクター原稿に集中させた方が効率的です。
Q. SVGを行き来すると画質は落ちる？
A. ベクター形式なので、基本的に画質劣化はありません。ただしパスの構造やエフェクトの互換性で見た目が変わることはあるので、書き出し後の確認は必要です。
Q. どちらを先に覚えるべき？
A. Web制作が主ならFigmaから。ロゴ・印刷・イラストが主ならIllustratorから。私の周りでは、Web系はFigma先行、ブランディング系はIllustrator先行が多いです。
まとめ
IllustratorとFigmaの切り分けは、「納品形式」と「誰が触るか」で決めるのが一番ブレません。ロゴ・イラスト・印刷物はIllustrator、UI・プロトタイプ・チーム共有はFigma。連携はSVGを基本に、正本のルールを決めておくと後戻りが減ります。まずは次の案件で、納品物リストにファイル形式を明記するところから始めてみてください。
