Webデザインについて解説していきますが、デザインが専門ではないので、
間違っている可能性があることを先に伝えておきます。
個人の解釈なので、もし間違っている場合は、
Contactページ の マサカリ を選択してご意見をいただきたいと思います。

Webデザインシステムの認識について

Webにおけるデザインシステムはさまざまあります。
ここで一つ言っておきたいことは、ここで話すデザインシステムとは、
HTMLを組む際の Atomic Design のようなデザインシステムのことではなく、
構築前（サイトデザイン）のレイアウト、システム（どのように表現されるか）についての話になります。

そもそもこの記事を書こうと思ったきっかけは、ブラウザの拡大縮小に際して、
デザイナーとすり合わせしたり、どう実装されるべきかを歯指す際に、
話が噛み合わないことが多々あることが原因でした。

こちらはレスポンシブデザインについて話しているときに、
「こんな形にしたい・こんな表現にしたい」と言われて、「？」となったり、
リキッドデザインについて話している時に、
「そうではなくてこう切り替わってほしいんですけど」と言われて、「？」となる事がありました。

この時、デザインについていろいろなことが混じりあって認識がずれているなと思いました。

レイアウト・システムのあれこれ

実際サイトデザインにおけるデザイン・レイアウト・システムと呼ばれる内容の言葉は数多くあります。
知っている範囲で下記に名前をあげてみます。

• レスポンシブデザイン
• アダプティブデザイン
• フルードデザイン
• リキッドデザイン（レイアウト）
• グリッドシステム
• グリッドレイアウト
• エラスティックレイアウト
• フレキシブルレイアウト
• 固定幅レイアウト
• シングルカラムレイアウト
• マルチカラムレイアウト
• フルスクリーンレイアウト

上記で挙げたリストの一つ一つの違いを理解し、
使い分ける事ができている人はなかなかいないと思います。
そして話が噛み合わない原因は、これらの認識がずれていることで起こっている事がほとんどか、
知らないことで話が通じていない事がほとんどでした。
ここの認識を合わせるのに苦労する事が多々あります。

デザイン・レイアウト・システムを分類する

先にあげたリストの内容をグルーピングすると大きく３個に分ける事ができると考えています。
しかしながら、物によってはグループを横断する特徴を持つものがいることもあり、
絶対にこのグループであるという分類にはめる事ができないものがあります。

グループその1 : ブラウザ幅によってデザイン（レイアウト）が切り替わるもの

同じサイトをパソコン・タブレット・スマホで見た際に内容は一緒なのに見た目が違う事があるのは、
下記のデザインシステムによって切り替えられているためです。

• レスポンシブデザイン
• アダプティブデザイン

グループその2 : デザイン上（Photoshop, XD, Figmaなどデザインツール上）で確認できるもの

サイトをデザインツールでデザインする際に、
どんな要素、どんな項目を、どのように表示し、どこに配置するかを決定する際に用いられるものが、
下記のデザインシステム・レイアウトになります。

• グリッドシステム
• グリッドレイアウト
• 固定幅レイアウト
• シングルカラムレイアウト
• マルチカラムレイアウト
• フルスクリーンレイアウト

グループその3 : ブラウザ幅を可変した際に動きがわかるもの

デザインを構築し、実際にブラウザ上に表示して、
ブラウザの幅を可変した際に表示がブラウザ幅によって移り変わるものが、
下記のデザインシステムになります。

• フルードデザイン
• リキッドデザイン（レイアウト）
• グリッドレイアウト
• エラスティックレイアウト
• フレキシブルレイアウト
• 固定幅レイアウト

実際にどのように違うのか詳しく解説していきます。

〇〇〇〇デザイン・システム・レイアウトとは

では、それぞれのデザイン・システム・レイアウトがどのようなものなのでしょうか。

レスポンシブデザイン

PCデザインとSP（タブレット）デザインを別々に作成し、
ブラウザ幅によって表示（デザイン）を切り替える場合に使用するデザインシステム
メリット：PCもSP（タブレット）も同じHTMLソースを使用して表示するためファイル管理が複雑にならない。
デメリット：同じHTMLソースを利用するので、PCとSP（タブレット）で劇的なレイアウト変更ができない。同じソースコードを使って切り替えるので実装難度が高くなる。
参考サイト：本サイト : PC 851px / SP 850px での切り替わり

アダプティブデザイン

PCデザインを再現したHTMLソース、SP（タブレット）デザインを再現したHTMLソースをそれぞれ用意し、
アクセスしたユーザーの接続端末の状態によって、表示するHTMLソースを切り替える手法のデザインシステム
メリット：同じソースコードを使用しないので、接続端末によって表現を変える事ができる。
デメリット：１デザインにつき１つソースコードを作成するためファイル数が増えて管理が煩雑になる。切り替える方法を実現するのに別の技術が必要になる。
参考サイト：眼鏡市場 : 開発者ツールでソースを確認してください

フルードデザイン

親要素の横幅を１００％とした時に要素の幅を％で設定し配置するデザインシステム
メリット：親要素の可変に合わせて要素の横幅が変化するので、画像などの要素の縦横比が変わらない。
デメリット：親要素の幅が極端に狭かったり広かったりする場合、縦に長く表示されたり、画像が大きすぎたり、内容がスカスカに見えたりする。
参考サイト：GATES 株式会社 : PCページ : サイドバー（ナビゲーション）10% / コンテンツ 90%

リキッドデザイン（レイアウト）

