Webデザインに必要なソフトは？Figma・Photoshop・Illustrator・XDの使い分け

これからWebデザインを学ぶなら、最初はFigmaを選ぶのがおすすめです。

Webページのデザイン、PC版とスマートフォン版の作成、共通パーツの管理、ページ移動の確認、クライアントや制作メンバーとの共有までを一つのファイルで進められます。

ただし、Figmaだけですべての制作作業を行う必要はありません。写真の補正や合成にはPhotoshop、ロゴやアイコンなどのベクター素材にはIllustratorを組み合わせます。

Webデザインに使うソフトは一つに決めるのではなく、制作工程と納品形式に応じて使い分けるのが基本です。

Webデザインに必要なソフトは目的によって異なる

Webデザインに使われる主なソフトと役割は次のとおりです。

ソフト	主な役割	向いている作業
Figma	Webページのデザイン	ワイヤーフレーム、PC・スマホ版、プロトタイプ、共有
Photoshop	写真・画像編集	写真補正、切り抜き、合成、バナー、メインビジュアル
Illustrator	ベクター素材制作	ロゴ、アイコン、SVG、図解、イラスト、印刷物
Adobe XD	既存デザインの編集	既存XDデータ、会社・クライアント指定の案件
Dreamweaverなど	Webサイトの実装	HTML、CSS、JavaScript、サイトファイル管理

新しくWebデザインを始める場合は、FigmaでWebページ全体を作り、必要な画像だけPhotoshopやIllustratorで制作する流れが適しています。

一方、納品形式としてPSD・AI・XDが指定されている案件では、指定されたソフトを使用します。自分が使いやすいソフトだけでなく、誰がデータを受け取り、どの形式で修正するのかまで確認して選びましょう。

FigmaはWebページ全体のデザインに向いている

Figmaは、Webサイトやアプリのデザインを作成するためのツールです。PC版とスマートフォン版のページを並べ、余白、文字、ボタン、画像などを配置できます。

Figmaには、オートレイアウト、コンポーネント、スタイル、プロトタイプ、共同編集、開発担当者への引き渡し機能があります。Webページの作成から確認・共有までを一つのソフトで行えます。

PC版とスマートフォン版を同じファイルで管理できる

Webサイトは、PCのデザインをそのまま縮小してスマートフォンへ表示するわけではありません。

Figmaでは、PC版とスマートフォン版を同じページ内へ並べて作成できます。PCでは「画像＋説明文」を横並びにし、スマートフォンでは画像の下に説明文を置くといった違いを確認しながら制作できます。

トップページ、サービスページ、問い合わせページなども一つのファイル内で管理できるため、ページ間の色・余白・文字サイズを比較しやすくなります。

オートレイアウトとコンポーネントで修正をまとめられる

オートレイアウトを設定すると、文字数や要素数が変わったときに、ボタンやカードの大きさを自動的に調整できます。

たとえば、ボタンの文字を「詳細」から「サービスの詳細を見る」に変更した場合も、左右の余白を維持したままボタン幅を広げられます。商品カードへ説明文を追加した場合は、文章の長さに応じてカードの高さを調整できます。

ヘッダー、ボタン、カード、見出しなど、複数ページで繰り返し使うパーツはコンポーネントとして登録できます。

プロトタイプと共有機能で確認作業を進められる

プロトタイプを設定すると、ボタンを押したときに別ページへ移動する動きや、メニュー・モーダルの表示を再現できます。

静止画だけでは伝わりにくい操作を、公開前にクライアントやコーディング担当者と共有できます。共有URLを発行すれば、相手がFigmaをインストールしていなくてもブラウザーから確認できます。

修正内容はデザイン上の該当箇所へコメントとして残せます。複数人が同じファイルを確認するため、メール添付の画像が増えて「どれが最新版か分からない」という問題も起こりにくくなります。

Figmaは高度な写真補正や複雑な画像合成を目的としたソフトではありません。写真を細かく加工する場合はPhotoshop、ロゴやイラストを作る場合はIllustratorを併用します。

