Sketchの基本的な使い方を日本語で解説した電子書籍「Sketchの基本。」

「Sketchの基本。」は、新しいクリエイティブツールとして注目を集める、Sketchの基本的な使い方にフォーカスした電子書籍です。

Sketchとは

Sketchは、Bohemian B.V.が開発している、macOS（OS X）向けのベクタードローイングツールです。デスクトップやモバイルアプリケーションのユーザインターフェイス制作に特化したツールで、ウェブデザインやプレゼンテーションスライドの作成など、最終的なアウトプットがデジタルを想定した作りになっています。

さまざまな機能が詰まったAdobe PhotoshopやIllustratorと比較すると、UIデザインに特化している分、使える機能が少ないことは否めません。しかし、裏を返せば、本当に必要な機能は限られているとも考えることができます。幸い、足りない機能は、豊富なプラグインが補ってくれます。

Sketchを使う理由

最近ではAdobe Experience DesignやAffinity Designerなど、競合とされるツールも続々とリリースされています。

こうしたクリエイティブツールはビジュアルを「つくること」にフォーカスされやすいのですが、プロジェクトメンバーやクライアントとのコミュニケーションのやりとりをはじめ、デザイン後のオペレーションをどうするかなど、単にデザインを「つくる」部分だけで選ぶことができなくなっています。今後グラフィックを作成するクリエイティブツールの役割は、いわゆるカンプの作成だけではなく、効率のよいワークフローを実現できるツールを選択する必要がでてくるでしょう。

またこれらのツールに共通しているのは、より早く成果物を共有してフィードバックを受けながら、常に改善を繰り返してより完成度を高められるようなワークフローを想定しているということです。「考える時間」にフォーカスできるよう「デザイン」を手早くつくり、それをすぐに共有できるような機能が揃っており、旧来の「デザインをつくる」だけのワークフローを見直すタイミングが訪れているとも言えます。

もちろん、どのような状況でもSketchが使いやすいツールであるとは限りませんが、バランスよく機能が揃っており、プラグインによる拡張でさらに守備範囲を広げることも可能です。使わない・使えない理由をたくさん挙げることができると思いますが、それは触ってみてから判断しても遅くはありません。

そして、その学習コストの圧縮を、この電子書籍でお手伝いできればと考えています。

「Sketchの基本。」

この電子書籍では、アプリケーションウィンドウやインスペクタの解説から、パスやマスク・プラグインの扱い方まで、Sketchの各機能の解説を日本語で網羅しています。

256ページ

19Videos

レターサイズ換算で256ページ、動画付きパッケージであれば19本（合計約25分）の解説動画が含まれます。電子書籍の利点を活かし、Sketchのアップデートに合わせて書籍の内容もアップデートしています。ご購入いただければ、アップデート版は無償で受け取ることができます。

ただし、今のところ、機能の解説が中心で、アプリケーションUIのデザインや、ボタンをはじめとしたパーツ作成方法のチュートリアルは収録しておりません。

紙の書籍で基本的な使い方からチュートリアルまで幅広く学びたいという方は、吉竹遼氏の「UIデザイナーのための Sketch入門&実践ガイド（BNN新社）」がオススメです。
もっと俯瞰的な内容をお探しでしたら、こもりまさあき氏の「Sketch 3 Book for Beginner」があります（ただし長い間アップデートされていません）。こちらは概要からチュートリアルまで、Sketchをざっと一通り学ぶことができます。そして「Sketch 3 Book for Beginner」からステップアップするため、各機能の詳細が欲しいという場合に、この「Sketchの基本。」がお役に立てることでしょう :)

