Photoshop、Illustrator、Sketch…デザインツールは結局どれがいいの？

みなさん、UIデザインのツールって何を使っていますか？かつてはWebデザインに使うグラフィックツールはPhotoshop一択でした。しかし昨今はお手頃価格のグラフィックツールが増えてきて、どれを使うのがいいのか悩んでしまったり…。私もその一人でした。そこで現在巷でよく使われているPhotoshop、Illustrator、Sketchを比較してみました。

↑私が10年以上利用している会計ソフト！


Twitterでもアンケートを取ってみました！やはりPhotoshop強し！

各ツールとも日々進化しており、以前はできなかった機能ができるようになっていたり…と、今回記事を書いていて改めて気づいたものも多くありました。基本的に以下の機能はPhotoshop、Illustrator、Sketchのすべてで可能です。

  • 複数のアートボードを作成し、ひとつずつ画像として書き出す
  • SVGファイルの読み込み・書き出し
  • ペンツールでベクターグラフィックの描画
  • オブジェクトのCSSコードを表示

それらをふまえて、メリットやデメリットを挙げていきます！

Photoshop

photoshop
Photoshop CC
アンケートでも一番人気だったPhotoshop。AdobeがFireworksの開発を終了してからは、特に使われる機会が増えたと思います。そのためWebやアプリデザインに対応した機能もどんどん追加され、SVGやアートボード、iOSアプリでのプレビューなんかもできるようになりました。

メリット

  • パワフルな画像編集機能
  • 等倍、2倍、3倍…と、サイズを指定しての画像の書き出しが簡単
  • チュートリアルや参考書が豊富
  • 制作会社では標準ツールとして認知されているので、ファイルの共有が容易
  • モバイルアプリ（無料）と連携して画像を表示

デメリット

  • 月額980円のサブスクリプションタイプ
  • ベクターグラフィックの作成は苦手

こんな人におすすめ

  • 現役デザイナーまたはデザイナーを目指す人
  • 写真を扱うことが多い
  • 非デザイナーである、かつWindowsユーザー

やはり他の人と作業する機会の多い制作会社では、Photoshopは外せないかなぁ、という印象。一匹狼なフリーランサーさんなんかは他のツールで代替可能？
Sketchの得意技だったアートボード機能や、スライスをすることなくレイヤーを選択し、各画像を@2x、@3x…で書き出せるようになったのも大きいです。アートボードはキャンバスの周りに表示されているプラスアイコンをクリックするだけでポンポン追加されていき、なんだか爽快。

Illustrator

illustrator
Adobe Illustrator CC
私は元々グラフィック出身だったこともあり、一番使い慣れているIllustrator。過去記事「IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ」でも紹介したとおり、Illustratorでもちゃんと設定をしておけば十分Webデザインにも使えます。

メリット

  • ベクターグラフィックが大得意
  • オブジェクトをコピーし、テキストエディターにペーストするだけでSVGコードが表示される
  • チュートリアルや参考書が豊富
  • 制作会社では標準ツールとして認知されているので、ファイルの共有が容易

デメリット

  • 月額2,180円のサブスクリプションタイプ
  • 画像の編集は難しい

こんな人におすすめ

  • 現役デザイナーまたはデザイナーを目指す人
  • イラストやアイコンを扱うことが多い

アートボード機能はあるものの、サイズ指定をしての画像の個別書き出しが苦手など、Photoshopに比べてできることが少ない印象のIllustrator。Illustrator単体のサブスクリプションの場合、毎月2,180円支払わなければならないのも気になるところ…。
しかし、SVGの扱いはどのツールよりも強いと思います。オブジェクトをコピペするだけでSVGコードを書けちゃったり、過去記事「IllustratorとIcoMoonでSVGスプライトのラクラク設定！」のとおり、SVGスプライトの作成も簡単！

Sketch

sketch
Sketch
ここ数年でググッと人気が出てきたSketch。これまで何度も試してはやめ、試してはやめ…と繰り返していましたが、ついに導入してガッツリいじってみました。Fireworksを使っていた人は、Sketchに移行しても使いやすいかな？と思います。

メリット

  • 動作が軽い
  • 等倍、2倍、3倍…と、サイズを指定しての画像の書き出しが簡単
  • UIキットがプリインストールされている
  • 9,800円で一度購入すれば、PhotoshopやIllustratorのように毎月課金しなくてよい
  • ベクターグラフィックが得意
  • 簡単な画像編集ができる
  • モバイルアプリ（有料）と連携して画像を表示

デメリット

  • Illustrator（.ai）やPhotoshop（.psd）ファイルは一枚の画像として読み込まれる
  • .eps形式のファイルだと日本語が文字化け
  • 保存ファイルは .sketch形式なので、PCやSketchをインストールされていないMacで開けない
  • チュートリアルや参考書が少ない

こんな人におすすめ

  • 趣味でデザインをしている
  • 社内Web担当で、簡単なバナー制作等をすることがある
  • イラストやアイコンを扱うことが多い
  • 非デザイナーである、かつMacユーザー
  • 開発が終了したAdobe Fireworksを忘れられない

iOSやマテリアルデザインのUIキットが用意されているので、すぐにプロトタイプを作成できます。エンジニアの方がプロトタイプやデザインのラフを作る時によさそう。PhotoshopやIllustratorと違い、買い切りタイプなところも魅力的ですよね。
ただし、互換性についてはクリティカルすぎるデメリット。制作会社などでゴリゴリデザインする場合はなかなか難しそうです。

私はこんな使い方

前述のとおり、Illustratorに一番慣れていることもあり、ここ2、3年はIllustratorでデザインをしていました。Sketchに移行できれば、出費も減るなぁ…と思ったものの、互換性を考えたらやはりこれからもAdobeさんにお布施していくのでしょう…。ということで、私は画像編集はPhotoshop、デザインは基本的にIllustratorという使い方になりそうです。

「基本的に」と書きましたが、アプリのデザインをする時は、以前書いた「無料で使えるモバイルアプリ制作用のプロトタイピングツール」と連携して使うかも？ということで専用プラグインの用意されているSketchを使うこともあるかなーと思っています。調査の結果、使うツールが一つ増えるという謎。

他にもあるよ！買い切りタイプのグラフィックツール

「Adobeのサブスクリプション課金はちょっと…」と思う方も多いですよね。。Sketchのような一度購入してずっと使えるグラフィックツールは他にもいろいろあります！

私はすべてを試してみたわけではないのですが…ぜひ自分にあったツールを探して使ってみてくださいね！

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください！もちろん無料です！ :)