東京のホームページ制作・WEBデザインオフィス「SKYGOLD」

レスポンシブWEBデザイン制作

レスポンシブWEBデザインの対応をしております。
マルチデバイスの対応はできていますか?

PCをはじめ、スマートフォン、タブレットなど様々なデバイスに対応したWEBサイトを1サイトでご提供致します。
デバイスが多様化していく中で、PC用、スマートフォン用、タブレット用と別々に制作していくと、制作費・ランニングコストが大幅に掛かってしまいます。 目的や、コンテンツ内容に応じてあえて別々のデバイス用に制作することもありますが、今回は一つのアプローチ方法として、1サイトで複数のデバイスに対応できるレスポンシブWEBデザインをご紹介させていただきます。

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

レスポンシブWebデザインとは、PCやタブレット、スマートフォン毎にデザインやHTMLファイルを個別に作成するのではなく、ブラウザの幅に合わせて、表示するデザインやレイアウトを変化させることによりマルチデバイスに対応する制作技術です。

現在はまだデバイスごとにページを振り分けする方法が一般的ですが、「レスポンシブWEBデザイン」では、1つのHTMLファイルに、CSS3(カスケーディング・スタイルシート)のMedia Queries(メディアクエリー)を利用してスタイルシートだけでデザインやレイアウトを変更し、ブラウザに表示させます。それにより、複数デバイスへの対応を1つのHTMLファイルのみで行うことが出来ます。
次々と多様なスマートフォンやタブレット端末が登場しており、特定のデバイスのディスプレイサイズに合わせて制作していくと、他の多くのデバイスに対応しきれなくなります。「レスポンシブWEBデザイン」では、その問題を解消すべく、ブラウザサイズのピクセル幅に応じてデザインやレイアウトを切り替えるため、多くのデバイスに柔軟に対応することが出来ます。

従来のWEBサイト制作との比較

PC,スマートフォン,タブレット端末を別々のサイト制作した場合
メリット
  • ・各デバイスごとに違ったデザイン、コンテンツを自由に用意でき、もっともユーザーに合わせた制作が出来る。
デメリット
  • ・それぞれを個別に制作するため、制作費用が高くなる
  • ・更新を別々にしなければならないので、手間(ランニングコスト)が高くなる
PCサイト又は携帯サイト用で制作したものを、スマートフォン用に最適化した場合(CMSによくある機能)
メリット
  • ・制作工数を抑えてスマートフォンでも閲覧可能になる
  • ・既存サイトをそのまま活用できる
デメリット
  • ・複数デバイスでの対応ができないので、ユーザビリティが低下しやすい
  • ・新しいデバイスへの対応が困難になる
レスポンシブWEBデザインで制作した場合
メリット
  • ・PC、スマートフォン、タブレット端末専用に別々にサイト制作をしなくてよいので、制作コストを抑えられる
  • ・1ページ毎に1つのHTMLで簡潔するので、一度の更新で全てのデバイスへの更新作業が完結する
  • ・各デバイスへの対応ページを1つのURLで実現できる
  • ・スマートフォン非対応のCMSでもCSSの調整だけで対応できる
  • ・デバイス毎に不要なコンテンツを非表示にできる
デメリット
  • ・1ページ内に画像を多用するようなサイトには不向き(スマートフォンでの表示速度が遅くなる)
  • ・フィーチャーフォン(従来の携帯電話)への対応が困難
  • ・デバイス毎にコンテンツ内容を変えたい場合には不向き

こんな方におすすめです。

  • 更新を一度で済ませたい。
  • 複数サイトを管理しているとややこしくなる。
  • 制作費用を抑えつつ、マルチデバイスで対応したい。
  • デバイスが変わっても掲載したいコンテンツ内容は大きく変わらない。
  • 様々なデバイスからユーザーのアクセスがある。又は今後はそういった形に対応したい。
  • 新しい技術に関心がある
アーカイブ