Webデザインを始めようとするとき、最初に悩むのが「どのデザインツールを使えばいいのか」です。Photoshop、Illustrator、Figma、Canva。名前は聞いたことがあっても、何がどう違い、Webサイトを作るならどれを選べばいいのかは、始める前には分かりにくいものです。
この記事では、代表的なデザインツールの得意分野と2026年10月時点の料金、Webデザインという目的で選ぶときの基準、そして私がFigmaをすすめる理由をまとめます。
CONTENTS目次
結論：WebサイトのデザインならFigma。目的別の使い分けはある
| ツール | 得意なこと | 料金（2026年10月時点） | Webデザインでの位置づけ |
|---|---|---|---|
| Figma | Webサイト・アプリの画面設計、共同作業 | 無料プランあり。有料は月額16ドル〜（年払い） | まずこれ。画面設計の標準 |
| Photoshop | 写真の加工・合成、バナー | 単体プラン 月額3,280円（年間プラン） | 画像の加工が必要になったら |
| Illustrator | ロゴ・アイコン・印刷物 | 単体プラン 月額3,280円（年間プラン） | ロゴやアイコンを自分で作るなら |
| Canva | SNS画像・チラシ・資料をテンプレートから手早く | 無料プランあり。Canvaプロは年額11,800円 | Webサイトの画面設計には不向き |
| Adobe XD | （かつての）画面設計ツール | 単体販売終了。新規には入手しづらい | 今から学ぶ対象ではない |
※料金は各公式サイトの表示をもとにしています。Adobeはキャンペーンで変動するので、最新はAdobe公式のプラン一覧で確認してください。
よく使われているデザインツールの種類
1. Photoshop（フォトショップ）
画像編集ソフトとしての知名度は抜群で、写真の加工やバナー制作に強いツールです。レタッチや合成といった細かい作業ができるため、ビジュアルを作り込みたいときに向いています。Webデザインの現場でも、写真の明るさ調整や切り抜き、書き出しで今も使われています。
向いている用途：写真編集、バナー制作、ビジュアル重視のデザイン
2. Illustrator（イラストレーター）
拡大しても荒れないベクターデータを扱うツールです。ロゴ、アイコン、イラスト、そして印刷物のデザインに向いています。Webサイト用のアイコンやロゴを自分で作る場面で出番があります。
向いている用途：ロゴ制作、アイコンデザイン、印刷用（DTP）デザイン
3. Adobe XD（アドビ エックスディー）
サイトやアプリの画面設計（UIデザイン）に特化したツールで、私も職業訓練で使いました。軽くて起動が速く、Adobe製品との連携もスムーズでした。
ただし、Adobe XDは2023年に単体プランの販売が終了し、現在は新機能の開発が止まった「メンテナンスモード」になっています。既存のユーザーは使い続けられますが、新しく学ぶ対象としてはおすすめしません。XDでやっていたことは、次に紹介するFigmaでほぼそのままできます。職業訓練やスクールの教材にXDが残っている場合も、操作の考え方はFigmaに引き継げるので、無駄にはなりません。
4. Figma（フィグマ）
ブラウザ上で動く、Webサイト・アプリの画面設計ツールです。インストール不要で、WindowsでもMacでも同じように使えます。デザイナー、エンジニア、クライアントが同じファイルを同時に開いて作業できるのが最大の特徴で、現在のWeb制作では画面設計の標準と言ってよい存在です。
向いている用途：Webサイト・アプリのUIデザイン、ワイヤーフレーム、チームでの共同作業
5. Canva（キャンバ）
テンプレートを選んで文字や写真を差し替えるだけでデザインができるツールです。デザイナーでない人向けの印象がありますが、SNS投稿、チラシ、プレゼン資料には十分な機能があります。一方で、Webサイトの画面を1ピクセル単位で設計し、コーディングに渡す用途には向いていません。
向いている用途：SNS用画像、プレゼン資料、チラシ、簡単なバナー
Webデザインのツールを選ぶ2つの基準
ツール選びは、作業の効率と仕上がりの両方を左右します。次の2点で考えると、自分に合ったツールが見つかりやすくなります。
1. 直感的にデザインできるか
ツールの操作感は、作業スピードとストレスに直結します。レイアウトを直感的に組めるか、ショートカットや画面構成が自分に合うか。これは説明を読むより、無料プランで30分触ってみるのがいちばん確実です。
2. コーディングに渡しやすいか
Webデザインは、デザインを作って終わりではありません。そのあと、自分か別のエンジニアがHTMLとCSSに書き起こします。デザインツール上で、要素の幅・余白・色・フォントサイズをそのまま数値で確認できるか、画像をWeb用の形式で書き出せるかは、効率に大きく影響します。
私のおすすめは「Figma」
数あるツールの中で、私がWebデザインにもっともすすめるのはFigmaです。理由を具体的に挙げます。
直感的な操作性
ブラウザで開くだけで始められ、画面構成もシンプルです。レイアウトやコンポーネントの作成はドラッグ＆ドロップが基本で、初めての人でも迷いにくい作りになっています。
共同編集とフィードバックが速い
共有リンクを送るだけで、クライアントがブラウザからデザインを見て、気になる場所に直接コメントを付けられます。「スクリーンショットをメールで送って、修正箇所を文章で説明してもらう」というやり取りが減り、修正の往復が速くなります。
コーディングに渡しやすい
Figmaには、エンジニア向けに要素の寸法やCSSの値を表示する機能があります。自分でコーディングする場合も、デザインを見ながら数値を拾えるので、VS CodeやCursorとの行き来がスムーズです。画像の書き出しも、Web向けの形式と倍率を指定してまとめてできます。
どのパソコンでも、どこからでも
WindowsでもMacでも、ブラウザさえあれば同じように使えます。データはクラウドに保存されるので、パソコンを買い替えてもログインすればすぐ続きができます。
無料で始められる
無料のスターター（Starter）プランがあり、個人の練習や小規模な制作には十分です。本格的に案件で使うようになったら、有料のProfessionalプラン（月額16ドルから、年払い）に移ればよく、最初からお金をかける必要はありません。
AIとデザインツールの関係（2026年の補足）
2025年以降、FigmaにもCanvaにもAI機能が入り、文章から画面の下書きを生成したり、画像を自動で作ったりできるようになりました。便利ですが、AIが出した案を「どこがダメで、どう直すか」判断するには、余白・文字サイズ・配色といった基礎が必要です。ツールの基本操作と並行して、デザインの原則を学んでおくと、AIの出力を活かせるようになります。
まとめ：目的と相性でツールを選ぼう
- Webサイトの画面設計はFigma。無料で始められ、共同作業とコーディングへの橋渡しに強い
- 写真の加工はPhotoshop、ロゴやアイコンはIllustrator。必要になってから単体プランで足せばよい
- SNS画像や資料はCanvaが手早い。ただしWebサイトの画面設計には向かない
- Adobe XDは単体販売が終了。今から学ぶならFigmaへ
- 迷ったら、無料プランで30分触って「操作が気持ちいいか」で決める
デザインツールにはそれぞれ得意分野があります。Webデザインという目的で見たとき、「直感的に扱えて、コーディングへの橋渡しがしやすい」という点で、Figmaがもっともバランスの取れた選択です。これから始める方は、まずFigmaの無料プランでアカウントを作り、好きなWebサイトの1画面を真似して作ってみてください。
前回はWebデザイナーのテキストエディタは何がいい？、次回はHTMLのタイトルとメタディスクリプションの正しい設定です。連載の全体像は第1回「HTML・CSSはどこで習う？」の末尾にある一覧からたどれます。
