Comp CCでアプリのモックアップを作成し、Photoshopのアートボードでレイアウトを確認する方法を説明します。次に、アセットをモバイルアプリ開発者に渡す前にiOSデバイスでアプリデザインをプレビューします。
このチュートリアルをおこなうには、Photoshop CC 2015が必要です。

(オプション)Creative Cloudライブラリにサンプルアセットをコピーする

このアプリのモックアップを実際に作ってみることができます。アドベンチャーガイドモバイルアプリライブラリのアセットを使用してください。「Creative Cloudへ保存」 をクリックして、ご自分のアカウントにライブラリをコピーすれば、Comp CCやPhotoshopから直接アセットにアクセスできます。

注意:ライブラリを保存するには、Creative Cloudアカウントにログインする必要があります。お持ちでない場合はAdobe IDを取得してください。

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」という名前を付けます。 

Photoshopでのアートボード

アートボードを使用してアプリ画面のモックアップを作成する

レイヤーパネルのオプションから「アートボードを複製」を選択してアートボードを複製し、アートボードに「Camping」という名前を付けます。複製をドラッグしてカンバスに配置します。複製を編集して、アプリの「Camping」画面の新しいアートボードを作成します。この手順を繰り返して、アプリの各画面の異なる状態を表すアートボードを作成します。

ヒント:アートボードを使用すると、コンテンツを複製して別の面間で再利用したり、アプリを通じてユーザーフローをレビューしたりすることが簡単におこなえます。PSDファイルをダウンロードして、このチュートリアルの完成したアートボードをご覧ください。

アートボードを使用してアプリ画面のモックアップを作成する

モバイルデバイスでアプリをプレビューする

Photoshopの関連アプリであるAdobe Preview CCを使用すると、モバイルアプリまたはwebサイトのデザインのプレビューをiPhoneやiPadでリアルタイムで確認することができます。モバイルデバイス上でPreview CCを起動し、USBまたはWi-Fiを使用してデバイスを接続します。デバイスプレビュー アイコンをクリックしてパネルを開き、デバイスが接続するのを待ちます。

各デバイス用にサイズ調整されたアートボードが検出され、表示されます。プレビューはライブであるため、Photoshopでアプリデザインを変更すると、その変更内容がデバイスに自動的に表示されます。Preview CCで別のアートボードに切り替えるには、スワイプします。

デザインの書き出し

プロダクション用のデザインを書き出す

満足のいくアプリデザインが完成したら、ファイル/書き出し/書き出し形式を選択し、PNGを選択して、開発者に渡すアートボードをすべて書き出します。

ヒント:単一のアートボードをPNG、JPEG、SVGまたはGIF形式で簡単に書き出すことができます。レイヤーパネルでアートボードを選択します。右クリックして、「PNGとしてクイック書き出し」を選択するか、別の書き出し設定を使用する場合は「書き出し形式」を選択します。

アプリのプレビュー
01/11/2018

提供元:Salima Jiwani

このページは役に立ちましたか。
はい
いいえ