Cntlog > 開発 > ツール > 2017年のSketchの進化を振り返る

2017年のSketchの進化を振り返る

本記事はSketch Advent Calendar 2017の11日目の記事です。

去年からSketchに恋をしてデザインツールはSketch一択でずっと使っています。
一部の人には親をadobeに殺されたんじゃないかとか言われていますが、そんなことはなくただただSketchが好きなだけです。

Sketchが好きな理由は以前記事にまとめていますので、Sketchって何が良いの?って知りたい方はこちらをご覧ください。

現役WebデザイナーがデザインツールをSketch一択にした理由

今年もSketchは色々と僕らが望むUpdateをしてくれました。
それはSketch本体だけではなく、別のサービス・プラグインが公開されて機能実装されたものあります。

Sketchの魅力がプラグインが誰でも作れる(販売できる)点と、外部サービスの連携にあります。

本記事では、2017年のSketchの魅力的な更新やお気に入りのプラグインを紹介したいと思います。

アプリ用の切り出しが楽になったVersion42

切り出すサイズをプリセットとして登録することが出来るようになりました。
選択したプリセットで自動で@2xや@3xで書き出せます。

これまではプラグインに頼って切り出しサイズを設定していましたが、公式でサポートしてくれて使いやすくなりました。

下位互換を捨てたVersion43

Sketchのファイル形式がJSON形式に変わりました。
ちょっと記憶が曖昧で申し訳ないのですが、43のVersionで保存したものは、42以下のVersionで開けないとかでTLが盛り上がっていた記憶があります。

Sketchのライセンスは1回買えば、1年はアップデートの恩恵を受けれるはずなので、そんな話題が起こるのかが不思議です。

なぜバージョンアップできない理由としては、一度ライセンスを購入してその一年後ライセンスを更新していないか、宗教上の理由(プラグインの依存)が思いつきます。

使ってるツールで利益を生み出しているプロがライセンスを更新できないというのは考えにくいので、きっとプラグインに依存していたんでしょうね。

実際このバージョンでは、使えなくなったプラグインも幾つかありました。
正直アップデートをしないプラグインの線引ができたので、当時はちょっと困りましたが今ではよかったと思っています。

画面サイズに依存しないシンボルが作れるVersion44

シンボルのオブジェクトの中で、大きさ、位置が変わるのかを設定出来るようになりました。
これまで、シンボルの個々が使いにくいと思ってるところが解消されて、当時は凄く感動しました。

今のデザインはデバイスのサイズに依存しないデザインが当たり前ですので、ツール側もそれに適した形に進化できたと感じました。

もちろん、ツールだけで無くそれを使うデザイナーもデバイスに依存しないデザインを作ることが求められていますので、ツールの進化に伴い一緒にツールを使う側の意識も変えることができる進歩だと思います。

フォントの差し替え方法

他にもフォントがない時の差し替え方法とか変わりました。

ちょっと昔のやり方を覚えていないのですが、不足しているフォントがあればSketchのツールバーの右上に、ラベルが表示されてそこで不足しているフォントを確認できるようになりました。
※私はぼっちデザイナなのでSketchの受け渡しをする機会がなく、あまりフォントがないといったシーンに出会うことはなかったです。

プラグインのアップデートを簡単に行えるようになったVersion45

プラグインはこれまで、「Sketch Toolbox」を使っていた人も多いかと思いますが、先程紹介した不足フォントの通知方法と同様に、Sketch本体側でバージョンの管理ができるようになりました。

バージョンだけでなく、プラグインの停止やアンインストールなどもこのパネルからできるようになっています。

Sketch Cloudプライベート共有が可能になった、Version46

Sketch Cloudというサービスがあるのですが、今回のでアップデートでメールアドレスを入力するだけで、共有ができるようになったようです。(すみません、わたしぼっちなのでこの機能全然つかって無くて、どのくらいの衝撃があるのか分かっていないです)

Symbolを共用することができる Version47

個人的には1番嬉しいアップデートなのがこの47のアップデートである、「Libraries」機能です。

このアップデートによって、Symbolを別のSketchファイルで共有することが可能になり共同作業がよりしやすくなりました。
これに伴い、gitによるバージョン管理もやりやすくなってきましたので、非常に大きな進歩だと思っています。

Sketchを使うデザイナーは「デザイン」ではなく「デザインシステム」を作ることを求められる人が多いと思っています。

まさにSketchが時代に合わせた進歩を遂げたバージョンアップがこの47です。

デザインシステムを作ることで、プロダクトのデザインは統一され、誰が作っても一定基準のクオリティを維持したデザインにできます。
「誰」というのは、AIも含みます。
言ってしまえば、コミュニケーションのためのツールに進化しました。

Webサイト(アプリも)は「作って終わりじゃない」と言われて長い年月が経っていますが、作り続けるためのデザインがデザインシステムだと私は感じています。

今私は「デザイン」をするためのツールではなく、使い続けれる「デザイン」を作れるツールを求めてるのでまさにぴったりでした。

2017年にお世話になったプラグイン

簡単にですが、Sketchの機能以外でもお世話になっているプラグインがあるので、いくつか紹介します。
みんなが使ってるCraftなどは省略しているので、初めて見て「ええやん、このプラグイン!」と思ってもらえるものがあれば嬉しいです。

Abstract

Sketchをgitで管理出来るのはご存知かと思います。
しかし、ブランチを切ってマージしてなどはなかなかハードルが高いものでした。

