みなさんはどのプラットフォームでAndroidアプリのデザインをしていますか？やっぱりMacでしょうか。CGなどの映像系の人はWindows派も多いですが、それ以外ではやはりMac派が圧倒的なんでしょうね。弊社ではWindowsなのですが、それはソフトウェア開発をしている人や企画の人の間ではWindowsの方が多数派だからです。送ってきたオフィス文書とかの互換性で悩まなくてもいいですからね。MacとiPhoneアプリの開発はもちろん相性バッチリですが、Androidアプリだと特にMacにアドバンテージがあるわけでもないような気がします。Bootcampなどもありますし、昔ほどWindowsとの互換性に関して問題とはならないのでしょう。茂木さんには「Windowsでデザインしているなんてセンスが疑われる」と言われそうですが…。
MacにしろWindowsにしろ、UIデザインのワークフローとしてはデスクトップPCやノートPCで開発して、それを実装後、実際のデバイスで動作チェックする、というのが基本の流れだと思います。ただ最近のモバイルデバイスは画面が大きく、ついに携帯電話でフルHD（1080×1920）サイズにまでになり、自分のデスクトップのモニターの縦サイズより、携帯端末の画面のサイズの縦の長さの方が大きいということになってしまいました。そうなるとどうしてもPC上でデザインしている時に、実際の端末画面ではどのくらいの大きさになるのか掴みにくくなります。また、携帯の液晶はPCモニターの液晶とは特性が違うので、色や階調の再現性も違います。そのために実装するよりも前に、デザイン段階でUIグラフィックが実際のデバイスでどう見えるか、確認することが必要だと思います。ワイヤーフレームであっても、少なくともサイズ感は確認しておいた方がいいと思います。
MacとiPhoneではいろいろなツールがありますが、今回紹介するのはAndroidデバイスでPhotoshopの画像を簡単に確認することができるAndroidアプリ、「The Preview」を使った方法です。Macは持っていないので確認できないのですが、このアプリはPhotoshopの「リモート接続」機能を使いますので、MacでもWindowsでも同じく使えると思います。
このアプリを使うためには、まずPhotoshopで「リモート接続」の設定を行う必要があります。「編集」＞「リモート接続…」を選択してダイアログに適当なパスワードを入力します。サービス名はこのアプリでは使いませんのでなんでも構いません。重要なのは「パスワード」と下の「IPv4アドレス」だけです。両方をメモします。もちろん「リモート接続を有効にする」のチェックボックスはオンにします。
Photoshopの設定はこれだけです。PhotoshopでAndroidデバイスで表示したい画面を開いておきます。そしてあらかじめ上の「The Preview」をインストールしたAndroidデバイスでアプリを起動します。起動すると下のような設定画面になりますので、先ほどメモしたIPアドレスと、パスワードを入力し、「Save」をタップします。
後は次の画面で「Connect」をタップするだけです。Photoshopのリモート接続サービスに接続すると、PCで開かれている画像がAndroidデバイス上にも表示されます。
Photoshop側で絵を編集すると、約10秒ほど（フルHD、無線LAN環境）でデバイス側にも反映されます。下はフルHDサイズの画面に、Androidの推奨最小サイズ、48dpで描いたボタンを配置した絵です。背景はグラデーションを描いています。48dpというのは、実際にデバイスで見ると確かに「最小」サイズですね。フルHDでは144ピクセルになります。このアプリの設定はひとつしかなく、画面のどこかをタップすると上に表示される右上のアイコンで表示品質を調整できるだけです。
使い方といってもこれだけのスーパー簡単なアプリです。注意する点は、表示したい画像のサイズと、表示するデバイスの解像度（サイズ）を同じにするぐらいです。またPhotoshopの「リモート接続」機能はCS5以降の機能なので、CS4以前では使うことが出来ません。Photoshopを使ってAndroidアプリのデザインをしている人はぜひ試してみてください。よく企画資料とか手書きのワイヤーフレームとかでは機能が画面に入っているのに、実際にレイアウトすると「こんなに入るわけないじゃんか」という（私の場合は、ですが…。）ことがあります。そういう問題もこれを使って確認すれば避けることができるのではないでしょうか。
超簡単なプレビューアプリはこちらからダウンロードできます。（無料。ステマじゃないですよ）