CONTACT US

目的別プラン レスポンシブウェブデザイン

ワンソース・マルチデバイス対応 ホームページの新しい形です

一つのHTMLでマルチデバイスに対応する制作手法がレスポンシブウェブデザインです。

PC、スマートフォン、タブレット、さらにはTV、カーナビ、ゲーム機に至るまで、インターネットに接続できる端末は今なお増加しています。従来ホームページはデバイス毎にデータを振り分けて表示していましたが、スマートフォンの爆発的な普及とデバイスの多様化に合わせて、一つのデータでレイアウトが自動的に組み変わるレスポンシブウェブが登場しました。

多様化するデバイスにマルチに対応するレスポンシブウェブデザイン

ホームページ制作PRO.では、大規模サイトから小規模サイト、さらには1ページのみのランディングページ(LP)に至るまで、マルチデバイスに対応するレスポンシブウェブデザインを推奨しています。

ワンソースでマルチデバイス対応

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

デスクトップPC、スマートフォン、タブレットPCなどのモニターサイズに合わせレイアウトが自動的に最適化されます。

HTMLが2つある場合

HTMLが1つの場合

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

IE9、Safari、Chrome

古いブラウザに非対応

レスポンシブウェブデザインは、CSSで各ディスプレイサイズを判断して、レイアウトを表示します。

レスポンシブウェブのコードを認識できるブラウザは比較的に新しいブラウザに限られ、基本的にレスポンシブウェブはIE9以上、FireFox・Chrome・Safariの最新バージョン以外は非対応となっています

もちろん古いブラウザでも、様々な手法を駆使することで対応させることは可能ですが、その分の制作コストがかかります。そのためレスポンシブウェブを採用する場合、古いブラウザを非対応とするのが一般的です。

既存のウェブサイトにアクセス解析を設置している場合には、アクセス解析から訪問ユーザーの使用ブラウザをチェックすることも可能ですので、割合データをもとにレスポンシブウェブの採用についてご相談ください

ページの表示速度

レスポンシブウェブでは通信速度の遅い環境からのアクセスも想定しなければなりません。

一般的にスマートフォン・タブレットPCの通信速度は、デスクトップPCの通信速度と比較して、まだまだ遅いと言えます。それゆえページデータの容量が大きいと、スマートフォン・タブレット用ページで表示速度が遅くなることがあります

また、さまざまなデバイスを前提とした画像やスタイルシートなどを使用するため、データ容量を大きくしている場合もあります。

表示速度を改善する代表的な手法をご紹介します

Javascriptによる画像の切り替え

Javascriptとは、ウェブで動的表現をするためによく用いられるプログラミング言語です。これを使った専用プログラムにより、画像を各デバイスに最適化したデータに切り替えます。

モバイルファースト設計

「モバイルファースト」とは、表示面積の小さなモバイル端末に合わせてコンテンツ設計をする考え方です。必要最低限な要素で、軽量なコンテンツから設計を始めることで、他デバイスへの展開時に発生するムダやムラを減らすことができます。

[具体的な留意点]

  • ①モバイルでの表示が不可能なコンテンツ、技術は避ける。
  • ②できる限り画像文字の使用を控える。
    ※可変サイズの画像は、画面幅が小さいとサイズが縮小されてしまうので、文字が読み難くくなることがあります。
  • ③指で押しやすいボタンサイズ、押し間違いを防止するためのボタン周辺の余白を配慮。

急激に増加するスマートフォンからのアクセス

iPhone3Gが日本で初めて発売されたのは2008年。AppleがSoftBankと携帯電話事業で提携したことで、日本市場にスマートフォンが爆発的に普及したと言えます。スマホ普及率は今日現在も増加しており、2010年の9.7%から、2012年現在で49.5%に達しています。

スマホ普及率 - 総務省「通信利用動向調査」より

マルチデバイス対応で機会損失を未然に防ぐ

ウェブサイトはPCだけではなく、スマートフォンやタブレットなど、ユーザーの閲覧環境に合わせた最適化が必要不可欠であり、ユーザビリティの向上がホームページを介しての問い合わせや売上げを大きく左右すると言っても過言ではありません。

機会損失を防ぐ

こんな悩みをお持ちの企業様におすすめ!

レスポンシブウェブデザイン制作実績

レスポンシブウェブデザインの制作実績(一例)

日本赤十字社医療センター 看護部
日本赤十字社医療センター 看護部
東京トロン株式会社
東京トロン
青山、立川、中央区銀座、横浜、埼玉、千葉からのお問い合わせはこちら お問い合せフォーム

TOP