レスポンシブとは？

WEBサイト制作に頻繁に出てくる「レスポンシブ」という言葉があります。
パソコンやスマホ、タブレットなど、
画面サイズが異なるデバイスでも1つのHTMLファイルでWEBサイトを綺麗に表示させる
構築方法です。

参考：当社WEBサイト（パソコン、スマホ表示）

通常の制作方法と比べ、さまざまなメリットがあります。

レスポンシブ（スマホ対応）の重要さ

近年、インターネットの利用環境はほとんどスマホになりました。
そのためWEBサイトをスマホ対応することは、サイト制作において極めて重要になっています。

LINEヤフー調査（https://www.lycorp.co.jp/ja/news/release/007747/）

レスポンシブの種類

レスポンシブでWEBサイト制作するにあたり、一般的に使われているレイアウトを紹介します。
WEBサイトのジャンル、希望するデザインによって最適なレイアウトを選びましょう。

リキッドレイアウト

幅をパーセントで指定し、画面幅を縮めていくと横幅が変化していくレイアウトです。
表示した画面サイズに合わせて、WEBサイトのコンテンツが伸びたり縮んだりするので、どんなデバイスでも画面幅いっぱいで見せることができます。

メリット

• 画面幅に合わせて変化するので、横スクロールバーが出ない。
• さまざまな画面幅のデバイスにも対応。

デメリット

• どの画面幅でも横スクロールバーが出ないので、複雑なデザインのWEBサイトだと意図しないレイアウトになる可能性がある。

グリッドレイアウト

テキストや画像、WEBサイトの各要素を格子状（グリッド）に配置するレイアウトです。
言葉ではわかりにくいですが、新聞や雑誌で使われてきた手法です。
参考を見ていただければ、わかりやすいです。

Pinterest
https://www.pinterest.jp/today/

Find my Tokyo. | 東京メトロ
https://findmy.tokyo/

メリット

• 統一感があり、整理されていて見やすい。
• レスポンシブと相性が良く、どのデバイスでもある程度綺麗に見える。

デメリット

• コンテンツごとの重要度がわかりにくいので、ユーザが迷いやすい。
• シンプルなデザインになりがちで、サイトデザインが制限されやすい。

フレキシブルレイアウト

基本的にはリキッドレイアウトと共通していますが、横幅の最大値を設定し、その中で可変するレイアウトです。
大きいサイズのデバイスでも、横幅が大きくなりすぎず、想定したデザインをユーザに見せることが可能です。

メリット

• 横幅100%に加え、最大幅が設定できるので想定通りのデザインを見せることが可能。