Comp CCでアプリのモックアップを作成し、Photoshopのアートボードでレイアウトを確認する方法を説明します。次に、アセットをモバイルアプリ開発者に渡す前にiOSデバイスでアプリデザインをプレビューします。
このチュートリアルをおこなうには、Photoshop CC 2015が必要です。
（オプション）Creative Cloudライブラリにサンプルアセットをコピーする
このアプリのモックアップを実際に作ってみることができます。アドベンチャーガイドモバイルアプリライブラリのアセットを使用してください。「Creative Cloudへ保存」 をクリックして、ご自分のアカウントにライブラリをコピーすれば、Comp CCやPhotoshopから直接アセットにアクセスできます。
注意：ライブラリを保存するには、Creative Cloudアカウントにログインする必要があります。
レイアウトのアイデアをComp CCで作る
Comp CCを開き、「+」をタップして新規プロジェクトを作成し、プロジェクトに応じた形式を選択します。このチュートリアルではiPhone 6形式を選択します。
長方形を描画し、ナビゲーションバーとフッターを作成します。画像を挿入する箇所にXを描画します。ヘッドラインのテキストを作成するには、長方形とドット（.）を描画します。複数行のテキストを作成するには、複数の線を引いて、ドット（.）を描画します。描画ジェスチャーに従って、描画内容がオブジェクトに変換されます。
ヒント：画面上部にある歯車アイコンをタップすると、描画ジェスチャのヘルプが表示されます。
アセットを配置する
ナビゲーションバーをタップして、画面下部のカラーアイコンをタップします。ピッカーまたはアドベンチャーガイドライブラリからカラーを選択し、外側をタップします。フッターにもカラーを追加します。
画像プレースホルダーをタップし、画面下部のグラフィックアイコンをタップします。「マイライブラリ」をタップしてアドベンチャーガイドモバイルアプリライブラリを選択します。写真「_riders」をタップしてプレースホルダーにドロップします。必要な場合は、写真をダブルタップし、ピンチジェスチャを使用して写真のサイズを変更します。
テキストとアイコンを追加する
画面上部のグラフィックスアイコンをタップして、アドベンチャーガイドライブラリを選択します。白いテントのアイコンをタップして、レイアウトに追加します。ハンドルをドラッグしてそのサイズを変更し、レイアウトの所定の位置にドラッグします。残りのアイコンを追加します。
画面上部のテキスト アイコンをタップし、プレースホルダーテキストを追加する「ヘッドライン」をタップします。メニューの外部をタップして、ヘッドラインを上部のナビゲーションバーに配置し、カラーを変更します。画面下部のテキストアイコンをタップし、フォント、サイズ、整列、間隔などの属性を調整します。
準備が整ったら、デスクトップ版のPhotoshopで作業を続行します。画面上部の送信アイコンをタップして、「Photoshop CCに送信」を選択します。
アプリまたはwebサイトの画面を作成する
モバイルアプリやwebサイト用の画面をデザインするためのテンプレートとしてCompのレイアウトを使用します。Photoshopが開いている場合、編集可能なPhotoshopドキュメントとしてCompが開きます。
Photoshop CC 2015で導入されたPhotoshopアートボードを使用すれば、サイズの異なる複数のデザインを作成し、それをPhotoshopの単一ドキュメント内で見ることができます。
Compを確定した後、レイヤーパレットですべてのレイヤーを選択します。レイヤーパネルのオプションから「レイヤーからのアートボード」を選択します。アートボードに「Biking」という名前を付けます。
アートボードを使用してアプリ画面のモックアップを作成する
レイヤーパネルのオプションから「アートボードを複製」を選択してアートボードを複製し、アートボードに「Camping」という名前を付けます。複製をドラッグしてカンバスに配置します。複製を編集して、アプリの「Camping」画面の新しいアートボードを作成します。この手順を繰り返して、アプリの各画面の異なる状態を表すアートボードを作成します。
ヒント：アートボードを使用すると、コンテンツを複製して別の面間で再利用したり、アプリを通じてユーザーフローをレビューしたりすることが簡単におこなえます。PSDファイルをダウンロードして、このチュートリアルの完成したアートボードをご覧ください。
モバイルデバイスでアプリをプレビューする
Photoshopの関連アプリであるAdobe Preview CCを使用すると、モバイルアプリまたはwebサイトのデザインのプレビューをiPhoneやiPadでリアルタイムで確認することができます。モバイルデバイス上でPreview CCを起動し、USBまたはWi-Fiを使用してデバイスを接続します。デバイスプレビュー アイコンをクリックしてパネルを開き、デバイスが接続するのを待ちます。
各デバイス用にサイズ調整されたアートボードが検出され、表示されます。プレビューはライブであるため、Photoshopでアプリデザインを変更すると、その変更内容がデバイスに自動的に表示されます。Preview CCで別のアートボードに切り替えるには、スワイプします。
プロダクション用のデザインを書き出す
満足のいくアプリデザインが完成したら、ファイル／書き出し／書き出し形式を選択し、PNGを選択して、開発者に渡すアートボードをすべて書き出します。
ヒント：単一のアートボードをPNG、JPEG、SVGまたはGIF形式で簡単に書き出すことができます。レイヤーパネルでアートボードを選択します。右クリックして、「PNGとしてクイック書き出し」を選択するか、別の書き出し設定を使用する場合は「書き出し形式」を選択します。
