「Sketch Measure」はロマンスの神様だった！

cloudpackは、AWSの導入設計や運用サービスで知られていますが、コーポレートサイトやWebサービスなどのサイト制作をはじめ、大規模ECサイト、オンライン予約サイト、ソーシャルゲームサイト、広告キャンペーン / プロモーションサイト、社内システムなどなど、実はデザイン制作からシステム開発まで幅広く対応しているって、案外知られていないんですよね。

2003年にシステム開発会社として創業して、その後、クラウド事業『cloudpack』が立ち上がり、2016年8月にはスマートフォンアプリ開発に特化したチームも立ち上がったので、幅広く『開発』に携われるような成長をしています。

スマホアプリ開発での悩み

チーム発足と同時にスマホアプリの開発案件があったので、大変良いスタートを切ることができましたが、そのプロセスはモヤモヤの連続でした。

何をモヤモヤしていたのか？

デザインチームと開発チームで効率良く作業を進められるツールを探していたものの、どれを試しても決め手に欠けるというか、最適解に辿り着いていないという感覚がありました。これがモヤモヤの原因です。

スマホアプリ開発では、デザインの実装をするのがエンジニアだったりするため、デザイナーからすれば「意図したデザインがアプリ上で正しく表現されているか？」が気になりますし、エンジニアからすれば「システムを作るのに、あまりに細かなデザイナーのこだわりは計りかねるし、対応しきれない」などの思いがあります。デザインとエンジニアの意思疎通にかかるコストが非常に高いと感じていました。

モヤモヤを解決するために歩み寄ったのが、デザインをエンジニアに共有するための便利なツールの存在でした。

そして最終的に候補に上がったのが、ZeplinとSketchのプラグインであるSketch Measureの2つのツールだったのです。

Zeplin or Sketch Measure？

Sketchを使ってデザインすることが先に決まったので、「Sketch + Zeplin」もしくは「Sketch + Sketch Measure」の組み合わせで、どちらがエンジニアにとって使いこなしやすいか？が焦点になりました。

まずは、それぞれの機能を洗い出してみました。

比較してみると一目瞭然ですね。

スマホアプリ開発チームメンバーも、全員一致で「Zeplinを使おう！」という方向性に固まり、このときはモヤモヤが解消したと思ったものです。

しかし、大きな落とし穴があったんです。

cloudpackは、さまざまな第三者認証（ISMSとかPCI DSSとかSOC2とか）を積極的に取得していることもあって、セキュリティは特に力を入れています。社内インフラのセキュリティ対策はもちろん、開発に使用するツールは、cloudpackのセキュリティ基準に満たないと利用してはならぬ！という方針があります。

Zeplinは、Webサイトでログインして利用するツールであることが基準に引っかかったのです。Zeplinは自社のADサーバーからシングルサインオン（SSO）ができなかった！ これが原因で諦めるしかありませんでした。（将来にZeplinがSSOに対応したら再考するかも）

そして、Sketch Measureに一気に傾いたのです！

素晴らしき『Sketch Measure』

Sketch Measureは、ひと言で、デザイナーとエンジニアを繋ぐ、スマホアプリ開発プラグインといったところでしょうか。

SketchはAdobe PhotoshopやIllustratorなどと同じデザインツールの位置付けになります。Sketch MeasureはSketchのプラグインで、デザインした各種パーツの位置やサイズをマウスオーバーで、クリックしたオブジェクトの色やサイズなどを知らせる『指示書』になってくれるツールです。

当初、デザインツールをSketchに変更することが「負荷になるのではないか？」と考えたのですが、杞憂に終わりました。

これまでは、1つの画像からサイズが違うものを書き出す際に、必要サイズ分の書き出し作業を行っていました。しかし、Sketchを使えば、なんと1発で書き出せるのです。

万が一、メインのデザイナーが交代しても、指示書自体は変わらないので、エンジニア的にも作業への影響が少ないことも、とてもメリットに感じました。

例えば、Photoshopなどのツールでデザインする場合、基本はファイル単位で管理することになります。

しかし、Sketch Measureなら、プロジェクト単位で管理できるため、デザイナーが途中で交代しても（部分的にデザインが変わる可能性はありますが）、デザインの指示書という観点ではまったく問題がないのです。

ロマンスの神様『Sketch Measure』が現場に幸福をもたらす

スマホアプリ開発の現場で、デザイナーとエンジニアが決してイガミあっているわけではありません。それぞれが持っているタスクの特性上、お互いの作業内容を正確に理解している人が少ない気がします。

仮にデザインに修正が入った場合、Webサイトであれば自分でサササッと直してしまうことが多いのですが、スマホアプリの場合はサササッとまでは修正できなかったりします。デザイナーとしては、自分が意図したデザインでちゃんと作ってもらえるか不安になりがちです。

Sketchを使ってデザインをしたらパーツの位置やサイズ、色などを指示書に落とし込むことなく、デザインの仕様をマウスオーバーやクリックするだけで、エンジニアに情報を提供してくれます。エンジニアもSketchから書き出したデータを利用することで、大した負荷にならずに開発を進めることができるようになります。

そんなこんなでデザイナーとエンジニアにとって、Sketch Measureはロマンスの神様だったのです。

Sketch Measureを介した開発は、作業効率が上がることも実感できています。

ある案件では予定していたスケジュールよりも約25％前倒しで納品することができました。（案件の性質で変わるので、あくまでも参考程度ということで）

マウスアクション1つで、デザイナーの意図を汲み取ることができるわけで、、ひょっとしたらオフショア開発などで課題になる、言語の壁もなくなるのではないか、と期待感すらあります。

スマホアプリ開発で同じようなモヤモヤしている方は、是非参考にしてみてください。

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