Abstractを使えば、そのあたりのできないを解決してくれます。

詳しくは下記記事が参考になるかと思います。
【Sketch】デザインをgit管理する!Abstract

デザインをgitで管理?と思う方もいるでしょうが、あの時のデザインに戻してほしいなどと言った要望やこれまでの履歴が見えるので初めてみるとなかなか便利です。
(※一人でデザインをやっていても価値はあると思っています)

近年プログラマだけでなく、デザイナーもリモートワークを求められるシーンが増えていますので、こういった遠距離かつ複数人でデザインを構築できる需要は高まっています。

Sketchにかぎらず自分の仕事の幅を広げる意味でも覚えておくべきスキルと私は感じています。

Copy Text Only

Sketchの中にあるテキストデータをコピーするものです。
こいつの凄いのは座標に合わせてコピーするテキストの順番を維持してコピーするので、ペーストした時にデザイン通りの順番でペーストできますのでコーディングの効率化に繋がります。

公式サイト

Mirr.io

invitionを使うまでもないような、小さな画面遷移のときの確認に使ってます。
「Publish to Web」をするとWeb上で確認できるので、エンジニアやクライアントのに対してSlackなどで遅れて便利に使える最小のプロトタイプです。

公式サイト

Protoship

このプラグインではHTML→Sketchにすることができます。
使い所としては、既存のページを修正してほしいと依頼があった時や、修正の提案のときにそのページをSketchに取り込む形で使えます。
普段ならキャプチャを撮ったあとにデザインツールに入れ込むところでしょうけど、レイヤーの階層構造を維持したまま取り込んでくれるので、Protoshipを使うことでそういった作業が簡単になります。

詳しいツールの使い方はすぴかあやかさんが記事にしているのでこちらを参照ください。
WebページをSketchファイルにするプラグイン「Protoship Teleport」が便利すぎる

ImageOptim

Sketchからエクスポートされた画像をImageOptimを通じて自動的に圧縮してくれます。

公式サイト

Symbol Organizer

Symbolを整理できるプラグインです。
私は画面を作り始めるときには流用すると分かったら取り合えず、シンボル化してしまうのであとでSymbolPageがめちゃくちゃになっています。

このツールを使えば名前毎に並び替えが出来るので、後で整理するのが凄く楽になります。

詳しいツールの使い方はSketchおじさんこと、くっきーさんが記事にしているのでこちらを参照ください。

シンボルを整頓できるSymbol Organizerプラグイン – Sketch Plugin Advent Calendar 2016

最後に

Sketchのバージョンアップを振り返ると、ものすごい進化があったなと感じます。

来年はHTMLの書き出しや、アニメーションあたりの進化を個人的には期待しています(今でも別のアプリを使えばできますが)。

もし宗教的な理由がなければ、Webデザイナーの皆さんはSketchを一度試して見てください。
XDにはなかった感動があるはずです。
もし身の回りに使ってる人がいないようでしたら、あなたがそこのSketchのナンバー1になってください。
Sketchは色々な現場で使われています。

特別なツールじゃありません。

なお、Sketch Advent Calendar 2017はまだまだ空きがありますので、Sketchユーザーさんは今からでも遅くありません。参加してみませんか?

Sketch Advent Calendar 2017

Sketchはいいぞ!!

Sketchを愛するデザイナーとして以上で締めくくらせてもらいます(ゝω・)

関連記事

無料で使えて確認環境に使いやすいサーバー netlify... 最近アプリを公開したのですが、そのページをnetlifyで構築しました。 以前友人に進められて、便利やんって思ったので紹介します。 netlify netlifyとは? netlifyとは静的コンテンツをベースにしたWebサイトのホスティングに特化したサービスです。 「Hexo...
PTA広報の引き継ぎ問題を解決させるツール... 先日、PTA広報になったらAdobeは使うな」という助言という記事(モーメント)を見て、 「あっ、これはあいつの出番や」と思ったので誰でも、簡単かつ無料から使えるツールをご紹介します。 課題解決のためのツール 問題となっているのが、デザイン系のママさんがAdobeのソフトを使う...
デザイナーだけじゃもったいない。Sketchを使う本当のメリット... この記事はSketch Advent Calendar 2016向けに書いた記事です。 Sketchはデザインツールとして一般的に広まっていますが実はデザイナーよりも他の職種の人もSketchを導入する事でその恩恵を受ける事ができます。 Sketchを使ってデザイナー以外の職種の人がどん...
手の平サイズのミニプロジェクターが超絶便利でプレゼン環境が捗った... 先日プロジェクターを買いました。 EZAPOR HDP200 ミニプロジェクター Miracastワイヤレス接続 HD解像度1080×1920 Pico DLPリモコン付き ブラック プロジェクタというと結構大きなものをイメージすると思いますが、私が購入したのは手の平サイズの大きさで十数人...
日本語でわかるSketchの使い方と機能 実際私も英語は苦手ですが、Sketchは全然使えています。 ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。 メニュー  メニュー項目の紹介です。 ショートカットキーメモ ⌘…Command...
WinSCPで特定フォルダをアップロードから除外した... 普段WinScpの同期の機能を使ってアップロードしているのですがGitを使っているとそのファイルも対象になってしまうのでうざいなと感じてました。 設定画面で簡単にできたのでメモです。 上記画像の除外のところにといれれば.gitっと記載されているフォルダはアップロードの対象外となります...