Photoshop使いなら知っておきたい！新機能アートボードを解説

Photoshop CC 2015から、アートボードが使えるようになりました。Illustratorユーザーには馴染みの深いアートボードですが、Photoshopで使えることにどんなメリットがあるのでしょうか？アートボードの解説と基本的な使い方についてご説明します。

アートボードとは？

アートボードとは、Photoshop CC 2015から追加された新機能のこと。同じAdobe製品のIllustrator（イラストレーター）ではお馴染みの機能だったのですが、満を持してPhotoshopにも搭載されたのです。

アートボードとは何か？というと、複数のレイヤーをまとめたグループのようなものです。具体的な利用シーンを見ていった方が、わかりやすいかもしれません。ウェブページのデザインを例に出すと、各デバイスのデザインを同一ファイルにまとめておくことができます。また、バナーなどのデザイン要素をまとめて制作、管理することも可能なんです。デザインの効率化をしてくれる、とっても便利な機能なんですね。

アートボードの使い方

ここからはアートボードの基本的な使い方を解説していきます。まずは、アートボードの作り方から。

アートボードを作成する

アートボードを新規作成する

アートボードを作るには、「ファイル」から「新規」を選択してください（Cmd+NでもOKです）。新規ファイルの作成ダイアログが表示されたでしょうか。

表示されたダイアログの上部、「ドキュメントの種類」のプルダウンメニューから「アートボード」を選択します。作成するアートボードのサイズなどを選択・入力して、「OK」をクリック。アートボートが作成できました。

次に、一つのキャンバス上に複数のアートボードを作成してみましょう。画面左側のツールバーの一番上に移動ツールがありますよね。この移動ツールを長押しすると、アートボードツールがあらわれました。

アートボードツールを選択した状態で、オプションツールバーを見てください。さきほどのダイアログにあった、アートボードのサイズなどの選択項目が表示されていますね。

キャンバスに追加するアートボードのサイズを選択し、「新しいアートボードを追加」ボタンを選択。キャンバス上の任意の場所でクリックしてください。新たにアートボードが追加できました。

既存ドキュメントをアートボードに変換する

既存のPhotoshopドキュメントを、アートボードに変換することも可能です。

まず、既存のPhotoshopドキュメントをひらきます。画面右下のレイヤーパネルから、アートボードに変換したいレイヤーを選択。右クリックで表示されたメニューから、「レイヤーからのアートボード」もしくは「グループからのアートボード」をクリックしてください。

アートボードの作成画面が表示されました。サイズを指定して、「OK」をクリック。これでアートボードへの変換が完了です。

既存ドキュメントにアートボードを追加する

次に、既存のPhotoshopドキュメントにアートボードを追加してみましょう。

画面左側のツールバーから、アートボードツールを選択します。先ほどと同様、オプションツールバーから追加をしたいアートボードのサイズを指定して「新しいアートボードを追加」ボタンを選択。その状態で、キャンバス上の任意を箇所をクリックしてください。アートボードが追加されたでしょうか。

アートボードのサイズを変更する

アートボードはサイズを変更することも可能です。

まずは、アートボードツールを選択してください。対象のアートボードを選択した状態で、先ほどのオプションツールバーでサイズを変更すればOK。もしくは、対象のアートボード四隅にあるハンドルをドラッグしてもOKです。

アートボードを削除する

アートボードの削除は、レイヤーパネルから行います。削除したいアートボードを選択して、右クリックします。「アートボードを削除」を選択すれば、該当するアートボードが削除されます。

アートボードを削除する際、アートボードのみを削除するのか、アートボードの中身もまとめて削除するのか選択できます。アートボードのみ削除した場合は、そこに含まれていたレイヤーはそのまま残ります。

アートボードを書き出す

アートボードは、通常のドキュメントと同じように書き出しを行うことができます。画面上部のメニューから、「ファイル」-「書き出し」の順に選択して、フォーマットを選択してください。PDFとしての書き出しも可能です。

アートボードの活用方法

ここからはアートボードをもっと便利に使うための活用法を3つ、ご紹介します。

アートボード間を移動する

複数のアートボードを使っていると、アートボード間を素早く移動したい場合があります。アートボード間の移動は、画面右下のレイヤーパネルから行います。Optionキーを押しながら、移動先のアートボードをクリックしてください。目的のアートボードまで、すぐにスクロールさせられます。

アートボードをまとめて開閉する

こちらもレイヤーパネルで使うことのできる機能です。最初に説明した通り、アートボードはレイヤーのグループのようなもの。そのため、レイヤーパネルが混雑しがちなんです。Ctrl（Command）キーを押しながらレイヤーパネル内をクリックすることで、全てのアートボードをまとめて開閉することができます。

PreviewCCと連携する

Photoshopと同じく、AdobeのソフトであるPreviewCC。ウェブサイトやアプリケーションのデザインを、実機でプレビューすることができます。デバイスに最適なサイズのアートボードを自動で選んでくれるので、スピーディかつ効率的にプレビューができますね。

あとがき

Photoshopでもアートボード機能が使えるようになり、Web制作を中心に、より効率的なデザインができるようになるでしょう。