アートボード

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

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

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

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

アートボードの環境設定

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

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

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

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

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

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

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

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

1. ツールパネルで アイコンをクリックし、アートボードツールを選択します。

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

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

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

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

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

アートボードを使用する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アートボードを書き出す

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

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

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

アートボードを 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 で、アートボードは選択した形式のファイルとして書き出されます。

FAQ