Photoshop アートボード
同一キャンバス上の異なるデバイス向けアートボード

Web デザイナーや UX デザイナーの方は、複数デバイス向けに Web サイトやアプリをデザインする機会がますます増えていることでしょう。アートボードは、さまざまなデバイスやスクリーン用にデザインをレイアウトできる無限のキャンバスが用意され、デザインプロセスを効率的に実行できます。アートボードを作成するときは、幅広いプリセットサイズから選択したり、独自のカスタムアートボードサイズを定義したりできます。

通常、1 つのスクリーンサイズ向けにデザインするときでも、アートボードは役に立ちます。たとえば、Web サイトをデザインするとき、アートボードを使用して、状況に応じて異なるページを並べてデザインを表示できます。

注意:

アートボードは RGB カラーモードおよび高度 GPU 描画モードに最適化されています。

では、アートボードとは何でしょうか。

アートボードは、特殊なタイプのレイヤーグループと考えることができます。アートボードは、含まれた要素の内容を境界にクリップします。アートボードの要素の階層は、レイヤーおよびレイヤーグループとともにレイヤーパネルに表示されます。アートボードには、レイヤーおよびレイヤーグループを含めることができますが、他のアートボードを含めることはできません。

アートボードは、視覚的にドキュメント内の個々のキャンバスとして機能します。アートボード内に含まれていないドキュメントのレイヤーは、レイヤーパネルの最上部でグループ化され、アートボードでクリップされていない状態のままとなります。

アートボードの環境設定

アートボードの外観をカスタマイズするには、環境設定/インターフェイス/アピアランス/アートボードを選択します。アートボードマットカラーを選択するオプション、およびアートボード境界線の表示と非表示を切り替えるオプションがあります。

Photoshop アートボードの環境設定

アートボードドキュメントの作成

  1. Photoshop で、ファイル/新規を選択します。
  2. 新規ダイアログボックスで、ドキュメントの名前を指定します。たとえば、iPhone website などを指定します。
  3. ドキュメントの種類ポップアップメニューからアートボードを選択します。
  4. 35 種類以上のアートボードサイズプリセットの中からいずれかを選択します。
Photoshop アートボードのサイズ
アートボードサイズプリセットの豊富な選択肢

  1. アートボードにデザイン要素を追加していきます。アートボードには、スマートオブジェクト、レイヤー、レイヤーグループなどを追加できます。

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

標準の Photoshop ドキュメントの場合、すばやくアートボードドキュメントに変換できます。

  1. ドキュメントで 1 つ以上のレイヤーグループまたはレイヤーを選択します。
  2. 選択を右クリックし、レイヤーからのアートボードまたはグループからのアートボードを選択します。

アートボードを現在のドキュメントに追加する

  1. ツールパネルで アイコンをクリックし、アートボードツールを選択します。
  1. キャンバスにアートボードを描画します。
  2. 必要に応じてアートボードのサイズを変更します。ツールオプションバーのサイズポップアップメニューからプリセットサイズを選択します。または、アートボードをカスタムサイズのままにしておくこともできます。
Photoshop アートボードのサイズ変更
アートボードのサイズ変更

  1. アートボードを好きな名前に変更できます。次のいずれかの操作を行います。
    1. アートボードを選択した状態で、レイヤー/アートボードの名前を変更を選択します。
    2. アートボードの新しい名前を入力し、Return キーを押します。
  2. アートボードにデザイン要素を追加していきます。アートボードには、スマートオブジェクト、レイヤー、レイヤーグループなどを追加できます。

新規アートボードをドキュメントに手早く追加する

現在ドキュメントにあるアートボードの横に表示されるプラス(+)アイコンをクリックすると、ドキュメントにアートボードを追加できます。これらのプラス(+)アイコンは、カンバスにアートボードを追加できる位置で表示されます。アートボードをその内容と共に複製するには、Option/Alt キーを押しながらプラス(+)アイコンをクリックします。

  1. アートボードを選択します。
  2. アートボードの横のプラス(+)アイコンをクリックします。アートボードがプラス(+)アイコンの方向でドキュメントに追加されます。
Photoshop プラスアイコンを使用してアートボードを追加
プラスアイコンを使用してアートボードを追加する

注意:

Option+Alt キーを押してプラス(+)アイコンをクリックすると、現在選択されているアートボードがその内容と共に複製されます。新規アートボードが、クリックしたプラス(+)アイコンの方向に追加されます。

アートボードを使用する

アートボード背景の設定

