モバイルデザインを制作する際、パソコンからだけでなく、
スマートフォン・タブレット端末からの確認も必要になっています。
実機でのデザインの確認がしたくても、デザインデータを1枚のカンプへ書き出して、
サーバーへアップしたり、メールで送ったり、クラウドへアップしてから
スマートフォンで表示させて確認をしていました。
「デザイン制作」→「デザインの書き出し」→「スマートフォンへ転送」と
確認までがとても手間だと思います。

Adobe Preview CCを使えば書き出す手間がいらない！

Adobe Preview CCとは…？
今開いているPhotoshopデータをiPhoneからリアルタイムでプレビューできる
iOSアプリケーションです。
PhotoshopCC2015からついている機能のデバイスプレビューと
Adobe Preview CCを使用することで、リアルタイムでのデザイン確認ができます。

使用するメリット

Photoshopの入ったパソコンと同じWi-fi経由、またはUSB接続で、
複数のiOSデバイスからPhotohopデータのプレビューが可能です。
iPheneだけでなく、iPadからも確認ができます。

また、アートボードで作成したデザインにも対応しており、
デバイスのサイズに合った、デザインを表示します。

※2017年10月現在、androidには対応していないようです。

PhotoshopデータをiPhoneで確認する方法

Adobe Preview CCの使い方について説明します。
STEP①Adobe Preview CCのアプリをiPhoneにダウンロードし起動すると、
ログイン画面になるので「サインイン」をタップしてください。
STEP②Photoshopで使用しているメールアドレス・パスワードを入力してください。
STEP③の画面が表示されれば、アプリでの設定は完了です。

〇 Adobe Preview CCはこちらから
https://itunes.apple.com/jp/app/adobe-preview-cc/id973272286?mt=8

次にPhotoshop 側での設定をします。
STEP①デザインを制作している場合は、念のため保存を行ってから、
画面上部の「ウィンドウ」画面を開いてください。

STEP②メニューがプルダウンで表示されるので「Device Preview」をクリックします。

STEP③「Device Preview」のボックス上でPhotoshop画面と接続されたiPhone名が表示されます。
これで全ての設定が完了しました。

パソコン・iPhone・iPadで表示された画面になります。

使ってみた感想

実際にiPhone・iPadともに使用してみた感想としては、
作業するために複数ページ開いていることが多いのですが、
今開いているデータを反映するので、タブで切り替えると表示も切り替わります。
スマートフォン・タブレットデザインを制作の際、
データごとに「書き出す」必要なく、手元にデバイスを置いて、
デザインの確認ができるので、使って損はないと思います。

Author : Webデザイナー U