5-2 アートボードを作成する｜通販LP制作の土台を作る
通販LP制作を始めるにあたって、まず最初に取り組むべき作業は「アートボードの作成」です。
たとえば、あなたが「Photoshopで LPデザイン を始めたい」と思って、早速ソフトを起動したものの、「どのサイズで作ればいいの？」と迷った経験はありませんか？
初心者の方に多いのは、適当なサイズで作業を始めてしまい、後からスマホ表示に対応させるために大幅な修正が必要になるケースです。
1ピクセルのずれが、レイアウト崩れや読みやすさの低下につながることも珍しくありません。
この記事では、通販LP制作の土台となるアートボードの作成方法を、初心者の方にもわかりやすくステップごとに解説します。
制作前の「最初の1歩」が、後の作業効率やデザインの完成度に大きな影響を与えます。
ここをしっかり押さえて、自信を持って制作に取り組める土台を整えましょう。
—
なぜアートボード作成がLP制作の第一歩なのか
LP（ランディングページ）は、単なる「見せるためのデザイン」ではなく、ユーザーの行動を促すためのツールです。
そのため、どの端末でどれだけの割合で表示されるかを意識したサイズ設定が不可欠です。
たとえば、2024年の総務省の調査によると、スマートフォンからのWebアクセスは全体の約65％を占めています。
つまり、PC向けLPだけを作成してしまった場合、 majority のユーザーに最適化されていないページを提示することになります。
Photoshopでアートボードを正しく作成することは、単に「キャンバスを用意する」以上の意味を持ちます。
制作の土台として、表示領域の比率・余白のとり方・コンバージョン要素の配置基準をあらかじめ定めておくことで、
後の画像挿入やテキスト配置がスムーズになり、デザインの統一感も保ちやすくなります。
—
通販LP用アートボードの基本サイズ設定手順
Photoshopでアートボードを作成する際の基本手順を、以下の3ステップでご説明します。
ステップ1：新規作成時のキャンバス設定
Photoshopを起動し、「ファイル」→「新規」を選択します。
ここで表示される設定画面で、以下の2つのサイズを用意するのが一般的です。
- PC向け：幅1200px × 高さ無制限（例：2500pxなど、縦長の設定）
- スマホ向け：幅375px × 高さ812px（iPhone XR相当）
※高さは「無制限」ではなく、1画面に収まる範囲を基準に、最終的にスクロールする想定の長さを設定します。
ステップ2：アートボードツールの活用
キャンバスが作成されたら、左ペインの「アートボードツール」を選択します。
このツールを使って、1枚のPSDファイル内にPC用・スマホ用を並べて配置すると、
デザイン確認やエディタとの連携がスムーズになります。
例として、幅1200pxのアートボードを左側に、幅375pxのアートボードを右側に並べ、
間隔を30px空けて配置するという方法が、チームでの共有やレビュー時に非常に便利です。
ステップ3：ガイドとグリッドの事前設定
アートボード内に「ガイド」や「グリッド」を事前に配置しておくことで、
テキストや画像の配置を一貫したルールで行えます。
特に通販LPでは、「左上にロゴ・中央に見出し・下にC TA」などの視認順を意識して、
ガイドラインを引くと、デザインの構成が明確になります。
—
初心者が陥りやすいアートボード設定の失敗例
アートボード作成でよくある失敗を3つご紹介します。
これらは、制作開始直後に行う作業ゆえに、後から気づくと修正に非常に手間がかかります。
失敗例1：解像度の誤設定
初期設定で「72dpi」を指定している方も多いですが、実際には「300dpi」で作成しておくと、
印刷用資料やプロモーション動画への応用が可能です。
ただし、Web用LPであれば72dpiでも問題ありません。重要なのは、用途に合わせて意識的に設定することです。
失敗例2：アートボードサイズの単一化
「PCサイズだけで作ればいい」と、スマホ対応を後回しにするパターンです。
結果として、スマホで見たときにテキストが詰まりすぎたり、ボタンが小さくなりすぎたりします。
最初からPC・スマホ両方のアートボードを用意することで、同時並行で最適化が可能になります。
失敗例3：余白の取り方が不統一
「左余白を30px、右余白を20px」といったように、左右の余白が異なると、
デザインのバランスが崩れ、信頼性が低下します。
特に通販LPでは、視線誘導のためのルール（例：F字レイアウト）を意識し、
あらかじめマージンのルールを決めておくと、統一感のあるページになります。
—
今日からできる！アートボード作成の5分チェックリスト
アートボードの作成は、1回正しく設定してしまえば、以後の制作でテンプレートとして再利用できます。
まずは以下のチェックリストを参考に、今日のうちに5分だけでも作業を始めてみましょう。
・Photoshopの新規ファイル作成で「Web」プリセットを選ぶ
・PC用アートボード：幅1200px、高さ2500px（例）を設定
・スマホ用アートボード：幅375px × 高さ812px（iPhone XR相当）を追加
・ガイドを「表示」→「ガイド線とグリッド」→「ガイド線を配置」で引く
・最終的に出力する環境（Web用・印刷用）を確認し、解像度を合わせる
この5分の準備が、後の制作工程で「修正が不可能」とならないための防衛線になります。
特に「サイズを後から変更する」と、画像の劣化や配置の再調整が必要になるため、
最初に1mm単位で確認することが、プロの作業と初心者の差を生み出す第一歩です。
—
まとめ｜LP制作の土台を固め、自信を持ってデザインを進める
通販LP制作において、アートボードの作成は「最も重要で、かつ最初に終わらせるべき作業」です。
サイズ設定の誤りは、レイアウト崩れ・読みにくさ・コンバージョン率の低下に直結します。
逆に、正しく設定されたアートボードがあれば、テキストや画像の配置が直感的になり、
制作スピードと品質の両立が可能になります。
今日のアクションとして、以下の2つをぜひ実行してください。
1. Photoshopを起動し、PC用・スマホ用のアートボードをそれぞれ作成する
2. 作成したアートボードにガイド線を配置し、テンプレートとして保存する
この2ステップを終えたら、あなたはすでに「初心者脱出」の第一歩を踏み出しています。
次回は、このアートボードに見出しやバナー画像を配置する具体的なレイアウト手法をご紹介します。
土台をしっかり整えて、自信を持ってデザイン作業を進めていきましょう。
コメント