・Webデザインを始めたいけど、続くか分からないからPhotoshopやIllustratorを買うにはまだ少し抵抗がある
・Webデザインをする上で、無料で良いツールがあるなら知りたい。
こういった疑問にお答えします。
本記事の信頼性
この記事を書いている私は、
- 都内のデザイン制作会社に勤務している現役デザイナー
- グラフィックデザイン歴約17年
- Webデザイン歴は約12年
そんな私が
【これからWebデザインを学ぼうとしている方】
【Webデザイナーを目指している方】に
- Webデザインに必須の定番ツールを紹介
- 定番ツールの代わりとして使える無料ツールを紹介
- 定番と代替ツール、どちらを使うのがオススメか？
ということを、経験を踏まえて解説します。
結論
以下の３つを押さえておけば間違いなし！
・Adobe Photoshop（有料） または GIMP（無料）
・Adobe Illustrator（有料） または Inkscape（無料） または Gravit Designer（無料）
・Adobe XD（無料あり） または Figma（無料）
出来るだけ費用を抑えたいという方は、ページ後半の
『定番ツールの代わりとして使える無料ツール』
からご覧ください。
Webデザインの定番ツールを紹介
絶対に欠かせない必須ツール『Photoshop』（有料）
言わずと知れた、画像編集ソフトの王様。
本来は切り抜きやリサイズ、色調加工や映り込み処理など、画像編集を行うためのツールだが、Webデザインを作り込むツールとしてもド定番。
ユーザーインターフェイス（UI）デザインだけに重点をおくなら、後述する『Adobe XD』の方が効率的に作れるが、Photoshopの利点は画像加工・編集・グラフィック作成・レイアウトまでを1つで完結できること。
Webデザインデータを納品する場合も、PSD形式で納品するケースが多いし、それ以外でも多用するので、プロを目指すなら持っておいて絶対に損のないツール。
ロゴやアイコン、図解などの制作には『Illustrator』（有料）
すごく大雑把に説明すると「拡大しても画質が荒れない」画像を作成するソフト。
Webデザインをする上では、サイトのロゴデザインやアイコンの作成、図解イラストなどを作成するために使用することが多いです。
もちろん、そういったデザインオブジェクトの作成だけでなく、IllustratorでWebレイアウトを作成し画像加工はPhotoshopで行う、といった使い方もできます。
この辺の制作フローに関しては、慣れや好みもあるので「絶対こっちの進め方がイイ」とは言い切れません。
UIデザインやプロトタイプを効率的に作成できる『Adobe XD』（無料プランあり）
UIデザインやプロトタイプを非常に効率的に作成できるツール。
「PhotoshopやIllustratorでデザインするのと何が違うの？」という疑問を抱く人も多いと思います。そこで、百聞は一見に如かず、代表的な機能の一例として『リピートグリッド』と、複数画像の一括挿入の動作を見てください。
このように、効率的に画面デザインを進める機能が備わっているのが、UIデザインツールの特徴。
さらに、画面遷移などを再現した「プロトタイプ」を簡単に作成でき、クライアントやプロジェクトメンバーと素早く共有できるのも非常に大きなメリットです。
そしてありがたいことに、Adobe製品ですが無料プランが存在します。
保存容量などに制限はありますが、気軽に試せるのは嬉しいですね。
定番ツールまとめ
私は近年、Webデザインをする際は上記３つのツールを使って作業をしています。
役割は、
画像加工 → Photoshop
【理由】Illustrator & XDでは出来ない or やりづらいため。
ロゴやイラスト作成 → Illustrator
【理由】色付けやカラー変更、その他のパス周りの細かい部分の調整がPhotoshopより圧倒的にラクなため。
デザイン＆レイアウト → Adobe XD
【理由】アプリ自体の動作も軽いし、オブジェクト同士を等間隔で並べたり、複製を作る動作もPhotoshopよりラクにでき、サクサク進められるため。
定番ツールの代わりとして使える無料ツールを紹介
Adobe製品を使っておけば間違いないのは分かるけど、月々6,000円近い（コンプリートプランの年間契約時）固定出費は躊躇しちゃうな・・・。
という方は、以下の無料ツールで、まずは気軽にWebデザインをスタートしてみることをオススメします。
Photoshopの代わりなら『GIMP』（無料）
無料でありながら、超高機能な画像編集ツールの代名詞といえば『GIMP』です。
年々機能が豊富になっており、Webデザインをする上で必要な画像編集は全てできるので、機能的に問題になることはないでしょう。
ただし、印刷物用の画像処理も行うことが想定される場合は、圧倒的にPhotoshopを推奨します。
詳細な説明は省きますが、CMYKの扱いにクセがあるようで注意が必要だからです。
Adobe XDの代わりなら『Figma』（無料）
Figma（フィグマ）は2015年に誕生したアプリで、他の競合ツールと違い、Webサイト上でもUIデザインをすることができるツールです。
また、今でこそAdobe XDにも機能が加わりましたが「リアルタイム共同編集」ができることも特徴です。
無料で気軽に始めらる上に、非常に多機能なためAdobe XDの代替ツールとしては一押しです。
ただし、デメリットとしては以下です。
・日本語インターフェイスに未対応なので、慣れるまでに少々大変？
・デフォルト状態では日本語入力に対応していない。
・デスクトップアプリはあるが、基本的にはオフライン環境では使用できない。
といったところです。
Illustratorの代替ツールその1『Inkscape』（無料）
ベクター系の無料ソフトといえば、この『Inkscape』が定番です。
こちらも無料でありながら非常に多機能なので、Webデザインをする上ではIllustratorの代わりとして使っても困ることはないでしょう。
ただし、デメリットは以下の通り
・CMYK非対応のため、印刷物の制作は不可
・Illustratorとインターフェイスがかなり違うので、ゆくゆくはイラレへの移行を考えている人は移行後に戸惑う。
・Macではショートカットが効かない。
・Macではデフォルトで日本語入力ができない。
・Macでは「XQuartz」というソフトを別途インストールしないといけないので少し面倒
上記の通り、印刷物を扱う想定をするか否かが、Illustrator にするか Inkscapeでよいかの分岐です。
Illustratorの代替ツールその2『Gravit Designer』（無料）
Inkscapeと異なり、ウェブサイト上でベクター画像を作成するツールです。
Inkscapeと比較した場合のメリットは以下の通りです。
［Inkscape と比べてのメリット］
・インターフェイスがIllustratorに近いので、将来的に移行しやすい
・デフォルトで日本語入力ができる。（日本語フォントを選択する必要あり）
・Macでもショートカットが使える。
・Macユーザーでも余計なソフト（XQuartz）をインストールしなくてもよいのでラク。
逆にInkscape と比べてのデメリットはというと、正直あまり思い当たりませんでした。
なので、InkscapeはMacユーザーだと色々と不便なことが多いので、Gravit Designerをオススメします。
ただしIllustratorと比べると、やはり以下のデメリットがあります。
・無料版ではCMYK非対応
・有料版でもPDFの書き出し解像度が300dpiまでしか対応していない。
という部分です。
なので、Webだけでしたら、Gravit DesignerでもInkscapeでも対応できるはずですが、やはり「印刷物を扱うか」が選択のカギになります。
定番ツールと代替ツール、どちらを使うのがおすすめか？
まとめになりますが、月々約6,000円の費用を出せるかどうか、これに尽きます。
月額約6,000円は問題なしという方
迷わずAdobe CCのコンプリートプランでいきましょう。会社に入ってからAdobeの使い方を覚え直す手間が省けますので。
月額6,000円は厳しいが1,000円程度ならという方
「6,000円はちょっと・・・でも途中でツールを切り替えるのもできるだけ避けたい」という方には、私は以下の組み合わせを推奨します。
Adobe フォトプラン（税別980円/月※）＋Adobe XD（無料版）＋Gravit Designer or Inkscape
※フォトプランは月々契約がなく、年間契約になるので注意。
理由は、Photoshopがあれば、大抵のことができるからです。
Illustrator同様にベジェ曲線によるベクター画像も書き出せますし、アイコンや図解イラストなんかも、別にPhotoshopでも作成できますので、この月額1,000円程度なら最初から定番ツールで勉強を始めるのは良いと思います。
PhotoshopでAdobeのインターフェイスやメニュー周りに触れておくと、 Illustratorや他のツールを覚える際も慣れるのが早いですし。
月額費用はかけたくないという方
「続けられるか分からないし、月980円もちょっとなぁ・・・」という方は、迷わず全てフリーのアプリで、まずはWebデザインというものに触れてみましょう。
今回は以上です。
僅かでも、これからWebデザイナーを目指す方の参考になれば幸いです。