Webデザインに必要なソフトは？ Photoshop Illustrator Adobe XD

Webデザインで使われるデザインツールはたくさんあってどれを使えばいいか迷いますよね。

本記事ではWebデザインのレイアウトデザインに使うおすすめのAdobeソフトについて解説します。

これからWebデザインを始める人はソフト選びの参考にしてみてください。

Webデザインに使われるAdobeソフト3つ

Webデザインに使えるソフトは数多くありますが、私がおすすめするのは世界で最も有名なAdobeソフト3つ

	Photoshop	画像編集に強い
	Illustrator	ロゴやアイコンに強い
	Adobe XD	UIデザインに強い
	Figma	UIデザインに強い

Adobe CCはWebデザインに限らずあらゆるクリエイティブシーンで利用されます。

Adobeソフトを使いこなすのはクリエイターとしてスキルアップしていく上でも重要ですが、それぞれのソフトごとに長所があるのでわかりやすく解説していきます。

Adobe Photoshop

Photoshop(フォトショップ) はWebデザインツールに詳しくない人が一番最初に思い浮かぶソフトじゃないでしょうか？

PhotoshopはWebデザイン専門ソフトではありませんが、以下のようなメリットがあるのでWebデザインで使用されることが多くなっています。

写真などの画像編集に特化したソフトですがWebデザインにも便利なので定番ツールとしても利用されています。

Webサイトのデザイン以外にも「バナー制作」「サムネイル制作」などのWebで使用する画像デザインにもよく使用されています。

Adobe Illustrator

Illustrator(イラストレーター) もWebデザイン専用ツールではありません。

Illustratorは主に「名刺デザイン」「ポスター・ちらし」「ロゴデザイン」「ベクターイラスト作成」などに使われるソフトで、CADのように点と線で構成されるベクター形式になっています。

印刷物のデザインに優れるソフトですが、レイアウト機能が充実しているので紙面同様にWebサイトのデザインをするということもできます。

Adobe XD

Adobe XDはUIデザインやWebデザインに特化した専用ソフトです。

Photoshopのような画像加工機能やIllustratorのようなパス編集機能はありませんが、画像やテキストを配置していくレイアウトに強く、WebデザインやUIデザインに最適。

バナー画像やLP作成には不向きですが、一般的なシンプルなWebデザインにはよく使用されます。

Adobe Dreamweaver

Dreamweaver(ドリームウィーバー)はデザインソフトではなくコーディング用ソフトです。

フォトショやイラレは見た目のデザインカンプを作るソフトですが、Dreamweaverはデザインされたものをブラウザで表示するようにコーディング・プログラミングするためのソフトです。

一般的なテキストエディタと違ってWeb制作に便利な機能が多数搭載されているのでコーディングとデザインを同時進行ということも一応可能。

Webデザインソフトを選ぶコツと使い分け

Webデザインに使うソフトはあくまでもツール。正解は無いので自分に合ったものを選びましょう。

選び方のコツと使い分け方法について解説します。

Photoshopはレイアウトだけでなく画像加工も可能

Photoshopはフォトショマジックとも言われるように画像を別物に合成加工したり、写真の余計なものを取り除いて見栄えを良くすることもできます。

Webサイトで使う写真素材を加工する際にはPhotoshopが必須。

また、Photoshopを標準のWebデザインツールとして採用している企業も多いので使えるようにしておきたいソフトの一つです。

Illustratorは使い慣れている人向け

Illustratorは印刷物でよく利用されるソフトですが、Webデザインでも利用されています。

すでにIllustratorに慣れている人が使うのはおすすめですが、Webデザインにも使えるというだけでWebデザインに最適とは言えません。イチからWebデザインツールを学びたいという場合はPhotoshopかAdobe XDのほうが適切。

しかし、Webデザインで使うアイコン素材やロゴの作成はIllustratorで行うので、WebデザイナーでもIllustratorを併用することが多々あります。

参考：Adobe PhotoshopとIllustratorの違いと使い分け

Webデザインに特化しているXD

