blob: 3b01479341be94db4321b27f0f5f77e8f311067c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
---
title: モバイルの親しみやすさ
slug: Web/Guide/Mobile/Mobile-friendliness
tags:
- Mobile
- Web Development
translation_of: Web/Guide/Mobile/Mobile-friendliness
---
<h2 id="What_is_Mobile_Friendliness" name="What_is_Mobile_Friendliness">モバイルの親しみやすさとは？</h2>
<p>あなたが誰に話しているかによって、モバイルの親しみやすさ（friendliness）は多くのことを意味します。サイトのユーザーエクスペリエンスを向上させるための 3 つの目標（プレゼンテーション、コンテンツ、パフォーマンス）の観点から考えると便利です。</p>
<h3 id="Goal_1_(Presentation)" name="Goal_1_(Presentation)">目標 1（プレゼンテーション）</h3>
<p><em>「さまざまな画面サイズで適切に機能するウェブサイトを作成してください。」</em></p>
<p>最近では、携帯電話、タブレット、電子ブックリーダーなど、さまざまな形状のデバイスでウェブにアクセスできます。言うまでもありませんが、複雑な JavaScript アニメーションとマウスオーバー効果でいっぱいの固定幅で 3段組みのレイアウトは、2 インチ幅の画面と小型のプロセッサを搭載した携帯電話では見た目も感じ方もよくありません。<a href="http://www.lukew.com/ff/entry.asp?1085">タッチスクリーン用のサイズ</a>（英語）の要素を持つ、すっきりと真っ直ぐ並んだページレイアウトの方が、はるかに適切です。最初の目標が、モバイルデバイスのユーザーの生活を楽にするような方法でコンテンツを提示することにあるのはこのためです。</p>
<h3 id="Goal_2_(Content)" name="Goal_2_(Content)">目標 2（コンテンツ）</h3>
<p><em>「モバイルユーザー向けにコンテンツを調整してください。」<img alt="alaska_air_mobile_and_desktop-300x225.png" class="internal rwrap" src="/@api/deki/files/5892/=alaska_air_mobile_and_desktop-300x225.png" style="float: right;"></em></p>
<p>ユーザーが携帯電話を使っている場合、ユーザーがあなたのサイトで何をしたいのかを考えてみましょう。その好例が、<a href="http://www.alaskaair.com/">アラスカエアのウェブサイト</a>（英語）です。彼らのデスクトップサイトは訪問者に旅行を予約させることに焦点を合わせています。ところが、モバイルユーザーは、フライトのチェックインや、フライトが遅れるかどうかを確認することに関心があります。これを反映するようにサイトのコンテンツを調整し、モバイルユーザーのニーズを満たしています。</p>
<h3 id="Goal_3_(Performance)" name="Goal_3_(Performance)">目標 3（パフォーマンス）</h3>
<p><em>「遅い接続でも、ユーザーにスムーズな操作を提供します。」</em></p>
<p>近年物事は良くなってきていますが、ワイヤレスデータ接続を介してインターネットを閲覧することは依然としてかなりつらいこともあります。そのため、実際に必要なものだけをユーザーに送信するという、<a href="http://developer.yahoo.com/performance/rules.html">優れたパフォーマンスの実践</a>（英語）を実践することがこれまで以上に重要になります。</p>
<h3 id="Know_your_audience" name="Know_your_audience">視聴者を知る</h3>
<p>厳密にはモバイルの親しみやすさの定義の一部ではありませんが、対象視聴者が誰であるかを定義することで、これらの目標はより具体的になります。例えば、モバイル戦略を選択するときに、どのブラウザーとデバイスを対象にするかを念頭に置くことが絶対に重要です。視聴者がアーリーアダプターでいっぱいであるならば、規格に優しいブラウザーのタブレットとスマートフォンに集中することができます。一方で、サイトのユーザーの多くが機能が低いブラウザーのデバイスを使用している場合は、実行可能な選択肢として特定の戦略が排除される可能性があります。</p>
<h2 id="Approaches_to_mobile_Web_development" name="Approaches_to_mobile_Web_development">モバイルウェブ開発へのアプローチ</h2>
<p>以下のアプローチは、さまざまな手段でこれらの各目標を達成することを目的としています。</p>
<ul>
<li><a href="/ja/docs/Web/Guide/Mobile/Separate_sites">別々のサイト</a></li>
<li><a href="/ja/docs/Web_development/Mobile/Responsive_design">レスポンシブデザイン</a></li>
<li><a href="/ja/docs/Web/Guide/Mobile/A_hybrid_approach">ハイブリッドアプローチ</a></li>
</ul>
<div class="originaldocinfo">
<h3 id="Original_document_information" name="Original_document_information">原本情報</h3>
<p>もともと 2011 年 5 月 4 日に Mozilla Webdev ブログに Jason Grlicky による「<a href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/">モバイルウェブ開発へのアプローチ 第1部 - モバイルの親しみやすさは？</a>」として公開されました。（英語）</p>
</div>
<p> </p>
|