Photoshopは写真加工・合成・バナー制作に向いている

Photoshopは、写真やピクセルで構成された画像を編集するためのソフトです。

写真をWebサイトに合う状態へ加工できる

Webサイトへ掲載する写真は、撮影したまま配置すればよいとは限りません。

Photoshopではレイヤーとマスクを使い、元画像を残しながら加工できます。人物写真の背景だけを暗くし、人物を明るく見せる場合も、人物と背景を分けて調整できます。

商品写真を複数並べる場合は、明るさ、色温度、影の濃さを揃えることで、別々に撮影した写真でも同じサイトの素材として統一できます。

PhotoshopだけでWebページ全体を作ることもできる

Photoshopにはレイヤー、テキスト、図形、ガイド、アートボードがあるため、Webページ全体のデザインカンプも作成できます。

化粧品のランディングページで、商品写真の切り抜き、背景合成、光や影の追加、文字装飾、ページレイアウトを頻繁に行き来する場合は、Photoshop内で完結させるほうが作業しやすいことがあります。

一方、ページ数が多いサイトや、PC版・スマートフォン版を同時に管理する案件では、Figmaのコンポーネントやオートレイアウトのほうが管理しやすく、修正などもまとめやすくなります。

FigmaでWebページ全体を作り、Photoshopで写真やメインビジュアルを加工、という使い分けが一般的です。

バナー・メインビジュアル・PSD納品に対応できる

Photoshopは、Webページ全体を作らない案件でも使用頻度が高いソフトです。

同じデザインを横長、正方形、縦長へ展開するときは、アートボードを複数作成して管理できます。レイヤー名やグループを整理しておけば、別のデザイナーが文字や写真を差し替えることもできます。

具体的な制作方法は、Photoshopでバナーを作る方法とYouTubeサムネイルの作り方で解説しています。

Illustratorはロゴ・アイコンなどWeb素材の制作に向いている

Illustratorは、点・線・曲線で構成されるベクターデータを作成するソフトです。

ロゴ・アイコン・SVGを正確に作成できる

ロゴやアイコンは、Webサイトのヘッダーでは小さく表示し、パンフレットや看板では大きく印刷することがあります。

Illustratorでベクターデータとして作成しておけば、用途に合わせてサイズを変更しても輪郭を維持できます。あとから線の太さ、角の丸み、色、形状も修正できます。

形式	主な用途
SVG	ロゴ、アイコン、線画を軽量かつ鮮明に表示
PNG	透明背景のロゴ、図解、Web用素材
JPEG	背景を含む一般的な画像
WebP	Web向けに容量を抑えた画像
PDF・AI	印刷、編集可能データ、入稿

特にSVGは、ロゴや線のアイコンを小さな容量で鮮明に表示しやすい形式でWebサイトでも使用されることが多いです。

IllustratorでWebページ全体を作ることはできるがおすすめしない

Illustratorにもアートボード、テキスト、画像配置、レイヤー、整列、書き出し機能があるため、Webページ全体のデザインを作ること自体は可能です。

新規のWeb制作で、Illustratorをページデザインの中心にすることはおすすめしません。

AIデータだけを実装担当者へ渡すと、PC版とスマートフォン版の変化、hover・activeなどの状態、メニューの開閉、画像の書き出し範囲を別途説明する必要があります。

Webページ全体はFigmaで作り、Illustratorはロゴ、アイコン、SVG、図解、イラストなどFigmaへ配置する素材の制作に使うのが基本です。

AIデータでの納品が指定されている場合や、既存AIデータを修正する場合はIllustratorを使用します。その場合も、実装担当者へ渡す情報が不足しないよう、画面幅ごとのデザインや動作仕様を別途共有します。

Webと印刷物で使う素材を共用しやすい

Webサイトと印刷物を同時に制作する場合は、Illustratorでロゴ、キービジュアル、図形、イラストなどの共通素材を作ると効率的です。

Webページ自体はFigma、チラシやポスターはIllustratorでレイアウトし、Illustratorで作成したロゴや装飾を両方へ配置します。

