スマホ向けのデザインをする場合は、320pxのx2で640px幅のキャンバスサイズで作成することが多いと思うのですが、パソコンの画面と実機では、やっぱりサイズ感が違うので、できればこまめに画面を実機で確認したいところです。
いまや完全にIllustratorが作業ベースとなっているんですが、Illustratorには、外部との連携ができる環境がありません。
Dropboxでプレビュー
そんな折、DropboxのiOSアプリが、.aiファイルをプレビューできることに気づきました。
実際にiPhone6sでスマホデザインの.aiファイルを見てみると、ちゃんと画面幅に合わせて表示されて、ばっちりそれっぽく見えます。
……が、よくよくみると、どうも効果をかけた部分のレンダリングがおかしい。
レイアウトの確認くらいには使えそうですが、細かいところは微妙です。
Photoshop最強伝説
そういえば、Photoshopには、デバイスプレビューができる環境があったことを思い出して調べてみたら、Preview CCというアプリがありました。Photoshopで作業中の画面を、連動したスマートフォンで確認できるというナイスアプリです。
そこで、
- Illustratorで作成したスマホサイトの.aiファイルと同じキャンバスサイズの新規ファイルをPhotoshopで作成
- そこに「ファイル＞リンクを配置」で.aiファイルを配置
- Preview CCと連動させて表示
とやってみたところ、思った通りのデバイスプレビューができました。
リンクを配置なので、Illustratorで変更を保存した後、Photoshopに切り替えると配置画像も書き換えられ、最終的にデバイスプレビューも更新されます。
しっかりしろIllustrator
ちょっと面倒だけど、これがベストな感じかな。
こういうところは完全にPhotoshopのほうが進んでますね。Illustratorはもっとがんばれ。いろいろがんばれ。