notes

Sketch.app BootCamp for web 2016

新規案件でSketch.appを採用。担当デザイナーが習熟の時間取れないため、簡単にレクチャーしたときのメモ。ウェブサイト制作を念頭に置いた使い方を想定。
（2017.8.9追記）

ざっくり特徴

Sketch.app ＝イケてるPowerPoint／Keynote

Illustrator → ドローイング・作図
Photoshop → 画像加工
InDesign → レイアウト・割付
Sketch → CSSベースのデザイン・レイアウト

よいところ：

基本、CSSでできることしかできない
軽い
効率化しやすいのでデザイン検討に集中できる
ウェブ・アプリ前提なので、最適化されている
アップデートが頻繁でどんどん進化している
安くて買い切り

悪いところ：

基本、CSSでできることしかできない
Mac版しかない
ウェブ・アプリ（オンスクリーン）にしか使えない
アップデートが頻繁で下位互換性がない

個人的に好きなところ：

とにかく軽くて、無駄な作業は機械がやってくれるところ。ずっとInDesignから離れて不満だったところを補ってくれている。あくまでも「デザインツール」であり、レイアウトソフト。ビジュアル作成はIllustratorやPhotoshopで。

CSSベースの設計思想：

CSSコードがいつでも抜き出せる。
基本的には、CSSでできないことはSketchでもできないので、変なこともできない

できることが狭いぶん、ツール由来の余計な手間がない（ピクセル座標ぶれなど）
実装を考えながらのデザインがしやすい
試行錯誤した結果をすぐCSSサンプルコードとして渡せる

効率化しやすい機能：

Symbolがとにかく強力（override & ネスト & 一元管理に対応！）

豊富なグリッド機能
優秀なスマートガイド
柔軟なアートボード
画像書き出しもらくちん

軽い（いざというとき響いてくる）：

軽い
トライ&エラーがさくさくできる → デザインツールとして一番重要
ファイルサイズ軽い

エコシステム：

プラグインが超豊富。
Adobeと違い、プラグインありきなので、拡張性が高い

足りないものは足す。
アプリ寄りにしたり、ウェブ寄りにしたり、お好み仕様に機能追加

→オペレーションではなく、デザイン検討に時間が割ける

ハンズオンで操作感をつかむ

基本操作編：

まずAdobeとの違いに慣れる。機能は単純なので、すぐ慣れる。

初級：

R で矩形（esc で解除）
T でテキスト（esc で解除）
A でアートボード（esc で解除）
⌘+1 で全体を俯瞰
⌘+2 で実寸表示
⌘+3 で選択オブジェクトを中心に表示位置フォーカス
Option + hover でスマートガイド
Option + ドラッグで移動コピー
⌘ + D でそのまま連続複製
⌘+Click で階層無視して直接触れる（クリックスル―は個人的には避けてる）
右クリック > Pick Layer もできる（Photoshopの右クリック的な挙動）
レイヤーグループを Option + Click で一気に開閉
書き出しはオブジェクトやグループに Make Exportable／アートボード／スライスオブジェクト
⌘ + . でパレット非表示／表示（Adobeの ⌘ + Tab ）
オブジェクトの表示／非表示やロックはレイヤーパレット or 右クリックから
Auto がポイントテキスト、Fixed がボックステキストで随時切り替えできる

中級：

数値フィールドには四則演算や各種単位・%などが入れられる
右クリック > CSS Attributes でCSSコピー。
Radius に / 区切りで角ごとの角丸指定できる
Fills などは複数重ねられるので作りこみも
Fills の Pattarn fills で画像ドラッグかペースト、choose image で画像をはりこめる（埋め込み）
アートボードには Background Color と Include in Export の設定がある
選択オブジェクトにアートボードをフィットする機能もある
アートボード名部分を hover でハイライト、Click で選択
フォントのOTF機能などは、 View > show fonts > option から。
Make Exportable で SVG 設定しておくと、Adobe XD に直接ドラッグできる
オブジェクト名を / 区切りで命名すると、Export したときにフォルダにネストして書き出される
オブジェクトをFinderにD&Dすると設定通りに書き出し。FinderからD&Dで埋め込み

おまけ：

1px の線は Rectangle で作ったほうがシンプルかも（座標に端数でない）
テキストのカーニングは、Adobeと同じものを OS X システム環境設定から指定している（http://d.pr/i/163Q8）
SPサイト、アプリは、CSSピクセルの320px幅等でつくればOK。2倍、3倍で書き出せばいい。

※ Gaussian Blur 等はアプリならOK。ウェブでは要注意
※ Sketchでは画像加工はあまりできない。簡易色調整と、色域選択、塗りつぶし、クロップが可能。Photoshopと併用前提。

ベースづくり：

レイアウトグリッドをつくれる。優秀。
Control + L で表示／非表示

Symbolまわり：

shared style は段落スタイルのようなもの。書式を一元管理できる

Symbolは最高。画像やテキストフィールドを個別に上書きしつつ、一括編集もできる。
＞ Sketch Workflow — Atomic Symbols — Design + Sketch App — Medium
＞ Fun with symbols in Sketch 3.7 — Medium
→矩形作ってなんぼ。モジュールを示す透明な矩形をつくり、DOMに近いかたちで Group or Symbol としてまとめておくと、デザインファウンデーション的にレイアウトモジュールを管理・運用しやすい。
※オブジェクト名の整理は必要。書き出しファイル名にもなる。

ページでデザインを管理：

page 機能あり。使い方は試行錯誤中…

カテゴリごとにドキュメントを作り、ページでコンテンツを分ける？
作業ページ、画面の並ぶページ、遷移図のページ、モジュール管理のページで分ける　など

※ページを増やすと、とたんにファイルの開閉動作が重くなる。
※3.7以上では、Symbolページが自動生成。一括管理できる。

拡張ツールでデザインに集中

プラグイン：

指示書き用： ★
sketch-measure

整列： ★
Handy-Tools

プロトタイピングが早くなるユーティリティ： ★
craft（これは本当に強力）
Content-generator
Unsplash-It-Sketch

Sketchのランチャー：
sketchrunner

共通スタイルのオブジェクトを選択： ★
sketch-select-similar-layers

実装の数値取り用のHTMLパッケージを書き出してくれる： ★
marketch

テキストの検索置換：★
Sketch-Find-And-Replace

PSDなど外部ビットマップファイルをリンク配置できる： ★
Place-Linked-Bitmap

カラーパレットを外部保存、読み込み：
sketch-palettes

リキッドレイアウトやFlexboxを可能に：
anima.app

WCAG 2.0 基準のカラーコントラスト比や視覚障害をプレビュー：
Color-Contrast-Analyser

Stark ★

いい感じのコピペ： ★
Sketch-Better-Paste

画面ハメコミ加工：
magicmirror

クリップボード上の画像をRectangleにFill：
Clipboard-Fill

複数アートボードを一括で単一PDFファイル化。： ★
sketch-artboards-to-pdf

SVGファイルを最適化：
SVGO Compressor

レイヤーの高度なリネーム： ★
Rename It

未使用Symbolの削除（公式）：
Remove Unused Symbols

フォント検索： ★
Font Finder Sketch Plugin

オブジェクトのランダム複製：
Confetti

アートボードをGoogleSlideにアップロード：
sync-to-slides

pageやSymbolなどの名前をリストアップ：
Table-of-Contents

カレンダーの雛形を生成：
7 Columns Calendar

疑似border：
Single Border

Rectangleを分割、カラムづくりに：
Sketch Split Shape

Symbolを整頓して見やすく： ★
Symbol Organizer