モバイルフレンドリー

モバイルフレンドリーとは?

モバイルフレンドリー (mobile friendliness) は、相手によってさまざまな意味を持つことがあります。サイトの使い勝手を向上させるための 3 つの目標(プレゼンテーション、コンテンツ、パフォーマンス)の観点から考えると便利です。

目標 1(プレゼンテーション)

さまざまな画面サイズで適切に機能するウェブサイトを作成しましょう。

最近では、携帯電話、タブレット、電子ブックリーダーなど、さまざまな形状の端末でウェブにアクセスできます。言うまでもありませんが、複雑な JavaScript アニメーションとマウスオーバー効果でいっぱいの固定幅で 3 段組みのレイアウトは、2 インチ幅の画面と小型のプロセッサーを搭載した携帯電話では見た目も感じ方もよくありません。タッチ画面に合わせた(英語)、すっきりとまっすぐ並んだページレイアウトの方が、はるかに適切です。最初の目標が、モバイル端末のユーザーの生活を楽にするような方法でコンテンツを提示することにあるのはこのためです。

目標 2(コンテンツ)

モバイルユーザー向けにコンテンツを調整しましょう。 左のアラスカ航空のデスクトップサイトの画面と、同じページのモバイル版を示す iPhone の画面

ユーザーが携帯電話を使っている場合、ユーザーがあなたのサイトで何をしたいのかを考えてみましょう。その好例が、アラスカエアのウェブサイト(英語)です。彼らのデスクトップサイトは訪問者に旅行を予約させることに焦点を合わせています。ところが、モバイルユーザーは、フライトのチェックインや、フライトが遅れるかどうかを確認することに関心があります。これを反映するようにサイトのコンテンツを調整し、モバイルユーザーのニーズを満たしています。

目標 3(パフォーマンス)

遅い接続でも、ユーザーにスムーズな操作を提供しましょう。

近年状況は良くなってきていますが、無線データ接続を介してインターネットを閲覧することは依然としてかなりつらいこともあります。そのため、実際に必要なものだけをユーザーに送信するという、優れたパフォーマンスの実践(英語)を実践することがこれまで以上に重要になります。

閲覧者を知る

厳密にはモバイルフレンドリーの定義の一部ではありませんが、対象閲覧者が誰であるかを定義することで、これらの目標はより具体的になります。例えば、モバイル戦略を選択するときに、どのブラウザーと端末を対象にするかを念頭に置くことが絶対に重要です。閲覧者がアーリーアダプターでいっぱいであるならば、標準に適したブラウザーが搭載されたタブレットとスマートフォンに集中することができます。一方で、サイトのユーザーの多くが機能が低いブラウザーの端末を使用している場合は、実行可能な選択肢として特定の戦略が排除される可能性があります。

モバイルウェブ開発へのアプローチ

以下のアプローチは、さまざまな手段でこれらの各目標を達成することを目的としています。

出典情報

原本は、2011 年 5 月 4 日に Mozilla Webdev ブログに「モバイルウェブ開発へのアプローチ 第 1 部 - モバイルフレンドリーは?」として Jason Grlicky が公開したものです。