Twitterで「Flawless App」というサービスに絡まれたので人柱した

やること

Twitterで「Flawless App」というアカウントから、「自社サービスの開発者⇄デザイナーのコラボレーションツールを見てみない?」っていう宣伝@ツイート来たので面白がって人柱してみた。

結論

結論を最初に言うと「iOS Simulatorにデザインファイルや画像を重ね合わせて、分かりやすく見比べることが出来るツール」でした。

前書き

こんにちは!桜も散ってだんだんと暖かくなって来てきますね。
今年は花粉がすごくて、花粉症用のマスクと花粉症に効くお茶を常備していないと辛い日が続きます。

帰宅して、布団の中でそろそろお風呂に入ろうかと考えていたらこのような@ツイートが飛んできていました。

適当翻訳(right on の正しい役がわからなかった)

こんにちは😀
あなたがデザイナーと開発者のコラボレーションツールに興味があるのを拝見いたしました。
私たちは、初期デザインと右のiOSシュミレーターの実装を比較するような補助ツールをお見せしたいです。
追記: 私たちは他にもZephinをサポートしています。

スパムメールかな?と思いましたが、確かにZeplinのアカウントはフォローしてますし、デザイナーと開発者間のコラボレーションツールには興味があったので、面白半分試してみようかなぁと思いました。

Flawless AppのWebサイト

Flawless App

スクリーンショット 2018-04-10 21.32.59.png

サイトのトップの内容

可能な限り最高の視覚品質を達成します。
期待したデザインと実装したデザインのリアルタイム比較。 iOSシミュレーター上で動作します。私たちは、モバイルアプリの品質に夢中になっている人たちのためにFlawlessを作りました。

iOSシミュレーター上で動作します!? ここでだいぶ気になりました。

料金

30ドル
(フリートライアルあり)

対応ファイル

sketch, gif, tiff, jpg, png, jpeg
とのこと。

使ってみた

とりあえず試して見ないと全く分からないので使ってみたのでレポートいたします。

インストールすると、「iOSシミュレーターを開く」というボタンが出て来ます。
ボタンを押すとシミュレータが再起動されます。

スクリーンショット 2018-04-10 21.59.36.png


Macのトップバーにアイコンが追加されました。
スクリーンショット 2018-04-10 22.03.23.png

CHOOSE IMAGEは比較したいデザインファイルを選択します。

MODES

  • 分割表示
  • 透過表示
  • 非表示

この3種類が使えるようです。

以下、全てXcodeのSimulatorでのスクショです。

分割表示

スクリーンショット 2018-04-10 22.04.27.png

透過表示

スクリーンショット 2018-04-10 22.04.41.png

以上!まとめ

どうやら「Flawless App」というアプリは、iOS Simulator上にデザインファイルや画像を重ねて比較できるアプリのようです。

確かに1つのVCをゴリゴリ開発している時は、デザイン設計との視覚的な比較がとてもやりやすそうだと思いました。

ただ「全然デザイナーとエンジニアのコラボレーションツールじゃないやん!」と正直思いました。「エンジニアが楽にデザインの比較を行えるツール」ぐらいの感じ。

あとは画面遷移させながら色々確かめる時に、一々画像の再設定なんか面倒臭くて使うのやめちゃいそうだなーと思いました。

まだまだローンチしたばかりのようなので、これから便利になっていけば利用を検討しよう!という感想です。

無料で試せるので、気になるiOSエンジニアの方はお試しください!

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.