【Photoshop】アートボードツールの使い方や整列方法を徹底解説【フォトショ初心者】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）のアートボードツールの使い方と応用例を徹底解説します。

1つのPSD内で複数のアートボードを作成し、2つ以上のアートワークを管理する際に便利！
フォトショ初心者の方にも自在にアートボードが編集できるよう、詳しく解説します。

アートボードツールを使いこなして制作を効率化しましょう！

この記事の目次

アートボードツールの場所

ツールバーに [ アートボードツール ] があります。
ショートカットは [ V ] です。

※アートボードレイヤーを選択している場合にショートカットVが機能します。
通常レイヤー選択時は移動ツールに切り替わるので注意。

初期設定のままだとツールバーにアートボードツールは非表示です。
[ ツールバーを編集 ] から自分好みにツールバー内のツールを編集できます。

アートボードの追加方法

Photoshopにおけるアートボードの追加方法です。
追加方法は複数あるのでお好み方法を使ってください。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,078円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

アートボード追加の基本操作

STEP.1

新規キャンバスを作成

新規キャンバスを作成します。
[ アートボードにチェック ] を入れます。

サンプルは横幅：1080　高さ：1350　解像度：72pixel/inch
インスタグラムの主流画像サイズの一つに設定しました。
※インスタの画像サイズ詳細はコチラで解説しています。

作成後は [ Ctrl + Alt + I ] (Mac：Command + Option + I) で画像解像度を確認しておきましょう。

STEP.2

レイヤーパネルを確認

アートボードにチェックを入れて新規作成をすると、レイヤーパネルに [ アートボード1 ] が追加されます。

複数のアートボードを作成する場合は必ず新規ドキュメント作成時に [ アートボードにチェック ] を入れましょう。

STEP.3

アートボード内にアートワークを追加

アートボード１にデザインを追加します。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

なお、キャンバスの左上に小さくアートボード１と表記されています。

FINISH

アートボードを追加

[ アートボードツール ] に切り替えます。
するとアートボードの上下左右に [ + ] が表示されます。

右の [ + ] をクリックしてみましょう。

すると右側にアートボード2としてコピーされました。
レイヤーパネル内にもアートボード2が追加されています。

※アートボード内のレイヤーはコピーされません。

なお、ドラッグするとアートボードを移動できます。

Alt + ドラッグを使った追加方法

STEP.1

対象のアートボードを選択

レイヤーパネルからコピーしたいアートボードを選択します。

サンプルは鹿の写真が入ったアートボード１を選択しました。

FINISH

Altドラッグでコピー

[ Altを押しながらドラッグ ] するとドラッグした箇所へアートボードをコピーする事ができます。
このコピー方法だとアートボード内のアートワークもコピーできます。

[ Shift + Alt + ドラッグ ] (Mac：Shift + Option + ドラッグ) でコピーを行うと水平・垂直・斜め45°で移動コピーできます。
覚えておくと便利！

好きな場所でドラッグする方法

アートボードツールでドラッグすると好きな形でアートボードを新規追加できます。

アートボードを削除

[ レイヤーパネルで削除したいアートボードをクリック ] → [ DeleteまたはBackSpace ]
以上でアートボードを削除できます。

アートボードサイズを編集

STEP.1

バウンディングボックスが表示される

レイヤーパネルからサイズ編集したいアートボードを選択します。

すると選択対象となるアートボードにバウンディングボックスが表示されます。

FINISH

白い点を移動

バウンディングボックスの白い点をドラッグするとアートボードのサイズを変えられます。

カーソル付近にアートボードのサイズが表示されるので参考にしながら変形しましょう。

オプションを活用する

アートボードツールオプションを活用して更に制作を効率化しましょう。
よく使う機能なので覚えておくと便利ですよ。

オプションの場所

[ アートボードツール ] を選択した状態で画面上部を確認してみましょう。
オプションパネルが表示されています。

アートボードのサイズを数値指定で追加・編集、複数のアートボードのレイアウトを整えたりできます。

※オプションが非表示の場合は [ ウィンドウ ] → [ オプション ] で表示できます。

バラバラになったアートボードを整列する方法

STEP.1

バラバラのアートボードを確認

左図のようにバラバラになったアートボードをオプションの [ レイヤーの整列と分布 ] を使って整列してみましょう。

STEP.2

整列させたいアートボードを選択

レイヤーパネルから整列させたいアートボートを選択します。

※アートボードを複数選択する場合は [ Ctrl ] (Mac：Command) を押しながらクリック。

STEP.3

上端をクリック

[ オプション ] → [ レイヤーの整列と分布 ] → [ 上端 ] をクリックします。

すると上端を基準に一直線に整列されました。
しかしアートボード同士の間隔がバラバラですね。

FINISH

水平方向均等配置をクリック

[ オプション ] → [ レイヤーの整列と分布 ] → [ 水平方向均等配置 ] をクリックします。

アートボード同士の間隔が均等に整列されました。

間隔を狭めたい場合は一番端のアートボードを内側に移動させ、再度 [ 水平方向均等配置 ] を実行すると間隔が狭まります。

アートボードツールを使った例

例えば複数サイズのバナー広告を1つのPSDで作る際にアートボードツールは威力を発揮します。

アートボードツールを使ったバナー制作はコチラで解説中。

名刺の裏表をデザインする際にアートボードツールは役立ちます。裏表の印刷データを一覧表示して作成・確認できるので制作が捗りますよ。

※左図の名刺テンプレートはコチラの記事で解説しています。

高品質なバナーテンプレート

Photoshopで使える高品質なバナーテンプレートです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。

#01 Web Banner Layout Set 4

様々なサイズのウェブバナー広告のテンプレートです。
汎用的なレイアウトなので様々な分野の広告にピッタリ！

ダウンロード

#02 6 Social Media Banner Layouts with Blue and Yellow Accents

ブルーとイエローの配色がキレイなソーシャルバナー用テンプレートです。

ダウンロード

#03 Social Media Sale Banners Layout Set

印象的な色遣いが特徴的なソーシャルメディアバナーです。
セール系の内容ですが、文字替えするだけで全く違った方面のバナーにできます。

ダウンロード

#04 Social Media Post Layout Set with Pink and Yellow Accents

ピンクとイエローでパンチの効いたデザインのソーシャルバナーテンプレートです。
インスタに載せると映える色使いですよ。

ダウンロード

#05 Vintage Movie Social Media Post Pack

ビンテージ映画の広告のようなデザインのソーシャルバナーです。
色味が気持ちいいですね。

ダウンロード

Photoshop用とIllustrator用のバナーテンプレート

【商用可】高品質なバナーテンプレート50選！秒速でバナーデザインを実現【Photoshop・Illustrator】

フォトショップとイラストレーター用の高品質なバナーテンプレート50選です。
全て商用利用可能！

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。