Webデザインを仕事にしたい人のための賢い講座選び
HOME >  WebデザイナーになるにはAtoZ >  覚えておきたい基本のwebレイアウト用語集

覚えておきたい基本のwebレイアウト用語集

目的やデバイスによって、臨機応変にレイアウトを考えていくのもwebデザイナーの大切な仕事の一つです。このページでは、webデザインに役立ついろいろなレイアウトの特徴や意味を説明します。

webサイトのレイアウトに関する用語

  • レスポンシブwebデザイン
    webサイト表示の判断基準をデバイスに置くのではなく、ディスプレイの大きさを判断基準にして柔軟に調整できるwebサイトデザインのこと。従来のレイアウトの場合は、パソコンならパソコン用、スマートフォンにはスマートフォン用など、それぞれのデバイスに対応したレイアウトで複数のサイトやページを作る必要がありました。ですが、レスポンシブwebデザインの場合は、デバイスごとに合わせた複数のサイトを制作する必要がありません。ディスプレイの大きさに合わせてレイアウトを調整するだけで済む手法なので、今後、新しいデバイスが登場した場合にも対応できるメリットがあります。
  • リキッドレイアウト
    webサイトの表示領域が変わっても、レイアウトを維持することができるデザインのこと。単位を%に設定して使います。ブラウザに合わせた量の情報を提供できるのが特徴です。通常の手法だと、ブラウザが小さいユーザーが、PCサイトなど大きいブラウザ向けのサイトを閲覧した場合、横スクロールなどを強いられることが多くあります。しかし、この手法を用いることで、小さなブラウザでも、横スクロールをせずに情報を閲覧することが可能になります。つまり、ブラウザが小さいユーザーには最低限の情報を、ブラウザが大きいユーザーにはより多くの情報を伝えることを可能にしてくれます。あまりに可変可能にしてしまうと、表示される内容に必要最低限の情報が含まれなくなるなどの問題点がありましたが、その欠点を補うものとして、後述する「フレキシブルレイアウト」が登場しています。
  • フレキシブルレイアウト
    手法としてはリキッドレイアウトと同じですが、最小限と最大限を設定できるようになっています。リキッドレイアウトの欠点を改善したデザインで、ブラウザの最大値と最小値を決められるので、ブラウザが小さいユーザーにも最低限の情報を確実に伝えられ、また、レイアウトの崩れなどをコントロールしやすくなっています。
  • 固定幅レイアウト
    レイアウトの幅が変わらない、固定された幅のデザインです。制作者が見せたい情報をどのブラウザにも確実に表示できるメリットがありますが、大きいブラウザだと空白や余白が出たり、小さいブラウザの場合は横スクロールをしなければならないなど、表示するブラウザの大きさによっては、レイアウトの崩れが生じる場合があります。
  • エラスティックレイアウト
    1文字分の幅で単位を指定しており、文字の大きさを変更しても崩れないレイアウトのことです。文字の拡大や縮小をしても常に同じレイアウトで表示できる手法ですが、pxに比べて使用頻度が低いemの使い方に慣れる必要があるため、設計が難しいというデメリットがあります。