Chapter 1 Sketchについて
初めて使う方のためにも、簡単にSketchの紹介をしておきましょう。
Sketchについて
「Sketch」は、オランダのアムステルダムをベースにしているBohemian Coding社が開発・販売するベクタードローイングツールです。2013年、Adobe社のFireworksの新規開発中止のニュースをうけて注目を集めたようですが、以前から他のドローイングツールに比べて比較的安価なこと、書き出しのオプションが豊富なこともあって、世界のWeb制作者・アプリ制作者の間で愛用されています。Sketchがどのような現場で活用されているかは、公式サイトに名だたる企業が並んでいることからもおわかりいただけるでしょう。
SketchにはPhotoshopのような高度なビットマップ画像編集機能こそありませんが、Webサイトやアプリケーションのインターフェイス制作においては、他のツールに負けないぐらいの機能を搭載しています。Sketchは動作も軽快で、複雑な操作を必要としません。ベクターベースの再利用可能な状態でテンプレートやアセットを管理し、またそれを簡単に使い回せるというのもSketchが選ばれる理由のひとつでしょう。
Sketchの公式サイトより
特に最近のWeb制作の現場では、多様なデバイス環境を想定したWebデザインが求められつつあり、これまで以上に制作時の負荷が増えているのではないでしょうか。これまではワイヤーフレームを作成し、PhotoshopやFireworksでデザインカンプを作成したあと、デザインされた画面をスライスしたり配置された個々のパーツとして書き出してコーディングするという作業の流れが一般的なものでした。しかし、デバイスが多様化している中、より最適化された画像をサイトに適用しようと考えれば、書き出す画像サイズが最大の1種類ではパフォーマンスの観点からもあまり理想的とはいえません。とはいえ、書き出す画像フォーマットやサイズが多岐にわたるようになると、デザイナーやコーディングをするエンジニアの負荷も増えてしまいます。
そんな中、CSSHatなどPhotoshopの拡張機能を開発・販売するsource社が、「Avocode」というPhotoshopを起動することなくパーツを取り出せるツールを開発中です。開発にあたってβテストの登録ユーザー向けにアンケートをおこなっています。Photoshopの利用者が多いのは言うまでもありませんが、実はSketchの利用者がIllustratorやFireworksよりも多いという結果が出ています。
https://medium.com/avocode-stories/e84699fd0321
Sketchには既にChapter 3で紹介している「Sketchtool」というツールがありますが、Avocodeは書き出し元のファイルの対象にSketchも入れているようですのでリリース後が楽しみです。そしてAvocodeだけではありません。静止画像を使って動くプロトタイプを作る「Framer」というツールも2014年5月に最新版がリリースされていますが、こちらもパーツを抜き出すジェレネータがSketchにも対応されるようです。Framerの実体はJSフレームワークですので、今でもパーツさえ書き出せば問題はありません（※Sketchには以前から「Sketch Framer」というプラグインがあり、現在最新版に対応した「Sketch Framer 3」も並行して開発中）。
それほどSketchは世界のWeb制作者、ツールの開発者の中でも見過ごせない存在となっているのです。
Avocode
Framer
Sketchの主な機能
Webサイトやアプリケーションのデザイン・UI制作時に必要な機能はひととおり搭載されています。
- ベクターベースの描画
- 複数ページの管理
- 無限のキャンバスとアートボード
- テキストスタイルの管理
- 共用スタイルの管理
- スクリプトによる拡張（プラグイン）
- オブジェクトのCSS書き出し
- 画面全体やパーツ毎の書き出し（複数サイズ・ファイル形式）
- Sketch Mirrorを使ったプレビュー
たとえば、複数のデバイス向けにWebサイトを作るとしましょう。
Sketchでは、Illustratorのようにサイズが異なる複数のアートボードを一枚のキャンバス上で扱えます。これは、複数のデバイスへの展開を想定したWebサイトの構成を考えたり、アプリケーションのワイヤーフレームやデザインカンプを作成するときに役立ちます。デザインカンプをもとにしてコーディングする時はパーツの書き出し作業が必要ですが、Sketchでは等倍サイズのPNGやJPGだけでなく、0.5倍、2倍、3倍の画像を同時に、かつさまざまなファイル形式で書き出せるので便利です。
Sketch 3の新機能
Sketch 3では、前バージョンからある機能をリファインするだけでなく、制作時に役立つ多くの新機能も追加されました。
- シンボル機能の追加
- 書き出し機能の強化
- 共通カラーの抽出
- 無限の塗り機能
- ノイズ処理の改善
- ビットマップ編集機能
- ベクターモードの改善
- テキストリストの追加
- グリッド機能の強化
- Sketch Mirrorとの連携強化
- プレゼンテーションモードの追加
- SVG/PDFサポートの改善
- デバイステンプレートの追加
ここにあげた以外にも随所に改善点がみられ、前バージョンよりは使いやすいものになっています。
Sketchにおける日本語の扱い
Sketchは、複数行の日本語の行間処理に若干問題があります（欧文書体では問題ないため、日本語書体限定）。これは、デザインカンプなどの作成時にあらかじめテキストスタイルを作ることで回避できる問題で、Web制作に限っていえば段落テキストとして処理する部分である以上、それはデメリットというほどのものではないでしょう。
Sketchのリソース
公式のブログをはじめとして、既にいくつかのリソースサイトが公開されています。
Dribbbleに投稿されているSketchの作例