基本操作

【Photoshop】アートボードの使い方【新人デザイナー向け】

NaoG
NaoG
やぁ!みんな!元気?

クリエイターの@NaoGです。

Photoshopのアートボードって何だろう?
アートボードってどうやって使うのだろう?

アートボードを使うメリットやデメリットってあるのかな?

こういった疑問に答えます。

この記事の信頼性(著者は実務経験者)

  • 仕事でPhotoshopを扱ってきた経験
  • Photoshop歴は5年ぐらい
  • 現在はフリーランスのWebデザイナー

実際に仕事でPhotoshopを扱っているので、信頼できるかと思います。

目次

  • Photoshopのアートボードとは?
  • アートボードの使い方
  • アートボードのメリットデメリット

ではさっそく見ていきましょう。

【7日間の体験版】Photoshopを無料で始める手順【失敗しない学習法】Photoshopの学習をしたいけど、どうやって始めるんだろう? 使い方も分からないし、いくらかかるんだろうか、、、。 これからPhotoshopを学習したいので「失敗しない学習法」を知りたいです。 こういった疑問に答えます。...

Photoshopのアートボードとは?

Photoshopのアートボードは一つのpsdファイル上で、複数のデータ管理が出来ます。

  • 通常のpsdファイル=一つのデータ
  • アートボードを利用したpsdファイル=複数のデータ

上記のとおり。
それぞれ順番に解説します。

通常のpsdファイル

通常のpsdファイルは一つのデータしか扱うことが出来ません。

アートボードを利用したpsdファイル

アートボードを利用したpsdファイルは複数のデータを扱うことが出来ます。

アートボードツールのショートカット

  • Mac=V
  • Windows=V

アートボードツールのショートカットは上記のとおり。

移動ツールから、Shift+Vでアートボードツールに切り替えることが出来ます。

移動ツールについて詳しく知りたい方は下記の記事をどうぞ。

【Photoshop】移動ツールの使い方【新人デザイナー向け】 クリエイターの@NaoGです。 Photoshopの移動ツールってどうやって使うのだろう? レイヤーが思うように選択できない...

アートボードの使い方

アートボードの使い方について見ていきましょう。

  • アートボードの作成
  • アートボードの追加
  • アートボードドのサイズ変更
  • アートボードの削除
  • アートボードの書き出し

上記のとおり。
それぞれ順番に解説します。

アートボードの作成

ファイルから新規を選択します。

アートボードにチェックを入れてドキュメントを作成します。
今回は幅1280px、高さ720pxとして作成します。

レイヤーパネルを見てみるとアートボードが作成されています。

レイヤーパネルが表示されていないという方はメニューバー1の「ウィンドウ」から「レイヤー」を選択しましょう。

メニューバー1の位置が分からない方は下記の記事をどうぞ。

【Photoshop】 ワークスペースの使い方【新人デザイナー向け】ワークスペースってなんだろう?自分の好きにカスタマイズとか出来るのかな? ワークスペースの保存方法はどうやってやるんだろう? こういった疑問に答えます。...
NaoG
NaoG
え?これだけ?

アートボードの追加

レイヤー上のアートボードを選択した状態で、アートボードツールを選択し、スペースバー押しながら少し移動すると、上下左右に+のマークが表示されます。

追加したい方向の+を選択すると、アートボードが追加されます。

アートボードのサイズ変更

変更したいアートボードをレイヤー上で選択した状態でアートボードツールを選択するとメニューバーに幅と高さが表示されます。

任意の数値を入力することで変更できます。

同じ操作はプロパティパネルでも行うことができます。

プロパティパネルはメニューバーの「ウィンドウ」から「プロパティ」にチェックを入れることで表示できます。

メニューバーやプロパティパネルの場所が分からない方は下記の記事をどうぞ。

【Photoshop】 ワークスペースの使い方【新人デザイナー向け】ワークスペースってなんだろう?自分の好きにカスタマイズとか出来るのかな? ワークスペースの保存方法はどうやってやるんだろう? こういった疑問に答えます。...

アートボードの削除

