こんにちは、シャオピン！モバイルウェブサイトのケーススタディ 10 件

モバイルインターネット時代の静かな到来は私たちの生活様式を変えつつあり、同時に多くのデザイン勢力がモバイルデザインの分野に流れ込んでいます。 Web2.0 時代の文脈で育ったデザイナーは、このような新しい分野に参入する際に、多少「違和感」を感じます。この記事が、皆さんの探求と試みに新たな方向性をもたらすことを願っています。

ネットワーク環境研究

CNNICの第32回インターネット発展調査によると、2013年6月現在、中国のモバイルインターネットユーザー総数は4億6,400万人に達した。そのうち、モバイルブラウザ利用者規模は3億6,900万人で前年比21.0％増、モバイルインターネット利用者の普及率は79.5％となった。

モバイルブラウザの使用頻度は着実に増加しており、毎日使用するユーザーは 75.6%、1 日に複数回使用するユーザーは 63.3% となっています。同時に、利用時間の観点から見ると、モバイルインターネットアクセスはコンピューターインターネットアクセス時間を圧迫し始めており、中国のネットユーザーにとって主流のインターネットアクセス方法となっている。

モバイルインターネットへの入り口としてのモバイルブラウザーの地位は着実に向上し続け、ネットユーザーがモバイルインターネットにアクセスするための主要な入り口にもなります。このような状況では、PC側だけでウェブサイトを構築するだけでは、ユーザーのニーズに応えることができなくなります。モバイルウェブサイトを構築する必要性は非常に顕著です。

図に示すように、3G4G ネットワークと Wi-Fi カバレッジの普及率は急速に伸びており、相対的なシェアも増加しています。良好なネットワーク環境により、モバイル Web サイトのデザインにさらに多くのスペースが確保されます。これにより、Web サイトの視覚的な表示とスムーズなエクスペリエンスの可能性が広がります。同時に、低速ネットワークが依然として比較的大きな割合を占めているため、Web サイトのパフォーマンスの最適化は、すべてのデザイナーが緊急に注意を払う必要がある重要なポイントです。

プラットフォームサポート

ブラウザはウェブサイトの基盤です。上図のデータは、スマートモバイルデバイスが非常に高い市場シェアを持っていることを示しています。一般的なスマートモバイルデバイスシステムの組み込みブラウザとサードパーティブラウザは基本的にWebKitカーネルを使用しており、ウェブサイトとの互換性が高く、デザインにさらなる制御性をもたらします。（PC側ではIE6ユーザーの使用率が依然として24％と高いのに対し（2013年6月のマイクロソフトデータ：IE6最新市場シェア、中国本土）、ccs3およびhtml5ウェブサイトに対するWebkitベースブラウザのサポート率は93.5％を超えています。）

相互作用の違い

端末によって操作方法が異なります。 PC とモバイルデバイスの操作方法はまったく異なります。PC でのページの操作方法は、モバイルページには必ずしも適していません。モバイル端末には、より豊富なインタラクション方法があります。たとえば、携帯電話のジャイロスコープの重力センサーを使用して、いくつかのインタラクション（重力センサーを使用して視差JS特殊効果を実装する、画面を回転してジャンプする、「シェイク」してページを切り替えるなど）を実装します。また、長押しして写真を保存するなど...同時に、モバイル端末のインタラクションは徐々に完全で成熟したインタラクションシステムを発展させてきました。この点では、デザイナーはモバイル製品の優れたインタラクティブ手法から多くを学び、それをモバイル Web サイトのデザインに適用することができます。また、Web ページに実装する実現可能性を理解するために、多面的にコミュニケーションを取る必要があります。

レスポンシブデザイン

モバイルウェブサイトに関しては、レスポンシブデザインについて言及する必要があります。レスポンシブ性とは何でしょうか? 簡単に言うと、端末ごとに特定のバージョンを作成するのではなく、Web サイトが複数の端末と互換性を持つことができることを意味します。モバイルデバイスの複雑な解像度を考えると、これは素晴らしいことのように思えます。ケーススタディを通じて見てみましょう。

ニュートンランニング

QRコードをスキャンして閲覧してください（このウェブサイトはPCとモバイルの両方で利用できます）

これらの事例から、今日のさまざまなモバイル端末の登場により、レスポンシブデザインの強力な互換性が大きく実証されていることがよくわかります。同時に、強力な互換性に基づいて構築されています。すべての端末が 1 つの Web サイトを共有するため、開発、運用、保守のコストが節約され、Web サイト構築の初期段階での設計と再構築のタスクが増加します。製品のパッケージについては、異なる端末でより一貫性のある完全なブランドイメージが実現されます。実際の使用では、レスポンシブデザインはさまざまなモバイル端末で互換性の高い視覚的表現を実現できるものの、一部の機能が完璧ではないこと (ボタンのクリック領域が小さいなど)、PC 側の一部のブラウザーでは位置ずれなどの非互換性があること、ハードウェアパフォーマンスの低い端末では Web サイトがスムーズに表示されないこと (動的な表示効果が停止しているように見える)、モバイル端末での Web サイトの読み込みプロセスがネットワーク速度に大きく影響されることなどがわかりました。したがって、レスポンシブデザインを使用すると、インタラクションデザイン、ビジュアルデザイン、パフォーマンスの最適化、再構築に関してデザイナーに高い要求が課せられます。

まだまだ道のりは長いですが、国内外の多くのデザイナーの努力により、優れた事例が数多く生まれてきています。

ホビット

QRコードをスキャンして閲覧してください（当ウェブサイトはPC、モバイル端末の両方で体験できます。PC端末ではChromeを推奨します）

このサイトは、PC とモバイル端末向けに注意深く最適化されており、優れた視覚的表現とスムーズなインタラクティブ体験により、強烈な雰囲気と壮大な感覚が生まれています。同時に、明確なユーザーガイダンス、興味深い詳細な探索、巧妙なインタラクティブゲームにより、稀有な傑作となっています。配信するコンテンツが非常に豊富なため、ネットワークリソースを大量に消費し、読み込みに少し時間がかかります。

お金を稼ぐ

QRコードをスキャンして閲覧してください（このウェブサイトはPCとモバイルの両方で利用できます）

このウェブサイトは、心地よいベクターイラストのデザインスタイル、明確なユーザーガイダンス、鮮明でスムーズなダイナミックディスプレイを備えており、退屈な紹介を受け入れやすくしています。これもデザインの価値を反映しているのではないでしょうか。

テンセントインタラクティブエンターテイメント UP2014 カンファレンス招待状