Creative Cloud

アプリとWebのレイアウトをすばやく作成

Comp CCでアプリのモックアップを作成し、Photoshopのアートボードでレイアウトを確認する方法を説明します。次に、アセットをモバイルアプリ開発者に渡す前にiOSデバイスでアプリデザインをプレビューします (視聴する、1分)
チュートリアルも参照して実際にお試しください(体験する、3分)

作者Salima Jiwani

アプリとWebのレイアウトをすばやく作成

3分

必要なもの

このチュートリアルを行うには、Photoshop CC 2015が必要です。

  iPad、iPad Pro、iPhone版 Comp CC

  iPad、iPad Pro、iPhone版 Preview CC

手順1/8(オプション)

Creative Cloud Librariesにサンプルアセットをコピーする

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

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

手順2/8  

レイアウトのアイデアをComp CCで作る

Comp CCを開き、「+」をタップして新規プロジェクトを作成し、プロジェクトに応じた形式を選択します。このチュートリアルではiPhone 6形式を選択します。 

長方形を描画し、ナビゲーションバーとフッターを作成します。画像を挿入する箇所にXを描画します。ヘッドラインのテキストを作成するには、長方形とドット(.)を描画します。複数行のテキストを作成するには、複数の線を引いて、ドット(.)を描画します。描画ジェスチャーに従って、描画内容がオブジェクトに変換されます。

ヒント:画面上部にある歯車アイコンをタップすると、描画ジェスチャのヘルプが表示されます。

手順3/8

アセットを配置する

ナビゲーションバーをタップして、画面下部のカラーアイコンをタップします。ピッカーまたはアドベンチャーガイドライブラリからカラーを選択し、外側をタップします。フッターにもカラーを追加します。

画像プレースホルダーをタップし、画面下部のグラフィックアイコンをタップします。「マイライブラリ」をタップしてアドベンチャーガイドモバイルアプリライブラリを選択します。写真「_riders」をタップしてプレースホルダーにドロップします。必要な場合は、写真をダブルタップし、ピンチジェスチャを使用して写真のサイズを変更します。

 

手順4/8

テキストとアイコンを追加する

画面上部のグラフィックスアイコンをタップして、アドベンチャーガイドライブラリを選択します。白いテントのアイコンをタップして、レイアウトに追加します。ハンドルをドラッグしてそのサイズを変更し、レイアウトの所定の位置にドラッグします。残りのアイコンを追加します。

画面上部のテキストアイコンをタップし、プレースホルダーテキストを追加する「ヘッドライン」をタップします。メニューの外部をタップして、ヘッドラインを上部のナビゲーションバーに配置し、カラーを変更します。画面下部のテキストアイコンをタップし、フォント、サイズ、整列、間隔などの属性を調整します。

準備が整ったら、デスクトップのPhotoshopで作業を続行します。画面上部の送信アイコンをタップして、「Photoshop CCに送信」を選択します。

手順5/8

アプリまたはWebサイトの画面を作成する

モバイルアプリやWebサイト用の画面をデザインするためのテンプレートとしてCompのレイアウトを使用します。Photoshopが開いている場合、編集可能なPhotoshopドキュメントとしてCompが開きます。

Photoshop CC 2015で導入されたPhotoshopアートボードを使用すれば、サイズの異なる複数のデザインを作成し、それをPhotoshopの単一ドキュメント内で見ることができます。

Compを確定した後、レイヤーパレットですべてのレイヤーを選択します。レイヤーパネルのオプションから「レイヤーからのアートボード」を選択します。アートボードに「Biking」という名前を付けます。

手順6/8

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

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

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

手順7/8

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

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

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

 

 

手順8/8

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

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

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

 

 

Salima Jiwani
Salimaは、デザインの専門知識を備えた稀有な開発者です。彼女は、美術学修士号を取得してサヴァンナ芸術工科大学を卒業し、インタラクティブデザイナーとしてキャリアを開始しました。その後、様々なクライアントで約10年間、ActionScriptのプログラミングとFlex開発を経験し、タッチスクリーンアプリケーションをはじめ、動的なデータ駆動型マイクロサイトやゲームを構築しました。