logo
デザイン

更新日

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

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

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

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

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

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

Photoshop

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

メリット

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

デメリット

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

こんな人におすすめ

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

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

Illustrator

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

メリット

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

デメリット

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

こんな人におすすめ

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

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

Sketch

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

メリット

  • 動作が軽い
  • 等倍、2 倍、3 倍…と、サイズを指定しての画像の書き出しが簡単
  • UI キットがプリインストールされている
  • 月額 $10 で比較的安価
  • ベクターグラフィックが得意
  • 簡単な画像編集ができる
  • モバイルアプリ（有料）と連携して画像を表示

デメリット

  • 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 のような一度購入してずっと使えるグラフィックツールは他にもいろいろあります！

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