Word Press ホームページデザイン WEB広告｜株式会社リバース 大阪

Web制作では見やすいレイアウトをデザインすることが大切です。最適なレイアウトは、ディスプレイの違いやコンテンツの内容によって異なります。
そこで今回は、近年スタンダートになっている「レスポンシブデザイン」その種類として「ソリッドレイアウト(固定レイアウト)」と「リキッドレイアウト(可変幅レイアウト)」についてご紹介します。

レスポンシブWebデザインとは

レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることを指します。
Webサイトのデザインを閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザインです。
現在はPCやスマートフォンなど、デバイス毎に各HTMLファイルを複数用意し最適化することが、一般的な制作方法となっています。
レスポンシブデザインでは、1つのHTMLファイルを、CSSで制御することで異なる画面サイズに応じてページのレイアウト・デザインを調整します。

レスポンシブデザインはウインドウの特定の幅ごとにCSSにレイアウトの指定を行うので、ある程度の幅以上のPC用はソリッドレイアウト、スマートフォンを意識した幅に関してはリキッドレイアウトの指定をするなど分けて指定することが可能である。
ブレークポイント（Break point）はスマホ（640px〜750pxなど）、タブレット（960px〜1,024pxなど）、それ以上のPC（1,024px以上など）を指す3つで指定されています。
近年のGoogleもレスポンシブ対応しているどうかは、SEO対策にも影響しており、ページの評価が決められています。詳しくはサーチコンソールから見ることができます。
Googleが2015年に実装したアルゴリズムで、検索結果の上位に表示されやすくなるというメリットがあります。

メリット

管理がしやすい
デザインが崩れにくい
SEO観点からも効果的

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

リキッドデザインは、Webページを表示するディスプレイの幅に合わせてWebページの幅を調整する手法のことです。
リキッドデザインはブラウザの横幅に合わせて各コンテンツの表示サイズを動的に変更させることができるので、一般的なブラウザ幅・端末でレイアウトが崩れません。
一般的にパーセント(%)で幅を設定します。そのため、ブラウザのウィンドウ幅に適したレイアウトが表示されます。スマートフォン用のサイト制作では、リキッドレイアウトを採用する場合が多いです。
数年前まではスマホ・タブレット・パソコンの3サイズのみへの対応で良かったのが、各社いろんな端末やデバイス幅を市場に投入してきていて、
タブレット並みに大きいスマホや、パソコン並みに大きいタブレットなど、ブレークポイントを設定しようとした時に境界の数値があいまいになりがちですがリキッドデザインはそういった時代の流れにフィットしたレイアウト手法と言えます。
メリットは、ウインドウの幅が広くても狭くても対応できるのでユーザーレイアウトが崩れにくい。デメリットは、ウインドウの幅が狭すぎたりすると改行が多くて読みにくくなる。幅が広すぎると間延びした感じになりデザインのバランスが悪くなってしまう。

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

ソリッドレイアウトのデザインはウインドウの幅に関係なく、固定の幅でカラム(段組)などのレイアウトを確定する。幅はピクセル(px)で指定するのが一般的です。
ソリッドデザインでは、コンテンツの大きさやデザインの制限を受けることがないため、自由なレイアウトやデザインが可能です。しかし、スマートフォンなどの小さな端末ではページ全体が強制的に縮小されてしまう場合もあります。
主なメリットは固定幅でレイアウトをするので、ユーザーによって違うレイアウトということがないので、デザインに意図したことを伝えることができます。
主なデメリットは適切な固定幅を指定してデザインしないと、レイアウトの両端が切れたり、逆に両サイドの余白がすごく目立ってしまう結果になってしまいます。
時代とともに、PCのモニターの幅は広がってきているので、現状ベストだと思って固定幅を決めたとしても、何年かには再考する必要が出てくる可能性があるのである程度未来を見越して固定幅を決めてデザインする必要です。

弊社では、レスポンシブデザインを基本としながら、リキッドがいい、ソリッドがいいというよりはデザインに適して組み合わせながら、一番デザインが崩れないようにコーディングをしています。

組み合わせ例
●レスポンシブデザイン　＋　ソリッドレイアウト
●レスポンシブデザイン　＋　リキッドレイアウト

上記の内容を読んでもイマイチよく分からないという方も多いかと思います。
ホームページ制作のご依頼をお考えの方はまずはリバースサイトのお問合せフォームよりお気軽にご相談ください。