RESPONSIVEレスポンシブコーディング

一つのHTMLで複数のデバイス向けのページを提供するのがレスポンシブコーディング。大まかに言えば一つのHTML要素に対し、表示する画面の大きさ(ビューポートの大きさ)に応じた複数のCSSで装飾を行うコーディング手法と呼べます。
HTMLを1カ所書き換えるだけで、すべてのデバイス向けの表示を更新することができるため、運用コストを削減でき、サイトの更新性も高めやすい、現在のWebサイト制作の主流となっているHTMLコーディング手法です。

レスポンシブコーディングの特長

  • どのデバイスからWebサイトを閲覧しても、最適化されたレイアウトで表示される

    どのデバイスからWebサイトを閲覧しても、
    最適化されたレイアウトで表示される

    スマートフォンやタブレットが登場する前は、Webサイトの閲覧はPCから行うことが一般的でした。しかし、現在ではスマートフォンのように小さなデバイスからWebサイトを見るユーザーが増えたため、どのデバイスから見ても見易いWebサイトである必要があります。
    レスポンシブコーディングであれば、PCとスマートフォンで大きなデザインの違いがなく、それぞれのデバイスサイズで最適化されたWebサイトを構築することが可能です。

  • ワンソースですべてのデバイスへ対応することができる

    ワンソースですべてのデバイスへ
    対応することができる

    これまでは、PC用、モバイル用それぞれのデバイスに合わせてHTMLファイルとCSSファイルを用意していました。これをアダプティブコーディングと称します。これは、2つのサイトを運営しているようなものなので、更新には大変な手間がかかっていました。
    現在主流のレスポンシブコーディングは、PC、スマートフォン、タブレットなど、デバイス間での表示違いをCSSで調整をするため、HTMLコーディングは常に同じになります。その為、システムへの組み込みや更新運用の負荷もかなり軽減できます。
    例)デバイスのウィンドウ幅が750px以下だったらスマートフォン用のレイアウトを表示し、それより広ければPC用のレイアウトを表示するなど、レイアウトをCSSファイルで調整します。

  • Googleがレスポンシブデザインを推奨

    Googleがレスポンシブデザインを推奨

    Googleは、モバイルファーストインデックスとしてWebサイトをレスポンシブコーディングで制作することを推奨しているため、Webサイトがモバイルに最適化されている事が、Googleの検索順位に影響します。
    ※モバイルファーストインデックス:Googleの検索順位決定において、PCサイトではなくスマホやタブレットといったモバイル型端末向けのサイトを重視するという方針

  • ユーザーにSNSでシェアされやすい

    ユーザーにSNSでシェアされやすい

    URLが1つなのでWebサイトに訪れるユーザーにシェアされやすくなります。スマホ用とPC用のWebサイトを別に用意すると、見せたいユーザーのデバイスに合わせて異なるURLを送らなければなりません。

レスポンシブコーディングの価格と納期

  • レスポンシブコーディングの価格

    1ページ

    10,000円~

  • レスポンシブコーディングの納期

    • 10 ページ以下3 〜 5営業日
    • 11~20 ページ6 〜 10営業日
    • 21 ページ以上10 〜営業日

※縦の長さが5,000pxまで。それ以上の場合は別途ご相談ください。
※休日、定休日は日数に含まれません。
※弊社は初期費用やCSS作成費用は一切頂戴せず、ページ単価でお見積もりしております。詳細は是非一度お問合せください。

価格詳細へ

レスポンシブコーディングの制作の流れ

ご利用の流れは5ステップ。の番号はお客様フローになります。

  1. STEP

    お見積り・ご注文

    プロジェクトの詳細をお見積りフォームからお送りください。担当営業よりお見積りURLをお送りいたします。
    ご注文はお見積りURLにあるご注文ボタンから簡単にできます。
    またデザインからの制作も可能です。詳細はこちらをご覧ください。

  2. STEP

    データ入稿

    レスポンシブ用に設計されたデザインデータと当社フォーマットのサイトマップ、及びコーディング指示書(任意)をご入稿いただきます。
    PCデザインのみ頂戴し、レスポンシブコーディングを制作することも可能です。

  3. STEP

    コーディング

    弊社にてHTMLコーディング制作を行います。
    別途お渡しする管理シートにて、ページ毎の進捗状況を確認いただけます。

  4. STEP

    テスト確認

    弊社で準備するテストサーバー上で確認いただきます。
    調整等ございましたら別途お渡しする「課題管理表」からご連絡くださいませ。

  5. STEP

    調整作業・ご納品

    「課題管理表」にご記載いただいた内容を対応しご連絡いたします。問題なければZIPファイルにてご納品いたします。
    本番サーバへのアップロードをご希望の場合は、担当営業までお申し付けください。

詳しい流れはこちら

レスポンシブコーディングのよくある質問

  • ブレイクポイントの指定はできますか?

    はい、可能です。お見積もりの際に、ご指定のブレイクポイントを担当ディレクターにお伝えください。

  • デザインデータはPC用とスマートフォン用の両方の入稿が必要ですか?

    いいえ、PC用デザインデータの入稿だけでも大丈夫です。PC用デザインデータを見ながら、スマートフォン表示時を調整、実装いたします。

  • タブレットも含めたレスポンシブは可能ですか?

    はい、可能です。タブレットでの表示をどのようにするか、デザインデータ等でご提供ください。

  • リキッドレイアウトも対応できますか?

    はい、可能です。基本的にはスマートフォンでの表示はリキッドレイアウトになりますが、それ以上の大きさの場合もリキッドレイアウトにすることができます。詳細は担当ディレクターにお問合せください。

その他のFAQはこちら

お急ぎのプロジェクトは、リソース確保をお早めに!リモート、遠方の方はオンライン相談が便利です。

CODING SAMPLE

コーディングサンプル

弊社ではPUG、およびSASSを用いてコーディングを行います。
PUGやSASSのサンプルデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。

コーディング実績へ
  • OFFICE

    弊社の営業拠点をご案内しております。
    情報セキュリティ担保のため、ご来社の際は事前登録が必要です。まずはお問い合わせください。

  • TOKYOTOKYO
    TOKYO
    〒101-0021 東京都千代田区外神田
    6-11-16 GMビル5階 (GoogleMap)
  • OSAKAOSAKA
    OSAKA
    〒541-0044 大阪市中央区伏見町
    4-4-9 淀屋橋東洋ビル3階 (GoogleMap)
  • VIETNAMVIETNAM
    VIETNAM
    VINA GIAY PLAZA,
    180-182 Ly Chinh Thang, Phuong 9, Dist. 3, Ho Chi Minh city, Viet Nam.(GoogleMap)
  • FRANCEFRANCE
    FRANCE
    24 Boulevard Gambetta, 62200 Boulogne-sur-Mer, France. (GoogleMap)