デザインツール

デザインツールと言えば、Adobeのillustrator、Photoshopを使っている人が多いと思います。
その他にもプロトタイプデザインツールのPrott,Figma,Sketch,AdobeXDなどがあります。スマホでのツールもたくさんあり写真加工やデザインするツールがあるのでちょっとした加工であればそれで充分かもしれません。

特にSketchは、いろんなツールとの連携が充実しており個人的に注目しています。UIデザインのツールとしてはシェア率が34%となっています。

プロとして仕事するにはillustrator、Sketch、Photoshopのどれを利用すれば良いのか比較しようと思います。

参照元URL

Sketchシェア率円グラフ

Sketchシェア率円グラフ

Sketchとillustratorの違い

Sketchとイラストレータの費用やできることの違いについて、下記の表にまとめてみました。

Sketch・illustrator比較表
項目 Sketch illustrator Photoshop
費用 $99(約¥10,000。買い切りで一年間の更新保証付) ¥15,360(年間プラン) ¥15,360(年間プラン)
強み 他のツールとの連動・変換機能が優れている 文字、写真、ベクターデータの配置がしやすく、ピクセル単位の修正や色の調整が簡単 写真の加工に優れている
DTP制作 ×(mm単位指定ができないので不可) ◎(テキストのサイズ指定など配置が簡単) △(可能だが配置調整などが難しい)
HTML制作 ◎(画像の書き出し,CSS変換可能) ○(画像の書き出しのみ) ○(画像の書き出しのみ)
バージョン管理 abstractなどを利用して無料でバージョン管理可能 ×(ほぼない) ○(ショットガン)

Sketchはデータ形式がjson形式のため、他のツールとの連動やCSSへの互換性が優れています。そして、$99(約¥10,000)買い切りなので使い続けても費用がかからないのも魅力です。

Sketchのデータ形式の参考記事

Sketchを使ってみる

Sketchの使い方を簡単にご紹介します。無料トライアルでインストールできるのでぜひ試してみてください。

使い勝手

Sketchにはテンプレートが用意されています。
Webサイトやスマホアプリを利用する場合に便利です。

Sketchのテンプレート画面

Sketchのテンプレート画面

Insertメニューから要素を置いていきます。
コマンドがわかりやすく記載されており、シンボルで設定した要素を置いてくこともできます。

SketchのInsertメニュー

SketchのInsertメニュー

作成した要素を選択してサイズや画像形式を指定して保存できます。

Sketch Export機能

Sketch Export機能

デザインのバージョン管理ツールのabstract

Sketchは、デザインツールでは珍しいバージョン管理のツールを利用することができます。ショットガンというpsd対応のツールもありますが費用が高いため、個人利用や会社での導入が難しいです。Sketchならabstractを利用して無料でバージョン管理を利用できます。

abstaractにSketchのファイルをインポートすると各ページのアートボード毎にファイルを管理できます。

abstractとsketchの連携画面

abstractとsketchの連携画面

変更した箇所や増やしたアートボードをコミットしてバージョン管理ができます。

abstractのコミット画面

abstractのコミット画面

まとめ

「Sketchってプロ向けのツールではないのかな」という先入観がありましたが調べてみると使い勝手や他のツールとの連動性に優れており、WebやアプリケーションのデザインだけならSketchを選ぶべきだと感じました。
Web制作やアプリ開発に興味のある方はAdobeの年間更新の際にでも、ぜひ検討してみてください。