要素幅を%で指定しブラウザ幅の可変に合わせて要素の大きさが変化するデザインレイアウト
メリット：フルードデザインと同じ
デメリット：フルードデザインと同じ
参考サイト：木の屋石巻水産 : PCページ : 左右に50%づつ

グリッドシステム

サイトデザイン時にデザインツールにガイドを用いてレイアウトする手法 または ガイド（グリッド線）に沿って配置されるレイアウト

グリッドレイアウト

グリッド線を元に要素を配置したレイアウト
参考サイト：むかわ町 恐竜ワールド 【公式サイト】 : PCページ

エラスティックレイアウト

ブラウザ幅をもとにフォントサイズを計算し、どのブラウザサイズで見たとしてもデザインと同じ表示（比率）になるレイアウト
単位は全て rem を使用して構築をする。
メリット：どのブラウザ、ブラウザ幅で見ても極端な場合を除きデザインと同じ表示（比率）になる。
デメリット：ブラウザの最小文字サイズ設定によっては文字サイズが小さくならない（Chromeの場合デフォルト最小サイズが10px）。ブラウザ幅に連動しているので幅を大きくするとずっと大きくなり続けてみづらくなる。
参考サイト：ATAMI せかいえ : PC/SPどちらも等比表示

フレキシブルレイアウト

幅が固定された要素の残りの幅を全て利用して配置するレイアウト
メリット：残りの領域を可変して使えることで無駄なくコンテンツを配置できる。
デメリット：ブラウザ幅がデザインよりも大きくなると可変領域だけが大きくなるので、バランスが悪くなり間伸びする。ブラウザ幅が小さくなりすぎた時もバランスが悪くなる。
参考サイト：慶應義塾について：[慶應義塾] : PCページ : コンテンツ 100% - 240px / サイドバー（ナビゲーション）240px

固定幅レイアウト

コンテンツの幅を固定値で設定して、決まった大きさで見せるレイアウト
メリット：決まった大きさで表示されるため、大きくなりすぎたり小さくなりすぎたりしない。
デメリット：ブラウザ幅が固定値よりも小さくなった場合、ブラウザの横スクロールが発生して可読性が損なわれる。
参考サイト：東京ミッドタウン日比谷 : PCページ : ブラウザ幅が1024px以下になったときに横スクロール発生

シングルカラムレイアウト

コンテンツ部分が一領域のみのレイアウト
メリット：情報を一つの流れとして見せることができ、順番に見せることができる。
デメリット：情報量によって縦に長くなりすぎてしまい、最後に辿り着く前に離脱される可能性がある。
参考サイト：WPJ – デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援する パスファインディング・メディア

マルチカラムレイアウト

コンテンツ部分が２カラム以上のレイアウトで、メインコンテンツ以外にサイドバーを配置し、
サイト回遊性を上げる目的や検索機能が実装されているサイトに多く見られるレイアウト
メリット：情報を分類して表示できるため、情報へのアクセスを誘導しやすくなる。
デメリット：カラムが多くなってくると表示できるコンテンツの領域が比例して小さくなってしまう。
参考サイト：Yahoo Japan（PCページ）

フルスクリーンレイアウト

初期表示時のファーストビューで画面いっぱいに表示して、ビジュアルを強調したレイアウト。
メリット：サイトが何のサイトなのか、何が売りなのか、何を伝えたいのかが一目でわかりやすい。
デメリット：画面（ブラウザサイズ）が大きすぎたり、小さすぎたりした時の表示の調整が難しい。
参考サイト：古宇利島 / KOURIJIMA : トップページ

それぞれの違いについてメリット・デメリット、参考サイトを書き出してみました。
よく見るサイトはどれに当てはまったでしょうか。
もしくは、作成したサイトはどれに当たるでしょうか。

「Webサイトを作る」と言うこと

今あるWebサイトはこれらのデザイン・システム・レイアウトを複数組み合わせて作られていることがほとんどです。
特にレスポンシブデザインについて話している方のほとんどが、
レスポンシブデザイン = レスポンシブデザイン + リキッドデザイン と認識している方がいるので、
サイト全体をデザイン幅よりも小さくした際はその通りの動きをしてOKを出していただけるのですが、
デザイン幅よりも大きくした際にこうじゃないと言われ、
「横に伸びるのではなく幅を固定してほしい」と言われることが何回かありました。

こうなってくると、
SP - PC - 大画面PC と３つの切り替わりポイントを持つレスポンシブデザイン
かつ
SP - PC の時はリキッドデザイン
かつ
大画面PC の時は固定幅レイアウト
と言うサイトを作らなくてはなりません。

Webサイトを作る時の注意点

上記の内容をデザインからだけでは判断できません。
なので、デザインをもらった時にレイアウト関連についてまず確認をしないといけない事が何点かあります。

• ブレイクポイントはどこに設定するのか
• ブレイクポイントは何個になるか
• デザインよりも大きい幅の時はどのように表示されるべきか
• ブラウザ幅を可変している際はどのように表示されるべきか
• フォントサイズは固定で良いかどうか
• PC/SPの表示は同じHTMLを使うのか、それとも分けるのか

レイアウト関連だけで決めないといけないことはこれだけあります。
なので、一つづつ決めましょう。
そして、ここの決まり事を変更すると言うことは、土台を変更すると言うことなので、
作り直しになる可能性が高いため慎重に決めてください。
それでも変更したいと言う場合は、きちんと修正するための時間をとりましょう。

最後に

デザインからWebページをおこす時に、中間を埋める作業は必ず発生します。
デザイン・レイアウトの前提を共有して認識を同期させ、
土台となる決め事は慎重に決めて政策に取り掛かる事ができるようにしましょう。