概要

  • webサイト制作におけるレイアウト手法を、改めてまとめる。
  • リキッド、フレキシブル、レスポンシブ、、、、用語がごっちゃになるため整理。
  • 目標:このサイトは「○○レイアウト」と瞬時に言えるようにしたい。

5種類のレイアウト

1) 固定

1-1) 固定レイアウト(ヤフートップ系)

  • 対象を横幅で固定するレイアウト。pxで指定する。
  • メリット+デメリット
    • メリット:デザインがそのまま反映できるため、最もかんたん。
    • デメリット:あとで大型ディスプレイが出たときに対応できず、窮屈に見えたりする。
  • 例:ヤフートップ

2) 可変

  • ウィンドウ横幅に合わせて、コンテンツが伸縮するレイアウト。%で指定する。

2-1) リキッドレイアウト(△)

  • 横幅を%で指定するレイアウト。(Liquid:液状の、滑らかな、、、)
  • すべて%指定の場合と、一部だけ%指定する場合がある。
  • メリット+デメリット
    • メリット:画面幅が狭くなっても、コンテンツが画面をはみ出さない。
    • デメリット:画面幅がとても狭い・広い場合は、可読性が悪くなる。

2-2) フレキシブルレイアウト(amazon系)

  • min-widthとmax-widthを使い、上のリキッドのデメリット(画面幅がとても狭い・広い場合の可読性)に対応。
  • すべて%指定の場合と、一部だけ%指定する場合がある。
  • メリット+デメリット
    • メリット:リキッドの改良版。画面幅がとても狭い・広いに対応。
    • デメリット:古いブラウザ(IE6など)ではmin-width、max-widthに対応しておらず、スクリプトなどで個別に対応する必要性あり。
  • 例:amazon

2-3) 可変グリッドレイアウト(pinterest系)

  • カード型にグリッド状で配置し、幅が変更されるとカードを再配置するレイアウト。
  • メリット+デメリット
    • メリット:ブラウザに合わせて固定の要素を再配置するので、ブロック毎に情報がきちんんと伝えられる。
    • デメリット:まずグリッドでデザインした後の制作のため、制作ステップが多くなる。
  • 例:pinterest

2-4) レスポンシブレイアウト(マクドナルド系)

  • PCやスマホなどのデバイス毎にデザインするのではなく、ディスプレイの幅に応じてデザインを最適化していく手法。CSS3のMedia Queriesを利用する。
  • メリット+デメリット
    • メリット:
      • 1つのソースで色んなデバイスに対応できるので、メンテナンスがかんたん。
      • 今後他のデバイスが増えても、それに簡単に対応できる。
    • デメリット:Media Queries、レイアウトや画像の柔軟な対応、コンテンツの表示非表示対応など、ある程度の知識が必要。
  • 例:マクドナルドhaptic design

サイトとレイアウト一覧(※間違ってる可能性あり)

MA:1-1)固定レイアウト
大阪工業技術専門学校:2-3)可変グリッドレイアウト
starbucks:2-4) レスポンシブデザイン
無印良品:2-4) レスポンシブデザイン

見分け方(※間違ってる可能性あり)

  • まず、グリッドかフリーか
  • グリッドの場合
    • if (横幅が固定) → 1-1) 固定レイアウト
    • else (可変)
      • if (カード状) → 2-3) 可変グリッドレイアウト
      • else (カード状じゃない)
        • if (ディスプレイ幅を狭くしたときにガラッと配置が変わる) → 2-4) レスポンシブデザイン
        • else (配置変わらない)
          • if (狭くしたときにある一定のところで縮小が止まる) → 2-2) フレキシブルレイアウト
          • else (縮小し続ける) → 2-1) リキッドレイアウト

結論

・最小コスト → 1-1)固定レイアウト(現状の業務・PC)
・多様なデバイス幅に対応させたいなら → 2-2) フレキシブルレイアウト(SPは業務こっちでやってもいい。)
・デバイス横断に対応させたい&知識など色々あるなら → 2-4)レスポンシブデザイン

参考

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.