■この記事で言いたいこと
・UIデザインの実機確認大事ですよ
・ゲームのUIデザインってPhotoshopが多いですよね
・Preview CCもいいけど、Skala Previewおすすめですよ

UIデザイナーの皆さん、普段UIをデザインするときって何でしてますか？XD？Sketch？今だとFigmaとかSTUDIOとかも候補でしょうか。

ゲーム系だともっぱらAdobe Photoshopが多いと思います。
細かい装飾や自由なレイアウト、エフェクトや3D表現などを鑑みた時に、まだまだSketchやFigma、XDなどだけでのデザインは効率的ではないですよね…

そんなPhotoshopでデザインを制作するとき、
実機確認ってどうやってます？

以前はPhotoshopに搭載されていたデバイスプレビュー（PreviewCC)を使っていたんですが、CC2018以降廃止されてしまいました。

自分もCC2017を使い続ける選択肢も考えたのですが、使用しているプラグインやjsxの関係で結局CC2019をメインで使うことにしたのもあり、一本化を図るために「Skala Preview」に移行しました。

こちら、わりと以前からあるリアルタイムプレビューアプリです。

ただ以前は動作が不安定で、接続が頻繁に切れたり反映が遅かったりと少し使いづらい印象だったんですが、最近になって改善されたのか、しばらく使ってみて安定して動いている印象だったので移行することに決めました。

SkalaPreviewのいいところ

PSDを実機の画面でリアルタイム確認できる
Adobeのデバイスプレビューと同じく、PCとスマホをつなぎ（wifi or ケーブル）、psdデータを放り込むとスマホの画面でリアルタイム確認ができます。

拡大縮小も可能で、画面サイズにフィッティングもしてくれます。

色覚確認ができる
モノクロ、色覚型の違いによる見え方も確認できます。
どこまでこのあたりを意識するかは会社にもよるかもしれませんが、確認したい時に非常に便利です。

ここはDevicePreviewよりも高機能と言えます。

実機確認はとても大事

最近他のUIデザイナーさんに話を聞く機会があったのですが、「ワイヤーフレームやモック段階では実機確認するけど、デザインの実機確認はしない」という文化の会社も存在するそうです。

XDやFigmaだと簡単にデバイスプレビューできますが、Photoshopだと面倒くさくて億劫になる気持ち、わかります。

ただ、（自分が（Twitter上で一方的に）尊敬する @TANAKA_U さんのツイートの引用ですが）

まさにこれだと思います。ユーザーはボタン探しや誤タップ回避ゲーをしたいわけではなく、ゲームを遊ぶためにUIに触りたいんです。

ここ数年「ボタンどこ」「文字読めない」みたいなゲーム、たくさん増えてませんか…？（特に海外アプリをそのまま持ってきたようなアプリで）

SNSなどで「ボタン小さすぎ…」みたいな声、よく聴きませんか…？

自分で遊んでても誤タップ連発してませんか…？

デザインを作りながら実機で。できれば比率やサイズの違う端末を複数用意して、実際に画像を手で押して見ながら確認したほうが絶対に良いUIができます。

さらにできれば、チームにもそういう感覚を浸透させられるとより良いと思います。
デザインレビューなどをする時って、大きな画面に写しながらやったりするケースも多いと思います。

その時、ボタンが小さくて余白が多かったり、文字が小さく隠されているデザインのほうが「なんとなく良く見えがち」です。特に日頃からUIを専門にしていない方がレビュアーだと特に。

今回のAdobeの発表で、いつCC2017がサービス終了になり、DevicePreviewが使えなくなるかもわからないので、選択肢の一つにいかがでしょうか？

そして、「デザインの実機確認はしてないな〜」というデザイナーの方は、是非設計の段階から実機で確認するクセをつけるのをオススメします！