概要
文字やレイヤーの操作から学びたい方は、Photoshop学習ロードマップへ戻れます。この記事では、見本と制作中の画面を並べて比べる方法を扱います。
Photoshopの応用機能解説です。
この記事では「アートボード」機能を紹介します。
アートボードの基本
新しく作る場合は、新規作成画面でアートボードにチェックを入れると始めやすくなります。既存のPSDから作成する方法もあるので、チェックを忘れても作り直しが必須というわけではありません。
こうすることでアートボードが有効になります。
レイヤーや作業エリアに「アートボード」の記述があれば有効になっています。
アートボードはPhotoshop上で複数の画面を編集するための機能です。
Webサイトデザインをするときには複数ページやPCとスマホのバージョンを作る必要があるので欠かせない機能です。
単体の画像の補正→アートボードなし
Webサイトなどの複数ページ→アートボードあり
にするようにしましょう。
既存のPSDでは、複製を保存してから、対象のレイヤーやグループを選択し、右クリックのアートボード作成コマンドを確認します。変換後は文字・写真の重なりと表示範囲を見直してください。
出典：Adobe公式：アートボードの新規作成と既存文書からの作成（2026年10月17日確認）。
アートボードツール
アートボードを編集するにはアートボードツールを使います。
このツールに切り替えたらアートボード名をクリックしてみましょう
４辺に「＋」のマークとバウンディングボックスが表示されます。
バウンディングボックスの下をドラッグして、サイトの長さを長くしましょう。
webサイトデザインの場合は横幅を変更することはあまりありません。
「＋」のマークをクリックすると新規でアートボードが追加されます。
このアートボードのサイズはもともとあったサイズと同じものが新規で追加されます。
アートボードを選んだ状態で、プロパティにも注目してみましょう。
ここから幅や高さを変更することができます。
プリセットでは「モバイル」つまりスマホのサイズにも変更できますが、これはあまり活用していません。解像度の関係から100%表示された時に拡大表示されてしまうサイズになります。
そのため手動で375pxや390pxなどのサイズを指定することが多いです。
（書き出される画像のサイズが小さくなる問題があるが、これは画像アセット機能をうまく使うと門外が回避できます。）
レイヤーの部分でアートボードの名称は変更できます。
アートボードの移動
アートボードはキャンバス上で移動ができます。好きな位置に移動して作業しましょう。
アートボード内のレイヤーが増えたり、アートボードが増えるとphotoshopの動作が重くなります。
Webサイトデザインにおいては3枚程度の数にとどめ、それ以上はファイル分けしたほうがいいでしょう。
多くのアートボードを扱うような作業をしたい場合はphotoshopではなく、figmaを使用しましょう。
Figmaでもファイル内容や画像の大きさ、端末性能によって動作は変わります。枚数だけで軽さを判断せず、Figmaの基本教材を試して作業に合う道具を選びましょう。
隣にスクリーンショットを置いて作業するには
初学者にとって、既存のいいデザインのWebサイトほど勉強になるものはありません。
サイズや余白の感覚を身につけるまでは、見本のサイトを隣に起き、おおいに参考にすると良いでしょう。
茶道や剣道における「守破離」の考え方と同じです。
学習のためと割り切ってちゃんと真似をするのが上達の近道です。
使用するプラグイン
次のプラグインを導入すると便利です。
上記のリサイズアプリとスクリーンショットのアプリを駆使して、制作する横幅のサイトの画像を入手しましょう。
そしてアートボードを画像の横幅と同じにします。
画像を埋め込み配置しましょう。
埋め込み配置の際に「W」の値を変更できるので、ここを任意の値にするとスマートに配置できます。
- 上記のプラグインを追加
- 参考サイトを表示する
- 【PCサイズの撮影】ウインドウリサイズのプラグインで任意の幅に変える
- 【PCサイズの撮影】スクリーンショットプラグインでサイト全体を撮影する
- 【SPサイズの撮影】モバイルシミュレーターのプラグインで任意の幅に変える
- 【SPサイズの撮影】モバイルシミュレーターのプラグインでサイト全体を撮影する
- アートボードを作成する
- アートボードに配置を行う
