ソリッドデザイン（ソリッドレイアウト）

このページはソリッド方式で実装したサンプルです。ブラウザの幅を実際に変えながら挙動を確認してください。PCではコンテンツ幅が1000pxに固定されているため（この数値は任意で指定できます）、広げると左右に余白が生まれ、狭めても縮まずに横スクロールが発生します。SP（767px以下）ではコンテンツ幅のみ画面に合わせて伸縮し、文字サイズと余白は固定のままです。背景は画面幅いっぱいに広がります。フレキシブルとの違いは、狭めたときに「横スクロール」になるか「縮む（可変）」かです。

背景：画面幅いっぱい（width 100%）

コンテンツ

PCでは1000pxで固定されます

背景は画面幅に合わせて伸びますが、中のコンテンツは1000pxで止まります。ブラウザ幅を変えて確認してください。

この帯のように、背景を画面幅いっぱいに広げるのが一般的です。方式によって変わるのは中央の「コンテンツ幅」の挙動です。

ソリッドデザインとは

ソリッドデザインとは、コンテンツ幅をピクセル値で固定するレイアウト手法です。どの画面幅でもデザインカンプ通りの見た目を保てるため、再現性の高さが最大の強みといえます。相対値の計算がほとんど不要で実装がシンプルになり、表示崩れの原因も特定しやすくなります。一方で、大画面では余白が広がるだけでスペースを活かせず、画面幅に応じた柔軟な表示には不向きです。コーポレートサイトなど、デザインの正確な再現を優先する案件で採用されることが多い方式です。

ソリッドデザインの特徴

01 300 × 300

デザインの再現性が高い

カンプで指定された幅・余白をpx値のまま反映できるため、1pxのズレも許されないピクセルパーフェクト案件と相性が良好です。バナーや図版のサイズ調整に悩む場面も減ります。
02 300 × 300

実装がシンプルで工数を削減できる

%やvwの換算作業がほぼ発生せず、カンプの数値をそのままコーディングに落とし込めます。修正時も「どこの固定値を変えたか」が明確なため、表示崩れの調査時間を短縮できます。
03 300 × 300

PCで画面を狭めると横スクロールが発生

このページのブラウザ幅を1000px以下に狭めてみてください。コンテンツが縮まず横スクロールが発生します。SPでは伸縮に切り替わるため、実際に両方の挙動を比較できます。