Web	印刷
RGB	CMYKを基本とする
pxでサイズ指定	mmでサイズ指定
SVG・PNG・WebPなど	PDF・AIなど
画像容量を軽くする	解像度と塗り足しを確認
ブラウザー表示	印刷機・用紙で出力

同じ素材は共用できますが、完成データはWeb用と印刷用に分けて作成します。

Adobe XDは既存案件や指定環境で使用する

Adobe XDは、Webサイトやアプリのデザイン、ワイヤーフレーム、プロトタイプを作成できるツールです。

機能的にはFigmaと似ており、どちらかのソフトを選んで使うのが一般的です。

既存のXDデータを修正する場合は必要

既存案件を引き継ぐ場合は、XDを使用せずに別ソフトへ作り直すと、レイアウトや共有方法が変わる可能性があります。

継続案件では、まずXDのまま修正するか、Figmaなどへ移行するかを関係者と決めます。

新しく学ぶ場合はFigmaを優先する

Adobe XDは現在メンテナンスモードです。既存利用者向けのバグ修正や小規模な改善は続いていますが、継続的な新機能開発を前提とした製品ではありません。

そのため、既存XD案件や会社指定がない場合は、新しく学ぶソフトとしてFigmaを優先します。

XDの操作を覚えても、新規案件で使用する機会が増えるとは限りません。既存案件へ対応する必要が生じた時点で、基本操作を学ぶ方法でも問題ありません。

デザインソフトとコーディングツールは役割が異なる

Figma、Photoshop、Illustrator、XDで作成するのは、Webサイトの見た目や配置を示すデザインデータです。

実際にブラウザーで表示し、ボタンやフォームを動作させるには、別の実装作業が必要です。

工程	主な作業	使用するツールの例
Webデザイン	レイアウト、色、文字、画像、スマホ版	Figma、Photoshop、Illustrator、XD
素材制作	写真、ロゴ、アイコン、イラスト	Photoshop、Illustrator
コーディング	HTML、CSS、JavaScript	コードエディター、Dreamweaver
CMS実装	ページ、投稿、テンプレート作成	WordPressなど
ノーコード実装	パーツ配置、公開設定	各ノーコードサービス

デザインソフトで完成見本を作っただけでは、一般的なWordPressサイトやHTMLサイトとして公開されません。デザインをもとにコーディングするか、WordPressやノーコードツールで実装します。

Dreamweaverはデザインではなくコーディングに使う

Dreamweaverは、HTML、CSS、JavaScriptなどを編集し、Webサイトのファイルを管理するためのソフトです。

Figmaなどで作ったデザインを、ブラウザーで表示できるWebページへ実装する段階で使用します。

会社やクライアントからDreamweaverを指定されている場合や、Dreamweaverで管理されている既存サイトを修正する場合に選びます。

WordPressやノーコードでも実装工程は必要

WordPressやノーコードツールを使う場合も、デザインデータが自動的に完成サイトへ変換されるわけではありません。

Figmaのデザインを細部まで完全再現することより、CMSの更新性や実装方法に合わせて調整することも重要です。

Webデザインの制作工程ごとにソフトを使い分ける

実際のWeb制作では、一つのソフトだけで最初から最後まで作るより、工程ごとに得意なソフトを使うほうが効率的です。

Web制作全体の流れは、以下の記事で詳しく解説しています。

Webデザインソフトを選ぶときの確認ポイント

ソフトの機能だけで選ぶと、納品や共同作業の段階で問題が起こることがあります。実務では、制作を始める前に次の点を確認します。

納品形式と既存データを確認する

納品形式が決まっている場合は、その形式を正しく作成・編集できるソフトを使います。PSD納品が必要な案件をFigmaだけで作ると、最後にPhotoshopへ作り直す必要が生じます。

既存サイトの更新では、過去データの形式も確認します。以前の制作データがAIやXDであれば、同じソフトを使用したほうが差分修正を進めやすい場合があります。

誰が修正・確認するのかを確認する

