Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive

レスポンシブとアダプティブ、そしてリキッドとスタティック、Webデザインの代表的な4つのレイアウトの特徴と相違点を実例見ながら学ぶコンテンツを紹介します。

サイトのキャプチャ

Liquidapsive (Liqui-dap-sive)

デモページはヘッダ・フッタ・3カラムのレイアウトで、右上のドロップダウンで各レイアウトに変更できます。

サイトのキャプチャ

デモページ

Responsive(レスポンシブ)

レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。
デバイスごとに合わせた一種のリキッドレイアウトであると考えることもできます。

サイトのキャプチャ

Liquidapsive: Responsive

Adaptive(アダプティブ)

アダプティブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。レスポンシブとは異なり、単にレイアウトを変えるだけではありません。ユーザーのコンテクスト(環境・状況・目的など)に応じて表示するコンテンツ(レイアウト)を変化させます。
どのデバイスからも同じコンテンツが利用できるので、一種のスタティックなレイアウトであると考えることもできます。

サイトのキャプチャ

Liquidapsive: Adaptive

Liquid(リキッド)

リキッドは、表示サイズと比較してデザインの一部の幅をサイズ調整するのが特徴です。表示サイズが想定していたデザインよりかなり小さかったり、かなり大きい時には失敗する傾向があります。

サイトのキャプチャ

Liquidapsive: Liquid

Static(スタティック)

スタティックは、Webで古くからある伝統的なレイアウトで、ページの中央に配置され、もし表示サイズが小さい時は水平スクロールが必要になります。低解像度向けのサイトを提供する際にスタティックで別のサイトを作るというのが過去の答えでした。

サイトのキャプチャ

Liquidapsive: Static

sponsors

top of page

©2024 coliss