ドリップン・スニップ | どりっぷんのブログ

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
スポンサーリンク

Sketchを使っているデザイナ・ディレクタの皆さま必見!Sketch Mausreの本当のチカラ

2017/07/24

Pocket

[この記事はWEBデザイナもしくはWEBプロデューサ向けの記事になります。]
[WEB制作に興味のある方は是非読んでいってください!]

ちょっとびっくりしすぎたので書きます。
皆さんSketchというアプリはご存知ですか?
Sketch-Measureという、結構有名で便利な拡張プラグインがあるのですが、そのプラグインにある「Spec-Export」という機能が激ヤバだったのでご紹介いたしたく駆け足にて馳せ参じまして候。

そもそもSketchとは

Sketchは、WEBデザイン用のMacアプリで、IllustratorやPhotoshopのwebに必要な部分だけを抽出したようなアプリです。
https://www.sketchapp.com/
ここから購入する事ができます。$99です。
このアプリ単体でも、webカンプ作りに必要な必要十分の機能が揃っていて、画像の編集はphotoshop、パスの描画はIllustratorで行い、配置や組み合わせ、切り出しはSketch、という分業でかなりシンプルに作業出来るとても優秀なアプリです。

しかし、このSketchにはさらにSketch Tools Boxという拡張機能をインストールするための専用アプリが存在し、それを使ってどんどん機能を拡張していくことが出来ます。
今回はその中でもSketch measureの記事なので、Sketch自体の使い方は割愛しますが、Sketchをまだお使いでないデザイナや非デザイナの方も、興味があれば一度使ってみてください。難しいことしないならこれで充分ですよ!

で、Sketch Measure

その数ある拡張機能の中でも、Sketch Measureというのはかなり有名です。
基本的にはその名の通り、sketchで配置した画像のサイズや距離を表示したり、切り出したカンプに表示させたりというプラグイン…だった筈でした。
しかし、この機能を見つけて、僕の中でSketch Measureは完全に別の、もっと神々しい何かに変貌を遂げたのです…。

Spec Exportという機能

Drip'n'Snipのカンプを大公開

%e3%83%86%e3%82%99%e3%82%b5%e3%82%99%e3%82%a4%e3%83%b3%e3%82%ab%e3%83%b3%e3%83%95%e3%82%9a_sketch

まず、これが普通にカンプを作ったSketchの画面です。
左側にページ、下側にアートボード等のカラムがあり、右側にはパーツごとの詳細や、スライスの作成画面があります。
sketch_measure_%e3%81%a8_plugins_%e3%81%a8_menubar

Sketch Measureをインストールしてあると、画像のようにpluginsからSketch Measureを選択でき、その中に色々なメニューがあります。
上の5つの機能を使うと、画像のサイズや距離、プロパティやノート(メモ)を付けることが出来、とても便利です。
ここまでは色々なサイトで紹介されていて、僕もその紹介を信じて使っていました。
しかし!Sketch Measureの機能はそれだけではなかったのです!

緑色の枠で囲ったSpec Exportをクリックすると、このようなメニューが登場します。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016_11_07_17_04
普通のスライスと何が違うんだ…?と思うことなかれ、エクスポート先にindex.htmlとassetsフォルダ、linksフォルダ、previewフォルダが作られました。
assets

半信半疑でこのindex.htmlを開くと、なんと信じられないことにこんな画面。
これ、ブラウザなんですよ?
spec_export_-_sketch_measure_2_2

そして、各要素をクリックすると、まずその要素のサイズや距離が画面上に表示されます。

何が嬉しいの?

もう、このファイル群をコーディング担当に渡せば、サイズもわかる、色コードもわかる、スライスも切り出されて並んでるし、アノテーションもNOTEにかけるし、その上このファイルをどこかにアップしておけば客先であれこれ言いながら観てもらえるのです。
神では?ではありませんか?

神です。

やっぱり!

                           

  関連記事

もうスケジュール管理にうんざり…そこで、Getplan.co!

ちょっと間が空いてしまいました、僕です。 皆さんは、自分が今月こなした作業や仕事 ...

Facebookでログインって?実際何が行われているか、あなたは知っていますか?

こんにちは、皆さんInstagramはどのくらい使われていますか? 僕は、まずア ...

Dueを使って習慣をコントロールしよう

こんにちは、最近少しずつ体を鍛えている僕です。 筋トレとかサプリメントとか、英語 ...

2台のパソコンを1つのパソコンのように扱えたらな〜?Macとwindowsを1組のマウスとキーボードで使えたらな〜〜!

こんにちは! Macが急速に普及して、「自分のはMacだけど、家のPCはWind ...

画像をまとめてリサイズ&リネーム!iMageToolsを使って写真管理を楽にしよう

夏は好きだが梅雨は嫌いな僕です。 こんにちは。 皆さんは写真の管理ってどうされて ...

-WEB開発, アプリ/サービス
-