レスポンシブWebデザインプラン

レスポンシブWebデザインは1ソースでCSSのMedia Queriesを利用して各デバイスごとに最適化されたデザインで表示させるホームページ制作技術です。

デバイスをwebサイト表示の判断基準にするのではなく、ブラウザの横幅サイズをwebサイト表示の判断基準にするため、様々なスマートフォンやタブレットで最適化されたホームページを表示することが可能です。

※レスポンシブWebデザインで制作されたホームページは、IEでは9以上が動作対象ブラウザとなります。

ジーンコードイメージ図
  • 特徴


    1ソースでマルチデバイスに対応
    レスポンシブWebデザインは、1ソースでマルチデバイスに対応できるため、ホームページの運用・メンテナンス性に優れています。PCとスマートフォン・タブレットなどのスマートデバイスで同一URLでホームページにアクセスできると言ったメリットもあります。
    未知のデバイスにも対応
    レスポンシブWebデザインは横幅を基準としてレイアウトを設計するため、今後発売される未知のデバイスでも解像度に最適化されたホームページを表示することが可能です。
    新規制作やフルリニューアル時に最適
    レスポンシブWebデザインでは各解像度でどのように表示するか綿密な設計が必要なため、ホームページの新規制作やフルリニューアル時のスマートデバイス対応に最適な手法です。CMSとの親和性も高く、組み合わせることでホームページの運用・管理が非常に効率的にできます。
    Googleも推奨
    レスポンシブWebデザインは様々なデバイスに対応する手法としてGoogleにも推奨されており、SEOの効果が「現れやすい」マルチデバイス対応手段の一つでもあります。
    レスポンシブWebデザイン概要図
  • レスポンシブWebデザイン制作フロー


    1. 1.要件定義
      お客様のご要望を洗い出し、レスポンシブWebデザインの最適な仕様・ホームページへの実装方法を検討・策定します。
    2. 2.デザイン作成
      各デバイスにおけるユーザーの利用シーンを想定し、レスポンシブWebデザインホームページにおけるブレークポイント毎のレイアウトデザインを作成します。
    3. 3.プロトタイプホームページ制作
      仮組したホームページにて各デバイス毎のレイアウト・動作をご確認いただきます。
    4. 4.HTMLコーディング
      お客様から提供いただいた原稿・写真素材などを組み込み正式なレスポンシブWebデザインのホームページを作成します。
    5. 5.テスト・検証
      各種デバイスにてレスポンシブWebデザインが正常に機能するか、画面表示・動作・パフォーマンスのテスト検証を行います。
    6. 6.公開
      お客様のサーバにホームページのデータをアップロードして最終検証後、公開になります。
レスポンシブWebデザインプランのお申込・お問合せ スマートデバイスHPサービスに関するお問い合わせ