印刷、web、モバイル用のレイアウトがひらめいたら、iPadやiPhoneでAdobe Comp CCを開き、その場でカタチにしましょう。Compがあれば外出先でデザインカンプを作成し、デスクトップで仕上げることができます。
「Typekit」の名称は「Adobe Fonts」に変更されました。
形式を選択する
Comp CCを開き、「+」をタップして新規プロジェクトを作成し、web、モバイルまたは印刷プロジェクトに応じた形式を選択します。このチュートリアルでは、「iPad（縦）」を選択します。
このチュートリアルに従ってレイアウトを実際に作成する場合は、Pigeon Scooter Libraryのアセットをご利用ください。「Creative Cloudへ保存」をクリックして、ご自分のアカウントにライブラリをコピーすれば、Comp CCから直接アセットにアクセスできます。
注意：アセットをコピーするには、自分のAdobe IDでCreative Cloudアカウントにログインする必要があります。
ガイドとマージンを設定する
設定／グリッドとガイド／追加の順にタップします。
画面右下にあるグリッドレイヤーの「+」アイコンをタップして、レイアウトに列を追加します。
ガイド（T定規）アイコンをタップし、「水平ガイドを追加」を選択します。画面上部に新しいガイドが表示されます。新しいガイドをページの上または下にドラッグして配置します。このガイドは「x」をタップすれば消去できます。
「完了」をタップして、レイアウトに戻ります。
レイアウトを描画する
四角形を描き、そのまま1つの角を丸く囲むと、角丸長方形が作成されます。Xを描くと、画像のプレースホルダが作成されます。描画ジェスチャーに従って、描画内容がオブジェクトに変換されます。
テキスト行を作成するには、線とドット（.）を描きます。テキスト行を増やすには、+を描きます。テキストブロックを作成するには、複数の線を引いて、ドット（.）を描きます。
ヒント：設定アイコン／描画ジェスチャーのヘルプをタップすると、オブジェクトの描画方法について参照できます。
複数のオブジェクトを選択し、揃える
画像のプレースホルダーをタップし、画面下部の詳細アイコンをタップして、複数を選択をタップします。残りの2つの画像プレースホルダーをタップして、選択に加え、「完了」をクリックします。
画面下部の「整列」アイコンをタップして、「サイズを合わせる／幅と高さを一致」アイコンの順にタップします。
テキストを編集する
ページ上部のテキストボックスをダブルタップして、「INTRODUCING PIGEON」と入力します。画面をタップして、キーボードを閉じます。テキストオブジェクトは選択されたままのはずですが、画面をタップしてキーボードを終了した場合には、テキストボックスをタップして再度選択します。
画面下部のテキスト形式アイコンをタップして、文字を中央揃えにします。「フォント」をタップして、Typekitのフォント一覧から選択します。
カラーアイコンをタップし、文字色を白に変更します。レイアウトの一番上にある長方形を選択して、色をオレンジに変更します。
ヒント：フォントメニューの「追加」をタップすれば、1000種類以上のTypekitフォントサービスが利用できます。Creative Cloudメンバーシップに含まれるサービスです。デスクトップでCreative Cloudにログインすると、フォントがデスクトップに同期され、どちらでも利用できます。
テキストスタイルをコピーする
設定したテキストスタイルは、レイアウト上の別のテキストブロックにコピーできます。ページ下部にある複数のテキストブロックを選択します。
スタイルを適用済みのテキスト上に円とその中にドットを描きます。選択したすべてのテキストにテキストスタイルが適用されます。
ヒント：指2本でスワイプすると取り消すことができ、指3本で左または右にドラッグすると、そのドキュメントでの操作履歴をさかのぼる、または先に進めることができます。
Creative Cloudライブラリからグラフィックを追加する
画像プレースホルダーをタップし、画面下部のグラフィックアイコンをタップします。
Creative Cloudライブラリにあるフル解像度の画像を使用するには、「マイライブラリ」から「Pigeon Scooter」ライブラリを選択します。キックスケーターに乗った男性の画像をタップし、プレースホルダーのフレームに入れます。この操作を繰り返して、画像を追加します。
ベクターグラフィックも追加できます。画面の上部にあるグラフィックアイコンをタップします。Pigeon Scooterライブラリから、Pigeonロゴ、再生ボタン、白いベクターアイコンなどを追加します。
Photoshop Fixで画像を編集する
Adobe CreativeSyncにより、CompはPhotoshop MixやPhotoshop Fixなど、他のモバイルアプリとシームレスに連携しているため、レタッチや合成した画像は、Compのレイアウトでも即座に更新されます。
キックスケーターに乗った人の写真をタップします。次に、「アプリ間で編集」アイコンをタップします。「リンク解除」を選択して、ライブラリの元のグラフィックを置き換えずにグラフィックを編集します。「Photoshop Fix で修復」を選択します。
スポット修復ツールを使用して、写真の上部から小さなキズを取り除きます。最後に、画面の一番上にある「保存して Adobe Comp に戻る」をタップします。
オブジェクトをグループ化する
レイアウトの下部にある複数のテキストブロック上で、らせん形（渦巻き形）を描き、広い範囲を選択します。
すべてのテキストブロックが選択されたら、グループアイコンをタップします。複数のテキストブロックがグループ化され、1つの選択範囲に含まれるようになりました。グループ化されたすべてのテキストを移動し、ページの中央に配置します。
オブジェクトのグループ化を解除するには、グループ解除アイコンをタップします。
デスクトップに送る
レイアウトはその種類に応じて様々なデスクトップアプリに送信できます。
- Illustratorに送信
- Photoshopに送信
- InDesignに送信
- Museに送信
Behanceで制作中のレイアウトを共有することもできます。
