Webデザインを行う際は、パソコンだけではなく、スマートフォンやタブレット端末などでも表示を確認する必要があります。
パソコン上では最適化されていても、スマートフォンで表示するとデザインが崩れてしまっている、ということは往々にしてあることです。

今回は、デザイナー必見のアプリ「Adobe Preview CC」をご紹介します。

Photoshopユーザーにとってはとても便利なので、まだ利用されていない方は一度インストールしてみることをオススメします。

Adobe Preview CCとは

0.png
App Store

使用料金：無料

Adobe Preview CCとは、Adobe Creative Cloudが2015年にPhotoshopのアップデートの一環として発表したアプリです。
これまで、Photoshopを使用してスマートフォン対応のデザイン作成をした場合、「書き出し」を行ってスマートフォンへ画像を転送する必要がありました。
この工程は、最終確認のみの場合はそれほど手間のかかる作業ではありません。

しかし、デザイン作成中は、微調整を含めて繰り返し本番環境でのチェックが必要となります。
チェックの都度、書き出しをしてスマートフォンへ転送するというのは、意外に時間も手間もかかってしまう作業です。

Photoshop CC 2015では、Adobe Preview CCをスマートフォンにあらかじめダウンロードしておくことで、書き出しや転送の手間を取ることなくリアルタイムでデータの確認が可能になります。

Adobe Preview CCを使用する2つのメリット

1.精度が高い

Photoshop側で修正した部分もリアルタイムで確認できることはもちろん、その精度が高いこともオススメポイントです。
従来どおり、データを書き出し、iPhoneに転送して確認するサイト同等の再現性がありますので、本番でデザインが崩れてしまっていた、という心配がありません。

2.複数デバイスで使用できる

同じAdobe IDでログインすれば、iPhoneだけではなくiPadでもデザインの確認が可能です。

そのため、デバイスごとにデータを書き出す必要もありません。
いずれもリアルタイムでデータが反映されますので、パソコン・タブレット・スマートフォンと複数のデバイスに対応したデザインを作成する際に非常に便利です。

使用方法

step1.

1.png
まず、アプリをダウンロードして起動します。
上記でご紹介しているURLからダウンロード可能です。
なお、執筆時現在(2016年10月)、iPhone・iPadでのみ使用することができますので、Androidユーザーの方は注意してください。

step2.

2.png
9.png
アプリを起動すると、ログイン画面が表示されます。
「サインイン」をタップし、Photoshopで使用するメールアドレス・パスワードを入力してログインしてください。

step3.

3.png
続いて携帯電話番号を追加する画面が表示されます。
パスワードを忘れた場合に備えて設定しておくことをオススメしますが、スキップしても問題ありません。

step4.

4.png
上画像と同じ画面が表示されたら、アプリ側での設定は完了です。
なお、アプリを利用する際は、iPhoneとPhotoshopを開いているパソコンをUSBで接続するか、パソコン側で使用するWi-Fiと同じ環境のWi-Fiに接続する必要があります。

step5.

5.png
続いて、Photoshop側の設定を行います。
すでにデザインを作成している場合は、念のためデータを保存しておき、画面の上部に表示されているメニューのうち「ウィンドウ」をクリックしてください。

step6.

6.png
すると、メニューがプルダウンで表示されます。
このうち「Device Preview」をクリックします。

step7.

7.png
数秒待機すると「Device Preview」のボックス上でPhotoshop画面と接続されたiPhone名が表示されます。
以上で設定完了です。

このボックスは、アイコン(画像赤枠部分)をクリックすれば、表示/非表示を切り替えることができます。

8.png
同期が完了すると、iPhone側でも同じデータを確認できます。

使い始めの頃は、データが同期されるまで時間がかかる場合もありますので、すぐに同期されない場合でも接続を切断したり、アプリを終了したりしないように注意してください。