様々なデザイン方法

1.フィックスWEBデザイン

WEBサイトの横幅が固定されたデザイン。

幅が決まっているのでデザイン崩れを防ぐことができます。

ブラウザの横幅を変更すると、はみ出た分部はスクロールになります。

2.フルードWEBデザイン

ブラウザのサイズを変更すると、変更されたサイズに合わせて横幅いっぱいのサイズに変化するデザイン。
リキッドデザイン(サイズ可変デザイン)とも言われます。

3.アダプティブWEBデザイン

パソコン、タブレット、スマートフォンなど、デバイスの画面サイズに合わせたデザインを複数用意することで、同一コンテンツを見やすく表示させます。

レスポンシブWEBデザインとアダプティブWEBデザインは、閲覧するデバイスに合わせて最適なデザインに変化します。
そのため、WEBサイトを見ただけでは、分かりづらいかもしれませんね。

例えば、Yahoo! JAPANをパソコンで見た場合とスマートフォンで見た場合、URLは下記のようになります。

このように、URLが異なる場合はパソコン用・スマートフォン用とページを見る環境に合わせて最適な表示がされるように、それぞれのページを用意しているアダプティブWEBデザインの可能性があります。
※同一URLの場合はレスポンシブWEBデザインの可能性が高いですが、必ずしもそうだとは限りません。同一URLでもパソコン・スマートフォンなどを判断し、それぞれ用意したページを見せている場合もあります

最後に・・・

今回、説明した内容をまとめたものを、Instagram(@ibg_webdesign)でも投稿しています!

投稿内容を見返したい場合は、Instagramで投稿を保存してみてください◎

今回紹介した内容はもちろん、その他にもレスポンシブデザインについてのことなども投稿していますので、ぜひチェックしてみてくださいね。

関連記事

  1. マネしたくなる美容室サイト7選!

  2. 色の組み合わせ -季節・イベント・国のイメージカラー-

  3. リピーターを獲得できる美容室サイト7選!

  4. WEBデザインを構成する3つの色

  5. 色が与える印象 -彩度・明度編-

  6. 「Canva」を使って、Instagramの投稿画像を作成