menu

ソリッドレイアウトとリキッドレイアウトの違いとは?

2020年3月9日

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

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

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

 

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

メリット

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

デメリット

  • 閲覧者によって、使用するディスプレイが異なります。ソリッドレイアウトでは、適切なウィンドウ幅を指定しないと画面に入りきらず、デザインが崩れてしまうため注意が必要です。

    例えば、ウィンドウの大きさを広げたときに余白が表示されたり、ウィンドウ幅が足りない場合は横スクロールをしないと全体像が見えない、というケースがあります。

 

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

メリット

  • ディスプレイの大きさに関係なく、画面内にレイアウトが収まります。自動で閲覧者にとって使いやすいレイアウトが表示される点がメリットです。

デメリット

  • 閲覧するディスプレイにより見え方が異なるため、意図しないレイアウトとして表示されることがあります。さまざまなウィンドウサイズによる見え方のチェックが必要です。

    また、ウィンドウ幅を変えると一行に表示される文字数が変化します。適切な位置に改行を入れないと、読みづらいWebサイトになるため注意しましょう。

 

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

CPTIMES

   

投稿一覧

pagetop