モバイル Web ページの仕組み

1997 年頃のインターネットを覚えていますか?ページは、低解像度の CRT モニターと低速モデム向けに設計されています。 Web ではテキストが主流であり、時折 JPEG や GIF 画像があちこちのページを飾りました。ダイヤルアップ モデムの速度を少しでも向上させる確実な方法の 1 つは、画像をオフにすることであったため、ほとんどの場合、それらは表示されませんでした。 10 年以上が経過し、インターネット全体の状況は変わりました。ケーブルおよびDSL接続を介したブロードバンド インターネットは先進国の標準であり、Web ページでは、大量の画像、透明効果、さらにはビデオなど、より複雑な要素を使用してコンテンツを配信できます。ファイルのダウンロードを待たずに、映画全体をインターネットからコンピューターにストリーミングすることもできます。

高解像度モニター、ブロードバンド速度、派手なグラフィック オプションへの移行が大きくなったのと同じくらい、第 2 のトレンドが今日存在する World Wide Web に大きな影響を与えています。電話技術がより高度になり、より安価になるにつれて、スマートフォンはインターネット体験に不可欠な部分になりました。モバイル デバイスは、PC を所有していない何百万ものユーザーにとって、Web への重要なゲートウェイとなっています。たとえば、インドでは、人気のある Web ブラウザ Opera Mini の使用量が 2010 年 3 月から 2011 年 3 月の間に 300% 増加しました 。世界の多くの地域では、インターネットへの窓は 23 インチのモニター上にありません。 3インチの携帯電話の画面に表示されます。タッチ スクリーンや強力なハードウェアを備えていない安価な「機能のない」携帯電話でも、Web サーフィンを行うことができます。

モバイル Web サイトに入ります。モバイル インターネットの使用の人気は、高速インターネット サービスやより強力なコンピューター ハードウェアと並行して到来しているため、オンライン コンテンツの開発者は特有の課題に直面しています。大きなモニター、高速コンピューター、高速インターネット向けに設計された Web サイトは、グラフィックスや最先端の​​プログラミングに大きく依存していますが、モバイル デバイスの小さな画面や低速のネットワークでは必ずしも動作するとは限りません。解決策はモバイル Web サイトにあります。モバイル Web サイトは、ページの読み込み速度を低下させるグラフィックスを削減しながら、小型デバイスで動作し、重要なコンテンツを配信するように特別に調整されたページです。モバイル Web サイトは完全なサイトよりも意図的にシンプルになっていますが、それは構築が簡単であるという意味ではありません。モバイル Web サイトは依然としてデザインとテクノロジーに注意を払う必要があり、モバイル ハードウェアの厳しい制限によって作業が簡単になるわけではありません。

モバイル Web サイトのデザイン

モバイル プラットフォームとフル コンピューターを区別するには、テクノロジーとインターネット速度が大きな役割を果たしますが、最終的にはすべてサイズになります。対角線が 4 インチ (10.2 センチメートル) を超える最大のスマートフォン画面でさえ、コンピューターのモニターに比べれば小さいものです。これらのディスプレイの画像解像度は向上し続けていますが、Web サイト全体を読みやすく表示するには物理的に小さすぎます。これらを読むにはズームインする必要があり、多くの場合、最新のサイトの複数列レイアウトによりナビゲーションやコンテンツの利用が困難になります。 Web サイトの最適な使いやすさは、プラットフォームの特徴を理解することから生まれます。モバイルの場合、それは画面サイズから始まります。

モバイル Web デザインでは、すべてのコンテンツを 1 つのコンパクトな配置に凝縮する単一列レイアウトに重点を置く必要があります。これには、ナビゲーション リンクの再配置、重要性の低いページ要素の削除、携帯電話のサイズを考慮してプライマリ列の幅を狭くすることが必要になる場合があります。モニターは高さよりも幅が広いですが、ほとんどの携帯電話の画面は縦向きに設計されています。サイトを閲覧するときはいつでも携帯電話を横に向けることができますが、モバイル レイアウトではデフォルトの向きの狭さを考慮する必要があります。懸念されるのはレイアウトだけではありません。モバイル デバイスはPC のようにマウスを使用しないため、ドロップダウン メニューなどの「マウスオーバー状態」をタッチ入力や電話ボタンで動作するように再設計する必要があります 。

