最もよく使われるデザインの3大ツールを比較してみた！
本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。
絶えず拡大し続けるデザインの世界に初めて入った人にとって、この世界は理解しにくいと思えるかもしれません。あまりにも多くのツールやテクニックがあるため、何から始めたらいいか分かりにくいかもしれません。
最も広く使用されているのデザインソフトウェアは、Adobe Photoshop、Adobe Illustrator、Sketchです。
このガイドでは、これらの3大ツールを比較しながら、デザインの一般的なタスクにおける活用方法をご紹介します。どれも優れたツールですが、それぞれ長所と短所があります。タスクごとに最適なツールを知っていれば、デザインの学習や作業は、はるかに効率的になると思います。
目次
UIデザイン
インターフェースのデザインは、通常、Webサイトやモバイルアプリを対象としますが、ゲームのUI、インタラクションデザインの画面を対象に含むこともあります。
過去数年においては、PhotoshopがUIデザインにおける第1位のツールでした。Photoshopを使用すれば、ベクター形式のアイコンとテクスチャ素材の背景を組み合わせて、1つのレイアウトを作成することも可能です。
また、本来Photoshopは、画像編集のソフトウェアパッケージ（スイート）ですが、Adobe社によってFireworksの開発終了が宣言されたため、Photoshopの需要は一層高まっていました。
こうした状況で新たに登場したのがSketchです。Sketchのアプリの最初のリリースは、2010年後半のことでした。それ以来、Sketchの学習コミュニティ、無料サイトなどが拡大しています。
現在では、UIデザインツールの覇者はSketchです。Sketchは、WebとモバイルのUIデザインに特化したソフトウェアパッケージです。パタン、テクスチャ素材、ベクター素材などを組み合わせた編集は、Photoshopで行うよりも簡単です。
唯一の短所は、対応OSがMac OS Xのみであるため、Windowsのユーザーは利用できない点です。
UIのデザインにIllustratorを好んで使う人もいますが、機能が不十分に思えます。Illustratorは、インターフェースに求められるピクセルパーフェクトなデザインを実現できるソフトウェアではありません。一方Sketchを使えば、ベクター素材とピクセル単位のデザインを組み合わせて、インターフェースを作ることも可能です。シェイプとベクターの編集、レイヤーの編集もより簡単に行うことができます。
もし、UIデザインのためのソフトウェアを探しているとしたら、Sketchが明らかにベストな選択です。しかし、OSがWindowsの場合にはSketchは選択できないので、Photoshopがベストな選択になります。PhotoshopでもSketchと同じような作業ができますが、Sketchを使った方が、UIデザインのワークフローは円滑に進みます。
現在Photoshopを使っていてSketchに乗り換えようか迷っている人は、「Sketchに乗り換えた理由と気に入っている点」を解説したSagi Shrieber氏による記事などが参考になると思います。
またもし、試しにSketchでデザインの作業をしてみたいという方は、Sketchのサイトで提供されているフリートライアルやチュートリアルを活用することもできます。
- Sagi Shrieber氏による記事
- Sketchによるヘッダーのデザイン例
- Sketchによるログインフォームのデザイン例
- Sketchによるニュースレターのデザイン例
- Sketchのフリートライアル
アイコンのデザイン
アイコンのデザインは、ベクター形式で進められることがほとんどです。多くのデザイナーは、まずアイデアを紙に書き出して、次にそれをデザインソフトウェアに取り込むことでトレースします。私の経験からいうと、ペンツールによる直感的な描写が可能なIllustratorが良いと思います。
私はPhotoshopのペンツールもよく使っています。Photoshopは、アイコンをトレースしたり、デザインをマッピングする際に優れたツールとなります。ただし、Photoshopで作成したベクター素材をIllustratorで編集するのは簡単なことではなく、その逆もしかりです。しかしどちらかというと、IllustratorからPhotoshopへ編集を移行する方が、ワークフローはスムーズになると思います。
Illustratorではアイコンの細かな編集が可能で、Photoshopのパスパレット（paths palette）を使うよりも、レイヤーの編集が容易になります。
Sketchにも、アイコンのデザインに使える優れたツールが備わっています。操作性はIllustratorととよく似ていて、オンラインのチュートリアルなどを利用して練習を積めば、基礎を学べると思います。Sketchにおける重要な機能は、シェイプ（shape）を結合するときに使える、結合ボタン（Union button）です。これはちょうどIllustratorにおけるパスファインダー（Pathfinder）と似ていて、リアルな質感のアイコンをデザインするには欠かせないツールです。
ベクター形式のアイコンのデザインに関しては、Illustratorがベストな選択です。
しかし、Sketchも基本的な機能を備えていて、アイコンのデザインに使うには優れたツールでしょう。
写真の編集
Adobe Photoshopが特に優れているのは、写真の編集です。独自のアイデアからフォトバッシュ（photobashing：複数の写真や画像を組み合わせて、ペイントなどを加え、新たな1つの画像を作成するデザイン技法）をするとしても、古い写真をレタッチするとしても、Photoshop1つあれば全てのデザイン作業を完了できます。
Photoshopには、赤目の修正機能、部分編集に使える複製（duplicate）＆パッチツール、カラーやテクスチャのブレンドモード、選択したサイズで画像をエクスポートする機能など、豊富なツールが備わっています。
このような機能に関しては、IllustratorやSketchは到底敵いません。
Photoshopの代替ツールとして、AffinityやGIMPなどもありますが、Photoshopと同じようなワークフローを実現できるツールはほぼないといえます。
タスクによっては、アイコンのデザインはPhotoshopで行い、インターフェースのデザインはIllustratorで行うなど、複数のツールを切り替えて使うのが良い場合もあります。しかし写真編集に関しては、IllustratorやSketchを開く必要はありません（Photoshopだけで十分です）。
Photoshopは写真編集のソフトウェアパッケージとして25年の歴史があり、ベストなツールとして選ばれ続ける理由があるのです。
グラフィックデザイン
一言に「グラフィックデザイン」といっても、様々なタスクが含まれます。アイコンのデザインも、グラフィックデザインの領域に含まれるといえますし、アイデンティティデザイン（identity design：視覚的なブランディングデザインなど）、ロゴのデザイン、印刷物のデザインなども同様です。
Photoshopは、グラフィックデザインに関しても優れた機能を備えています。写真の編集や加工については基本的に何でもできます。またテキストの編集ツールも備えています。もっとも個人的な意見としては、タイポグラフィをカスタマイズするには、Illustratorの方が優れていると思いますが。
Sketchは、グラフィックデザインに関してはまずまずのツールです。しかし、ほとんどの人はSketchをインターフェースのデザインに使っているため、Web上のSketchのチュートリアルも、Webとモバイルのデザインに焦点を当てたものが多いです。
これらの特定のタスク以外では、Sketchはグラフィックデザインに使うにはベストなツールではありません。
グラフィックデザインに関してはIllustratorが一番だと私は思います。ポスター、ステッカー、パンフレット、さらにはTシャツのデザインに至るまで広範囲に使えます。またどのようなプロジェクトにおいても、グラフィックの最適なサイズを選択できます。
もっとも、写真加工に関してはPhotoshopも大いに役に立ちます。雑誌の中の広告のデザインなどでは、写真加工がよく使われています。
しかし、その他についてはIllustratorの方が優れています。
IllustratorはPhotoshopよりも長い歴史があります。PSファイルとAIファイルを相互に変換したときにも、Illustratorほどスムーズな編集が可能なソフトは、私は他にはないと思います。
熟練したグラフィックデザイナーになるためには、おそらく両方のソフトウェアを学ぶ必要があります。クリエイティブなプロジェクトにおいてそれぞれ、異なる目的、異なる段階で役に立ちます。いずれにしても、Sketchはグラフィックデザインにおいてはベストなツールではないと思われます。
また、印刷物のデザインに使うツールとして、もう1つおすすめなのがAdobe InDesignです。Adobe製品なので、Photoshop、Illustrator、InDesign間でファイルを移動するときにも、インポートの設定に困ることもありません。
デジタルペインティング（デジタル絵画）
デザイナーが、アナログ媒体からデジタル媒体へとツールを移行するときには、2つの問題に直面します。：「どのタブレットを購入するか」と「どのソフトウェアを使うか」です。
デジタルペインティングには、ペイントツールSAI、Kritaなどのツールを使うこともできます。しかしほとんどの人は、Photoshopを選択するでしょう。またもし、IllustratorとSketchを比較するとしたら、どちらも遜色ないと思います。
Photoshopには、ピクセル単位のデザインを可能とするペイントツールとしてブラシが備わっています。ブラシを設定からカスタマイズすれば、滑らかな線を描いたり、筆圧感知をコントロールすることも可能です。
また、Photoshopは数多くの描画タブレットと互換性があります。Coolorus（カラーホイールのプラグイン）などのプラグインを追加すれば、Photoshopを使ったデジタルペインティングのワークフローを、よりスムーズに進めることができます。
Illustratorがデジタルペインティングにおいて良い選択とはいえない理由は、主にベクター形式で編集するツールであるからです。ベクター形式は、デジタルペインティングにおける画像の繊細な描写などに使う形式としては、適していません。
Photoshopのブラシのツールを利用すれば、ピクセル単位のデザインが可能であるため、デジタルアートにも最適なツールです。
まとめ
これら3つのソフトウェアはどれも、それぞれが得意とするタスクで役に立ちます。
デザインのワークフローはデザイナーによって異なるため、一般化するのは難しいですが、私としては次のようにまとめられると思います。
- Adobe Photoshop：写真加工とデジタルペインティングに最適なツール
- Adobe Illustrator：アイコンのデザインとグラフィックデザインに最適なツール
- Sketch：全てのUI/UXのデザインと一部のアイコンのデザインに最適なツール
これらのソフトウェアには、それぞれにニッチ市場があり、各分野の専門家から過剰に称賛されることもあります。これらの中で、どれか1つのソフトウェアが他よりも絶対的に優れているというわけではありませんが、それぞれが得意とするタスクにおいては他を凌駕します。
あなたがクリエイティブな分野に進出したり、デザインの新たな領域に挑戦するときには、ぜひこのことを覚えておいてください。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。デザインのスキルを磨きたい方はぜひご覧ください。
