アイリービジョンアイコン

Webデザインの代表レイアウトを再確認しよう

ILY, Demo

Webデザインの4つの代表レイアウト「スタティック」「リキッド」「アダプティブ」「レスポンシブ」の特徴と相違点をDemoを交えて再確認しましょう。
これらの理解が誤ったままWeb制作をしていると、例えば「構築会社さんに構築を依頼するときに認識の違いから追加費用がかかる」、「ある端末で確認するとコンテンツが見切れてしまうのですべての端末で見切れずに表示したい」などの問題・要望が発生する可能性があります。
特徴が混在しがちなこれらのレイアウトをきちんと理解し、日々の業務に役立てましょう。

スタティック

Webで昔からある伝統的なレイアウトで、横幅固定のレイアウトです。
表示サイズがデザインより小さい時は見切れます。レスポンシブの考えがなかった頃は低解像度向けのサイトを提供するために別サイトを新規に作っていました。

Demo area

Static header
  • static menu1
  • static menu2
  • static menu3
Static contents

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

staticデモ画像

Thank you. I love you!

Static sidebar
  • static category1 static category1
  • static category2 static category2
  • static category3 static category3

リキッド

デザインの一部の横幅をサイズ調整(pxではなく比率指定)するのが特徴です。
表示サイズによってデザインが見切れることを回避し、水平スクロールが出ないようにします。
表示サイズが想定よりかなり異なる時は意図した見え方にならないことがあります。

Demo area

Liquid header
  • liquid menu1
  • liquid menu2
  • liquid menu3
Liquid contents

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

liquidデモ画像

Thank you. I love you!

Liquid sidebar
  • liquid category1 liquid category1
  • liquid category2 liquid category2
  • liquid category3 liquid category3

アダプティブ

スマホ・タブレット・デスクトップなど特定の解像度ごとにレイアウトを最適化するのが特徴です。
想定してない表示サイズの時はデザインが見切れます。
想定する表示サイズが例えば3つなら、HTMLとCSSも3つ必要になります。
※Demoではデザインの見え方に着目するので、1つのHTMLで制御してます。

Demo area

Adaptive header
  • adaptive menu1
  • adaptive menu2
  • adaptive menu3
Adaptive contents

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

adaptiveデモ画像

Thank you. I love you!

Adaptive sidebar
  • adaptive category1 adaptive category1
  • adaptive category2 adaptive category2
  • adaptive category3 adaptive category3

レスポンシブ

スマホ・タブレット・デスクトップなど特定の解像度ごとにレイアウトを定義するのはアダプティブと同じですが、1つのHTMLとCSSで表示サイズに合わせてレイアウトを最適化するのが特徴です。
表示サイズに応じて要素の横幅やレイアウトを変化させることでマルチデバイスに対応できます。
表示サイズの特定のピクセル数の基準(ブレイクポイント)でレイアウトを切り替えます。(BP:768px,960px)

Demo area

Responsive header
  • responsive menu1
  • responsive menu2
  • responsive menu3
Responsive contents

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

responsiveデモ画像

Thank you. I love you!

Responsive sidebar
  • responsive category1 responsive category1
  • responsive category2 responsive category2
  • responsive category3 responsive category3