アートボードの属性パネル(ウィンドウ/属性)の「アートボード背景色」フィールドに目的の値を設定します。アートボード背景には、「透明」を設定することもできます。

アートボード背景の設定

アートボード間での要素の移動

要素を 1 つのアートボードからキャンバス上の別のアートボードにドラッグするだけです。アートボード間で要素を移動すると、Photoshop ではアートボードの左上にある定規の原点を基準にして相対的に同じ場所に配置されます。

アートボードに要素を追加したり、移動したりすると、新しい要素はそのアートボードのレイヤーパネルの Z 列最上部に移動します。

また、いずれのアートボードにも含まれないレイヤー/要素を既存のアートボードとグループ化することもできます。キャンバス上の要素を目的のアートボードにドラッグするだけです。または、レイヤーパネルの目的のアートボードに移動します。

レイヤーまたはレイヤーグループを複製する

アートボードを含むドキュメントでレイヤーまたはレイヤーグループを複製すると、コピーしたレイヤーを配置するアートボードを選択できます。

レイヤーの複製:コピーしたレイヤーを配置するアートボードを選択

移動

アートボードまたは移動ツールを選択した状態で、アートボードのラベルをクリックして選択します。次に、キャンバス上の目的の場所に移動します。

サイズ変更

アートボードまたは移動ツールを選択した状態で、アートボードのラベルをクリックして選択します。次に、アートボードの新しいプリセットサイズをツールオプションバーから選択します。

アートボードをカスタムサイズに変更したい場合は、ハンドルを使用すれば簡単に境界線をサイズ変更できます。

グリッド

アートボードを選択し、表示/表示・非表示/グリッドを選択して、アートボード内にグリッドを表示します。

ガイド

アートボードが選択された状態で、ガイドを定規からカンバスにドラッグします。ドラッグしたガイドはアートボードとともに移動するようになります。割り当て済みガイドのあるアートボードを複製して、複製したアートボードに同じガイドを割り当てることもできます。別の方法として、表示/新規ガイドレイアウトを選択して、必要なアートボードを対象にすることもできます。ガイドオプションを設定するには、表示/表示・非表示を選択します。

Photoshop 新規ガイドレイアウトの作成
(左)新規ガイドレイアウト | (右)ガイド表示オプション

アートボードプロパティを調べる

アートボードを選択し、ウィンドウ/属性を選択して、重要なプロパティをすぐに調べます。また、属性パネル内からアートボードのサイズを変更することもできます。

アートボードのプロパティは、アートボードを選択したとき、ツールオプションバーにも表示されます。

Photoshop アートボードの属性パネル
アートボードの属性パネル

アートボード名の表示

アートボード名の表示と非表示を切り替えるには、表示/表示・非表示/アートボード名を選択します。アートボード名は、アートボードの幅で自動的に切り取られます。

アートボードによりレイヤーをフィルタリングする

レイヤーパネルで、検索ポップアップメニューからアートボードを選択します。アートボードまたはアートボード内のレイヤーを選択します。これでレイヤーパネルビューには、選択されたアートボードだけが表示されます。フルレイヤーパネルビューに戻るには、すべてのレイヤーの選択を解除するか、アートボード外で任意の対象を選択します。

アートボードの内外への自動ネストを防ぐ

イラストレーションのロックを、アートボードに割り当てて、アートボードの内外への自動ネストを無効にするか、アートボード内の特定のレイヤーに割り当てて、そのレイヤーの自動ネストを無効にします。通常の自動ネスト動作に戻すには、アートボードまたはレイヤーから自動ネストロックを削除します。

Photoshop アートボードの内外への自動ネストを防止

アートボードの位置をロック

アートボードを選択して、位置のロックを割り当てます。これで、アートボードがカンバス上のその位置に固定されますが、要素の追加、アートボード内への移動、削除は通常どおりに行えます。

Photoshop 位置のロック

名前の変更

レイヤーパネルのアートボード名をダブルクリックし、新しい名前を入力します。または、レイヤー/アートボードの名前の変更コマンドを使用します。

アートボードのディザ合成

アートボードを構成要素にすばやくディザ合成できます。アートボードを選択した状態で、レイヤー/アートボードのグループ解除を選択します。アートボードがディザ合成され、その構成要素はレイヤーパネルの 1 つ上のレベルにすべて移動されます。ドキュメントに最後に残ったアートボードをディザ合成またはグループ解除すると、ドキュメントはアートボードなしのドキュメントになります。

アートボードを書き出す

アートボードを画像アセットとして書き出す

