MonockLaBlog

すきをかたちに!ものづくり+情報ブログ

WindowsとMac両方で使えるphotoshopの画面をスマホで確認する方法

こんにちは、しぃた( id:ml_syta )です!
ご挨拶が遅くなりましたが、2016年もよろしくお願いします。
今年は記事更新を増やせるように精進してまいります。

さて、UIを作成する際に実機(スマホ)での確認作業が発生すると思います。
今までは、
photoshopで開いている画像を保存→dropboxなどに画像を移動して実機で開く

などちょっと面倒な作業が発生していましたが
ほぼリアルタイムで実機確認ができるようになったので、メモがてら残しておきます。
私はWindowsユーザーでもあるし、Macユーザーでもあるので今回はどちらでも使用できる方法です。

使える人使えない人

ただし条件としては、photoshopCC2015であるということですので、ご注意ください!
また、スマホがAndroidの場合も使用するアプリがまだ未対応なので使えません。
Androidユーザーも確認できる方法は別にあるので、それはまた別の記事でかきますね。

設定方法

photoshopでウィンドウ→Device Previewをクリック

▼Photoshopの上部タブ部分です
f:id:ml_syta:20160108203135j:plain

すると、下記のような小さなウィンドウが開きます。
▼Device Previewウィンドウ
f:id:ml_syta:20160108203136j:plain

スマホアプリをもっていない方は入手する必要があるので、
「アプリを入手」をしましょう。
もう持っている方はここら辺は飛ばしてくださいね。


アプリを入手するを押すと、
APPのURLがひらくので、「iTunesでみる」をおしてください。
「プログラムを起動」ウィンドウがひらくので、
ここは「iTunes」のままでOKをおしてiTunesを起動しましょう。

▼ブラウザが起動
f:id:ml_syta:20160108203138j:plain

▼特にいじらなくてOK
f:id:ml_syta:20160108203137j:plain

iTunesで同じような画面がひらくので、スマホにダウンロードしてください。
ダウンロードが完了したら、スマホ上でアイコンをクリック!

▼iTune起動
f:id:ml_syta:20160108203139j:plain

AdobeIDでログインしたら、接続の仕方の説明がある画面が起動します。
あとは説明どおりにすればOKです。

▼メール、パスワードでログイン
f:id:ml_syta:20160108203140j:plain

▼説明画面
f:id:ml_syta:20160108203141j:plain

有線の場合

私の場合、Windowsは有線で繋いでいるので、
Wi-Fi接続は使えません。その場合は充電で使用してる
ケーブルでパソコンとスマホをつないであげればいいです。

無線の場合

無線の場合は同じWi-Fiネットワークに繋げてあげたうえで、
photoshopCCをCreative Cloudログインする必要があります。
はじめログインするということがわからず、
つながらない~~と苦労したので、
Wi-Fi経由で画面が出てこない場合はログインされているか確認してみてくださいね

Device Previewのウィンドウに自分のiphone名が表示されていれば成功です

▼接続されているスマホがここにでます
f:id:ml_syta:20160108203142j:plain

まとめ

これでUIの確認作業が断然楽になります。
実機確認をしないというデザイナーさんも見受けるのですが、
確認をしておかないと自分があとで苦しむことに…!

まだ試していないデザイナーの方はお試しあれ!
ちなみに私はケーブル接続のほうが楽で好きだったり…
iPhone6sピンクを買ったのでケーブルもピンクにしたい

© MonockLab 2015