Webデザインに特化しているXDはWebデザインの基本レイアウト作成に適しています。簡易的なレイアウトのWebデザインであればXDだけで作成することができます。

しかし、前述したように「画像の編集にはPhotoshopが必要」「ロゴやアイコン編集にはIllustrator」といった具合にそれぞれのソフトを併用する必要が出てきます。

共有機能を使えばデータの確認も簡単にできるので「Webデザインしかしない」のであればXDが最適。併用ソフトとしてはPhotoshopがおすすめです。

仕事環境に合わせる

フォトショを使おうがイラレを使おうがWebデザインはできますが、使うソフトの選定で一番大事なのは指定された環境に対応できるかどうかですね。

裁量権がある場合や、フリーランスとして働いている場合は関係ありませんが、会社で働く場合は「このソフトを使え」と指定される場合があります。

近年はXDやFigmaを採用している企業がかなり増えてきていますが、Photoshopを使っている企業も多いですね。

デザインソフトを使うためのパソコン

Webデザインは動画編集などと違い、パソコンに過度なスペックを求められることは少ないです。

ただし、解像度の高い画像を扱ったり複数のアートボードを展開する場合は安いパソコンだとスペック不足に陥ってしまうためメモリ32GB以上は積んでおくと安心です。

以下の記事ではデザインソフトを快適に使うためのパソコンを解説しています。パソコン選びに迷っている人は参考にしてみてください。

Adobeのデザインソフトを無料・格安で使う方法

今回紹介したWebデザインを仕事にする上で必要になるソフトを無料または格安で購入する方法をご紹介します。

有名な方法ではありますが知っていると知らないとでは数万円の差にもなるのでぜひお得に購入してください。

XDは無料で使えなくなった

Adobe XDは以前は一部無料で使えましたが現在は無料で使用することができなくなっています。

以前の有料プラン加入ユーザーはそのまま契約が継続されますが、新規での単体プラン契約はできません。

Adobe XDを新たに契約する場合は全部入りのコンプリートプランを使用するしかありません。

以下は以前の情報になります。

有料プランと無料プランの違いは以下のとおり。

比較項目	無料プラン	有料プラン
料金	0円	1,298円/月
共有プロトタイプ	1つ	無制限
共有デザインスペック	1つ	無制限
クラウドストレージ	2GB	100GB
Adobe Fontsの利用	無料フォントのみ	すべてのフォント

業務利用でなければ無料でも十分な機能を有していますが、Adobe Fontsの多くのフォントが使用できません。

無料のスタータープランと有料プランの違いについての詳細は以下の記事をご覧ください。

Photoshopはフォトプランで格安購入が可能

Photoshopだけはフォトプランというお得なプランが用意されています。

月額2,380円(税込)という圧倒的な安さ。

フォトプランはPhotoshopだけでなくAdobe Lightroomという写真管理に最適なソフトも付属するので圧倒的にお得。

さらにすべてのAdobe Fontsも使うことができるので「フォトプラン」があるだけで多くのデザイン業務が可能になります。

Illustratorも使いたいならコンプリートプランがお得

Illustratorは単品最安価格で2,890円/月(税込)なのでPhotoshopと比べると若干高め。

上記のフォトプランとイラレ単品のセットにしたら5,270円/月になってしまいます。

もしPhotoshopとIllustratorしか使用しないのであれば問題ありませんが、他にも使いたいソフトがあるのであればAdobe CC全45種すべてのソフトが使用可能になるコンプリートプランがお得です。

コンプリートプラン	料金
月々プラン	¥12,380/月
年間プラン （月払い）	¥7,780/月
年間プラン （一括払い）	¥86,880/年 （7,240円/月）

学習目的ならアカデミックプランがおすすめ

アカデミックプランはAdobe CC1年分に動画講座が付いて68,800円です。

デメリットは法人契約が不可能っていう点ですね。商用利用はできますが、取引相手が法人や団体となるクライアントワークでは使用できません。

仕事で使うわけではなく、自己投資として勉強したい場合などにおいてはアカデミックプランのデメリットはないのでおすすめです。

マンツーマンでWebデザインを教えてほしい人はスクールで