2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Adobe Preview CCのちょっとしたTIPS

Last updated at Posted at 2016-12-27

ネイティブアプリの見た目修正で、"取り急ぎ実機上で確認したい"みたいなケースでAdobePreviewを使うと便利です。

WebデザインであればWeb上のどこかにHTML/CSSをアップロードしてブラウザを使って確認することができますが、ネイティブアプリではそうもいきません。

AdobePreviewを使えば、デザインの元データを用意しなくてもデザイン調整/実機確認することができます。

1. 実機でスクリーンショットを撮る

iOS端末にてデザイン調整したい箇所のスクリーンショットを撮っておきます。
cap1.png

2. PreviewCCとPhotoshopと接続する

iOS端末をMacとUSB接続し、Adobe Previewを開きます。
cap2.png

Photoshop側でスクリーンショットを開いておけば、AdobePreview上に同じサイズでフルスクリーン表示されます。
cap1.png

3. PreviewCCで実機プレビューしながらPhotoshopでデザイン調整する

あとはPhotoShopで普段通り作業します。
cap3.png

PhotoShop側での修正内容が、リアルタイムでAdobePreiew側で反映されていきます。

4. FIXした内容で正式な依頼を出す

実際のiOSアプリ案件にてUIパーツの色変更が必要だったケースで、この方法を取ってデザイナーによるデザイン調整、関係者の確認完了までを30分程度で完了させることができました。
プロトタイピングツールを使う選択肢もあると思いますが、プレビュー程度あればPhotoShop > AdobePreviewの方が圧倒的に速いですし楽だと思います。

プロトタイプと違い画面遷移のようなものはできませんが、PhotoShop側で個々のキャプチャがアートワークとして登録されていれば、AdobePreview側でスワイプすることでキャプチャを切り替えることもできます。

ちょっとしたデザイン確認であればデザイナを通さず、ディレクターだけで完結するかもしれません。

限定された使い方ですが、こういった使い方があること覚えておくとよいかなと思います。
見た目に関わる部分は、やはり実機を見てもらった上でのコンセンサスが取れていた方が確実です。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?