株式会社エスピーアイティ

TOP   》   WEBソリューションの提案   》   レスポンシブWebデザイン 

レスポンシブWebデザイン

パソコン、スマホ、タブレットなど進化するデバイスに対応する、Webサイトを作る

「レスポンシブWebデザイン(Responsive Web Design)」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、Webサイトを単一のHTML(ワンソース)で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意すること なく、マルチスクリーンに対応したWebサイトを制作できます。

現在スマートフォンやタブレット端末が多様化しているため、特定のデバイスのスクリーンサイズに合わせてレイアウトすると他の多くのデバイスに対応しきれない問題が発生します。
「レスポンシブWebデザイン」では何pxのウインドウサイズを境にデザインを切り替えるのかでデザインを行うため、柔軟に対応することができます。

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

レスポンシブWebデザインでのマルチデバイス対応のメリットは、大きく3つあります。

運営が簡便である

ソースが1つなので、1つの更新で各端末に合わせた変更が可能になります。

検索に有利

URLがひとつなので、検索エンジンのクロールが一度で済み、また、ユーザーがシェアしたり、リンクを貼ったりしやすくなります。

デバイスの多様化への対応が容易

今後、様々なデバイスが登場しても画面サイズで分けているので、ほぼカバー可能です。

一方で、1つのソースで様々な画面出力をさせるためにHTMLやjavascript、CSSのファイルサイズが大きくなり、またスマートフォンなどの小さな画面では必要のない大きなサイズの画像も読み込む必要があるなど、若干のデメリットも存在します。ご予算や管理コスト、各デバイスのユーザーの重要性などと相談しながら、マルチデバイス対応の手法をご選択ください。

レスポンシブWebデザインの実績

  • デザ魂
    サイト名 デザ魂
    サイト公開時期 2014年10月
    主要スペック HTML5・CSS3、CMS、レスポンシブデザイン 他
    弊社担当部分 全て(企画、システム開発、サイト構築、運営 他)
    制作・開発期間 3ヶ月(随時開発中)
    サイトURL http://design-soul.jp/
    サイト概要 クリエイターになる夢をあきらめない学生に対し、在学中からプロの仕事を経験して頂き、より実践的な制作活動を体験する事で就職活動をより有利にし、未来のクリエイターとして導いていこうという目的から立ち上げたサービスです。
  • 調剤薬局グループ 企業サイト

    調剤薬局グループ 企業サイト
    サイト名 株式会社サンプラザ調剤薬局
    サイト公開時期 2012年11月
    (リニューアル) 2015年1月
    主要スペック WordPress、レスポンシブデザイン
    弊社担当部分 サイト構築
    制作・開発期間 1ヶ月
    サイトURL http://www.sun-plaza.co.jp/
    サイト概要 大阪・京都に展開する調剤薬局グループ「株式会社サンプラザ調剤薬局」様のWebサイトを制作致しました。
  • 行政書士事務所Webサイト

    井上社会保険労務行政書士事務所
    サイト名 井上社会保険労務行政書士事務所
    サイト公開時期 2015年2月
    主要スペック HTML5+CSS3コーディング、レスポンシブデザイン
    弊社担当部分 サイト構築
    制作・開発期間 1ヶ月
    サイトURL http://www.inouejimusyo.jp/
    サイト概要 大阪府堺市にある井上社会保険労務行政書士事務所様のWebサイトを制作致しました。
  • 個人オフィシャルサイト

    とだ徳一オフィシャルサイト
    サイト名 とだ徳一オフィシャルサイト
    サイト公開時期 2015年3月
    主要スペック HTML5・CSS3、レスポンシブデザイン
    弊社担当部分 サイト構築
    制作・開発期間 1ヶ月
    サイトURL http://www.toda-tokuichi.com/
    サイト概要 「とだ徳一」様のオフィシャルサイトで、レスポンシブデザインでサイトを制作致しました。