TOOLS WEB DESIGN

<2020版>プロのWEBデザイナーに必須のツール7選

webデザインツール
悩んでる人
・Webデザイナーを目指しているけど、プロのWebデザイナーが実際の仕事で使うツールが知りたい
・Webデザインを始めたいけど、続くか分からないからPhotoshopやIllustratorを買うにはまだ少し抵抗がある
・Webデザインをする上で、無料で良いツールがあるなら知りたい。

こういった疑問にお答えします。

本記事の信頼性

この記事を書いている私は、

  • 都内のデザイン制作会社に勤務している現役デザイナー
  • グラフィックデザイン歴約17年
  • Webデザイン歴は約12年

そんな私が
【これからWebデザインを学ぼうとしている方】
【Webデザイナーを目指している方】に

  • Webデザインに必須の定番ツールを紹介
  • 定番ツールの代わりとして使える無料ツールを紹介
  • 定番と代替ツール、どちらを使うのがオススメか?

ということを、経験を踏まえて解説します。

結論

以下の3つを押さえておけば間違いなし!
・Adobe Photoshop(有料) または GIMP(無料)
・Adobe Illustrator(有料) または Inkscape(無料) または Gravit Designer(無料)
・Adobe XD(無料あり) または Figma(無料)

出来るだけ費用を抑えたいという方は、ページ後半の
『定番ツールの代わりとして使える無料ツール』
からご覧ください。

Webデザインの定番ツールを紹介

絶対に欠かせない必須ツール『Photoshop』(有料)

出典:Adobe Photoshop 公式サイト

言わずと知れた、画像編集ソフトの王様。
本来は切り抜きやリサイズ、色調加工や映り込み処理など、画像編集を行うためのツールだが、Webデザインを作り込むツールとしてもド定番。

ユーザーインターフェイス(UI)デザインだけに重点をおくなら、後述する『Adobe XD』の方が効率的に作れるが、Photoshopの利点は画像加工・編集・グラフィック作成・レイアウトまでを1つで完結できること。

Webデザインデータを納品する場合も、PSD形式で納品するケースが多いし、それ以外でも多用するので、プロを目指すなら持っておいて絶対に損のないツール。

ロゴやアイコン、図解などの制作には『Illustrator』(有料)

出典:Adobe Illustrator 公式サイト

すごく大雑把に説明すると「拡大しても画質が荒れない」画像を作成するソフト。

Webデザインをする上では、サイトのロゴデザインやアイコンの作成、図解イラストなどを作成するために使用することが多いです。

もちろん、そういったデザインオブジェクトの作成だけでなく、IllustratorでWebレイアウトを作成し画像加工はPhotoshopで行う、といった使い方もできます。
この辺の制作フローに関しては、慣れや好みもあるので「絶対こっちの進め方がイイ」とは言い切れません。

UIデザインやプロトタイプを効率的に作成できる『Adobe XD』(無料プランあり)

出典:Adobe XD 公式サイト

UIデザインやプロトタイプを非常に効率的に作成できるツール。
「PhotoshopやIllustratorでデザインするのと何が違うの?」という疑問を抱く人も多いと思います。そこで、百聞は一見に如かず、代表的な機能の一例として『リピートグリッド』と、複数画像の一括挿入の動作を見てください。

このように、効率的に画面デザインを進める機能が備わっているのが、UIデザインツールの特徴。

さらに、画面遷移などを再現した「プロトタイプ」を簡単に作成でき、クライアントやプロジェクトメンバーと素早く共有できるのも非常に大きなメリットです。

そしてありがたいことに、Adobe製品ですが無料プランが存在します。
保存容量などに制限はありますが、気軽に試せるのは嬉しいですね。

定番ツールまとめ

私は近年、Webデザインをする際は上記3つのツールを使って作業をしています。

役割は、
画像加工 → Photoshop
【理由】Illustrator & XDでは出来ない or やりづらいため。

ロゴやイラスト作成 → Illustrator
【理由】色付けやカラー変更、その他のパス周りの細かい部分の調整がPhotoshopより圧倒的にラクなため。

デザイン&レイアウト → Adobe XD
【理由】アプリ自体の動作も軽いし、オブジェクト同士を等間隔で並べたり、複製を作る動作もPhotoshopよりラクにでき、サクサク進められるため。

定番ツールの代わりとして使える無料ツールを紹介

Adobe製品を使っておけば間違いないのは分かるけど、月々6,000円近い(コンプリートプランの年間契約時)固定出費は躊躇しちゃうな・・・。
という方は、以下の無料ツールで、まずは気軽にWebデザインをスタートしてみることをオススメします。

Photoshopの代わりなら『GIMP』(無料)

出典:GIMP公式サイト

無料でありながら、超高機能な画像編集ツールの代名詞といえば『GIMP』です。
年々機能が豊富になっており、Webデザインをする上で必要な画像編集は全てできるので、機能的に問題になることはないでしょう。

ただし、印刷物用の画像処理も行うことが想定される場合は、圧倒的にPhotoshopを推奨します。
詳細な説明は省きますが、CMYKの扱いにクセがあるようで注意が必要だからです。

GIMPのダウンロードはこちら»

Adobe XDの代わりなら『Figma』(無料)

出典:Figma公式サイト

Figma(フィグマ)は2015年に誕生したアプリで、他の競合ツールと違い、Webサイト上でもUIデザインをすることができるツールです。

また、今でこそAdobe XDにも機能が加わりましたが「リアルタイム共同編集」ができることも特徴です。

無料で気軽に始めらる上に、非常に多機能なためAdobe XDの代替ツールとしては一押しです。

ただし、デメリットとしては以下です。
・日本語インターフェイスに未対応なので、慣れるまでに少々大変?
・デフォルト状態では日本語入力に対応していない。
・デスクトップアプリはあるが、基本的にはオフライン環境では使用できない。
といったところです。

Figmaのオフィシャルサイトはこちら »

Illustratorの代替ツールその1『Inkscape』(無料)

出典:Inkscape公式サイト

ベクター系の無料ソフトといえば、この『Inkscape』が定番です。
こちらも無料でありながら非常に多機能なので、Webデザインをする上ではIllustratorの代わりとして使っても困ることはないでしょう。

ただし、デメリットは以下の通り

・CMYK非対応のため、印刷物の制作は不可
・Illustratorとインターフェイスがかなり違うので、ゆくゆくはイラレへの移行を考えている人は移行後に戸惑う。
・Macではショートカットが効かない。
・Macではデフォルトで日本語入力ができない。
・Macでは「XQuartz」というソフトを別途インストールしないといけないので少し面倒

上記の通り、印刷物を扱う想定をするか否かが、Illustrator にするか Inkscapeでよいかの分岐です。

Inkscapeのダウンロードはこちら »

Illustratorの代替ツールその2『Gravit Designer』(無料)

出典: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デザイナーを目指す方の参考になれば幸いです。

-TOOLS, WEB DESIGN
-, , ,

Copyright© Kurilog(クリログ) , 2020 All Rights Reserved.