Share on FacebookTweet about this on TwitterShare on Google+

この記事はSketch Advent Calendar 2017の13日目の記事として記載します。
11月の28日にD2Draftという分野を横断した勉強会のグループのひとつとして関西のSketch Userのミートアップを開催しました。
レポート記事はこちらです。

その時になぜSkecthなのか?という自分なりの理由を概要と合わせてプレゼンしましたので、その時スライドの合わせてしゃべった内容を振り返る意味でもまとめてみたいと思います。

ちまたによくある機能比較の記事

グラフィックを作成するソフトウェアの比較をレポートする記事をいろいろと見かけます。それらの記事は、こちらはグループ化がどう、書き出し機能がどうだ!というようなツールとしての比較をしています。
もちろんそれらの記事は正しく、それぞれのソフトウェアの習得をする上での圧倒的な参考になります。
グラフィックソフトからウェブへのアセット作成に対応してきた既存のソフトウェアだけでなく最初からUIデザインを念頭においたアプリケーションもいろいろ出てきました。
もちろんSkecthもバグフィックスだけでなく、コアでいろいろな画期的な機能追加がされてきました。

開発マインドが違う

もともとそのオープンな開発マインドを感じて個人的に採用していたSketchでした。
https://www.sketchapp.com/tool/
スケッチツールのようなコマンドラインからデータにアクセスできるインターフェイスを用意したりプラグインの開発がJavascriptでできるAPIが用意されていたりと、このツールを中心とするエコシステムを作ろうとする考え方を実践してきました。
この思想を体現した画期的なバージョンアップがver43で行われました。
Sketchが作るファイル.skecthデータがヒューマンリーダブル(可読可能な)なJSON形式に変わったのです。

JSONでデータを変更してみる

ためしにver43以降の.sketchデータを拡張子を.zipに変更して展開してみましょう。

円と矩形だけの簡単なファイルを作ってみます。


このjsontest.sketchの拡張を変えて圧縮を展開してみます。ファイル名をjsontest.zipに変更して圧縮展開してみると、以下のようなファイル構成でデータが形成されています。

document.json
にドキュメントの構成が記述されています。

jsonをエディタで開いても横に長く見ずらいので


Sublime TextSublimePrettyJsonをインストールします。

document.jsonを開いて

Linux/Windows:ctrl+alt+j
Mac:cmd+ctrl+j

を実行するとjsonがツリーで見やすくなります。

pageを1つだけ作っています。
“pages”:[]の中を見ると
“_ref”:”pages/B5314695-6D90-4023-8C36-B13CBFC8DE30″
というIDがついてますので、pagesのフォルダのB5314695-6D90-4023-8C36-B13CBFC8DE30.jsonを開きます。

ここに描画したグラフィックの内容が記述されています。

なんとなくrectがあり

“x”: 447,
“y”: 223

の位置に配置されているというように、グラフィックと見比べれば何を記述されてるかが理解できます。

試しに内容を変更してみます。

赤い矩形の塗りの色を記述してある部分が以下の部分です。

“fills”: [
{
“_class”: “fill”,
“isEnabled”: true,
“color”: {
“_class”: “color”,
“alpha”: 1,
“blue”: 0.1066960170865059,
“green”: 0.007513228338211775,
“red”: 0.816203773021698
},
“fillType”: 0,
“noiseIndex”: 0,
“noiseIntensity”: 0,
“patternFillType”: 0,
“patternTileScale”: 1
}
],

この”alpha”: 1,→”alpha”: 0.5,

に変更して保存します。
展開したJSONを最小化するので

Linux/Windows:ctrl+alt+p
Mac:cmd+ctrl+p

でMinifyを実行します。

再度JSONは最小化されます。

この変更したファイルをzip圧縮して拡張子をsketchに変更します。フォルダを含めないでください。

ディレクトリーの中で

zip -r -X “jsontest2.sketch” *

を実行してjsontestフォルダの中のファイルをすべて含んで圧縮します。jsontest2.sketchを開いてみます。

opacityが50%になっています。

アプリは単なるゲートウェイ

つまり.sketchデータはSketchのアプリでなくても作る事ができるということになります。

Sketchのアプリケーションはツールとしてでなく共有するデザインデータのプラットフォームとしてエコシステムにコミットさせるためのゲートウェイのメインツールであるというだけです。

これはSlackにも通ずると思いますが、効率的なワークフローを単独で開発して提供する時代ではない、いかに他のサービスやフォーマットとのハブを供給するか?という考え方であると言えます。

柔軟なPluginの開発環境を提供することはSketch拡張への参加を即し、事実日々数多くの拡張が追加されていっています。

またオープンなデータフォーマットはプロトタイピングサービスやコラボレーションサービスとの連携を用意にしベースのフォーマットとして数多く採用されています。

もちろん、そこから副次的にワークフローや工程管理への組込が加速します。Abstractなどのように、新しいフォーマットの特性を生かし、CommitやBranchが可能なツールなど様々な試みが行われています。

個人で情報網羅するのはほぼ不可能

このような状況からSketchデータを利用したデザインワークフローに関わる環境は加速度的に拡充されていきます。

Meetupを開催した理由はそこにあります。プラグインや連携ツールは使った人のレビューが一番役に立ちます。
2018年は是非コミュニティーを随時開催してSketchを使っているユーザーと情報交換ができればと考えています。