Webサイト制作におけるレイアウトの手法・用語がごっちゃになりませんか？
改めてその違いをまとめてみました。
レスポンシブWebデザイン
「レスポンシブWebデザイン」とは、Webサイトを閲覧するユーザーが利用しているデバイス（パソコン・スマホ・タブレットなど）の画面サイズに合わせてデザインを柔軟に調整し、見やすく最適な表示にすることを指します。
レスポンシブWebデザインはどうやってレスポンシブにするかによって4種類の手法があります。
- レスポンシブレイアウト
- リキッドレイアウト
- フレキシブルレイアウト
- グリットレイアウト
レスポンシブレイアウト
レスポンシブレイアウトは、デバイスの画面幅に応じてコンテンツや画像、ナビゲーションなどの配置・表示/非表示などを調整するレイアウトです。デザインの切り替えは、「ブレイクポイント（※）」を基準にします。
リキッドレイアウト
リキッドレイアウトは、どのデバイスでも画面の横幅に合わせてコンテンツの表示サイズがピッタリに可変されるレイアウトです。
フレキシブルレイアウト
フレキシブルレイアウトは、リキッドレイアウトと同じで要素の単位を%で指定しますが、最小幅と最大幅も指定したレイアウトです。
例えば、リキッドレイアウトでは、大きなデスクトップで閲覧する場合、各要素が横長に広がり過ぎてかえって見づらくなってしまうことがあります。
これを避けるために、ブレイクポイントを指定することで、指定した幅以上の画面の場合は左右に余白を作って見やすい表示に調整します。
グリットレイアウト
グリッドレイアウトとは、Webサイトの幅と高さから、画面を縦横に格子状に分割し、ブロックで構成したレイアウトです。
CSSフレームワーク「Foundation」や「Masonry」があり、簡単に導入することができますが、外部ファイルなので仕様の変更に対応する必要があります。
上記デザイン導入の注意点
レイアウトの方法を４つご紹介しましたが、単に横スクロールが出ないようにするだけでは、ユーザーが見易いWebサイトとは言えません。その為、それぞれ画面のサイズに合わせて、フォントサイズや画像サイズなどを調整します。
まとめ
改めてまとめてみると色々種類がありましたね。
Top pageではファーストビューを高めるためリキッドレイアウト。
お問い合わせページなどではフレキシブルレイアウトなどページによって変えるのがよさそうです。