削除したいアートボードを選択して、ゴミ箱を選択します。

「アートボードとその内容」を選択します。

選択したアートボードが削除できました。

アートボードの書き出し

「ファイル」→「書き出し」→「書き出し形式」を選択します。

書き出したいアートボードにチェックを入れて、形式を設定後、書き出しを選択します。

アートボードのメリットデメリット

アートボードのメリットとデメリットについてそれぞれ順番に解説します。

アートボードのメリット

  • デザインの案出し
  • バナーのリサイズ
  • まとめて書き出し

上記のとおり。
それぞれ順番に解説します。

デザインの案出し

アートボードはデザインの案出しに便利です。

何故かというと複数のデザインデータを一つのpsdファイルで管理できるからです。

体験談:現場のデザイナーも臨機応変にアートボードを使っている

私はWebデザインの現場で働いていましたが、現場のデザイナーもデザイン提案の際にアートボードを利用していました。

NaoG
NaoG
似たようなデザインを管理するのに最適!

バナーのリサイズ

アートボードはバナーのリサイズに便利です。

何故かというと同じレイヤーファイルをすぐにコピーして使えるからです。

体験談:実際に現場のバナーリサイズ対応の際に使っていた

実際に私も現場でバナー等のリサイズ対応の際はアートボードを利用していました。

NaoG
NaoG
小さい積み重ねが時短に繋がる!
【新人Webデザイナー必見!】バナーリサイズ対応の極意。Webデザイナーの登竜門でもあるバナーリサイズで困っている方必見です!主な項目→1.スタイルの調整を行ったか? 2.サイズに合った文字組み、レイアウトになっているか? 3.背景画像やエフェクト等、リサイズを考慮しているか? 4.情報を全て入れようとしていないか?...

アートボードのデメリット

  • 容量が重くなる
  • 操作が重くなる

上記のとおり。
それぞれ順番に解説します。

容量が重くなる

アートボードを利用すると容量が重くなります。

何故かというと、一つのファイルで対応している為です。

体験談:LP等のレイヤーを多く使うデータではアートボードの利用はおすすめしない

ランディングページ(LP)と呼ばれる長い画像を作る際のアートボードの利用はおすすめしません。

何故かというと一つのLPを作るだけでも結構容量が重くなるからです。

ランディングページ

こちらがランディングページです。

NaoG
NaoG
レイヤーが増えるほど容量は重くなる!

なので繰り返しになりますが、アートボードを利用すると容量が重くなります。

動作が重くなる

アートボードを利用すると操作が重くなります。

なぜかというと、繰り返しになりますが一つのファイルで管理している為です。

体験談:レイヤーが増える度に動作は重くなる

レイヤーが増える度に動作が段々と重くなるので、レイヤーをかなり使うようなものを複数アートボードで管理しようとするとPCのスペックによっては動作の重さが気になります。

NaoG
NaoG
容量が大きくなるものはアートボードで複数管理はしない!
質問:PC選びはどうしたら良いですか?

PhotoshopとIllustratorなどが利用目的であれば、CPU=Corei5、メモリ=8GB、ハードディスク=500MBあれば大丈夫です。

Webデザイナーにおすすめのパソコンは下記の記事にまとめてあります。

【最低限から始めよう】Webデザイナー初心者のパソコン選び【疑問解決】Webデザインに必要なパソコンが知りたい。 Webデザインはどんなソフトを使うのかな。 パソコン選びはMacとWindowsどっちがいいんだろう? ノートパソコンにしたら良いのかデスクトップにしたら良いのかもよく分からないし。 Webデザイン初心者なので、Webデザインを始めるのに必要なパソコンの知識が知りたいです。 こういった疑問に答えます。...

参考になれば幸いです。

【7日間の体験版】Photoshopを無料で始める手順【失敗しない学習法】Photoshopの学習をしたいけど、どうやって始めるんだろう? 使い方も分からないし、いくらかかるんだろうか、、、。 これからPhotoshopを学習したいので「失敗しない学習法」を知りたいです。 こういった疑問に答えます。...