モバイルWebサイトの設計は複雑です。サイトの1つのモバイルバージョンがすべてのデバイスと互換性があるとは限らないためです。モバイルプレゼンスを有意義で価値のあるものにするために、設計者は最良の設計方法を知っておく必要があります。
Web開発者の間では、モバイル向けに最適化されたWebサイトを作成する方法が最適かどうかについて継続的な議論があります。モバイルWebサイトを開発するための3つの主要な方法があります。
これらは：
- レスポンシブWebデザイン
- 専用の携帯サイト。
- RESS：サーバーサイドプログラミングは、デバイスの種類に応じてCSSとHTMLをレンダリングします。
それぞれの方法には長所と短所があります。 Web開発者は、状況に最適なものを実装するためにそれぞれの技術を知っておく必要があります。
携帯サイトをデザインする3つの方法
レスポンシブWebデザイン（RWD）
RWDは、Webページのレイアウトをデバイスの表示領域のサイズに合わせるためにCSS3メディアクエリに依存しています。同じHTMLコードを使用して、タブレット、モバイルデバイス、デスクトップ、その他のガジェットのさまざまなWebページレイアウトを表示します。
利点：
- あなたのウェブサイトは似たようなコンテンツとHTMLマークアップを持っているので、どのタイプのデバイスを使っていても、モバイルの訪問者は同じ経験をするでしょう。
- 単一のURLにより、ユーザーはコンテンツにリンクしてコンテンツを共有することが簡単になります。 （Webページが複数のURLアドレスで利用可能な場合、ユーザーは混乱する可能性があります。）
欠点：
モバイルコンテンツを個別に最適化することはできません。したがって、RWDを使用する設計者は、モバイルユーザー向けにコンテンツを個別に調整することはできません。
HTTPアーカイブの2013年1月のデータによると、平均Webページは約1.3 MBです。ただし、ほとんどのRWDサイトは比較的大きいです。このサイズが大きいと、モバイルサイトのパフォーマンスが低下し、遅くなります。
モバイルユーザーは、モバイル固有のユーザーインターフェイスデザインパターンに、より精通しています。さらに、モバイルユーザーはマルチタスクに慣れています。ナビゲーション構造が特定のデバイス用にカスタマイズされていない限り、複数のタスクを同時に実行しようとすると、ユーザーは問題に直面する可能性があります。
専用携帯サイト
この方法では、まったく別のWebサイトを作成することでモバイルユーザーのエクスペリエンスが向上します。
利点：
- 管理のしやすさ：モバイルサイトとデスクトップサイトでは別々の変更が必要です。加えられた変更は、それぞれのバージョンに限定されています。つまり、モバイルプラットフォーム向けの変更にはデスクトップからアクセスできません。
- あなたが携帯電話専用のウェブサイトを開発しているとき、それはそのオーディエンスのために特にそれを合理化し最適化することをより簡単にします。
- コンテンツとナビゲーション構造は、モバイルユーザー向けにカスタマイズできます。
欠点：
ソーシャルメディアを介してWebページを共有すると、専用のモバイルサイトではページに複数のURLがあるため、より困難になります。デスクトップユーザーがソーシャルメディアプラットフォームで共有されているモバイルURLをクリックすると、デスクトップバージョンではなくモバイルバージョンのサイトが誤って表示されることがあります。
重複コンテンツの問題を回避するために、Web開発者はrel =” alternative”およびrel =” canonical”メタタグを使用する必要があります。モバイルユーザーがGoogleを検索してデスクトップURLをクリックすると、そのユーザーはデスクトップバージョンを表示するか、モバイルバージョンのWebページにリダイレクトされます。モバイル版が存在しない場合、ユーザーはエラーメッセージを受け取ります。
モバイルユーザー向けにまったく異なるWebサイトを作成するということは、そのサイトがモバイルユーザー向けに特別に調整されることを意味します。しかし、その目的を達成するために、Web開発者は機能性とコンテンツを切り取らなければならず、それは彼らにとって悪夢であることがわかります。
レスポンシブWebデザイン+サーバーサイドコンポーネント（RESS）
この方法は、サーバーサイドのプログラミングに依存して、さまざまなデバイスにカスタムHTMLとCSSを提供します。モバイルユーザーのコードはデスクトップユーザーのコードとは異なります。
この実装の背後にある主な目的は、Webサイトのパフォーマンスを向上させることです。レスポンシブWebデザインと組み合わせると、この方法はうまく機能します。したがって、この実装はレスポンシブWebデザイン+サーバー側コンポーネント（RESS）と呼ぶことができます。
利点：
- ナビゲーション構造は、デスクトップユーザーとモバイルユーザーが実行するさまざまなタスクに合わせてカスタマイズできます。
- 開発者はHTMLおよびCSSからページ要素を削除して、目的の表示を実現できます。
- HTMLから不要なJavaScriptを削除すると、モバイルデバイスのCPUリソース、メモリ、およびキャッシュが解放されます。
欠点：
- 動的HTMLはサーバーの負荷を増大させます。
- デバイスの検出は信頼できません。
- HTMLとCSSはモバイルのパフォーマンスに最適化されています。デスクトップ版はより多くのHTTPリクエストとJavaスクリプトを使用します。
選択する方法
モバイル向けに最適化されたサイトをデザインするかどうかは、販売する製品、対象ユーザー、必要な投資、競合、コンバージョン率などによって異なります。最も効果的なデザイン方法は、画面フォーマット、オペレーティングシステム、ブラウザ、解像度
ほとんどのレスポンシブWebデザインサイトは最適に実装されていないため、これらのサイトの読み込みには時間がかかります。競争が激しいので、あなたのサイトのパフォーマンスが遅いと、顧客を失う可能性があります。ユーザーは、開くのに時間がかからない別のWebサイトに切り替えるだけです。専用のモバイルサイトを使用してロード時間の短いWebサイトを作成することは可能ですが、この実装にはさまざまな欠点があります。
RESSは、その2つの主な欠点を克服するRWDの利点を提供します。 RESSの主な欠点は、デバイスの検出が信頼できないことです。プロセスが正常に機能し続けることを確認するために、新しいデバイスを頻繁にテストする必要があります。
DeviceAtlas、WURFLなど、新しいデバイスを検出できるサービスがあります。データベース内の新しいデバイスを更新することは大きな助けになります。
モバイルWebデザインは、Webサイトがモバイルデバイスに正しく表示されている場合にのみ成功します。デスクトップサイトの重要な部分をすべて小さなモバイルウィンドウに表示するのは設計者にとって大変な作業ですが、モバイルWebサイトをより良く、より速く、より完全に機能させるための新しい技術が日々登場しています。
Shutterstockによる携帯サイトの写真
15コメント▼
