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に切り替えると配置画像も書き換えられ、最終的にデバイスプレビューも更新されます。

しっかりしろIllustrator

ちょっと面倒だけど、これがベストな感じかな。
こういうところは完全にPhotoshopのほうが進んでますね。Illustratorはもっとがんばれ。いろいろがんばれ。


このページをみんなにシェアする

お問い合わせ

ファイルサイズが大きすぎます。