Webサイトを制作する際に、マルチデバイス対応は昨今必須となりました。
マルチスクリーンに対応し、ユーザーのコンテキストに基づいてサイトのコンテンツをカスタマイズするには、一般的に3つの方法があります。どの方法を選ぶかは、コンテンツの特性やシステムの制限に応じて選択することが重要です。
レスポンシブ ウェブデザイン
レスポンシブウェブデザインでは、デバイス毎に個別のHTMLを用意しなくても、デバイスのスクリーンサイズに合わせて表現を最適化できます。
CSSのメディアクエリ、JavaScriptを駆使することで、デバイスの表示領域のサイズに合わせて画像やレイアウト、見やすさを調整できるほか、画面に指で触れるドラッグやスワイプといったタッチ操作を認識する最新のデバイス機能を活用することもできます。
これらのCSSやJavaScriptの技術は、すべてのデバイスを対象とする単一のHTMLンテンツのファイルに追加することができます。
ただし、複数デバイスに対応したHTMLの工夫、画像容量の増大によるレスポンス負荷など、問題点もあります。
弊社では、これらメリット、デメリットを考慮した最適な方法を選択できます。
同じURLで動的に異なるHTMLを配信
Webサイトにアクセスしたユーザーのデバイスを判別し、HTML出力を制御することで、同じURLにデバイスに応じたページ(HTML+CSS)を表示することが可能です。
これらのページは、携帯電話、スマートフォン、タブレット、PCのほか、スマートテレビといったあらゆる種類のデバイスに応じて作成できます。
サーバサイドプログラムを得意とする弊社の開発では、これらデバイスの判別、制御を正確に行い、出力HTMLの共通化や分割、モジュール化することで柔軟なマルチデバイス対応を実現します。
個別のモバイル専用 URL
デバイスの種類に応じてWebサイトをカスタマイズするもう1つの方法として、元のPC向けサイトとは別に、モバイル専用サイトを作成する方法があります。この方法では、ブラウザが携帯端末からのアクセスを検出して、そのユーザーをモバイル向けサイトの別URLにリダイレクトします。
既存のPCサイトに手を加えたくない場合や、システム的な制限により上記2つの方法が難しい場合は、このモバイル専用サイトを他システムへの影響を最小限にした状態で、設置することができます。
弊社では、数多くのスマートフォンサイトを制作する過程で、マルチデバイス対応のノウハウを蓄積しており、WebサイトのUI/UXを最適な方法で向上させることができます。