スマートフォンサイト最適化ソリューション

2014年05月31日

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を最適な方法で向上させることができます。