Introduction
- この書籍について
Sketchの基礎
- Sketchを使う上での基礎知識
- 基本操作
Preferences
- Generalタブ
- Canvasタブ
- Layersタブ
- Pluginsタブ
- Dataタブ
- Librariesタブ
- Presetsタブ
- Cloudタブ
Application Window
- ツールバー
- Touch Bar
- レイヤーリスト
- インスペクタ
- キャンバス
Canvas / Artboard
- キャンバス
- アートボード
- ルーラーとガイドライン
- グリッドとレイアウトグリッド
Pages / Layers
- レイヤーの重ね順
- レイヤーリストの見方
- レイヤーフィルタリング（検索）
- レイヤーの表示・ロックの制御
- レイヤーグループの開閉
- キャンバスで選択しているレイヤーをレイヤーリストで表示する
- ページ
Inspector
- 基本項目
- レイヤー特有のプロパティ
- Fills（塗り）
- Borders（線）
- Effects（効果）
Symbol / Shared Style
- シンボル（Symbol）
- ライブラリ（Libraries）
- 共有スタイル（Shared Style）・テキストスタイル（Text Style）
Data
- Dataの管理
- Dataを使う
Type（Text）
- 文字のインスペクタ
- テキストレイヤー内の文字との距離計測
- 文字の処理
- パスに沿った文字（Text on Path）
- 文字のアウトライン
- プロポーショナルメトリクス（文字詰め）
- リッチテキストをそのままペーストする
- インストールされていないフォントを置換する
Path
- オープンパスとクローズパス
- パスの描画
- アンカーポイントの追加と削除
- アンカーポイントの整列
- 角丸の適用
- パスをアウトライン化
- パスのオフセット
- パスを連結
- パスを分割
- ブーリアン演算（パスファインダー）
- 回転コピー（Rotate Copies）
Export（スライス / 書き出し）
- 書き出しの設定
- レイヤーやアートボードへの書き出し設定
- サイズとフォーマットの設定
- 書き出し
Mask
- マスクの作成
- マスク適用範囲のコントロール
- マスクモード
Alignment
- 整列
- Make Grid
Edit
- レイヤーの拡大縮小
- 回転
- 変形
- 選択しているレイヤーと同じ位置にペースト
- スタイルをコピー＆ペーストする
- デフォルトのスタイルを設定する
- CSSをコピーする
- グループ内のレイヤーを直接選択する
- Smart Guidesのスナップを一時的に無効とする
- テンプレート
- ビットマップレイヤー化
Bitmap
- 画像の差し替え（Replace）
- 画像をオリジナルサイズに戻す
- 画像のファイルサイズを削減
- 透明ピクセルをトリミング
- Fill replaced image（塗りつぶしに置換）
Plugins
- プラグインの見つけ方
- プラグイン管理
- プラグインマネージャ
- おすすめプラグイン
- プラグイン開発
Prototyping
- リンクの設定
- 画面遷移のアニメーションを設定する
- オブジェクトを固定する
- Prototypingをプレビューする
- リンクの線を隠す
- リンクを削除する
Sketch Mirror
- 使い方
Sketch Cloud
- アカウント作成
- ログイン
- ドキュメント共有
- Sketch Cloundのドキュメントの設定
- Prototypingの実行
- 共有したドキュメントの削除
SketchTool
- SketchToolを実行するには
- sketchtoolを使った書き出し方
- タスクランナーとの組み合わせ
Update
- Sketch 52
- Sketch 51
- Sketch 50
- Sketch 49
- Sketch 48
- 43より採用された新しいファイルフォーマットについて
- App Store版からのアップデート
履歴

動画リスト

「プロポーショナルメトリクス」はサンプルを公開しています。

パスの描画
Transform Layer
Text on Path
プロポーショナルメトリクス（動画サンプル）
Make Grid
Artboard
Canvas
Grid
Ruler, Guideline
Layer Size
Opacity
Find Layer
Layer Rename
Join
Rotate Copies
Siccers
Zoom Back to Previous Canvas Position
Install the sketchtool
sketchtool

ご購入・サンプル

Leanpub・Gumroadにて、電子書籍＋動画パッケージを$20.99、電子書籍のみを$13.99で販売中です。3章までのサンプルも、各ページにリンクがあります。

Sketchのアップデートに合わせて更新していますが、ご購入いただければお使いのSketchに合わせたバージョンの書籍もお渡しできます（ただし3.3以下は対応できません）。最新版以外が欲しい方は、Facebookページよりメッセージでお問い合わせください。

最終更新日：2019/3/10（Sketch 53対応版）

HiDPI化できていなかった画像を対応させました。
Path Joinの記述が間違っていたため修正しました。

Leanpub

リンク先で、購入するパッケージを選択してください。Leanpubでは、万が一、思っていた内容と異なった場合でも、45日間の返金保証制度があります。

Sketchの基本。を購入する

Gumroad

動画付きパッケージ（w/Extra）と電子書籍のみのパッケージのURLが分かれていますので、購入されるパッケージのページへお進みください。

Sketchの基本。w/Extraを購入する

Sketchの基本。を購入する

ディスカウント

まとまった冊数を購入される場合は、ディスカウントも可能です。詳しくはFacebookページよりメッセージでお問い合わせください。

本書をご紹介いただきました

ありがとうございます！

著者について

窪木博士

地方SIerのインハウスデザイナー。パッケージ・グラフィック（DTP）デザインを経て、現在はウェブやエンタープライズ系システムのUIデザインに従事。

業務では、設計からグラフィック・マークアップなどをこなし、個人的にセミナー主催や登壇なども行う。

Sketchの基本。