納品後にクライアントや別のデザイナーが修正する場合は、相手が使用できるソフトを選びます。

Figmaは共有URLによる確認やコメントに向いています。PhotoshopやIllustratorの編集データを渡す場合は、相手が同じソフトを使用できるか、リンク画像やフォントが揃っているかも確認します。

Web以外へ転用するか確認する

Webサイトだけでなく、チラシ、パンフレット、名刺、ポスター、看板にも同じビジュアルを使う場合はIllustratorが役立ちます。

WebページはFigma、印刷物はIllustratorで組み、ロゴ、キービジュアル、図形、イラストをIllustrator側で共通素材として管理するのが基本です。

Webと印刷で同じ見た目を展開する場合でも、Webページ全体までIllustratorで作る必要はありません。AI形式での納品が指定されている場合や既存AIデータを修正する場合だけ、Illustratorでページ全体を扱うか個別に判断します。

写真加工の量を確認する

使用する写真がすでに完成しており、配置とトリミングだけで済む場合はFigma内でも対応できます。

これらの作業が必要ならPhotoshopを追加します。写真加工の比重が大きいランディングページでは、Photoshopだけでページ全体を作る選択肢もあります。

使用するパソコンと同時起動するソフトを確認する

Figmaだけを使う作業と、Photoshop・Illustrator・ブラウザーを同時に開く作業では、必要なパソコン性能が異なります。

高解像度の写真、多数のアートボード、大きなPSD、複数のAdobeアプリを同時に扱う場合は、メモリとストレージに余裕が必要です。固定のメモリ容量だけで決めず、扱う画像サイズ、ページ数、同時起動するソフトから判断します。

WindowsとMacの詳しいスペックは、それぞれ専用記事で解説しています。

目的別に選ぶおすすめの組み合わせ

初心者がすべてのソフトを同時に覚える必要はありません。自分が担当する制作内容と納品形式から選びましょう。

目的	おすすめの組み合わせ
Webデザインを初めて学ぶ	Figma
一般的な企業サイト	Figma＋Photoshop
ロゴ・アイコンも制作	Figma＋Illustrator
写真・ロゴを含むWeb制作全般	Figma＋Photoshop＋Illustrator
写真中心のLP・バナー	Photoshop
Webと印刷物へ同じビジュアルを展開	Figma＋Illustrator
AI形式での納品・既存AIデータの修正	Illustrator
既存XD案件を引き継ぐ	Adobe XD＋必要なAdobeソフト
コーディングまで担当	上記＋コードエディター・CMS

基本的に複数のソフトを使い分けますが、1つのソフトだけで完結するシーンもあります。

Figmaだけ｜Webページの基本デザイン

ワイヤーフレーム、一般的な企業サイト、PC版・スマートフォン版、プロトタイプ、デザイン共有が中心なら、Figmaだけでも作ることができます。

本格的な写真加工やレタッチ、ロゴ制作を別の担当者が行う場合や、データがすべて支給される場合などは、FigmaだけでWebデザイナーの担当範囲を完了できることもあります。

Photoshopだけ｜写真中心のLPやPSD納品

写真加工とレイアウトを頻繁に行き来する場合は、Photoshop内で完結させたほうが効率的です。

ページ数が増えたり、共通パーツの一括修正が多くなったりする場合はFigmaを併用します。。

Illustratorだけ｜バナーやWeb素材を印刷物にも展開する

IllustratorだけでWebサイト全体をデザインすることはおすすめしませんが、バナー、メインビジュアル、ロゴ、図解などのWeb用グラフィック制作には適しています。

そして、Web用に作成したグラフィックをチラシ、ポスター、パンフレットなどの印刷物にも展開する場合は、Illustratorで元データを作成しておくとサイズやレイアウトを変更しやすくなります。

たとえば、イベントのキービジュアルをIllustratorで作成しておけば、同じデザインを次のように展開できます。

ただし、Webページ全体のレイアウト、PC・スマートフォン版の管理、共同レビュー、実装担当者への受け渡しはFigmaのほうが適しています。

無料で始められるソフトと有料ソフト

