notes

Sketch.app BootCamp for web 2016

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


ざっくり特徴

Sketch.app = イケてるPowerPoint/Keynote

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

よいところ:

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

悪いところ:

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

個人的に好きなところ:

とにかく軽くて、無駄な作業は機械がやってくれるところ。
ずっとInDesignから離れて不満だったところを補ってくれている。
あくまでも「デザインツール」であること。


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/アートボード/スライスオブジェクト
  • ⌘ + . でパレット非表示/表示
  • オブジェクトの表示/非表示やロックはレイヤーパレット 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 したときにフォルダにネストして書き出される

おまけ:

  • 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に近いかたちでグループ or Symbol としてまとめておくと、デザインファウンデーション的にレイアウトモジュールを管理・運用しやすい。
※オブジェクト名の整理は必要。書き出しファイル名にもなる。


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

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

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

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


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

プラグイン:

指示書き用: ★
sketch-measure

整列: ★
Handy-Tools
SketchDistributor

プロトタイピングが早くなるユーティリティ: ★
craft
Content-generator
Unsplash-It-Sketch

Sketchのランチャー:
sketchrunner

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

実装の数値取り用のHTMLデモを書き出してくれる: ★
marketch

検索置換:
Sketch-Find-And-Replace

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

ダイナミックに可変する要素を生成: ★
sketch-adjust-button-shape
compo-sketch

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

リキッドレイアウトを可能に:
Sketch-Constraints

WCAG 2.0 基準のカラーコントラスト比を測定:
Color-Contrast-Analyser

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

画面ハメコミ加工:
magicmirror

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

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

関連アプリ:

プラグイン管理アプリ: ★
sketchtoolbox

Sketch上での矢印キーのピッチをさくっと変更できるアプリ:
nudg.it

アイコン、アイコンフォントの管理ツール: ★
iconjar

ほかいろいろな画像アセットを管理できるライブラリツール:
lingoapp

一覧ページへ