最後の点は、ブラウザとハードウェアの多様性というモバイル Web サイト設計の別の課題につながります。 Internet Explorer、 Mozilla Firefox 、 Google Chromeなどのブラウザの特性を考慮した完全な Web サイトを構築するのは非常に困難です。モバイルの世界では、小さな低解像度の画面を備えた「機能のない」携帯電話で Web を閲覧する人もいます。はるかに高解像度のディスプレイとタッチスクリーンを備えたスマートフォンを使用している人もいます。 1 つのモバイル サイトだけでは不十分な場合があります。さまざまなデバイスに対して個別のモバイル インターフェイスを設計することが合理的です。たとえば、Facebook は、スマートフォンの訪問者が使用しているデバイスの機能を検出することで、その訪問者に合わせたサイトを提供しています 。その背後にあるテクノロジーについては次のセクションで説明します。

モバイル Web デザインには簡素化されたインターフェイスが必要ですが、それが必ずしも機能のない Web サイトになるわけではありません。それどころか、スマートフォンには、コンピュータでは利用できない高度な機能が備わっています。携帯電話のカメラでスキャンしたQR コードを使用すると、Web サイトを即座に起動したり、アプリケーションをダウンロードしたりできます。地図と GPS データを連携させて、近くのレストランへの道順やおすすめ情報を提供できます。効率的なモバイル サイトを作成するには、舞台裏でテクノロジーを賢く利用する必要があります。テクノロジーとデザインがどのように表裏の関係にあるのかを見てみましょう。

モバイル Web サイトのテクノロジー

モバイル Web サイトはそのデザインのおかげで簡単に識別できますが、どこかの誰かがその製品に多くの巧妙なエンジニアリングを導入しました。最新の Web デザインは通常、カスケード スタイル シート (CSS) を使用して構築されます。名前が示すように、スタイル シートは、フォント、テキストの色、ページ幅、余白など、ページのスタイル要素を制御します。 Web サイトのコンテンツはデータベースまたは HTML ファイルに保存されますが、そのコンテンツがどのように表示されるかは CSS によって決まります。前のセクションで説明したデザイン変更はすべて CSS を通じて行われ、モバイル デバイスのブラウジング エクスペリエンスを最適化するためにその他の調整を行うことができます。たとえば、大きな画像の背景をシンプルな単色に置き換えると、モバイル サイトの読み込みが速くなり、使用する帯域幅が少なくなります。

モバイル Web サイトを構築するのが最初のステップです。サイトが存在したら、訪問者はそれを使用する必要があります。モバイル サイトを配信する明確な正しい方法はありませんが、実行可能なオプションがいくつかあります。最も簡単なのは、完全なサイトのどこかに「モバイル サイトを表示」というリンクを置くことです。多くの場合、開発者はサブドメイン (通常は m.website.com) を使用して、ユーザーをモバイル Web サイトに誘導します。それはわかりやすいですね。 Website.com はフル サイトに移動し、m.website.com はモバイル サイトに移動します。 iPhoneの人気により、一部のサイトでは代わりに i.website.com が使用されていますが、実装はまったく同じです。多くのサイトでは、モバイル ブラウザをモバイル サイト (後述) に自動的に誘導するシステムが使用されていますが、場合によっては、そのモバイル サイトにアクセスする唯一の方法が m.website.com アドレスを手動で入力することです。 Web サイトのアドレスの処理方法の詳細については、 「ドメイン ネーム サーバーの仕組み」に関する記事を参照してください。

モバイル ページを提供するための他の手法は、より複雑です。多くの Web サイトは、使用しているデバイスの種類を自動的に検出して、どの CSS ファイルを提供するかを決定します。これは、デバイスにクエリを実行して、特定の要素 (画面の幅が何ピクセルかなど) を判断するか、Web ページの読み込みにどのブラウザが使用されているかを宣言するユーザー エージェント文字列を読み取ることによって実現できます 。 「メディア クエリ」は、ユーザー エージェント文字列を参照して識別要素の 1 つを選択するカスケード スタイル シート内のコード行です。ユーザー エージェントが自身を特定の画面幅を持つモバイル ブラウザーとして識別する場合、その情報を使用して、どの種類の Web ページを読み込むかを決定できます。これらの方法は常に完璧に機能するとは限りません。一部のブラウザではユーザー エージェントを「なりすます」ことができ、新しいブラウザでは常に新しいユーザー エージェント文字列が登場します。しかし、一般に、Web サーバーはモバイル サイトを適切に送信します。モバイル デバイスを提供できるものがあると仮定します。この識別方法は、ユーザーに選択肢を与えるという別のオプションに結び付けることができます。モバイル デバイスで IMDB.com に移動すると、モバイル サイトが自動的に読み込まれますが、ユーザーには、より多くの機能を提供するモバイル アプリをダウンロードするよう求めるメッセージが表示されます。

