Photoshopでモバイルアプリのプロトタイプが作れる「Stand In」を軽く使ってみた

今朝メールを見たら、Stand Inから「ローンチしたよー(^o^)ノ」ときていたのでさっそく使ってみました。

Stand Inを簡単に説明すると、タイトル通りPhotoshopと連携（エクステンションを使う）してモバイルアプリのプロトタイプが作れるツールです。

期せずしてプロトタイピング関連の記事が続きましたね。そろそろ今まで紹介したツール・サービスとのまとめも必要かなあ。

利用方法

Stand Inを使うには、まずユーザー登録が必要です。

ちょっとハードル高いかなと思ったのが、いきなり登録にクレジットカード情報が必要なこと。無料期間が14日間（事前にメール登録してた人は30日間）あるのだから、失効後に入力を求めても…と思いました。

使用ソフトのインストール

無事登録が済むと、Photoshop用のエクステンションと、iOS用のプレビューアプリをインストールするよう促されます。エクステンションのほうは、インストールが終了すればPsのエクステンション欄に追加されています。

エクステンションはこんな感じ。ログインすると

サンプルファイルが確認できます。親切ですね。

ちなみにウィンドウ下部の左右のアイコンは「今まで作ったプロトタイプのリスト」「新規プロトタイプ」の機能となります（真ん中はただのロゴ）。

試しにサンプルファイルを開いてみたところ。

サンプルファイルの画面サイズは640x960なのですが、ちゃんと縦1136pxでも動作します。

プレビューアプリはユニバーサル対応なので、iPadサイズでも問題ないようですね。

レイヤーの構成はこんな感じ。

分かる方は「なるほどねー」と思われるのではないでしょうか。

作業中はこんな感じのメニューになります。

まだそんなに使い勝手を試していないのですが、どうやら上図のUIが動作するようです。トグルやモーダル、スライダがあるのが面白いですね。反対に画面遷移のバリエーションが少ないのが他のツールと比べて気になります。

なお、それぞれのメニューを選択すると、デフォルトで決められたサイズのUIパーツが生成されます。

（適当にButtonとDragを追加してみた）

選択したフォルダを該当のUIにする、といった機能はなさそうですね（毎回UIを新規作成する必要がある？）。そこはちょっと残念かな。

なお、ボタンを割り振られたフォルダを選択すると遷移の種類が選べるのですが、これは自動的にフォルダ名に追加されたり変更されたりします。

端末で確認する

作ったプロトタイプを確認する手順はとても簡単です。先述のアプリからログイン後、（Photoshopが入ったマシンがネットワークに繋がっていれば）勝手に紐付けてアップデート・追加されます。

ざっくり使ってみての感想

発表された時から注目していたので、今回実際に使えるようになってとてもワクワクしていました。

ただ、現時点では無料期間が終わったら使わないかなあ、という感想です。

主な理由としては

・価格…今まで記載するのを避けていましたが、月額25$かかります。

・UIパーツを作るのがめんどい…毎回決められたサイズが生成されるので後処理がめんどい。

・フォルダネームがSlicyと競合する…僕はプロトタイプも最終成果物もなるべく同じデータを使いたいので、Slicy用のフォルダネームが使えなくなるのは痛いと感じました。プロトタイプ用とSlicy用、2つのファイル管理するのめんどくさいしね。

・成果物の共有…実はまだ成功していないのですが、作ったプロトタイプを他の人に送る方法がよくわかりません。メールアドレスを入れたのに届かない。。 （追記：迷惑メールフォルダに届いてました）

です。

自分の環境が「Slicyでパーツ書き出してBriefsでプロトタイプ作る」なので、ちょっと合わなかった格好となります。

まあまだこれからどんどん改善されていくだろうから、あくまでも現時点では、かな。

気になる方はぜひ試してみてください。

よりぶろ