アートボードをレイヤーパネルから直接 JPEG、GIF、PNG、PNG-8、または SVG 画像アセットとして書き出すことができます。

詳しくは、アートボード、レイヤーなどの書き出しを参照してください。

アートボードを PDF として書き出す

アートボードを PDF ドキュメントとして書き出せます。次の手順に従います。

  1. Photoshop で、ファイル/書き出し/アートボードから PDF を選択します。
  2. アートボードから PDF ダイアログで、次の操作を行います。
    • 生成した PDF ドキュメントの保存先を選択します。
    • 生成した PDF ドキュメントのファイル名プレフィックスを指定します。Campaign_insurance などです。
    • アートボードの内容だけを書き出すか、アートボードが重なっている領域の内容も書き出すかを指定します。
    • すべてのアートボードを書き出すか、現在選択されているもののみを書き出すかを指定します。
    • アートボードと共に、アートボードの背景を書き出すかどうかも指定します。
    • 現在のドキュメント内のすべてのアートボードに対して、1 つの PDF を生成するか、アートボードごとに 1 つの PDF ドキュメントを生成するかを指定します。複数の PDF ドキュメントを生成することを選択した場合、そのすべてのドキュメントに、以前指定したファイル名プレフィックスが付加されます。
    • 書き出した PDF ドキュメントのエンコーディング(ZIP または JPEG)を指定します。JPEG を指定した場合は、品質設定(0~12)も指定します。
    • 書き出した PDF ドキュメントに International Color Consortium(ICC)プロファイルを含めるかどうかを指定します。ICC プロファイルは、カラー入力または出力デバイスを特徴付けるデータで構成されています。
    • 書き出されたアートボードと共に、アートボードの名前も書き出すかどうかを指定します。この設定の選択時に、カスタムフォント、フォントサイズ、フォントの色、カンバス拡張カラーを指定できます。
  3. 「実行」をクリックします。Photoshop によって、PDF ドキュメントが生成されます。

アートボードをファイルとして書き出す

アートボードは、別のファイルとして書き出すことができます。次の手順に従います。

  1. Photoshop で、ファイル/書き出し/アートボードからファイルを選択します。
  2. アートボードからファイルダイアログで、次の操作を行います。
    • 生成したファイルの保存先を選択します。
    • ファイル名プレフィックスを指定します。
    • アートボードコンテンツのみを書き出すか、重なる領域も含めるかを指定します。
    • すべてのアートボードを書き出すか、現在選択されているもののみを書き出すかを指定します。
    • アートボードと共に、アートボードの背景を書き出すかどうかも指定します。
    • 書き出すファイル形式を選択します。書き出すファイル形式は、BMP、JPEG、PDF、PSD、Targa、TIFF、PNG-8、PNG-24 から選択できます。
    • 選択したファイル形式の書き出しオプションを指定します。
      • 書き出されたアートボードと共に、アートボードの名前も書き出すかどうかを指定します。この設定の選択時に、カスタムフォント、フォントサイズ、フォントの色、カンバス拡張カラーを指定できます。
  3. 「実行」をクリックします。Photoshop で、アートボードは選択した形式のファイルとして書き出されます。

デバイスプレビューと Preview CC 関連アプリ

Photoshop 対象デバイスでのデザインのプレビュー

Photoshop のデバイスプレビュー機能および Preview CC 関連アプリを使用すれば、対象の iOS デバイスでデザインをすばやくプレビューできます。Preview CC は USB ポートまたは Wi-Fi を経由して Photoshop に接続し、デザインのライブプレビューを描画します。デザインを変更すると自動的にデバイスに送信されるので、プレビューが可能となります。

アートボード付きのドキュメントの場合、デバイスプレビューは、アートボードのサイズと位置を接続されている iOS デバイスのサイズに合わせることで正しいアートボードを表示しようと試みます。または、ナビゲーションバーを使用して、デバイスで特定のアートボードをプレビュー表示したり、Photoshop レイヤーパネルに表示される順序でアートボードをスワイプできます。

デバイスプレビューおよび Preview CC について詳しくは、次を参照してください。

FAQ

アートボード内にアートボードを追加できますか。

いいえ。アートボードのネストは現在サポートされていません。

アートボードとはレイヤーの一種ですか。

アートボードは、特殊なタイプのレイヤーグループと考えることができます。アートボードは、レイヤーおよびレイヤーグループのように Photoshop のレイヤーパネルにリストされます。

標準の Photoshop ドキュメントからアートボードを作成できますか。

はい。レイヤーからのアートボード機能を使用します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー