Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app

Web制作ツールといえばAdobeのPhotoshopやFireworksですが、AdobeはFireworksの開発停止を発表してしまいましたね。そんな最中、海外のWeb/ UIデザイナーたちが使い始めている新しいWeb制作ツールを見つけました。それがSketchです。BOHEMIAN CODINGという会社がリリースしているアプリで、他にも有名なフォント管理アプリFontcaseもリリースしています。
（Sketchを使い始めている海外のデザイナーたち→「Sketch App vs Photoshop」、Dribbbleにsketchで描いた作品をアップしている人も→[.Sketch] Wireframe UI kit）

アイコンやWebサイトのデザインもきれいで、Goodpatch社内でも最も話題になっているアプリ。Sketchも使ってみようと盛り上がっています。ただSketchについて勉強しようとしても海外の記事はいくつかあるのですが、日本語で書かれている記事がなかったので今後何回かに分けてMEMOPATCHでSketchについて記事を書いていきます！

まず第1回目はSketchの便利な機能をご紹介します。
Sketchはベクター形式のWebデザインツールで、Fireworksに似たアプリとも言えます。

1, 価格が安い

AdobeはCreative Cloudがあるので月額5,000円でPhotoshopやFireworksが使用可能ですが、Photoshop単体を購入するとAmazonでも86,625円、Fireworksが36,178円とかなり高価です。一方Sketchは5月7日現在のApp Storeの価格で4,300円ととても安価です。

Sketch 2.2.4（￥4,300）
カテゴリ: グラフィック&デザイン, 仕事効率化
販売元: Bohemian Coding – Bohemian Coding

2, 画像の書き出しが簡単

Sketchでは画像の書き出しが簡単です。書き出す際は右上の[Export]をクリックすることでExportする画面になります。ドラッグすることでスライスが描け、スライスした範囲を書き出すか、そのスライス内の特定のレイヤーのみ書き出すかを選択できます。上記の写真では[Disapper]と書かれたボタンの回りを適当に囲み、[Only include the following]にチェックを入れ、そのボタンのレイヤーのみチェックを入れると下記のような画像が書き出されます！

3, Retina用の画像が簡単に用意できる

上で画像の書き出しが簡単だと紹介しましたがSketchではさらにRetina用の二倍の大きさの画像も簡単に用意できます。上記画像の[Also export as]の[Double size]にチェックを入れることで名前に「@2x」と付いた二倍の大きさの画像が書き出せます。

4, グリッドシステムが使える

Web制作する際に役立つグリッドシステム。
「960pxのグリッドシステムを使用する際に役立つサイト集」←にあるようなフレームワークがSketchではデフォルトで使えます。View > Grid Setting からグリッドの詳細を設定できます。（上記画像参考）

5, シェイプの角丸の調整が簡単

長方形のシェイプを書いた後でも角丸のRadiusを調整することがデフォルトで可能。更に長方形の四隅の丸をクリックすることで各四隅の角度を個別に変更することも可能です。（ワンクリックで一つの角だけ直角にすることも可能）

6, Illustratorのようなカンバス管理

Illustratorのそれと同じような機能であるアートボード「Artboard（アートボード）」があります。アートボードは複数管理でき、複製も可能です。アートボードにはいくつかのテンプレートがあり、それらを一つのArtboard内に複数置くこともできます。（A4, A5, A6, Landscape, アプリのアイコンサイズなど）

7, CSSへワンクリックで書き出せる

CSSで書き出したいレイヤーを右クリックし、[Copy CSS Attributes]をクリックすることでそのレイヤーを再現できるCSSのコードがコピーできます。これをそのまま使えば作業時間がかなり短縮されそうです。

8, 起動が速い

Adobe製品もそこまで遅くないですが、Sketchは起動も閉じるのも早いです。これは意外と嬉しいです。

以上です。
Goodpatchでは新しくておもしろいツールはどんどん試してみたいと思っているので今回Sketchをご紹介しました！
他にもSketchのいいところはたくさんあるのですが、次回以降MEMOPATCHで細かいところを紹介していこうと思います。Sketchには体験版もあるので、ぜひダウンロードして触ってみてください！

（参考: 19 reasons to leave Photoshop and start using Sketch）

Sketch 2.2.4（￥4,300）
カテゴリ: グラフィック&デザイン, 仕事効率化
販売元: Bohemian Coding – Bohemian Coding