Prott Sketch Pluginを導入してプロトタイプを素早くチームに共有する

やりたいこと

評価できるプロトタイプを素早く作る。シンプルな課題解決。

2015/7/27にグッドパッチさんが、Prottのイケてる新機能を発表。
» ProttのSketch Pluginがついにリリース！

これを機に、デザイナーのワークフローを刷新して、ツールも絞り、UI/UXデザインの前工程の学習コストを削減してプロジェクト運用を効率化したい。

実現手段

1. Sketch.appで素早くワイヤーフレームを作る
2. Prott Sketch PluginでProttとワイヤーフレームを同期して動きをつける
3. Prottで作成したプロトタイプをSlackでチームに通知しFBをもらう

前提知識

Sketchとは?

Sketch（スケッチ）Bohemian Coding社の開発するUIデザインに特化したデザインツール。直感的で操作出来るだけでなく何より軽い。Pluginも充実している。99$で買い切りだしAdobe CCと比較すれば3ヶ月弱でペイできるので導入コストも安い。

ナウい会社は全員Sketchを使用しはじめているようですよ。2年以上前にFireWorks+Photoshopとおさらばして導入しましたが、僕は、未だに四面楚歌状態ですがね。みんな氏ねばいいのに。：D

個人的に使用感は最高です。airでもサクサク。

Prottとは?

Prott（プロット）とは、グッドパッチさんが開発している、モバイルアプリやサイトの為の、高速プロトタイピング＋新しいコミュニケーションツール。

2014年4月にベータ版を公開して以来、ワイヤフレームの作成や、外部サービスとの連携など、機能強化を実施。もはやUI/UXデザインの必須ツールと言っても、過言ではない。

※ Sketch.app、Slack、Dropboxなどと連携可能で全てのプランで利用可
※ 無料トライアル期間は30日、その後プロジェクト数制限やワイヤフレーム機能は有料

Slackとは?

Slack（スラック）とは2014年に正式に公開された北米発のサービス、所謂、チームコミュニケーションツール。簡単にいえばグループチャット。

個人的にはチャットワークやサイボウズと比較して、エンジニア向けで敷居は高いと思うけど、githubやherokuなど外部サービスとの連携が優秀で、使いこなせば効率的な情報共有が可能になる。
commitやdeployの通知やissue管理など、劇的に見落としが減った。

ツールが増えて機能が分散していたのを見事集約してくれた。

» ProttとSlack連携方法

【解決済】Sketch側でprottにログインした後、動かなくなる

• 2015/7/29 - グッドパッチさんにバグ報告済み
• 2015/7/31 - Prott Sketch Plugin アップデートにより解決

※わずか2日間で対応してくれた！流石っす。

現象

SketchにPluginを入れたが挙動がおかしくて同期できねえ

意図しない部分でalertが出る。自分だけの環境なのか。。。
loginとOptionのレスポンスがない

iOSのバージョンの問題

Sketchのプラグインが、Mac OSX10.9に対応していなかった。

2015/7/31 現在はグッドパッチさんの対応で「Prott Sketch Plugin」がバージョンアップ

Sketch Toolboxまたは、最新版(version 1.0.6)をインストールして利用できるようになった。

Prott Sketch Plugin version 1.0.6

経緯としては、10.9もそこまで昔のOSではないのと、会社によってはツールの関係でアップデートされていない10.9ユーザーの方も多いので対応してくれた。

AdobeCCに乗り換えギリギリのうちみたいな出版社は、まさにそれ。

再インストール

旧バージョンを削除して、新しいPluginを突っ込む。

再チャレンジ

初回loginすると、ダイヤログが

It seems you don't have any projects. Go to https://prottapp.com and create one, then click the 'Refresh projects list' button from the options.

おまえは、任意のプロジェクトを持っていないから、オプションから「更新プロジェクト一覧」ボタンをクリックして、 https://prottapp.comに移動し、 1つプロジェクト作れ。ってさ。:D

はいはい、でOption画面

ついにレスポンスが！しかしログインしてるじゃん。プロジェクトが存在しているはずなんだが。。

loginしなおしたら行けた。prott側で作った「test」が選択できるぜ。

アートボード試しに作ってを同期してみる

prott側で確認

あった！！！！！サイズが潰れているのはアートボードのサイズが違うからか。

めでたしめでたし

これでtestUIをSketchだけで量産して簡単にユーザーテストのダンドリもできる。

さすがグッドパッチさん

バグの問い合わせにスピーディに対応してくれるあたり、非常に好感が持てます。

真摯な対応をうけて、料金プランをproに切り替えた。

めでたし

その他課題　Slackへの通知設定をカスタマイズしたい！

• Prott連携でSlackに通知設定したが、細かい変更のたびにスクショプレビューがバンバン通知されちゃうので、大事なフィードが流れてしまう。

バックエンドエンジニアに「うぜえ」って言われて怒られる☆

今のとこはSlack側でチャンネルを分けることでカバーしたけど、できればPrott側でgithubと似た感じで、通知のカスタマイズができればベター。

↓こんな感じでフォーラムにアイデア投げてみました
» Slackの連携機能で通知設定をカスタマイズできる機能がほしい