Adobe PreviewでiPhoneアプリのデザイン確認

2015年11月26日　11時00分更新

文●ハマダナヲミ

ツイートする

Photoshopを使ってスマートフォンアプリのUIをデザインするコツを学ぶ連載。前回までで作例となる「お天気投稿アプリ」のデザインがひととおり完成しました。連載最終回は、前回仕上げたデザインをエンジニアに渡すまでの手順を追って紹介します。

お天気投稿アプリのUIデザインチュートリアル

▼第2回

1.アプリの配色を考えよう
2.ドキュメントを新規作成する
3.基本的な要素をレイアウトする

▼第3回

4.レイヤー効果を使って質感のあるボタンを作る
5.Illustratorで作ったアイコンを配置する
6.写真を配置してデザインを調整する
7.SNS連携ボタンを配置する

▼第4回

8.実機で見た目を確認しよう
9.パーツ画像を書き出そう
10.ガイドラインの作成

8.実機で見た目を確認しよう

Photoshopでアプリのデザインを仕上げたら、iPhone実機に表示しましょう。第1回で紹介したアップルの「iOS Human Interface Guidelines」（HIG）にも規定されているように、ユーザーがきちんと操作できるかどうか、UIパーツのサイズや余白を中心に確認します。

実機での確認は、Creative Cloudに含まれる「Adobe Preview」を利用すると便利です。iPhoneに「Adobe Preview CC」アプリをインストールして起動し、Photoshopを起動中のマシンとUSBケーブルで接続します。Photoshopのデバイスプレビューパネルを開くと、アートボードの内容がiPhoneのAdobe Previewの画面に表示されます。

Photoshopを起動中のマシンとiPhoneが同じWi-Fiネットワーク環境下にある場合は、Wi-Fi経由でも接続できます。その場合は、［サインイン］をタップして、使用中のAdobe IDでログインしましょう。

Adobe Preview CC（iOS 8.0 以降が対象）: https://itunes.apple.com/jp/app/adobe-preview-cc/id973272286?mt=8

iPhoneで実際に操作してみて、見づらい点や操作しにくい点があればPhotoshop上で調整します。

Adobe Previewの画面にはPhotoshopの編集内容がリアルタイムで反映されるので、調整作業がスムーズに進められます。

9.パーツ画像を書き出そう

完成したデザインをPSDファイルではなく、アプリにそのまま組み込んで使う画像ファイルとして納品する場合は、Photoshop上でパーツごとに書き出す必要があります。Photoshopでパーツ画像を書き出す方法はいくつかありますが、「画像アセットの生成」を利用するのがおすすめです。画像アセットの生成は、Photoshopのレイヤー情報をもとにパーツ画像を自動的に書き出す機能です。

Photoshop ヘルプ | レイヤーからの画像アセットの生成: http://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

画像アセットの生成は、［ファイル］→［生成］［画像アセット］にチェックを入れると有効になります。すると、PSDファイルを保存している場所に「PSD名-assets」というフォルダが生成され、レイヤーごとの画像が書き出されます。レイヤーごとの画像はPSDファイルを保存するたびに自動的に書き出されます。

画像ファイルの名前はレイヤー名で指定し、ファイル形式もレイヤー名で同時に指定します。たとえば、「.png」ならPNG形式、「.jpeg」ならJPEG形式となります。

作例のお天気投稿アプリの場合、画像として書き出すパーツとファイル名は以下のとおりです。

撮影画面に戻るためのカメラアイコン…icon_camera***.png
お天気選択のボタン………………………btn_weather***.png
お天気アイコン(雨)…………………………icon_weather_rainy***.png
お天気選択の送りボタン…………………arrow_l(r)***.png
Twitter、FacebookのSNSアイコン…btn_twitter(facebook)***.png

「***」部分には@2x、@3xが入ります

アプリの開発方法によっては画像をディレクトリ単位で分けて管理できないので、画像ファイルには固有の名称を付けます。ファイルの命名ルールについてエンジニアから指定がある場合もありますので、あらかじめ確認しておきましょう。

それでは実際にFacebookのアイコンを書き出してみます。前回作成したPSDファイルのレイヤーパネルから、Facebookのアイコンレイヤーパネルを選択し、レイヤー名を「btn_facebook@2x.png」に変更して［⌘］+［S］で保存します。

Finderで確認すると、「PSD名-assets」の中に「btn_facebook@2x.png」という画像が書き出されています。これでFacebookのアイコン画像が書き出せました。

第2回の「サイズの考え方」で説明したとおり、Photoshop上ではもともと@2xのサイズで作業しているので、@2x用の画像はこれでOKです。続いて、@3xのサイズも書き出します。

書き出しサイズを変更するには、レイヤー名の先頭に半角スペース区切りでパラメーターを追加します。ファイル形式を指定するのと同じように、サイズもレイヤー名で設定します。たとえば1.5倍に拡大して書き出すときはレイヤー名を「150% btn_facebook@3x.png」にします。

また、レイヤー名を「,」で区切ると、複数のファイル、異なる設定の画像を同時に書き出せます。「btn_facebook@2x.png」を1.5倍である150%に拡大し、ファイル名に@3xを付けて同時に書き出す場合は「150% btn_facebook@3x.png,btn_facebook@2x.png」になります。

パラメーターは、相対値または px、in、cm、mm などの単位が指定できます。JPEG形式の場合は画質も指定でき、「.jpg5」「.jpeg50%」と指定すると50%の画質で書き出されます。

なお、画像アセットの生成を使って拡大・縮小した画像を書き出す場合は、なるべくシェイプレイヤーなどの劣化しないデータ形式で作業するようにしましょう。

レイヤーマスクを利用して画像サイズを統一して書き出す

TwitterとFacebookのアイコンを同じ30px四方で配置すると、塗り面積が広いFacebookのアイコンがTwitterよりも大きく見えてしまいます。そこで、Photoshopのデザイン上はTwitterのアイコンをやや大きめの34px×28pxにして、見た目の大きさを揃えます。

このままアイコンのサイズに沿って画像を書き出すと、2つの画像サイズがバラバラになってしまうので、実装しやすいようにアイコンの周囲の余白を含めた同じ大きさで書き出します。書き出しサイズはFacebookより大きめにしたTwitterアイコンに合わせて36×36pxとします。

Twitterのシェイプレイヤーを選択した状態で［M］キーで選択範囲ツールに切り替え、［shift］キーを押しながらドラックして36×36pxの正方形の選択範囲を作成します。Twitterのアイコンが中央に来るように選択範囲の位置を調整し、レイヤーパネルの［マスクを追加］でレイヤーマスクを適用します。

フォルダに対してもレイヤーマスクによるサイズ指定やファイル名の指定は有効です。フォルダ自体にファイル名の指定がなければ、フォルダ内に含まれるレイヤーの指定が優先されます。例えばフォルダの透明度を30%に設定し、その中に透明度100%のレイヤーがある場合、ファイル名が指定されているレイヤーの透明度が優先され、透明度100%のパーツ画像が書き出されます。