Photoshopのアートボードを使うと、PCとスマホなど複数サイズのデザインを1ファイルに収めて効率よく管理できます。Adobe公式ヘルプが体系的な手順を公開しており、新規作成から書き出しまでを5つの操作でマスターできます。この記事では各操作を手順ごとに解説します。
▶ 3日で初案件PR
この記事でわかること
新規作成時のチェック1つでアートボードが即起動する手順、既存ファイルを右クリック1回でアートボード化する方法、書き出し前5項目の確認で再書き出しをゼロにするフローの3点を解説します。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Photoshopのアートボードは「複数画面を1ファイルで管理する」ための機能で、新規作成・追加・複製・サイズ変更・書き出しの5操作を覚えれば実務で即活用できます。フリーランスがクライアント提案用のカンプを作る場面では、アートボードごとに画面名とサイズを命名しておくことが管理コストを下げる最短手順です。まず「新規ドキュメント作成時にArtboardsにチェックを入れる」1手順から始めると、今日から運用を切り替えられます。
今日やるべき1つ
Photoshopを開き、ファイル → 新規から新規ドキュメントダイアログを呼び出し、「Artboards」チェックボックスにチェックを入れて新規アートボードドキュメントを作成してください（所要時間：3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| アートボードを初めて使う | アートボードは新規作成時に3ステップで起動 | 5分 |
| 既存ファイルをアートボード化したい | 既存レイヤーは右クリック1回でアートボード化 | 3分 |
| サイズを変えたい・複製したい | アートボードはサイズ変更と複製で複数案を3分追加 | 3分 |
| ツールが見つからない | アートボードツールは移動ツール長押しで表示 | 1分 |
| 書き出し前に整理したい | 書き出しは5項目の確認で品質を担保 | 5分 |
アートボードは新規作成時に3ステップで起動
新規ドキュメント作成の段階でチェックを1つ入れるだけで、アートボード対応のドキュメントが完成します。最初の画面でどこをクリックするかを把握しておくと、以降の操作がすべてスムーズに進みます。
新規ドキュメントでのArtboardsチェック手順
Photoshopを起動し、メニューから「ファイル → 新規」を選択すると新規ドキュメントダイアログが開きます。ダイアログ右側の「詳細オプション」エリアに「Artboards」というチェックボックスがあり、ここにチェックを入れることでアートボード対応ドキュメントが作成されます（Adobe Help Center「Create artboard documents in Photoshop」）。チェックを入れた状態でOKをクリックすると、レイヤーパネルに「アートボード1」という名前の項目が自動で生成されます。この1チェックが、後続のすべての操作の前提になります。
プリセットはWebとモバイルを基準に選ぶ
ダイアログ上部には「Web」「モバイル」「フィルムとビデオ」などのカテゴリと各サイズのプリセットが並んでいます。フリーランスがWebデザインのカンプを作る場合、「Web」カテゴリから「1920×1080」を選ぶか、「モバイル」カテゴリから端末ごとのプリセットを選ぶのが最も効率的です。プリセットを選んだ後でもサイズは変更できるため、最初は最も使用頻度の高い1サイズを選択し、他サイズはアートボードを追加して対応する方が管理しやすい状態を維持できます。なお画像圧縮で画質を落とさずに軽量化する方法も確認しておくと、書き出しファイルの品質管理に役立ちます。
アートボードを有効化した後のレイヤーパネルの見方
Artboardsにチェックを入れてドキュメントを作成すると、レイヤーパネルの表示が通常と異なる構造になります。「アートボード1」という親グループの下に各レイヤーが入れ子で表示され、この入れ子構造の中に配置した要素だけがアートボードの境界でクリップされて表示されます。アートボードの外に誤って要素を配置するとクリップが外れて全画面に表示されてしまうため、レイヤーパネルで要素がアートボードの下位階層に入っているかを都度確認する習慣が、後々の修正コストを下げる鍵になります（Adobe Help Center「アートボードを使用する」）。
CHECK
▶ 今すぐやること: ファイル → 新規を開き、Artboardsチェックボックスにチェックを入れてOKをクリックし、レイヤーパネルに「アートボード1」が表示されることを確認してください（3分）
Q: アートボードを有効化すると通常のレイヤー操作はできなくなりますか？
A： アートボード内にはスマートオブジェクト、通常レイヤー、レイヤーグループをすべて追加できます。通常のレイヤー操作は引き続き使用でき、アートボードはあくまでレイヤーをグループ化して境界でクリップする入れ物として機能します（Adobe Help Center「アートボードを使用する」）。
Q： 新規作成時にArtboardsチェックを入れ忘れた場合はどうすればよいですか？
A： 後から既存レイヤーをアートボード化できます。レイヤーパネルでレイヤーを右クリックし「レイヤーからのアートボード」を選択すると変換できます。詳細は次のセクションで解説します。
アートボードツールは移動ツール長押しで表示
アートボードツールは表示されないように見えても、実際にはツールバーに格納されています。移動ツールを長押しする1アクションで確実に呼び出せます。
ツールバーでのアートボードツールの出し方
アートボードツールはツールバーの移動ツール（V）を長押しまたは右クリックすることで表示されるサブメニューの中にあります（Adobe Help Center「アートボードツールの使用」）。移動ツールのアイコンを1秒程度長押しすると「移動ツール」と「アートボードツール」の2択のポップアップが現れるため、そこでアートボードツールを選択します。選択後はショートカットキーVを押すたびに移動ツールとアートボードツールが切り替わります。「表示されない」のではなく「移動ツールに格納されている」状態のため、長押し1回で確実に呼び出せます。
アートボードツールを使ったカンバス上への描画
アートボードツールを選択した状態でカンバス上をドラッグすると、ドラッグした範囲に新しいアートボードが作成されます。作成後はオプションバーにプリセットのドロップダウンが表示され、「iPhone 14」「Web 1920」などのサイズを後から当てはめることもできます。手動でサイズを指定したい場合は、アートボードを選択した状態でオプションバーのW（幅）とH（高さ）の数値フィールドに直接入力します。ドラッグで大まかなサイズを作ってからオプションバーで数値を確定する流れが、最も素早く目的のサイズに到達できる方法です。
アートボード選択と中身の選択を使い分ける
アートボードツールでアートボードの境界線をクリックするとアートボード全体が選択され、アートボード内部をクリックすると中のレイヤーが選択された状態になります。この挙動を把握していないと、アートボードを動かしたつもりで中のレイヤーだけを移動してしまうミスが発生します。アートボード全体を移動したいときはアートボードツールで境界線のラベル（アートボード名）をドラッグするか、レイヤーパネルでアートボード名をクリックしてから移動する方法が確実です（Adobe Help Center「アートボードツールの使用」）。
CHECK
▶ 今すぐやること: ツールバーの移動ツールを長押しし、ポップアップからアートボードツールを選択してカンバス上をドラッグし、新しいアートボードが作成されることを確認してください（2分）
Q: アートボードツールが長押ししても表示されない場合は？
A： ツールバー自体がカスタマイズされていてアートボードツールが非表示になっている可能性があります。ウィンドウ → ツールバーを選択し、ツールバーの編集画面でアートボードツールをツールバーに追加してください。
Q： アートボードツールとアートボードはどう違いますか？
A： アートボードツールはアートボードを作成・選択・操作するためのツールで、アートボードはキャンバス上の「作業エリア」そのものです。アートボードツールを使わなくてもレイヤーパネルからアートボードを操作できますが、カンバス上で直感的にサイズや位置を調整するにはアートボードツールが必要です。
既存レイヤーは右クリック1回でアートボード化
すでに作業を進めているファイルをアートボード対応に切り替えたい場合も、新規作成からやり直す必要はありません。既存レイヤーからアートボードへの変換は、右クリック1回で完了します。
レイヤーからのアートボード変換手順
レイヤーパネルで変換したいレイヤー（または複数レイヤー）を選択し、右クリックのコンテキストメニューから「レイヤーからのアートボード」を選択します（Adobe Help Center「アートボードを現在のドキュメントに追加します。」）。ダイアログが表示され、アートボードの名前とサイズを設定できます。サイズはデフォルトで選択レイヤーのバウンディングボックスに合わせた値が入力されますが、ここでプリセットから標準サイズを当てはめることも可能です。OKをクリックすると、選択していたレイヤーが新しいアートボードの中に格納された状態で変換が完了します。
変換後のレイヤー階層を確認する
変換直後にレイヤーパネルを確認すると、元のレイヤーがアートボードの下位に入れ子で移動していることがわかります。変換前に複数のレイヤーが並列に存在していた場合も、選択したレイヤーだけがアートボードに格納され、選択外のレイヤーはアートボードの外側に残ります。意図せず外側に残ったレイヤーはアートボードの境界外で表示されることがあるため、変換後は必ず全レイヤーの配置をレイヤーパネルで確認する手順を習慣にしてください。
複数のアートボードを一括で変換する場合
複数のレイヤーグループをそれぞれ別のアートボードに変換したい場合は、レイヤーを1つずつ右クリックして「レイヤーからのアートボード」を繰り返すか、まず1つを変換してから後述の複製機能で増やす方が効率的です。レイヤーグループをアートボード化する際にグループ内のすべての子レイヤーがアートボードに含まれるため、不要なレイヤーはアートボード化前に削除しておくことが後の管理を楽にします（Adobe Help Center「アートボードを現在のドキュメントに追加します。」）。
CHECK
▶ 今すぐやること: レイヤーパネルで任意のレイヤーを右クリックし、「レイヤーからのアートボード」を選択してアートボード化を実行し、レイヤーパネルの階層が変化したことを確認してください（3分）
Q: 「レイヤーからのアートボード」がコンテキストメニューに表示されません。
A: 選択しているレイヤーがすでにアートボードの内側にある場合や、背景レイヤーを選択している場合には表示されないことがあります。背景レイヤーの場合は先に「背景からレイヤーへ」で通常レイヤーに変換してから操作してください。
Q： 変換後にアートボードのサイズと中のコンテンツのサイズがずれています。
A: アートボード変換時のサイズはデフォルトでレイヤーのバウンディングボックスに合わせた値が設定されますが、手動で変更した場合にずれが生じます。アートボードを選択してプロパティパネルまたはオプションバーで幅・高さを再入力し、目的のサイズに合わせてください。
アートボードはサイズ変更と複製で複数案を3分追加
アートボードのサイズ変更方法
アートボードのサイズ変更には2通りの方法があります。1つ目は、アートボードツールでアートボードを選択し、カンバス上に表示されるハンドル（境界線の端にある白い四角）をドラッグして手動で変更する方法です。2つ目は、アートボードを選択した状態でプロパティパネルまたはオプションバーのW・H数値フィールドに直接数値を入力する方法です（Adobe Help Center「Photoshop のアートボードのプロパティと動作」）。標準サイズに変更したい場合はオプションバーのプリセットドロップダウンから選ぶのが最も確実で、端末ごとの値を誤入力するリスクを排除できます。サイズを変更してもアートボード内のコンテンツは原則移動しませんが、コンテンツがアートボード境界外に出た場合はクリップが外れて表示されるため、変更後のプレビューで確認してください。
アートボードの複製手順
既存のアートボードを複製するには、アートボードを選択した状態でmacOSはOption、WindowsはAltを押しながらドラッグします（Adobe Help Center「Photoshop のアートボードのプロパティと動作」）。ドラッグした位置に同じ内容のアートボードが複製され、レイヤーパネルには「アートボード1のコピー」という名前で追加されます。複製後はすぐに名前を変更する習慣をつけると、複数案が増えても「どれが何の案か」がレイヤーパネルを見るだけで判断できます。複製ではなくレイヤーパネルのメニューから「アートボードを複製」を選ぶ方法もあり、こちらは別ドキュメントへの複製も選択できるため、単一案を別ファイルとして書き出したい場面に向いています。
追加と複製の使い分け
アートボードの「追加」は既存のものとは独立した新しいアートボードを作ることを指し、「複製」は既存のアートボードの中身ごとコピーすることを指します。PCサイズとスマホサイズを別々に0から作る場合は追加、同じデザインをスマホ用に調整するために元データを保持したまま派生させる場合は複製、という使い分けが実務上の基本です。複製して調整するフローは、アートボード間でレイヤーを共有できないため、調整前の状態をコピーとして残しておける点でも管理上のメリットがあります。
CHECK
▶ 今すぐやること: アートボードをOption/Altを押しながらドラッグして複製し、複製後すぐにレイヤーパネルで名前を「アートボード_スマホ」などに変更してください（3分）
Q: 複製したアートボードの内容を変更すると元のアートボードも変わりますか？
A： 通常のレイヤーで複製した場合は独立したコピーになるため、複製先を変更しても元のアートボードには影響しません。ただしスマートオブジェクトを使用している場合は、スマートオブジェクトの中身を編集すると参照しているすべての箇所に変更が反映されます。
Q： アートボードのサイズを変更するとデザインが崩れますか？
A： アートボードのサイズ変更はアートボードの境界を変えるだけで、内部コンテンツの位置やサイズは変わりません。意図したサイズに合わせてコンテンツを再配置する作業は別途必要です。
Photoshopを仕事で使えるようになりたい方へ
Photoshopの全工程の解説動画をLINEで受け取る
LINEで無料で届くもの
- 全工程Photoshopの解説動画
- 20本Webデザインの無料レッスン
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
スマホのカメラで読み取ると
LINEの友だち追加が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
自分の状況を3分で診断：操作に迷ったらここを確認
Q1: 今作業しているPhotoshopファイルはアートボード対応ですか？
レイヤーパネルを確認し、レイヤー名の左に「折りたたみ可能なグループアイコン」ではなく「アートボードアイコン（角が丸い四角形）」が表示されていれば対応済みです。
対応済みの場合はQ2へ進みます。未対応（通常のレイヤーのみ）の場合は「既存レイヤーは右クリック1回でアートボード化」セクションへ戻り変換作業から始めてください。
Q2: アートボードツールをすぐに呼び出せますか？
呼び出せる場合はQ3へ進みます。呼び出せない場合は「アートボードツールは移動ツール長押しで表示」セクションへ戻り、ツールバーにアートボードツールを追加してください。
Q3: 今必要な操作はどれですか？
新しいサイズのアートボードを追加したい場合はResult A、既存アートボードをそのまま複製したい場合はResult B、既存アートボードのサイズを変えたい場合はResult C、書き出しの前に整理したい場合はResult Dへ進んでください。
Result A: 追加が必要な場合
アートボードツールを選択し、カンバスの空いているスペースにドラッグして新しいアートボードを描画します。その後オプションバーでプリセットまたは手動でサイズを指定し、名前を「画面名_サイズ」の形式でつけてください。所要時間は約2分です。
Result B: 複製が必要な場合
既存アートボードをアートボードツールで選択し、Option/Altを押しながらドラッグで複製します。複製直後に名前を変更し、その後サイズや内容を調整します。所要時間は約2分です。
Result C: サイズ変更が必要な場合
アートボードツールでアートボードを選択し、オプションバーまたはプロパティパネルでW・Hの数値を直接変更します。プリセットドロップダウンがある場合は標準サイズをそこから選ぶと誤入力を防げます。所要時間は約1分です。
Result D: 書き出し準備が必要な場合
「書き出しは5項目の確認で品質を担保」セクションに進み、確認項目をチェックした後に書き出しを実行してください。
CHECK
▶ 今すぐやること: レイヤーパネルを開き、アートボードアイコンが表示されているかを確認してQ1に回答し、対応する操作を今日中に1つ実行してください（3分）
Q: 診断のQ1でアートボードアイコンが確認できない場合、ファイル形式は関係しますか？
A： アートボードはPhotoshop形式（.psd）でのみ有効です。JPEG・PNG・TIFFなどの非ネイティブ形式で開いたファイルはアートボードに対応できないため、まず「別名で保存」でPSD形式に変換する必要があります。
Q： アートボードが1つもないドキュメントでアートボードツールを使うと何が起きますか？
A： アートボードツールでカンバスをドラッグすると、その場で新しいアートボードが作成されます。同時に既存のレイヤーはアートボードの外側に残るため、必要なレイヤーを手動でアートボードの下にドラッグして格納してください。
アートボード管理は5つの仕組みで効率化
ハック1：命名規則で管理コストを削減
【対象】: 複数案・複数サイズのアートボードを1ファイルで管理しているフリーランス
【手順】: アートボード作成直後にレイヤーパネルでアートボード名をダブルクリックして名前を変更します（1分）。命名形式を「画面名_サイズ_バージョン」に統一します（例：「TOP_1920_v1」「TOP_390_v1」、2分）。クライアントに共有するたびに末尾のバージョン番号を上げ、古いアートボードはフォルダに格納して非表示にします（1分）。
【コツと理由】: 「TOP_1920_v1」のように画面名・サイズ・バージョンを含む命名規則を徹底することで、作業者以外がファイルを開いた際にも構造が即座に把握できます。命名規則がないと案件終了後の修正依頼時に確認工数が発生します。
【注意点】: スペースや全角文字をアートボード名に含めると、書き出し時のファイル名として使われる際に管理が複雑になります。半角英数字とアンダースコアのみで構成してください。
ハック2：レイヤー整理でアートボード間の誤コピーをゼロにする
【対象】: 複数アートボードを操作中に意図しない場所にレイヤーが移動してしまうフリーランス
【手順】: 各アートボードの直下に「共通素材」「テキスト」「画像」という名前のグループを作成します（2分）。要素を追加するたびに、対応するグループに格納する習慣をつけます（都度30秒）。週1回、レイヤーパネルでアートボードの外側にレイヤーが漏れていないかをスクロールして確認します（5分）。
【コツと理由】: アートボード直下を分類グループで整理しておくことで、別アートボードへのレイヤー誤移動を即座に検知できます。Photoshopはアートボード間でレイヤーをドラッグすると自動でアートボードが切り替わる仕様のため、グループ構造がないと誤配置が気づかれないまま残ります。
【注意点】: アートボード間でレイヤーをドラッグ移動すると、移動先のルーラー開始点に合わせて配置が自動調整される場合があります。位置を保ったまま移動したい場合は、レイヤーを切り取り（Command/Ctrl+X）して移動先アートボードを選択した状態でペーストする方法を使ってください。
ハック3：プリセット活用で1アートボードあたりのサイズ設定を30秒で完了
【対象】: 毎回サイズを手入力していて数値ミスが発生しているフリーランス
【手順】: アートボードを選択した状態でオプションバーのプリセットドロップダウンを開きます（10秒）。「iPhone 14 Pro」「iPad」「Web 1920」など目的の端末・サイズを選択します（10秒）。選択後にW・Hが自動入力されることを確認し、必要に応じて縦横を切り替えます（10秒）。
【コツと理由】: プリセットから選ぶことで端末ごとのピクセル値を記憶する必要がなくなり、入力ミスによるサイズ不一致を防げます。特にRetina対応が必要なiOSデザインではプリセット活用がリカバリコストを大きく下げます。
【注意点】: プリセットで選んだサイズは解像度設定も合わせて変更されることがあります。Webデザインの場合は72ppi、印刷物の場合は300ppiが標準のため、プリセット選択後に「ファイル → ドキュメント設定」で解像度が目的に合っているかを確認してください。
ハック4：スマートオブジェクトで共通要素の更新を1回で全アートボードに反映
【対象】: 複数アートボードにナビゲーションやフッターなど同じ要素を配置していて更新作業に時間を取られているフリーランス
【手順】: 全アートボードに共通するロゴ・ナビゲーションなどの要素を選択し、右クリック → 「スマートオブジェクトに変換」を実行します（1分）。変換したスマートオブジェクトを各アートボードにコピー（Command/Ctrl+C）してペースト（Command/Ctrl+V）で配置します（2分）。修正が必要になったらスマートオブジェクトをダブルクリックして内容を編集し、保存すると全アートボードの該当箇所が自動更新されます（修正時間のみ）。
【コツと理由】: スマートオブジェクトとして配置することで中身を1回編集するだけで全アートボードに変更が反映されます。ナビゲーションのテキスト修正を5アートボードに反映する場合、通常レイヤーなら5回の編集が必要なところ、スマートオブジェクトなら1回で完了するため、修正ラウンドが多いクライアントワークで特に効果が大きくなります。
【注意点】: スマートオブジェクトを複製した場合、片方の中身を編集すると全複製に反映されます。独立した異なるデザインに分岐させたい場合は「レイヤー → スマートオブジェクト → 内容をコピーして新規スマートオブジェクト」を使い、リンクを切ってから編集してください。スマートオブジェクトを通常レイヤーにラスタライズすると以後の非破壊編集ができなくなります。
ハック5：書き出し前チェックで再書き出しを防ぎ納品日の余裕を確保
【対象】: 書き出し後にサイズや命名のミスに気づいて再書き出しが発生しているフリーランス
【手順】: 書き出し前にレイヤーパネルを開き、全アートボードの名前が「画面名_サイズ_バージョン」の形式になっているかを確認します（2分）。各アートボードを1つずつクリックして選択し、プロパティパネルで幅・高さが意図したサイズになっているかを確認します（3分）。「ファイル → 書き出し → アートボードをファイルに書き出し」を選択し、保存先・形式（PNG/JPEG）・解像度を確認してOKをクリックします（2分）。
【コツと理由】: 書き出し前の3ステップの確認を挟むことで、命名ミス・サイズ誤りによる再書き出しを防止できます。書き出し後に誤りが発覚すると、確認・修正・再書き出しで追加作業が発生します。事前確認で時間のロスを防げるため、特に納品当日はこの手順を省略しないことがポイントです。
【注意点】: 「書き出し形式」ダイアログで「アートボードをファイルに書き出し」以外の書き出し方法（クイック書き出しなど）を選ぶと、全アートボードではなく選択中のレイヤーのみが書き出される場合があります。全アートボードを一括書き出しするには「アートボードをファイルに書き出し」メニューから実行してください。
CHECK
▶ 今すぐやること: 現在のファイルでアートボード名を「画面名_サイズ_バージョン」の形式に変更し、書き出しメニューから「アートボードをファイルに書き出し」を1回実行して書き出しフローを確認してください（7分）
Q: アートボードをPDFで書き出したい場合はどうすればよいですか？
A： 「ファイル → 書き出し → アートボードをPDFに書き出し」を選択すると、全アートボードを1つのPDFファイルまたはアートボードごとの個別PDFとして書き出せます。クライアント提出用のプレゼン資料として使う場合は「複数ページのPDF」を選択すると1ファイルにまとまります。
Q： 書き出したファイルの解像度が意図と違っていた場合はどうすればよいですか？
A： 書き出し設定の「解像度」欄でppi値を変更してください。Webデザインは72ppi、Retina対応素材は144ppi（2倍）、印刷物は300ppiが目安です。書き出し後のファイルで解像度を変更するよりも、書き出し設定で正しい値を設定する方が品質劣化なく完了します。
アートボードをWebデザインで活用する3事例
ケース1（成功パターン）: 複数サイズの同時管理で提案工数を削減したケース
Webデザインのカンプ制作において、PCサイズ（1920px）・タブレット（820px）・スマホ（390px）の3サイズを1ファイルのアートボードで管理し、共通ナビゲーションをスマートオブジェクトとして各アートボードに配置した事例があります。ナビゲーションの修正依頼が来た際に1回の編集で全サイズに反映できたため、修正対応時間が短縮されました。
アートボードを使って複数のサイズを1ファイルで管理することで整理された状態でクライアントに提示できたという声もあります（note：Webデザイン実務でのアートボード活用例）。作業効率を上げる方法として、スマートオブジェクトの活用はデザイン業務全般での時間短縮にも有効です。
3サイズを別々のファイルで管理していた場合、ナビゲーション修正のたびに3ファイルを開いて個別に修正する必要があり、ファイル間の差分管理ミスが発生しやすい状態になっていた可能性があります。
ケース2（改善が必要なパターン）: アートボード名を整理せずに書き出しでトラブルが発生したケース
アートボードを追加するたびに「アートボード1」「アートボード1のコピー」のように自動命名のまま進めた結果、書き出し時に「どのファイルがどの画面か」が判別できなくなり、クライアントへの送付前にファイル名の整理作業が別途必要になったケースがあります。
制作フローの中でファイルの命名ルールを最初から決めておかなかったため、後から整理する手間が発生したという経験談があります（note：制作フロー例）。
最初から命名規則を設定していれば、書き出し時のファイル名は自動でアートボード名を使って生成されるため、整理作業なしに正確なファイル名での納品が完了していた可能性があります。
CHECK
▶ 今すぐやること: 現在のプロジェクトで使用しているアートボード名を確認し、「画面名_サイズ_バージョン」の形式になっていない場合は今日中に変更してください（5分）
Q: アートボードを使ったWebデザインのカンプはFigmaのデザインと何が違いますか？
A： Photoshopのアートボードは画像編集機能との統合が強みで、写真の補正・加工・フィルタ処理を含むデザインに向いています。Figmaはコンポーネントの共有・プロトタイプ・チーム共同編集に優れており、用途によって使い分けることが実務上の一般的な方法です。PhotoshopとFigmaを組み合わせて使うフリーランスも多くいます。
Q： アートボードを使うとファイルサイズが大きくなりますか？
A： アートボード自体の追加によってファイルサイズが著しく増加することはありませんが、各アートボードに配置したレイヤー（特に高解像度の画像）の数と品質によってファイルサイズは増加します。スマートオブジェクトを適切に活用すると同一素材の重複保存を防げるため、ファイルサイズの増加を抑えられます。
書き出しは5項目の確認で品質を担保
書き出し前に確認する5項目
書き出し前に確認すべき5項目は次のとおりです。第1にアートボード名が「画面名_サイズ_バージョン」の形式に統一されているか、第2に各アートボードの幅・高さがクライアントの指定サイズと一致しているか、第3にアートボード外に漏れているレイヤーがレイヤーパネルにないか、第4に非表示（目のアイコンがオフ）になっているレイヤーが書き出しに含まれる意図かどうか、第5に解像度がWeb用（72ppi）または印刷用（300ppi）の正しい設定になっているか、の5点です。この確認を怠ると、特に「アートボード外のレイヤーが書き出しに含まれる」ミスが発生しやすく、クライアントへの送付後に気づいた場合は再送付の説明コストが発生します。
「アートボードをファイルに書き出し」の操作手順
確認が完了したら「ファイル → 書き出し → アートボードをファイルに書き出し」を選択します（Adobe Help Center「アートボードを使用する」）。書き出しダイアログでは保存先フォルダ・ファイル形式（PNG/JPEG/PDF）・解像度（スケール）を設定します。「各アートボードをサブフォルダに書き出す」オプションをオンにすると、アートボード名ごとのフォルダが自動作成されて整理された状態で書き出せます。クライアントに複数サイズのファイルをまとめて渡す場合は、このオプションをオンにしておくと受け取った側も整理しやすくなります。大容量ファイルを送る無料の方法も事前に確認しておくと、書き出し後の納品フローがスムーズになります。
書き出し後のファイル確認
書き出し完了後は、書き出し先フォルダを開いてファイル数と命名が意図通りかを確認します。アートボードが5つある場合は5ファイル（またはサブフォルダ5つ）が生成されているはずです。ファイル数が意図より少ない場合は、一部のアートボードが非表示になっているか、レイヤーパネルで書き出し対象から除外されている可能性があります。書き出し後の確認は所要時間2分以内で完了します（Adobe Help Center「アートボードを使用する」）。
CHECK
▶ 今すぐやること: 「ファイル → 書き出し → アートボードをファイルに書き出し」を開き、ダイアログの各設定項目を確認したうえで、テスト用にPNG形式で書き出しを1回実行してください（7分）
Q: 書き出したPNGファイルの背景が透明になっています。白背景で書き出すにはどうすればよいですか？
A： アートボードの背景色がデフォルトで透明に設定されている場合、書き出し時にPNGの透過として出力されます。アートボードを選択した状態でプロパティパネルの「背景色」を白に設定するか、各アートボードの最下位レイヤーに白い塗りつぶしレイヤーを追加することで白背景で書き出せます。
Q： 書き出したJPEGの画質を調整するにはどうすればよいですか？
A： 書き出しダイアログの「品質」スライダーまたは数値フィールドで0〜100の範囲で画質を指定できます。Webデザインのカンプとしてクライアントに確認してもらう目的であれば品質80程度が容量と画質のバランスの取れた設定です。最終納品物として高品質が必要な場合は100を指定してください。
アートボードは5操作で今日から即戦力に：まとめ
Photoshopのアートボードは、新規作成時のArtboardsチェック・アートボードツールの呼び出し・既存レイヤーからの変換・サイズ変更と複製・書き出し前確認の5操作を覚えると、今日から複数画面の制作フローに組み込めます。フリーランスとしてクライアントに整ったカンプを提出するためには、最初から命名規則とレイヤー整理の仕組みを入れておくことが後の修正対応コストを大きく左右します。時間管理アプリを活用して制作時間を可視化するとともに、アートボード運用の定型作業を仕組み化することで、納品クオリティを維持しながら作業効率を高められます。
新しいファイルを開くたびにArtboardsにチェックを入れる習慣から始めてください。アートボードの使い方に迷ったときは、Adobe公式ヘルプが最も詳しい情報源です。
| 状況 | 次の一歩 | 所要時間 |
| 初めてアートボードを使う | ファイル → 新規でArtboardsにチェックを入れて新規作成 | 3分 |
| 既存ファイルを変換したい | レイヤーを右クリック → レイヤーからのアートボード | 3分 |
| 複数サイズを追加したい | Option/Altドラッグで複製し名前を変更 | 2分 |
| 書き出しを実行したい | ファイル → 書き出し → アートボードをファイルに書き出し | 7分 |
Photoshopアートボード使い方に関するよくある質問
Q: アートボードツールはどこにありますか？
A： ツールバーの移動ツール（V）を長押しすると表示されるポップアップの中にあります。表示されない場合は「ウィンドウ → ツールバー」からカスタマイズ画面でアートボードツールを追加してください（Adobe Help Center「アートボードツールの使用」）。
Q： アートボードが表示されない場合の対処法を教えてください。
A: まずファイル形式がPSD（Photoshop形式）かを確認してください。次にレイヤーパネルでアートボードアイコンが表示されているかを確認します。それでも表示されない場合は、Photoshopのバージョンがアートボード機能に対応しているか（CC 2015以降）を確認してください。
Q： アートボードは何個まで作れますか？
A： Photoshop側に明示された上限はありませんが、アートボード数が増えるほどファイルサイズが増加しPCのメモリ使用量が上がります。実務上は1ファイルあたり5〜10アートボード程度が操作の快適さを維持できる目安です。それ以上必要な場合はプロジェクトやフロー別にファイルを分割する方法を検討してください。
【出典・参照元】
Adobe Help Center「アートボードを使用する」
Adobe Help Center「アートボードツールの使用」
Adobe Help Center「アートボードを現在のドキュメントに追加します。」
Adobe Help Center「Photoshop のアートボードのプロパティと動作」
Adobe Help Center「Create artboard documents in Photoshop」