ajike switch

【Sketch初心者必見!#08】Sketchで簡単指示書作成

sketch_08_01こんにちは!アシスタントディレクターの野村です。

前回はSketchデータから様々なものが簡単に書き出しできる方法をお教えいたしました。
(前回の記事はこちらから→【Sketch初心者必見!#07】Sketchは書き出しを簡単に

今回は、Sketchデータから簡単に指示書を作成できる方法をお教えいたします!
使うツールを今回は二つご紹介いたします。

sketch Measure

スクリーンショット 2015-10-07 14.21.01
以前もご紹介したプラグインツール「Sketch Measure」です。

このツールで生成されるのは以下の5つです。

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

すべての要素をワンクリックで生成されます!
これで、コーダーの方といちいち確認したりする時間が短縮されますね!

詳しい使い方はSketch Measureのサイトにて説明しております。

Zeplin

zeplin-logo
こちらはSketchで作成したアートボードをexportして使用するアプリケーションです。
Sketchアプリケーションはデザイナーだけ持っていれば良いので、社内の様々な職種の方々とデザインを共有する際に便利です。
無料で使えるアプリケーションです。
今、プラグインツールとして最も注目されているツールと言っても過言ではないでしょう。

使い方は、Sketchのアートボードでexportしたい部分を選択し、メニューバーの
Plugins > Zeplin > Export Selected Artboards…をクリックします。
スクリーンショット 2015-12-28 15.30.27

サイズを選んでimportします。
スクリーンショット 2015-12-28 15.31.21スクリーンショット 2015-12-28 15.31.28スクリーンショット 2015-12-28 15.31.34

importされたデータをダブルクリックで開きます。
スクリーンショット 2015-12-28 15.31.46

要素をマウスオーバーすると、サイズや色がわかります。
スクリーンショット 2015-12-28 15.32.52スクリーンショット 2015-12-28 15.32.58スクリーンショット 2015-12-28 15.33.15

commandキーを押しながら要素をクリックするとコメントも入れることができます。
何か表面上ではわからないことや分担作業をしている場合はとても便利ですね!
スクリーンショット 2015-12-28 15.37.30

いかがだったでしょうか?

たくさんの人の手によってつくられるコンテンツ、正しい情報が素早く伝達されることはとても難しいことです。
しかし、このように便利なツールを使うことで、難しかったことも簡単にクリアできてしまうこともあるのです。

これまで複雑なワークフローでコンテンツを作り上げていたのが、Sketchを用いることでワークフローが随分と簡略化することができました。
以前と同じ時間をデザイン、コーディングでかけても密度の濃い話し合いができるようになるのではないでしょうか?

これでSketchブログは最終回になります!
とても魅力あふれるツールですが、
まだまだ成長段階のSketch、これからの機能面の充実にも期待大です!

最後まで読んでくださり、ありがとうございました。

【関連記事】
【Sketch初心者必見!#01】Sketchで変わる?WEB制作のワークフロー
【Sketch初心者必見!#02】Sketchとは?
【Sketch初心者必見!#03】UIデザインならSketch!の理由
【Sketch初心者必見!#04】テンプレート活用で素早くUIデザイン
【Sketch初心者必見!#05】シンボル化でスピーディーに作成
【Sketch初心者必見!#06】Sketchでスマートな会議に
【Sketch初心者必見!#07】Sketchは書き出しを簡単に

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×