4kaku design

3年目Webデザイナーの勉強ノート

デザイナーとコーダーの連携に便利なSketch3機能紹介

Sketch3

趣味と実務でSketch3を使ってみて、コーダーさんとの連携をする際に色々と便利(もしくは必須)なテクニックを覚えました。
複数名で使う人にも、一人でデザインからコーディングまでやっちゃう人にもおすすめしたい機能をご紹介します。

ちなみに、以前書いたSketch3入門記事はこちら。


今回紹介する機能・ツール


Sketch3の習熟度が低めの人でもさくっと使えるものを選んでご紹介しています。(とはいえ、Photoshopのように小技を覚えてナンボという感じでもないな、というのが一ヶ月使ってみた率直な感想です)

伝わりやすいカンプを作る



デザインデータをコーダーさんに渡してコーディングしてもらうときに、あれこれやりとりが発生するのは要素のサイズや距離についてだと思います。それをさくっと解決できるのが、プラグインSketch Measureです。

デザインカンプの中に、オブジェクトのサイズや距離、マージン、パディングの情報をカンタンに入れることができます。オブジェクトとして生成されるので、あとからテキストツールで数字を変えたりラベルの色を変えたりすることも。Sketch Measureで生成できるのは以下の5種類。

  • Sizes(要素の大きさ)
  • Margin or Padding
  • Distances(複数の要素の距離)
  • Properties(オブジェクトのスタイルやシャドウ、テキストのスタイルなど)
  • Coordinates(アートボード内の座標)


画像の書き出し機能

Sketch3の画像書き出しは大きく分けて以下の3つです。用途別に使い分けることができます。

  • 選択範囲から書き出す
  • オブジェクトを個別に書き出す
  • 複数のアートボードをPDFで書き出す

選択範囲から書き出す



背景色や背景画像を含めて画像を書き出したいときは、左上の「Insert」からスライスツールを選択し、切り出したいオブジェクトをクリックします。写真にテキストやイラストを重ねたバナーを書き出す場合等に活躍します。

オブジェクトを個別に書き出す



透過PNGを書き出すときに大活躍するのがウインドウ右下の「Make Exportable」ボタンです。書き出したいオブジェクトを選択してから右下の+マークをクリックすると、書き出し設定が作れます。デフォルトは1倍(等倍)ですが、2倍や3倍、0.5倍で書きだすこともできるのでRetina対応にもぴったりです。

複数のアートボードをPDFで書き出す



複数のアートボードがある場合、File>Export Artboards to PDF から一括でPDFに書き出します。Webデザインをお客さんにまとめて見せる際にも役立ちますが、SketchだけでPDFのスライドを作ることもできます。

オブジェクトのCSS書き出し

CSSを出力したいオブジェクトを選択し、Edit>Copy CSS Attributes を選択します。これでクリップボードにCSSがコピーされているので、テキストエディターにペーストすれば完成です。Fireworksのように、コピー前に確認できないのが少し残念。



iPhoneでカンプをチェック



Sketch3の専用iOSアプリ「Sketch Mirror」でスピーディーにiPhoneでカンプが確認できます。

まず、Sketch3が入っているMacとSketch Mirrorが入っているiPhoneを同じWi-Fiネットワークに接続します。Mac、iPhoneの両方でアプリケーションを立ち上げると、MacのSketch3の右上にあるスマートフォンのアイコンが「Mirror」から「Connect」に変わります。ここでConnectをクリックすると、iPhone上でMacで作ったアートボードを見ることができます。画像にアクションを割り当ててページ遷移のできるプロトタイプを作るのは、現状できないようです。

Sketch3を使い始めて1ヶ月のビギナーが、今すぐ役立つTipsをご紹介してみました。なにせ日本語のリソースが少ないので、お役に立てれば幸いです。これからSketch3を勉強したい方には、「Sketch 3 Book for Beginner」「Sketchの基本。」を全力でおすすめします。

2016/04/05追記 Sketchを動画で学べるコンテンツを公開しました!


オンライン動画教育サービス「Udemy(ユーデミー)」にて、Sketch 3 入門講座(有料です)を公開しました。詳しい内容は「2016/03/28 Sketch 3 を動画で学べるコンテンツを公開しました」をご覧ください。