デザイン制作ガイド #2　アートボードサイズの決め方

デザインツールで初めに作成するアートボード（フレーム）の幅サイズは、主に想定する画面サイズに合わせて設定します。

過去１年間の日本における使用シェアでは、PCディスプレイの横幅は 1920px（フルHD）が最も多く、また、1280 – 1920px の範囲にほとんど含まれます。
PC用アートボードは横幅 1920px での作成がお勧めです。ボリュームゾーンをターゲットにしたデザインが可能です。

同様に、スマートフォンのディスプレイ横幅は 390px （iPhone 12 – 14）が最も多くなっており、より広いデバイスも増えてきました。SP用のアートボードは横幅 390px での作成がお勧めです。
以前は 375px を基準にすることが多かったですが、大型化の流れが進んでいます。

コンテンツ領域の設定

主要なコンテンツを収める「コンテンツ領域」として、アートボードの両端にガイドラインを引いてから制作しましょう。
PC用アートボードでは、コンテンツ領域を横幅 1200px 以内で設定することをお勧めします。想定範囲の最小である 1280px（HD）ディスプレイでも、適切な余白を確保した上で、主要なコンテンツをそのまま表示することができます。

コンテンツ領域をはみ出す部分のデザインには、レスポンシブにおける対応イメージが必要です。
例えば、FVを全画面表示したり、イメージを画面の端まで広げるなどのデザインが想定されます。処理方法には、画面幅に応じた拡大／縮小、見切り（裁ち落とし）、画面の端にくっ付ける、などが考えられます。

当たり前ですが、実際に表示される画面幅は、アートボードの幅から変わります。レスポンシブデザインにおいては、そのイメージを持つことが大切です。

画面幅 1280 – 1920 px 以外でのレスポンシブ対応について

レスポンシブデザインにおけるコーディング上の検討点として、ビューポート（画面）横幅 1280px 未満と 1920px 超過における処理があります。1024px（XGA）や2560px（WQHD）への対応は想定しておかなければなりません。
通常だと、画面幅が狭い場合は画像は縮小させてテキストは成り行きで行を折り返し、画面幅が広い場合は両端の余白が広がるようにするのが一般的でしょう。デバイスを問わず可読性を担保できます。ただし、視覚的なデザインの観点からは「デザインが崩れた」と感じても仕方ありません。

当社の標準仕様では、HD（1280px）以下は縮小、フルHD（1920px）以上は拡大表示し、デザインのプロポーションを維持します。コンテンツサイズの変化を数値で確認できる レスポンシブ サンプルページ を用意しましたので、実際にブラウザウインドウの幅を変えてお試しください。文字サイズや余白などを含め、ページ全体が縮小／拡大されます。（狭めのディスプレイでのご確認の際は、ブラウザでページ表示を縮小すると、広いディスプレイをシミュレーションできます）
なお、SPとPCとを切り分けるブレイクポイントを 768px とし、SPではアートボードの横幅（推奨 390px）を基準に縮小／拡大するようにしています。
これらは当社の標準仕様であり、ご要望の仕様に応じたコーディングにも対応します。