Illustratorで作ったスマホ向けデザインをデバイスプレビューする

---

スマホ向けのデザインをする場合は、320pxのx2で640px幅のキャンバスサイズで作成することが多いと思うのですが、パソコンの画面と実機では、やっぱりサイズ感が違うので、できればこまめに画面を実機で確認したいところです。
いまや完全にIllustratorが作業ベースとなっているんですが、Illustratorには、外部との連携ができる環境がありません。

Dropboxでプレビュー

そんな折、DropboxのiOSアプリが、.aiファイルをプレビューできることに気づきました。
実際にiPhone6sでスマホデザインの.aiファイルを見てみると、ちゃんと画面幅に合わせて表示されて、ばっちりそれっぽく見えます。
……が、よくよくみると、どうも効果をかけた部分のレンダリングがおかしい。
レイアウトの確認くらいには使えそうですが、細かいところは微妙です。

Photoshop最強伝説

そういえば、Photoshopには、デバイスプレビューができる環境があったことを思い出して調べてみたら、Preview CCというアプリがありました。Photoshopで作業中の画面を、連動したスマートフォンで確認できるというナイスアプリです。
そこで、

1. Illustratorで作成したスマホサイトの.aiファイルと同じキャンバスサイズの新規ファイルをPhotoshopで作成
2. そこに「ファイル＞リンクを配置」で.aiファイルを配置
3. Preview CCと連動させて表示

とやってみたところ、思った通りのデバイスプレビューができました。
リンクを配置なので、Illustratorで変更を保存した後、Photoshopに切り替えると配置画像も書き換えられ、最終的にデバイスプレビューも更新されます。