photoshopで作ったスマホのデザイン画面、いつもどうやって確認していますか?
一度画像を書き出してサーバー上にアップしてurlから画像を確認…なんて面倒なことしていませんか?
モバイルファーストと言われている世の中…実機でのデザイン確認はスマホ画面デザインをする上では欠かせませんが、フィードバックが多かったり、ページ数が多かったりなどでいちいち確認しないといけない場合は結構な作業ロスになります。

そんな無駄な作業を解決してくれるのがAdobeさんが提供している「Adobe Preview CC」がおすすめです。
確認する方法はいろいろとあると思いますが、個人的にはとても簡単で、以外と使っていない人がいなかったので今回紹介しようかと思います。

※CCのみで使える機能です!
※Androidは使用できません!

使い方は超簡単!アプリをダウンロードして電源のUSBケーブルで繋ぐだけ!

すごく簡単ですね、電源のUSBケーブルだけでなくWi-Fiでも確認することができます。
繋いでおけば常にリアルタイムで確認することが可能です(ただPhotoshopが重くなるので、繋ぎっぱなしはおすすめしません。アプリを落とせば元に戻ります。)

専用のアプリのダウンロード先はこちら。
https://itunes.apple.com/jp/app/adobe-preview-cc/id973272286?mt=8

※Adobeアカウントが必要になります
インストールし、Adobe IDとパスを入力すれば使えるようになります。

Photoshopも予めAdobe IDを使ってログインしておきます。(ヘルプメニューにログインがあります)

使い方

電源のUSBケーブル接続の場合

電源のUSBケーブルとPCをつなぎ、アプリを立ち上げた状態でphotoshopの「メニュー」→「ウインドウ」→「Device Preview」でダイアログを開きます。

あとは勝手にスマホのモニタに開きます。

Wi-Fiの場合

Wi-Fiの場合、PCとiPhoneのWi-Fiを同じネットワークで接続するだけです。
操作も基本的にUSBと同じで、「Device Preview」を表示させて使用します。

iPhoneアプリのジェスチャー機能

iPhoneアプリのジェスチャー機能で画像の拡大等の動作も行えますので紹介しておきます。

  • Photoshopで新規作成時にアートボードをチェックすることで、複数のアートボード間をスワイプでプレビュー
  • 拡大するズームインおよび縮小するズームアウトに使えるピンチジェスチャー
  • 100% 表示と画面にフィット表示を切り替えるダブルタップジェスチャー
  • 画像をパンするドラッグジェスチャー

いかがだったでしょうか?
これを使えば確認作業が格段に楽になりますよ!
ぜひ試してみてくださいね〜ではではノシ

あわせて読みたい記事