• TOP
  • サービス
  • マルチデバイス対応(レスポンシブ・ウェブデザインとデバイス専用デザイン)

マルチデバイス対応(レスポンシブ・ウェブデザインとデバイス専用デザイン)

レスポンシブ・ウェブデザインやデバイスごとの専用デザイン。
経験と実績に基づいた最適なご提案が可能です。

WEBサイトの代表的なマルチデバイス対応は、ラップトップとモバイル向けのデザインをワンソースで実現するレスポンシブ・ウェブデザインと、デバイスごとにコードをわけることで専用のデザインを実現する二つの手法に大別されます。
私たちはそれぞれの手法のメリット・デメリットを正しく理解した上で、一つ一つのWEBサイトの目的を実現するための最適な手法を選択してWEBサイトの制作を行います。

<レスポンシブ・ウェブデザインの特徴と最適なWEBサイト>

レスポンシブ・ウェブデザインは、HTMLをワンソースで管理し、CSSのメディアクエリという機能を使用して画面サイズ(主に表示領域の幅のサイズ)ごとに設定を切り替えることで、デバイスごとに最適化されたデザインをエンドユーザーに提供する手法です。

HTMLをワンソースで管理するという特性からURLが各デバイスで同一となるため、SEOの観点では有利とされており、Googleもこの手法を推奨しています。
また、特定の画面幅をメイン・ターゲットとして設計を行う専用デザインのサイトと比べ、画面幅に応じて柔軟に可変する設計のレスポンシブ・ウェブデザインは、近年の閲覧環境の多様化(モバイルデバイスの画面サイズのバリエーションの増加や、タブレットデバイスの台頭など)に対応しやすい特徴も持ち合わせています。

専用デザインの場合にはデバイスのユーザーエージェント(ブラウザを特定する文字列)を解析して、テンプレートの分岐を行わねばならないWordPressのようなCMSにとっても、システム側で処理を行う必要がないレスポンシブ・ウェブデザインの方が向いていると言えるでしょう。

その反面、画面幅に合わせて柔軟に変化することが可能なデザインやコンポーネントの作成には、初期構築時に将来の拡張を考慮に入れた設計が不可欠で、運用フェーズにおいても既にサイト内で使用されているコンポーネントに影響を与えずに修正・追加を行う技術力や管理能力が必要となります。

またワンソースで管理する特性上、デバイスごとのデザインや機能が大きく異なっている場合にも必要なデバイス向けのソースのみを読み込むということが困難です。エンドユーザーが使用しているデバイスにとって、本来必要のない設定も同時に読み込んでしまうためページの表示スピードやブラウザの表示パフォーマンスの低下などが発生してしまうデメリットも存在します。
そのため、既存サイトの後付けでのマルチデバイス化や、デバイスごとに最適化されたデザインや機能をエンドユーザーに提供したいという場合には、専用デザインの方が適している可能性があります。

<デバイスごとの専用デザインの特徴と最適なWEBサイト>

デバイスごとの専用デザインは、HTML・CSSともにデバイスごとに別々のソースとして管理し、それぞれの環境でアクセスするエンドユーザー向けに最適化されたデザインを提供する手法です。レスポンシブ・ウェブデザインが普及する以前から実践されている方法ではありますが、現在でも様々なサイトで採用されています。

デバイスごとにソースを分けて管理するという特性から、ターゲットとするデバイスに最も有効と考えられるデザインや機能を追求して設計を行うことが可能で、操作性やページの表示速度、表示するコンテンツ量の最適化など、ユーザーエクスペリエンスが特に重要視されるWEBサイトを実現するには有効な手法と言えます。

運用フェーズにおいては単純に作業工数が倍になる側面もありますが、反面それぞれのデバイス向けのソースがお互いに独立しているという点がこの手法のアドバンテージでもあります。たとえばどちらか一方のサイトにだけ機能の変更・追加を行なう場合、ソースがお互いに独立していることで影響範囲が小さく済むため、大きめの変更にも比較的対応しやすいという利点があります。

SEOの観点では、一般的なスタティックなサイト(サーバーサイドで動的にページを生成しないサイト)で公開した場合、URLがデバイスごとに異なってしまうためレスポンシブ・ウェブデザインに比べ不利になる欠点があります。しかし、この問題はWEBサーバ上でのURLリライトを適切に行うなどの対策により解消することも可能です(WEBサイトの構造にもより難しい場合もあります)。

また各デバイスへの最適化という面では、今後もデバイスが増えていくことを考えると徐々に柔軟な対応が難しくなってきます。デバイスごとに大きなデザインや機能、表示コンテンツの違いがなく、修正や機能追加の頻度が比較的少ないWEBサイトを長く運用したいような場合は、レスポンシブ・ウェブデザインの方が適切と言えるかもしれません。

私たちはさまざまな業種やサイト目的におけるレスポンシブ・ウェブデザインや専用デザインの経験や実績を持っています。どちらの手法を採用するかから検証いたしますのでお気軽にご相談ください。