コーディング代行へ外注する際に必要な知識－ソリッドレイアウトとリキッドレイアウトの違いとは？

menu

2020年3月9日

当社へコーディング代行を外注される際、レスポンシブでコーディングする場合には、マルチデバイス対応の考え方において、ソリッドレイアウトとリキッドレイアウトと言う呼び方をして、仕様を確認しています。ここでは、その内容について、整理してお伝えします。

Web制作では、見やすいレイアウトをデザインすることが大切ですよね。最適なレイアウトは、ディスプレイの違いやコンテンツの内容によって異なります。

例えば、ウィンドウ幅を「固定」と「可変」のどちらに設定するかにより、全く別の見え方になる場合があります。

そこで今回は、ウィンドウ幅の指定方法に焦点を絞り、「ソリッドレイアウト(固定レイアウト)」と「リキッドレイアウト(可変幅レイアウト)」についてご紹介します。

ソリッドレイアウト（固定レイアウト）
ソリッドレイアウトは、一般的にピクセル(px)単位で幅を設定します。つまり、ウィンドウ幅を固定で指定するレイアウトになります。ウィンドウの大きさを変えても、レイアウトが変化しない点が特徴です。

■メリット

ピクセル単位で固定してデザインするため、誰が見ても同じレイアウトを表示させることができます。制作者が想定したレイアウトで、Webサイトを見てもらえる点がメリットです。

■デメリット

閲覧者によって、使用するディスプレイが異なります。ソリッドレイアウトでは、適切なウィンドウ幅を指定しないと画面に入りきらず、デザインが崩れてしまうため注意が必要です。例えば、ウィンドウの大きさを広げたときに余白が表示されたり、ウィンドウ幅が足りない場合は横スクロールをしないと全体像が見えない、というケースがあります。

リキッドレイアウト（可変幅レイアウト）
リキッドレイアウトは、一般的にパーセント(%)で幅を設定します。そのため、ブラウザのウィンドウ幅に適したレイアウトが表示されます。スマートフォン用のサイト制作では、リキッドレイアウトを採用する場合が多いです。

■メリット

■デメリット

閲覧するディスプレイにより見え方が異なるため、意図しないレイアウトとして表示されることがあります。さまざまなウィンドウサイズによる見え方のチェックが必要です。また、ウィンドウ幅を変えると一行に表示される文字数が変化します。適切な位置に改行を入れないと、読みづらいWebサイトになるため注意しましょう。

ソリッドレイアウトとリキッドレイアウトの違いについてイメージできたでしょうか？
Webデザインの中でも、レイアウトの決定はとても重要になります。閲覧者にとって見やすいレイアウトになるよう心掛けましょう！