Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive
Post on:2014年9月9日
sponsors
レスポンシブとアダプティブ、そしてリキッドとスタティック、Webデザインの代表的な4つのレイアウトの特徴と相違点を実例見ながら学ぶコンテンツを紹介します。
デモページはヘッダ・フッタ・3カラムのレイアウトで、右上のドロップダウンで各レイアウトに変更できます。
Responsive（レスポンシブ）
レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。
デバイスごとに合わせた一種のリキッドレイアウトであると考えることもできます。
Liquidapsive: Responsive
Adaptive（アダプティブ）
アダプティブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。レスポンシブとは異なり、単にレイアウトを変えるだけではありません。ユーザーのコンテクスト（環境・状況・目的など）に応じて表示するコンテンツ（レイアウト）を変化させます。
どのデバイスからも同じコンテンツが利用できるので、一種のスタティックなレイアウトであると考えることもできます。
Liquidapsive: Adaptive
Liquid（リキッド）
リキッドは、表示サイズと比較してデザインの一部の幅をサイズ調整するのが特徴です。表示サイズが想定していたデザインよりかなり小さかったり、かなり大きい時には失敗する傾向があります。
Liquidapsive: Liquid
Static（スタティック）
スタティックは、Webで古くからある伝統的なレイアウトで、ページの中央に配置され、もし表示サイズが小さい時は水平スクロールが必要になります。低解像度向けのサイトを提供する際にスタティックで別のサイトを作るというのが過去の答えでした。
Liquidapsive: Static
sponsors
