ホームページ作成・ブランディングデザイン事務所 visual art

HTML・CSS, ホームページ制作関連コラム, レスポンシブデザイン・スマホ対応

レスポンシブデザインはPC+スマホで切り替え可能サイトではない

投稿:2016/02/05 更新:2018/07/11

レスポンシブデザインとは
さて、レスポンシブデザインでスマホ対応したいというご相談も増えていますが、レスポンシブデザインとはいったいどのようなものかハッキリしていない方も多いかもしれません。
 

レスポンシブデザインとは

レスポンシブデザインはモニター幅に合わせてモニター幅に最適化されたデザインのCSSを切り替えてホームページを表示させる方法である。
スマホサイトでPCサイトへ切り替えるのようなボタンがあってどちらの表示で閲覧できるかを選択できるサイトではない。(これはスマホサイトとPCサイトが別にあるだけのこと)
 

レスポンシブデザインのメリット

・ベースのHTMLファイルはひとつなので、文言や写真などを変更する場合はひとつのHTMLファイルを修正するだけで済み簡単である。
・CMSなどのシステムを導入していなくてもHTML+CSS+JQueryぐらいで対応が可能である。
・CSSを切り替えるブレークポイントを増やせばどのようなモニター幅に(細かく言えば高さにも)対応可能である。
 

レスポンシブデザインのデメリット

・スマホでPCサイトを閲覧したり、スマホサイトとPCサイトを切り替えるボタンを設置することはできない(モニター幅でデザインが決定されるため)
・ベースのHTMLファイルがひとつのためPCをベースに考えると内容量が多くなり、スマホ等では読み込みに時間がかかってしまう(デザインの最適化だけで内容の最適化はできない)
・ひとつのhtmlをベースに作成するのでデザインにも制約がでてくる(PCサイトよりもスマホを意識したデザインにならざる負えない)
 

WordPressでハイブリッドサイト

WordPressなどのCMSを導入するのであれば、テンプレートでスマホサイト用とPCサイト用の切り替えを行う方法もある。CSSも切り替えるが、PCサイトとスマホサイトで共通するテンプレートを使用する部分もでてくるので、ある意味ハイブリッドサイトといってもいいかもしれない。
 

関連ページ

レスポンシブデザイン(WEBサイト構築用語集)
 

このエントリーが役に立ったらシェアしてください

  • .

千葉、東京、横浜、ロンドンで連携して日本国内から海外までホームページ作成、ブランディングデザインを承っております。
ホームページ作成、ブランディングデザインのご相談・お見積は無料です。まずは概算見積をしますのでお気軽にお問い合わせください。

お見積+ご相談(無料)

PAGE TOP