ソフト	利用料金の考え方
Figma	無料のStarterプランあり。個人学習や小規模制作から開始可能
Photoshop	デスクトップ版は有料。無料体験あり
Illustrator	有料。無料体験あり
Adobe XD	有料。単体プランなし

Figmaは無料プランから始められるため、Webデザイン学び始めの段階で費用をかける必要がないのがメリットです。

PhotoshopとIllustratorはデザイナーとしては必須と言われるソフトですが、最低限のWebデザインであればFigmaだけでも完結するため、写真加工やベクター制作が必要になった段階で学び始めても大丈夫です。

Webデザインソフトについてよくある質問

Webデザイン初心者はどのソフトから覚えるべきですか？

最初はFigmaから覚えるのがおすすめです。

Webページのデザイン、PC版とスマートフォン版、共通パーツ、プロトタイプ、コメント共有までを一つのソフトで学べます。写真加工が必要になったらPhotoshop、ロゴやアイコンが必要になったらIllustratorを追加してください。

FigmaだけでWebデザインできますか？

Webページのデザイン、ワイヤーフレーム、スマートフォン版、プロトタイプ、レビューまでならFigmaだけで進められます。

写真の高度な補正や合成、複雑なロゴ、印刷用データまで作る場合はPhotoshopやIllustratorを併用します。

WebデザインにPhotoshopは必須ですか？

写真をほとんど加工せず、Figma内で配置とトリミングだけを行う案件なら、Photoshopを使わずに完成させられます。人物や商品の切り抜き、色補正、不要物除去、画像合成、バナー制作が必要な場合はPhotoshopが適しています。

すべてのWebデザインに必須というわけではありませんが、求人では必須とされることが多いです。

WebデザインにIllustratorは必要ですか？

ページデザインだけを担当する場合、必須ではありません。

ロゴ、アイコン、SVG、イラスト、図解を作る場合や、Webデザインをチラシ・パンフレットへ転用する場合に必要です。

IllustratorだけでWebデザインできますか？

技術的には作成できますが、新規のWeb制作でIllustratorをページ全体のデザインに使うことはおすすめしません。

PC・スマートフォンの管理、共通パーツの一括修正、プロトタイプ、コメント共有、実装担当者への引き渡しはFigmaのほうが適しています。

PhotoshopだけでWebデザインできますか？

できます。写真加工が中心のランディングページであればPhotoshopのみでWebデザインを行う人も多いです。

ページ数が多いサイトや、共通パーツをまとめて修正する案件ではFigmaとの併用がおすすめです。

Adobe XDを今から学ぶべきですか？

既存のXD案件や会社指定がない限り、優先して学ぶ必要はありません。

XDは現在メンテナンスモードです。新規のWebデザインを学ぶ場合はFigmaがおすすめです。

CanvaやAdobe ExpressでもWebデザインできますか？

バナー、SNS画像、簡単なページ素材の制作には利用できます。

複数ページの共通パーツ管理、PC版とスマートフォン版の作り分け、プロトタイプ、開発者への引き渡しを行う場合はFigmaなどのWebデザイン向けツールが適しています。

Webデザイナーにコーディングは必要ですか？

担当範囲によって異なります。デザインとコーディングを分業する会社では、デザイナーがすべてのコードを書く必要はありません。

ただし、HTML・CSS、レスポンシブデザイン、文字量による高さの変化、画像形式、ブラウザー表示の基礎を知っていると、実装しやすいデザインを作れます。

会社やクライアントからソフトを指定された場合はどうしますか？

指定されたソフトと納品形式を優先します。

Figmaで作成したほうが早くても、PSD納品が必要ならPhotoshop、AI納品ならIllustrator、既存XDデータを更新するならXDを使用します。使用ソフトを変更する場合は、互換性、共同編集者、納品後の修正方法まで確認してから提案してください。

Webデザインは工程ごとに最適なソフトを使い分ける

Webデザインでは、一つのソフトだけを正解と考える必要はありません。

上記を参考にWebデザインをはじめてみてください。