様々なデザイン方法

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

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

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

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

2.フルードWEBデザイン

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

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

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

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

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

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

最後に・・・

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

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

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

関連記事

  1. Adobe Colorを使って、簡単に配色を決める方法

  2. レスポンシブデザイン検索サイト まとめ7選!

  3. 商用利用OKの無料写真素材・無料イラスト素材 サイト

  4. ロゴ作成方法 6選

  5. Webサイト・通販サイトが無料で作れるWebサービス

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