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の各機能の解説を日本語で網羅しています。

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

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

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

目次

タイトルをタップすると内容を確認できます。「03_Application Window」までをサンプルとして公開しています。

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

動画リスト

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

1. パスの描画
2. Transform Layer
3. Text on Path
4. プロポーショナルメトリクス （動画サンプル）
5. Make Grid
6. Artboard
7. Canvas
8. Grid
9. Ruler, Guideline
10. Layer Size
11. Opacity
12. Find Layer
13. Layer Rename
14. Join
15. Rotate Copies
16. Siccers
17. Zoom Back to Previous Canvas Position
18. Install the sketchtool
19. sketchtool

ご購入・サンプル

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

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

最終更新日：2018/7/12

• Sketch 51に合わせてアップデートしました。

Leanpub

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

Sketchの基本。を購入する

Gumroad

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

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

Sketchの基本。を購入する

ディスカウント

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

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

• これからSketchを勉強したい人に向けて Sketchはじめの一歩 | Hatsuka
• プログラマーだってSketchでUIデザインしたっていいじゃない - Qiita
• 「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」 参加してきました | デザイナーのイラストノート
• ウェブの UI デザイン・ビジュアルデザインの基礎を学ぶのに役立った本まとめ（2015年・冬） - 彼女からは、おいちゃんと呼ばれています
• Content-generator-sketch-plugin 0.1.4 の日本語対応 – p15.jp
• デザイナーとコーダーの連携に便利なSketch3機能紹介 | Webデザイン | 4kaku design
• グラフィックツール「Sketch 3」試用版をレビュー » mkb

ありがとうございます！

著者について

窪木博士

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

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

執筆

• Web制作者のためのIllustrator＆ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術（インプレス／共著）
• プロとして恥ずかしくない 新・WEBデザインの大原則（MdN／共著）
• WebDesigning 2014年8月号 Monthly Focus Sketch（マイナビ／共著）
• 現場でかならず使われている CSSデザインのメソッド（MdN／共著）

---

• 
• Tweet