最もよく使われるデザインの3大ツールを比較してみた！
デザインをする上で最も利用されているソフトウェアPhotoshop、Illustrator、Sketchをそれぞれ比較しています。UIデザインやグラフィックデザインなど作るものに合わせてどのツールが良いのか経験をもとに語っています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、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年の歴史があり、ベストなツールとして選ばれ続ける理由があるのです。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
グラフィックデザイン
一言に「グラフィックデザイン」といっても、様々なタスクが含まれます。アイコンのデザインも、グラフィックデザインの領域に含まれるといえますし、アイデンティティデザイン（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デザインオンラインブートキャンプを開催しています。デザインのスキルを磨きたい方はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
