1. トップページ
  2. ブログ
  3. 制作系
  4. レスポンシブデザインじゃないマル...

「レスポンシブデザイン」 とは パソコンやスマートフォン、タブレットごとにデザインやHTMLファイルを用意するのではなく、ブラウザの幅に合わせて表示するデザインを調整する、マルチデバイス対応の最新のWEBサイト構築手法です。


そもそもホームページの作り方とは?


一般的に、ホームページはHTMLファイルCSSファイルで作ります。

HTMLファイルは、ホームページで表示したいテキストなどとデザインの骨組みを記入するファイルで、CSSファイルはそれらにデザイン要素を加えるファイルです。

レスポンシブとは


レスポンシブとは、スマホで見てもパソコンで見ても同じHTMLファイルを参照するのですが、見ているデバイス(スマホやパソコン)の画面の横幅に合わせて、対応させるCSSファイルに変更するイメージです。

※その他にもやり方はいろいろあります。

ホームページにパソコンっぽい横幅でアクセスすると「パソコン用のCSSファイル」でデザインしたページを表示させ、スマホっぽい横幅でアクセスすると「スマホ用のCSSファイル」でデザインしたページを見せる。

この○○っぽい横幅というのは、パソコンでアクセスしているのか? スマホでアクセスしているのか? を表示しているブラウザの画面の横幅で区別しているので、パソコンでアクセスしていてもブラウザの画面の横幅を細く表示しているとスマホ用のデザインが表示されます。

レスポンシブの限界

ペコデザイン、、、 と言うか、 あがのは、このレスポンシブデザインの限界を感じています。

そもそもHTMLファイルにはデザインの骨組みを入れ込む必要があるのです。
これがどういう意味かというと、パソコン向けのホームページデザインの骨組みを無理やりスマホに合わせる必要があるのです。

ユーザーフレンドリーなスマホ向けサイトを作ろうとすると、パソコンを主軸に考えた骨組みだと、ちょっと無理がある。

その他にも弱点が....

  1. 設計に手間がかかる
  2. 構築にコストがかかる
  3. 表示スピードに時間がかかる
  4. UIの変更がしにくい。3デバイスのデザインが共通になる
  5. サイト全体のリニューアルが必要
  6. サイトの拡張がやりにくい

レスポンシブデザインじゃない、マルチデバイス対応

そこで、ペコデザインではレスポンシブデザインじゃない方法でマルチデバイス対応させています。

※もちろんレスポンシブを切に願うクライアントさんにはレスポンシブで対応しております。


レスポンシブデザインと違うのは、HTMLファイルもCSSファイルもそれぞれ別のファイルを準備する点です。

よく更新する内容は、CMSで管理することで、「臨時休業のお知らせ」等のお知らせを追加しても、パソコン用にもスマホ用にも両方とも自動で更新することが可能です。


このようなマルチデバイス対応させることで、パソコン向けの良さとスマホ向けの良さを十分に発揮させることが可能なのです!

なにが言いたかったのかと言うと

ペコデザインでは上記の理由のとおり、レスポンシブデザインをオススメせずにマルチデバイス対応をオススメしておりますってことです!

なにかございましたら、下記からお問い合わせくださいませ。