これらは、モバイル Web サイトを構築して提供するための基本です。しかし、それだけではありません。電話の使用はコンピュータの使用とは大きく異なるため、従来の Web 要素をモバイル サイトに持ち込むには課題があります。次のページでは、モバイル ブラウザの長所と短所、および現代の Web を構成するパスワード フィールド、フォーム、Flash ビデオなどのインタラクティブな要素について説明します。

モバイルサイトのメリットとデメリット

モバイル Web サイトは小型デバイス向けにカスタマイズされているため、必然的にスマートフォン上のフルサイトよりもうまく機能します。 「フリーサイズ」が最善の解決策であることは決してありません。とはいえ、モバイル サイトがモバイル デバイス上のフル サイトよりも常に「優れている」とは限りません。サイトは携帯電話で簡単に閲覧できるように設計されているため、携帯電話の制限を考慮しており、結果として提供されるエクスペリエンスは限られています。たとえば、モバイル サイトのナビゲーションは、常に表示しておくのに十分な画面スペースがないため、通常のナビゲーションとして常にアクセスできるとは限りません。

Web サイトとの対話は、モバイル ブラウジング エクスペリエンスの中で最も難しい部分である可能性があります。携帯電話では、入力フォームをスクロールして個々のフィールドを選択し、入力するのに、コンピューターよりもはるかに時間がかかります。この問題は、タッチ スクリーンやソフトウェア キーボードによってさらに悪化します。ありがたいことに、携帯電話のブラウザはデスクトップ ブラウザと同じようにCookie を保存し、パスワードを記憶できるため、モバイル エクスペリエンスが少しだけ簡単になります。 Android 版 Firefox や Opera Mobile など、デスクトップに相当する機能を備えた携帯電話用に構築された一部のブラウザでは、コンピュータ上のブラウザ設定からパスワードやその他の保存データを同期できます。これは、データを引き継ぎ、モバイル サイトとフル サイトの両方での閲覧エクスペリエンスを簡素化するための優れた方法です。最近のスマートフォンには、ナビゲーションを楽しくするいくつかの工夫が凝らされています。ピンチしてズームするとテキストの領域を簡単に拡大でき、ほとんどのブラウザはテキストの正確な幅にズームする「タップしてズーム」アクションを使用します。段落。

モバイル Web ブラウジングが当面の話題になると、Flash が必然的に議論に加わります。 Flash ビデオはプロセッサとバッテリ寿命を要求しますが、長年にわたって改善され、現在では多くのモバイル デバイスで動作しますが、Apple 製のデバイスでは動作しません。 Apple は iOS での Flash ビデオの再生を許可せず、代わりに YouTube などの多くのビデオ サイトですでに使用されている HTML5 ビデオをサポートしています。 Flash ビデオをモバイル Web ページに埋め込むことはできますが、その実践はモバイル デザインの最大の強みであるシンプルさに反することになります。軽量のモバイル サイトは主にテキストと小さな画像であるため、読み込みが速くなります。さらに、モバイル サイトに Flash を配置すると、iPhone ユーザーが Web ページを操作する方法が制限されることになります。

Web デザイナーは、どのようなコンテンツを表示するか、モバイル ページをどのように配置するかについて慎重に選択する必要がありますが、モバイル Web エクスペリエンスは実際のものとそれほど変わりません。広告はモバイル Web サイトでも機能しますが、明らかに Google AdSense のようなシステムは、巨大なポップアップ広告よりも小規模なサイトに適しています。スマートフォンでのブラウジングは、マウス、キーボード、大型モニターを使用するほど効率的ではありませんが、常に手元にあります。優れたモバイル設計により、エクスペリエンスは可能な限り苦痛が軽減されます。