はい、承知いたしました。Photoshopのアートボードのサイズ変更方法について、約5000語の詳細な解説記事を作成します。
Photoshop アートボードのサイズ変更方法を徹底解説
はじめに:デザインワークフローにおけるアートボードの重要性とサイズ変更の必要性
現代のデジタルデザインでは、多様なデバイスサイズ、画面解像度、あるいは印刷物の仕様に対応する必要があります。かつては一つのPhotoshopドキュメントが一つのデザインに対応するのが一般的でしたが、複数のデザインバリエーションや異なる画面サイズ向けのレイアウトを効率的に管理するために導入されたのが「アートボード」機能です。
アートボードは、一つのPhotoshopドキュメント内に複数の独立したキャンバス領域を作成できる画期的な機能です。これにより、ウェブサイトのデスクトップ版、タブレット版、スマートフォン版のデザインを一つのファイルで管理したり、iOS/Androidアプリの異なる画面デザインをまとめて扱ったり、あるいはバナー広告の複数のサイズ違いを効率的に作成したりすることが可能になりました。
しかし、デザインのプロジェクトは常に変化します。要件の変更、クライアントからのフィードバック、新しいデバイスサイズの登場など、様々な理由で既に作成したアートボードのサイズを変更する必要が出てきます。アートボードのサイズ変更は、単に数値を変更するだけでなく、内部のコンテンツ(レイヤーやオブジェクト)がどのように扱われるか、アンカーポイントがどのように機能するかなど、いくつかの重要な考慮事項があります。
本記事では、Photoshopでアートボードのサイズを変更するためのあらゆる方法を、それぞれの特徴、利点、注意点を含めて徹底的に解説します。初心者の方でも理解できるよう、基本的な手順から応用的な設定、よくある疑問やトラブルシューティングまで、約5000語にわたって網羅的に説明します。この記事を読めば、Photoshopのアートボードサイズ変更に関するあらゆる疑問が解消され、より効率的で柔軟なデザインワークフローを確立できるようになるでしょう。
第1部:Photoshopのアートボードとは何か?なぜサイズ変更が必要なのか?
1.1 Photoshopのアートボードとは?
Photoshopのアートボードは、ドキュメントウィンドウ内に作成される、個別のデザイン領域です。それぞれの領域は独立したキャンバスとして機能し、独自のサイズ、位置、背景を持つことができます。アートボードは、レイヤーパネル上では特別な「アートボードグループ」として表示され、その中にデザイン要素であるレイヤーやレイヤーグループが格納されます。
アートボードを使用する主な利点は以下の通りです。
- 効率的な管理: 関連する複数のデザイン(例: 同一ウェブサイトの異なるページ、同一アプリの異なる画面、同一キャンペーンの異なるサイズのバナー)を一つのファイルで管理できます。
- 柔軟なエクスポート: 各アートボードを個別の画像ファイルとして簡単にエクスポートできます。
- 整理されたレイヤーパネル: 各アートボード内のレイヤーがアートボードグループの下に整理されるため、複雑なデザインでもレイヤー管理がしやすくなります。
- デバイスやサイズの対応: スマートフォン、タブレット、PCなど、異なるデバイス向けのレイアウトを並行して作成・比較できます。
アートボードは、新規ドキュメント作成時に「アートボード」オプションを選択するか、既存のドキュメントにアートボードを追加することで利用可能になります。
1.2 アートボードのサイズ変更が必要になるケース
デザインプロジェクトの進行中にアートボードのサイズを変更する必要が生じるのは、様々な状況が考えられます。一般的なケースをいくつか挙げてみましょう。
- 要件の変更: クライアントやプロジェクトの仕様変更により、デザインの対象となるデバイスサイズや印刷物の寸法が変わった場合。例えば、特定のスマートフォンモデル向けのデザインを別のモデル向けに変更する必要があるなど。
- デザインの調整: デザインを進める中で、要素を追加するスペースが足りなくなった、あるいは要素を整理してアートボードをコンパクトにしたい場合。デザインに余白(パディング)を追加したい、または減らしたい場合など。
- バリエーションの作成: 既存のデザインをベースに、異なるサイズのアートボードでバリエーションを作成する場合。例えば、ウェブサイトのヒーローイメージを複数のバナーサイズに展開する場合など。
- エクスポートの準備: 特定の寸法に合わせて正確なサイズのアートボードを作成し、書き出し準備を整える場合。
- プロトタイピング: インタラクティブなプロトタイプ作成ツール(例: Adobe XD、Figma)に連携させるために、アートボードサイズを調整する場合。
これらのケースに対応するためには、アートボードのサイズを正確かつ柔軟に変更できるスキルが不可欠です。
第2部:アートボードのサイズ変更の基本的な方法
Photoshopでアートボードのサイズを変更するには、主に以下の2つの方法があります。
- プロパティパネルを使用する方法: 正確な数値を入力してサイズを変更したい場合に最適です。
- アートボードツールを使用する方法: ハンドルをドラッグしたり、オプションバーで数値を入力したりして、直感的にサイズを変更したい場合に適しています。
これらの方法に加えて、アートボードのサイズ変更時にコンテンツ(内部のレイヤーやオブジェクト)を一緒に拡大・縮小するかどうか、また、サイズ変更の基準となるアンカーポイントを設定する方法についても詳しく解説します。
2.1 方法1:プロパティパネルを使用したサイズ変更
プロパティパネルは、現在選択されているアートボードやレイヤー、シェイプなどの属性やオプションを一元的に表示・編集できる便利なパネルです。アートボードを選択しているときには、そのアートボードの名称、サイズ、位置、背景設定などが表示されます。このパネルから、正確な数値入力によるサイズ変更が可能です。
手順:
- プロパティパネルを表示する: Photoshopのメニューバーから「ウィンドウ(Window)」>「プロパティ(Properties)」を選択し、プロパティパネルを表示させます。
- サイズ変更したいアートボードを選択する:
- レイヤーパネルから選択: レイヤーパネルで、サイズを変更したいアートボードの名称をクリックして選択します。アートボードグループ全体が選択されることを確認してください。
- アートボードツールで選択: ツールバーから「アートボードツール」(通常は移動ツールと同じグループにあります。ショートカットは移動ツールと同じVですが、Shift+Vで切り替えが必要かもしれません)を選択し、サイズを変更したいアートボードの領域内をクリックして選択します。アートボードの周囲に境界線とハンドルが表示されます。
- プロパティパネルでサイズを入力する:
- プロパティパネルの内容が、選択したアートボードの情報に切り替わったことを確認します。
- 「アートボードの寸法(Artboard dimensions)」セクションを探します。
- 幅(Width)と高さ(Height)の入力フィールドが表示されています。現在のサイズが単位(px, in, cmなど)と共に表示されています。
- 希望する新しい幅と高さを数値入力します。単位を変更したい場合は、入力フィールドの横にあるドロップダウンメニューから選択できます。
- サイズ変更を実行する: 数値を入力したら、Enterキーを押すか、プロパティパネルの外側の領域をクリックします。アートボードのサイズが入力した寸法に即座に変更されます。
プロパティパネルでの詳細設定:
プロパティパネルには、サイズ入力フィールドの他に、サイズ変更の挙動を制御するための重要なオプションがあります。
- アンカーポイント(Anchor Point): これは、サイズ変更の際にアートボード上のどの点を基準(固定点)として拡縮するかを指定するグリッドです。中央を含む9つの点から選択できます。
- デフォルトでは中央の点(中央のアンカーポイント)が選択されています。この場合、アートボードは中央を基準にして चारों方向(上下左右)に均等に拡縮します。
- 左上のアンカーポイントを選択した場合、左上が固定され、アートボードは右方向と下方向にのみ拡縮します。
- 下のアンカーポイントを選択した場合、下が固定され、アートボードは上方向にのみ拡縮します。
- このアンカーポイントの選択は、アートボード上のコンテンツを特定の場所に固定したままサイズを変更したい場合に非常に重要です。例えば、上部にヘッダー、下部にフッターがあり、その間にコンテンツ領域があるデザインで、コンテンツ領域を広げるためにアートボードの高さを増やしたい場合、上または中央のアンカーポイントを選択するのが適切かもしれません。
- コンテンツを拡大・縮小(Scale Content): このチェックボックスをオンにすると、アートボードのサイズ変更に合わせて、アートボード内のすべてのレイヤー(ピクセル、シェイプ、テキスト、スマートオブジェクトなど)が自動的に比例して拡大・縮小されます。
- オンの場合: アートボードサイズに合わせて内部コンテンツも一緒に拡大・縮小されます。アートボードを大きくすればコンテンツも大きくなり、小さくすればコンテンツも小さくなります。アセット全体を別の解像度やサイズに合わせたい場合に便利ですが、後述するような注意点があります。
- オフの場合: アートボードのサイズのみが変更され、内部のコンテンツのサイズや位置は基本的に維持されます。(ただし、アートボードの境界からはみ出す場合や、アンカーポイントと関連して位置がずれる可能性はあります)。デザインに余白を追加・削除したり、コンテンツ領域を広げたりしたい場合は、通常こちらをオフにして使用します。
プロパティパネル使用の利点:
- 正確な数値入力: ピクセル単位で正確なサイズを指定できます。
- アンカーポイントの明確な指定: サイズ変更の基準点を視覚的に選択できます。
- コンテンツ拡大・縮小オプションへのアクセス: コンテンツの扱いを簡単に切り替えられます。
2.2 方法2:アートボードツールを使用したサイズ変更
アートボードツールは、アートボードを視覚的に操作するためのツールです。このツールを使用すると、ドラッグ操作で直感的にサイズを変更したり、オプションバーで直接数値を入力したりすることが可能です。
手順:
- アートボードツールを選択する: ツールバーから「アートボードツール」を選択します。通常、移動ツール(V)と同じアイコングループにあります。アイコンを長押しすると、アートボードツールが表示されます。ショートカットキーはVですが、移動ツールと切り替えるにはShift+Vを何度か押す必要がある場合があります。
- サイズ変更したいアートボードを選択する: アートボードツールがアクティブな状態で、サイズを変更したいアートボードの領域内をクリックします。選択されたアートボードの周囲に、サイズ変更用のハンドル(四隅と各辺の中央)が表示されます。
- ハンドルをドラッグしてサイズを変更する:
- 表示されたハンドルのいずれかをクリックし、そのままドラッグします。
- 四隅のハンドルをドラッグすると、幅と高さが同時に変更されます(デフォルトでは縦横比は固定されません)。
- 辺の中央にあるハンドルをドラッグすると、その辺に垂直な方向(幅または高さ)のみが変更されます。
- オプションバーで数値を入力してサイズを変更する:
- アートボードツールがアクティブで、アートボードが選択されている状態では、Photoshopウィンドウ上部のオプションバーに、選択中のアートボードのプロパティが表示されます。
- オプションバーには、アートボードの名称、X座標、Y座標、幅(W)、高さ(H)、アンカーポイントなどが表示されます。
- この幅(W)と高さ(H)の入力フィールドに直接数値を入力し、Enterキーを押すことで、プロパティパネルと同様に正確なサイズを指定できます。
アートボードツール使用時の詳細設定(オプションバー):
アートボードツールを選択しているときに表示されるオプションバーには、サイズ変更やアートボード操作に関する様々なオプションがあります。
- プリセット(Preset): 幅と高さの入力フィールドの左側に、ドロップダウンメニューがあります。ここには、「Web」、「モバイル」、「フィルムとビデオ」、「印刷」など、カテゴリー別に様々なプリセットサイズ(例: iPhone X/XS/11 Pro、iPad Pro、Web Most Common、A4など)が用意されています。このリストからサイズを選択すると、選択したアートボードのサイズがそのプリセットに即座に変更されます。
- 独自のカスタムサイズを頻繁に使う場合は、「新規プリセットを作成(New Preset)」を選択して、現在の幅と高さをカスタムプリセットとして保存することも可能です。
- 幅(W) / 高さ(H): 現在のアートボードの幅と高さが表示されており、ここで直接数値を入力してサイズを変更できます。単位も指定できます。
- X / Y: アートボードの左上角の座標です(カンバス全体の左上を基準とした位置)。ここを変更するとアートボードの位置を移動できます。
- アンカーポイント(Anchor Point): プロパティパネルと同様に、サイズ変更や位置変更の基準となるアンカーポイントをここで選択できます。アイコン化された9つの点が表示されています。
- 背景の書き出し(Export Options): アートボードの背景色や透明度を設定し、書き出し時にその設定を含めるかどうかを制御できます。これはサイズ変更そのものとは直接関係ありませんが、アートボードツールでアクセスできるオプションです。
- アートボードの追加ボタン: オプションバーの右側には、「+」アイコンがあります。これをクリックすると、現在選択中のアートボードと同じサイズで、隣接した位置に新しいアートボードを簡単に追加できます。
アートボードツール使用時のドラッグ操作と修飾キー:
ハンドルをドラッグしてサイズを変更する際に、キーボードの修飾キーを組み合わせることで、様々な効果が得られます。
- Shiftキー: アートボードの縦横比を固定したい場合に使用します。ただし、アートボードのサイズ変更で縦横比を固定することは稀です(内部コンテンツを拡大縮小する場合は意味を持ちますが、アートボード自体の形状を固定することは通常ありません)。Shiftキーは、主に移動ツールでアートボードを水平・垂直に移動させる際に役立ちます。
- Altキー (Windows) / Optionキー (macOS): ハンドルをドラッグする際にこのキーを押すと、選択中のアンカーポイントとは反対側の点を基準(つまり中央を基準)にして、両方向に均等にサイズが変更されます。例えば、右側のハンドルをAlt/Optionを押しながらドラッグすると、左側のハンドルも一緒に動いてアートボードが左右中央を基準に拡縮します。四隅のハンドルをAlt/Optionを押しながらドラッグすると、中央を基準に चारों方向に均等に拡縮します。
- Spacebar: ドラッグ中にSpacebarを押すと、サイズ変更モードから一時的に移動モードに切り替わります。ドラッグを続けながらSpacebarを押すと、アートボードのサイズを変更せずに、アートボード自体をカンバス上で移動させることができます。Spacebarを離すと、再びサイズ変更モードに戻ります。これは、サイズ変更中にアートボードの位置を微調整したい場合に便利です。
アートボードツール使用の利点:
- 直感的: ハンドルをドラッグする視覚的な操作でサイズを変更できます。
- オプションバーでの数値入力: ドラッグと数値入力の両方を同じツールで実行できます。
- プリセットへの素早いアクセス: 一般的なサイズに簡単に変更できます。
- アートボードの追加や移動も可能: アートボードに関する主要な操作をこのツール一つで行えます。
2.3 どちらの方法を使うべきか?
プロパティパネルとアートボードツールのオプションバーは、どちらも数値入力による正確なサイズ変更が可能です。どちらの方法を選ぶかは、状況と個人の好みによります。
- 正確な数値入力とアンカーポイントの厳密な管理が最優先の場合: プロパティパネルがおすすめです。パネルは常に表示させておくことができ、アンカーポイントの選択肢も明確に表示されています。
- 直感的な操作と数値入力、プリセットへの素早いアクセスを両方行いたい場合: アートボードツールが便利です。ツールを選択する手間はありますが、ドラッグ操作も組み合わせられるため、デザインの調整には適しています。オプションバーでサイズを指定し、そのまま隣に新しいアートボードを追加するといった連携操作もスムーズです。
どちらの方法を使っても最終的な結果は同じです。ご自身のワークフローに合った方法を選択してください。
第3部:サイズ変更時の重要設定 – アンカーポイントとコンテンツの拡大・縮小
アートボードのサイズ変更において、最も重要な設定は「アンカーポイント」と「コンテンツを拡大・縮小」です。これらの設定を理解していないと、意図しない結果になる可能性があります。
3.1 アンカーポイントの仕組みとその重要性
アンカーポイントは、サイズ変更の際に「動かない基準点」となるアートボード上の点です。プロパティパネルやアートボードツールのオプションバーで、このアンカーポイントを9つの点(四隅、各辺の中央、中央)から選択できます。
アンカーポイントがサイズ変更に与える影響:
例えば、幅を100ピクセルから200ピクセルに変更する場合を考えます。
- 中央のアンカーポイント: 中央が固定されるため、アートボードは左に50ピクセル、右に50ピクセル拡張し、合計で幅が100ピクセル増加します。
- 左上のアンカーポイント: 左上が固定されるため、アートボードは右方向にのみ100ピクセル拡張します。高さの変更も同様です。
- 左下のアンカーポイント: 左下が固定されるため、アートボードは右方向と上方向に拡縮します。
なぜアンカーポイントが重要なのか?
アートボード内のコンテンツ(レイヤー)の位置は、アートボードの左上からの相対座標で定義されることが多いです。しかし、アートボードのサイズを変更する際に、内部コンテンツの位置をどのように維持したいかを考慮する必要があります。
- ヘッダーやナビゲーションなど、アートボードの上端や左端に固定しておきたい要素がある場合、左上または上辺のアンカーポイントを選択することで、それらの要素はサイズ変更後もアートボードの新しい上端/左端に対して同じ相対位置に留まる可能性が高くなります(コンテンツを拡大縮小しない設定の場合)。
- フッターやキャプションなど、下端や右端に固定しておきたい要素がある場合、右下、下辺、または右辺のアンカーポイントを選択することで、それらの要素が新しい下端/右端に対して位置を維持しやすくなります。
- 中央揃えにしたい要素が多い場合、中央のアンカーポイントを選択することで、全体が中心から拡縮するため、中央配置を維持しやすくなります。
ただし、アートボード内のコンテンツの位置はアートボード自体のサイズ変更方法(ドラッグか数値入力か、アンカーポイントの設定)と「コンテンツを拡大・縮小」の設定の組み合わせによって複雑に影響を受けます。特に「コンテンツを拡大・縮小」をオフにしている場合、アンカーポイントはアートボードの拡大・縮小方向のみを制御し、内部レイヤーの絶対的な位置(カンバス全体を基準とした位置)や、アートボード左上からの相対的な位置が意図せずずれることがあります。
推奨される使い方:
数値入力でアートボードサイズを変更する際は、必ず意図したアンカーポイントが選択されているか確認しましょう。多くの場合は、コンテンツの配置に合わせて「左上」「上」「中央」「下」「左下」などを選択することになります。視覚的に確認しながら、必要に応じてアンカーポイントを切り替えてみてください。
3.2 コンテンツを拡大・縮小(Scale Content)オプション
このオプションは、アートボードのサイズ変更と同時に、そのアートボード内に含まれるすべてのレイヤー(ピクセルレイヤー、調整レイヤー、シェイプレイヤー、テキストレイヤー、スマートオブジェクトなど)のサイズも自動的に変更するかどうかを制御します。
- 「コンテンツを拡大・縮小」がオンの場合:
- アートボードのサイズ変更率(例: 幅が1.5倍になった)と同じ比率で、内部のコンテンツも拡大・縮小されます。
- 例えば、幅100px、高さ200pxのアートボードを幅200px、高さ400pxに変更し、このオプションがオンの場合、内部の画像やテキストも元のサイズの2倍になります。
- 利点: アートボード全体の比率を変えずに、解像度や物理的なサイズだけを変更したい場合に便利です。例えば、デザイン全体をHiDPI(Retina)対応にするためにアートボードサイズを2倍にする場合などに役立ちます。
- 注意点:
- テキストレイヤー: テキストレイヤーは通常ラスタライズ(画像化)されてから拡大縮小されるため、編集可能なテキストではなくなる場合があります。サイズ変更後にテキスト編集が必要な場合は不向きです。
- シェイプレイヤー: ベクターシェイプは拡大縮小されても品質は劣化しません。
- ピクセルレイヤー: ピクセルレイヤー(普通の画像レイヤー)は拡大縮小によって品質が劣化する可能性があります。拡大するとぼやけ、縮小すると情報が失われます。
- スマートオブジェクト: スマートオブジェクトの内容は直接拡大縮小されず、スマートオブジェクト自体がトランスフォーム(拡大縮小)されるため、品質劣化を抑えられます。ただし、スマートオブジェクト内部の要素がラスタライズされている場合は、その要素の品質は影響を受けます。
- レイヤースタイル/エフェクト: ドロップシャドウやストロークなどのレイヤースタイルやエフェクトは、サイズ変更に合わせて適切にスケーリングされない場合があります。設定の再調整が必要になることがあります。
- 意図しないスケーリング: 個別にサイズや位置を維持したい要素まで一緒に拡大縮小されてしまう可能性があります。
- 「コンテンツを拡大・縮小」がオフの場合:
- アートボードのサイズのみが変更され、内部のコンテンツ(レイヤー)のサイズや位置は、可能な限り元の状態を維持しようとします。
- 例えば、幅100px、高さ200pxのアートボードを幅200px、高さ200pxに変更し、このオプションがオフの場合、アートボードの幅だけが右または左右に100px広がり、内部の画像やテキストのサイズは変わりません。アートボードの新しい幅に合わせて、必要であればレイヤーの位置を調整する必要があります。
- 利点: アートボードに余白を追加したり、既存のコンテンツはそのままでデザイン領域を広げたりしたい場合に最適です。テキストの編集可能性やレイヤーの品質を維持したい場合にもこちらを選択します。
- 注意点: アートボードを縮小した場合、内部コンテンツが新しいアートボードの境界からはみ出すことがあります。はみ出した部分はエクスポートされない可能性があるため、手動でコンテンツの位置やサイズを調整する必要があります。また、アートボードを拡張した場合、追加された領域には何も配置されません。
推奨される使い方:
デザインの要件によりますが、多くの場合、アートボードのサイズ変更は「コンテンツを拡大・縮小」をオフにして行い、その後で必要に応じて個別のレイヤーの位置やサイズを手動で調整するワークフローが安全かつ柔軟です。これは、特にレスポンシブデザインのように、要素のサイズやフォントサイズは固定したままアートボード(画面)の幅だけを変えたい場合に適しています。
デザイン全体を比例縮小・拡大したい場合(例: Retina対応、印刷物のサイズ変更など)にのみ、このオプションをオンにすることを検討しましょう。その際も、テキストのラスタライズやエフェクトのスケーリングに注意が必要です。スマートオブジェクトを多用しているデザインであれば、コンテンツスケーリングによる品質劣化のリスクを減らせます。
プロパティパネルとアートボードツールのオプションバーのどちらにもこのチェックボックスがありますので、サイズ変更を行う前に必ず設定を確認しましょう。
第4部:アートボードサイズ変更の応用と詳細
4.1 複数アートボードのサイズ変更
Photoshopでは、複数のアートボードを同時に異なるサイズに変更することは、標準機能では直接サポートされていません。サイズ変更は基本的にアクティブになっている単一のアートボードに対して行われます。
ただし、いくつかの方法で複数のアートボードのサイズ変更を効率化することは可能です。
- 個別にサイズ変更: 最も確実な方法です。レイヤーパネルで一つずつアートボードを選択するか、アートボードツールでクリックして選択し、プロパティパネルまたはオプションバーでサイズを変更します。数が少ない場合はこの方法で十分です。
- プロパティパネルの値のコピー&ペースト: 複数のアートボードを全く同じサイズに変更したい場合、一つのアートボードでプロパティパネルの幅と高さの値を入力し、その値をコピーして、別のアートボードを選択し、プロパティパネルの対応するフィールドにペーストすることで、手作業ながらも正確に同じサイズに設定できます。
- アクションの利用: 特定のサイズ変更操作(例: 特定のアートボードを特定のサイズに変更し、特定のアンカーポイントを設定する)をアクションとして記録し、他のアートボードに対してそのアクションを再生することで、作業を自動化できます。ただし、アクションは固定された操作を記録するため、アートボードの名前や初期サイズによっては期待通りに動作しない場合もあります。複数のアートボードを異なる特定のサイズに変更するような複雑な操作には向きません。
- スクリプトの利用: より高度な自動化を行いたい場合は、Photoshopのスクリプト(JavaScriptなど)を利用する方法があります。スクリプトを使えば、「すべてのアートボードの高さを50px増やす」「特定のアートボードの名前が含まれているものだけサイズを変更する」といった、より柔軟な操作を自動化できます。ただし、スクリプトの作成にはプログラミング知識が必要です。Adobe ExchangeやGitHubなどで公開されている便利なスクリプトを探してみるのも良いでしょう。
基本的には、一つずつ正確にサイズを変更するのが標準的なワークフローです。効率化が必要な場合は、コピー&ペーストやアクション、スクリプトの活用を検討します。
4.2 新しいサイズのアートボードを追加する
既存のアートボードをサイズ変更するだけでなく、新しいサイズのアートボードを追加したい場合もあります。
手順:
- アートボードツールを選択する: ツールバーからアートボードツール(V, Shift+V)を選択します。
- 新しいアートボードを追加する:
- オプションバーの「+」ボタン: オプションバーの右側にある「+」ボタンをクリックすると、現在選択中のアートボードと同じサイズで、そのアートボードの上下左右のいずれかに新しいアートボードが追加されます。隣接するアートボードがない方向に優先的に追加されます。
- 既存のアートボードを複製: レイヤーパネルでアートボードを選択し、右クリックメニューから「アートボードを複製(Duplicate Artboard)」を選択します。または、アートボードツールでアートボードを選択した状態で、Altキー (Windows) / Optionキー (macOS) を押しながらアートボードをドラッグすることでも複製できます。複製されたアートボードは、元のものと同じサイズとコンテンツを持っています。複製後にサイズを変更します。
- カンバス上の空き領域に描画: アートボードツールを選択した状態で、アートボードが存在しないカンバス上の領域をドラッグして新しいアートボードを作成します。ドラッグ中にオプションバーや情報パネルでサイズを確認できます。ドラッグを終えた後、プロパティパネルまたはオプションバーで正確なサイズに調整します。
- 追加したアートボードのサイズを変更する: 追加された新しいアートボードを選択し、プロパティパネルまたはオプションバーで希望するサイズに設定します。
4.3 アートボードの背景設定とサイズ変更
各アートボードは独立した背景を持つことができます。プロパティパネルまたはアートボードツールのオプションバーで、「背景の書き出し(Export Options)」セクションにある「アートボードの背景(Artboard background)」を設定します。
- 透明(Transparent): 背景が透明になります。PNGなどで書き出す際に透過が維持されます。
- カスタム(Custom): 特定の色を選択できます。書き出し時にはその色が背景として含まれます。
アートボードのサイズを変更しても、この背景設定は維持されます。新しいサイズ領域にも同じ背景設定が適用されます。これはサイズ変更そのものに直接影響するわけではありませんが、デザインの見た目や書き出し結果に関わるため、サイズ変更と合わせて確認しておくと良いでしょう。
4.4 アートボードサイズとカンバスサイズの違い
Photoshopのドキュメントには、「アートボードのサイズ」と「カンバスサイズ」という似て非なる概念があります。この二つを混同すると、意図しない結果になるため注意が必要です。
- アートボードのサイズ: 各アートボードの独立した領域のサイズです。本記事で解説しているのはこちらです。
- カンバスサイズ: Photoshopドキュメント全体の外枠のサイズです。アートボードが複数存在する場合でも、それらを全て含む親となる領域のサイズです。
「イメージ(Image)」メニュー > 「カンバスサイズ(Canvas Size)…」はアートボードのサイズを変更しません!
「イメージ(Image)」メニューの「カンバスサイズ(Canvas Size)…」コマンドを実行すると、ドキュメント全体のカンバスサイズが変更されます。
- カンバスサイズを大きくすると、アートボードの外側に余白が追加されます。
- カンバスサイズを小さくすると、アートボードの一部が切り取られる可能性があります。
しかし、この操作によってアートボード自体のサイズや、アートボード内のコンテンツのサイズが自動的に変更されることはありません。カンバスサイズはあくまでアートボードを配置する「舞台」のサイズを変更するだけで、舞台上の「セット」(アートボード)のサイズを変えるわけではないのです。
もしアートボードのサイズを変更したいのに「カンバスサイズ」コマンドを使ってしまうと、「サイズが変わらない!」「アートボードが切れてしまった!」といったトラブルに繋がります。アートボードのサイズを変更する際は、必ずプロパティパネルまたはアートボードツールを使用してください。
第5部:サイズ変更後の調整とトラブルシューティング
アートボードのサイズ変更は、内部コンテンツに影響を与える可能性があります。サイズ変更後に必要となる調整や、よくあるトラブルとその解決策について解説します。
5.1 サイズ変更後のコンテンツの調整
「コンテンツを拡大・縮小」をオフにしてアートボードのサイズを変更した場合、またはオンにした場合でも期待通りにスケーリングされなかった場合、内部コンテンツを手動で調整する必要があります。
- 位置の調整: アートボードを拡張した場合、追加された領域に要素を移動させたり、既存の要素を再配置したりする必要があります。移動ツール(V)を使ってレイヤーやレイヤーグループを選択し、ドラッグして移動させます。スマートガイドや整列機能(移動ツール選択時にオプションバーやプロパティパネルに表示される)を活用すると便利です。
- サイズの調整: アートボードを拡張または縮小したがコンテンツはスケーリングしない設定にした場合、特定の要素(画像など)を新しいアートボードサイズに合わせて拡大・縮小する必要があるかもしれません。該当するレイヤーを選択し、「編集(Edit)」>「自由変形(Free Transform)」(Ctrl+T / Cmd+T)を使用して手動でサイズを変更します。Shiftキーを押しながらドラッグすると縦横比を維持できます。テキストレイヤーの場合は、テキストツールでフォントサイズを変更します。
- 整列と分布: 複数の要素を新しいアートボードの中央や端に揃えたり、等間隔に配置したりする場合、「レイヤー(Layer)」>「整列(Align)」や「分布(Distribute)」メニュー、または移動ツール選択時にオプションバー/プロパティパネルに表示される整列・分布アイコンを使用します。整列は選択中のレイヤー同士、またはアクティブな選択範囲やアートボードを基準に行えます。アートボードを基準に整列したい場合は、移動ツールで複数のレイヤーを選択した後、オプションバーの整列アイコンの横にあるドロップダウンから「対象:アートボード」を選択してから整列を行います。
- レイヤースタイルの確認: 「コンテンツを拡大・縮小」をオンにした場合、レイヤースタイル(ドロップシャドウ、ストロークなど)が正しくスケーリングされないことがあります。レイヤーを右クリックし、「効果を拡大・縮小(Scale Effects…)」を選択して調整したり、個別の効果設定を開き直して数値を確認・修正したりする必要があるかもしれません。
サイズ変更後にコンテンツを手動で調整するワークフローは、特にモバイルデザインやウェブデザインのように、要素のサイズや余白をピクセル単位で細かく制御したい場合に一般的で推奨されます。
5.2 よくあるトラブルと解決策
アートボードのサイズ変更時によく遭遇する問題とその解決策をまとめます。
- 問題: アートボードを選択してサイズを入力・ドラッグしても、アートボードのサイズが変わらない。
- 解決策:
- 正しいアートボードが選択されているか確認: レイヤーパネルで目的のアートボードグループ全体が選択されているか確認してください。または、アートボードツールでアートボード領域内をクリックして選択しているか確認してください。個別のレイヤーやレイヤーグループが選択されているだけでは、アートボードのサイズは変更できません。
- アートボードツールがアクティブか確認: ハンドルをドラッグして変更しようとしている場合、ツールバーでアートボードツールが選択されていることを確認してください。
- プロパティパネルまたはオプションバーの入力: 数値で変更しようとしている場合、入力後にEnterキーを押したか、フィールドからフォーカスを外したか確認してください。
- 解決策:
- 問題: サイズ変更したらアートボード内のコンテンツが一緒に拡大・縮小されてしまった(または、拡大・縮小されるはずなのにされなかった)。
- 解決策:
- 「コンテンツを拡大・縮小」設定を確認: プロパティパネルまたはアートボードツールのオプションバーにある「コンテンツを拡大・縮小(Scale Content)」チェックボックスの設定を確認してください。意図した設定になっているか確認し、必要であれば切り替えて再度サイズ変更を試みてください。
- 解決策:
- 問題: サイズ変更したらアートボードが意図しない方向に拡張/縮小された。
- 解決策:
- アンカーポイントの設定を確認: プロパティパネルまたはアートボードツールのオプションバーにあるアンカーポイント(9つの点)の設定を確認してください。選択されている点がサイズ変更の基準となります。意図した基準点(例: 左上、中央など)を選択し直してからサイズ変更を試みてください。
- 解決策:
- 問題: アートボードではなくドキュメント全体のサイズが変わってしまった、またはアートボードの一部が切り取られてしまった。
- 解決策:
- 「カンバスサイズ」コマンドを使用していないか確認: 「イメージ(Image)」>「カンバスサイズ(Canvas Size)…」メニューはドキュメント全体のサイズを変更するもので、アートボードのサイズは変更しません。アートボードのサイズを変更するには、プロパティパネルまたはアートボードツールを使用してください。
- 解決策:
- 問題: サイズ変更後、テキストが編集できなくなった、または画像が劣化してしまった。
- 解決策:
- これは「コンテンツを拡大・縮小」をオンにしてサイズ変更した際に起こりうる現象です。テキストはラスタライズされ、画像はピクセルが引き伸ばされるためです。この影響を避けたい場合は、「コンテンツを拡大・縮小」をオフにしてサイズ変更し、その後で個別にテキストサイズや画像のサイズを調整してください。画像の劣化を防ぐには、可能な限りスマートオブジェクトを使用し、拡大が必要な場合は高解像度の元画像を用意してください。
- 解決策:
- 問題: レイヤースタイルや効果がうまくスケーリングされない。
- 解決策:
- 「コンテンツを拡大・縮小」をオンにしても、レイヤースタイルが正しくスケーリングされないことがあります。サイズ変更後に対象レイヤーを右クリックし、「効果を拡大・縮小(Scale Effects…)」で手動で調整するか、レイヤースタイルの設定ダイアログを開き直して数値を調整してください。
- 解決策:
これらのトラブルは、アートボードサイズ変更時の設定(特にアンカーポイントとコンテンツスケーリング)や、関連する機能(カンバスサイズ、コンテンツの調整方法)の理解不足から生じることがほとんどです。各設定の意味を理解し、目的に合わせて正しく選択することが重要です。
第6部:アートボードサイズ変更後のエクスポート
アートボードのサイズは、そのアートボードから画像を書き出す際の結果に直接影響します。
Photoshopには、アートボードを個別のファイルとして書き出すための便利な機能があります。
- 「ファイル(File)」>「書き出し(Export)」>「アートボードをファイル(Artboards to Files)」: 各アートボードを指定した形式(JPG, PNG, PDFなど)で、アートボードの名称をファイル名として個別のファイルに書き出します。この際、書き出される画像の寸法は、アートボードの現在のサイズになります。
- 「ファイル(File)」>「書き出し(Export)」>「書き出し形式(Export As)…」または「Web用に保存(従来)(Save for Web (Legacy)…)」: これらの機能でアートボードを選択して書き出す場合も、そのアートボードのサイズが基本の寸法として使用されます。書き出し形式ダイアログ内で、複数の解像度やサイズでアセットを生成する設定を行うことも可能ですが、基準となるサイズはアートボードのサイズです。
- 「ファイル(File)」>「生成(Generate)」>「画像アセット(Image Assets)」: レイヤー名に特定の拡張子(.png, .jpgなど)を付けておくと、そのレイヤーやレイヤーグループ、またはアートボードを自動的に画像ファイルとして生成する機能です。アートボード名に拡張子を付けておくと、そのアートボード全体が書き出されます。この機能で書き出される画像のサイズも、アートボードの現在のサイズに基づきます。
つまり、最終的な書き出し画像のサイズを意図した通りにするためには、事前にアートボードのサイズを正確に設定しておくことが不可欠です。デザインの初期段階でサイズが確定していなくても、書き出し前には最終的なサイズに調整することを忘れないようにしましょう。
特に、複数のサイズでエクスポートしたい場合(例: @1x, @2x, @3xなどのアセット生成)は、デザインの基準となるアートボードを@1xサイズで作成し、エクスポート時に書き出し形式の機能で倍率を指定するか、「コンテンツを拡大・縮小」をオンにしてアートボードサイズを倍率に合わせて一時的に変更してから書き出す、といったワークフローが考えられます。しかし、多くの場合は@1xサイズのアートボードでデザインし、書き出し形式で倍率指定を行うのが最も柔軟で可逆性があります。
第7部:アートボードサイズ変更のベストプラクティスとヒント
アートボードのサイズ変更をより効率的かつスムーズに行うためのベストプラクティスとヒントを紹介します。
- アートボードに分かりやすい名前をつける: 特に複数のアートボードを扱う場合、レイヤーパネルでどのアートボードがどれなのかを一目で区別できるよう、具体的な名前(例: “Homepage-Desktop”, “ProductDetail-Mobile-iOS”, “Banner-300×250″など)をつけましょう。これにより、サイズ変更したいアートボードを素早く正確に選択できます。アートボードの名前は、プロパティパネルまたはアートボードツール選択時のオプションバーで変更できます。
- サイズ変更の目的を明確にする: サイズ変更によって何を達成したいのか(例: 余白を増やしたい、コンテンツ全体を拡大したい、別のデバイスサイズに合わせたい)を明確にすることで、「コンテンツを拡大・縮小」やアンカーポイントの適切な設定を選びやすくなります。
- 「コンテンツを拡大・縮小」のデフォルト設定を理解する: このオプションは非常に強力ですが、意図しない結果(特にテキストのラスタライズ)を引き起こす可能性もあります。特別な理由がない限り、多くのデザインワークフローではこのオプションをオフにしておき、必要に応じて手動でコンテンツを調整する方が安全な場合があります。
- アンカーポイントを意識する: 数値入力でサイズを変更する際は、必ずアンカーポイントが意図した位置に設定されているか確認する習慣をつけましょう。特に、デザイン要素を特定の位置に固定しておきたい場合に重要です。
- プリセットを活用する: 標準的なデバイスサイズや印刷サイズによく合わせる場合は、アートボードツールのオプションバーにあるプリセットを活用すると、素早くサイズを設定できます。よく使うカスタムサイズがあれば、プリセットとして登録しておくと便利です。
- バージョン管理を行う: 大幅なサイズ変更を行う前や、複数のサイズバリエーションを作成する場合は、元のファイルを複製して保存しておくと、問題が発生した場合や以前のバージョンに戻りたい場合に安心です。Photoshopの履歴機能も活用できますが、長時間の作業やファイルを開き直すとリセットされるため、定期的なファイル保存と複製が推奨されます。
- スマートオブジェクトを効果的に使う: 画像や複雑なレイヤーグループをスマートオブジェクトに変換しておくと、サイズ変更(特に縮小後の再拡大)による品質劣化を抑えられます。「コンテンツを拡大・縮小」をオンにする場合も、スマートオブジェクト内のベクターやテキストは(スマートオブジェクト内での編集時には)編集可能性を維持できます。
- ガイドやグリッドを活用する: サイズ変更後に要素の位置や整列を調整する際に、ガイドやグリッド(「表示(View)」メニュー)を表示させると、正確な配置がしやすくなります。
第8部:まとめ:アートボードサイズ変更をマスターするために
本記事では、Photoshopのアートボードのサイズ変更に関するあらゆる側面を詳細に解説しました。主要な方法は以下の2つです。
- プロパティパネル: 正確な数値入力、アンカーポイント、コンテンツスケーリング設定に特化。
- アートボードツール: ドラッグによる直感的な操作、オプションバーでの数値入力、プリセット、アンカーポイント、コンテンツスケーリング設定が可能。
どちらの方法も最終的なサイズ変更の結果は同じですが、それぞれの操作感やアクセスできるオプションが異なります。ご自身のワークフローや目的に合わせて使い分けることが重要です。
サイズ変更を成功させるためには、以下の重要な概念を理解することが不可欠です。
- アンカーポイント: サイズ変更の基準となる固定点。数値入力時に特に重要。
- コンテンツを拡大・縮小: アートボードサイズに合わせて内部コンテンツもスケーリングするかどうかの設定。テキストのラスタライズなど注意点が多い。
- アートボードサイズとカンバスサイズの違い: アートボードのサイズ変更にはプロパティパネルまたはアートボードツールを使用し、「カンバスサイズ」コマンドは使用しない。
これらの設定を適切に理解し、サイズ変更後に必要に応じてコンテンツを手動で調整するワークフローを習得すれば、Photoshopでのデザイン作業の柔軟性と効率が大幅に向上します。
デザインプロジェクトは常に動的であり、要件に合わせて柔軟に対応できる能力が求められます。アートボード機能と、そのサイズを自在に変更するスキルは、多様なデジタル環境や出力仕様に対応するための強力な武器となります。
この記事が、あなたのPhotoshopアートボードサイズ変更に関する理解を深め、日々のデザインワークフローの効率化に役立つことを願っています。様々なケースで実際にアートボードのサイズ変更を試しながら、これらの方法を実践的にマスターしてください。