files/ja/web_development/mobile/responsive_design/index.html


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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

---
title: レスポンシブデザイン
slug: Web_Development/Mobile/Responsive_design
tags:
  - Apps
  - Mobile
  - Responsive Design
  - Web Development
translation_of: Web/Progressive_web_apps
translation_of_original: Web/Guide/Responsive_design
---
<p>モバイル向けとデスクトップ向けの Web サイトの開発に対する <a href="/ja/docs/Web/Guide/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">別々のサイト</a> 手法に関連する問題に対する反応として、比較的新しい (実際は <a href="http://www.alistapart.com/articles/dao/">とても古い</a>) アイディアが人気を集め始めています。ユーザーエージェントでの判別とは別れを告げ、かわりにクライアント側のブラウザの機能でページを対応させましょう。この手法は Ethan Marcotte のブログ記事 <a href="http://alistapart.com" title="http://alistapart.com">A List Apart</a> で紹介され、<a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">レスポンシブ Web デザイン</a> として知られるようになりました。分離したサイト開発手法と同様に、レスポンシブ Web デザインにも短所があります。</p>

<h2 id="長所">長所</h2>

<p>最初は、モバイルサイトを作成するための手法として提案されたものではありませんでしたが、分離したモバイルサイトの代わりにレスポンシブデザインは最近、モバイル・フレンドリーに対する第一歩として多くの注目を浴び始めました。</p>

<ol style="font-size: medium;">
 <li>デバイスごとに異なる Web サイトをメンテナンスする必要がなくなるため、時間と費用を削減できます。</li>
 <li>レスポンシブデザインは、1 つの URL だけで、すべてのデバイスのページを表示できます。</li>
 <li>モバイルとデスクトップの Web ページで 1 つの URL を使用しているため、ソーシャルシェアの統計 (Facebook の「いいね」、Twitter のツイート数、Google plus の +1) が分離されません。</li>
 <li>レスポンシブデザインはユーザーエージェントを気に掛ける必要がありません。</li>
</ol>

<p>この手法には本当に素晴らしい側面があります。ユーザーエージェント判別によらないため、サイトを分離する手法よりも柔軟性が高く、古くなりにくい点です。単純なサイトに対しては、他の選択肢よりも改修やメンテナンスが簡単です。</p>

<h2 id="短所">短所</h2>

<p>この手法に何も制限がないわけではありません。コンテンツがクライアント側の JavaScript で処理されるため、変更は最小限となることが推奨されます。一般に、同じ DOM を動作させるために、別々に 2 つの JavaScript を記述すると、劇的に悪化することも改善することもあります。これが、Web アプリケーションがこの手法に適応していない大きな理由です。</p>

<p>もし <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">フレキシブルなレイアウト</a> に対応していなければ、既存のサイトをレスポンシブデザインにするには、スタイルシートも書き直す必要があります。これは不幸中の幸いと言えます。レイアウトをレスポンシブデザインに対応することは、CSS を近代化しきれいにする良い機会となるからです。</p>

<p>最後に、スクリプトやスタイルのコードを追加するため、分離サイト手法よりもパフォーマンスが悪化するかもしれません。これに対する回避策はありません。スクリプトやスタイルコードをリファクタリングして、根気強くバイト数を削減するしかありません。</p>

<h2 id="この選択肢を選ぶとき">この選択肢を選ぶとき</h2>

<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="float: right; height: 177px; width: 300px;"></a>上述したように、コンテンツの変更は難しいため、この手法を取り扱うとき、複雑なコードを追加せずにユーザに対してモバイルデバイスで異なる体験を与えることはできません。つまり、デスクトップとモバイルのサイトがとても似ているのであれば、この手法は素晴らしい選択肢となります。文章中心でユースケースが複数のデバイスにまたがっているのサイトによく適しています。以下に示す例が、すべてブログやポートフォリオであることに気づくでしょう！</p>

<h2 id="Examples" name="Examples" style="overflow: hidden;">用例</h2>

<p>分離サイト手法ほどの人気はありませんが、日に日により多くの Web サイトがこの技術を採用し始めています。幸運にも、すべてのコードはクライアント側にあるため、この手法がサイトで技術的にどのように実装されているか見たければ、サイトを訪問して、“ページのソースを表示” をクリックしてください。</p>

<ul>
 <li><a href="http://teixido.co/">http://teixido.co/</a> – 私のお気に入りのレスポンシブデザインです。画像が上にあります！</li>
 <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 読むのにおすすめの記事です。記事内のリンクも用例となっています。</li>
 <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
 <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li>
 <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
</ul>

<p>比較的若い手法であるにもかかわらず、既にいくつかベストプラクティスが現れています。例えば、サイトを一からデザインするのに、この選択肢を使おうと考えているなら、モバイルには初めから制約があるため、<a href="http://www.lukew.com/ff/entry.asp?1117">まず小さい画面で作成する</a> のがよいでしょう。また、メディアクエリで既存のサイトの要素を隠す代わりに、進歩した機能をスタイルに使用することもよいことです。この方法は、メディアクエリをサポートしてない古いブラウザで正しくレイアウトすることができます。この手法のメリットについての素晴らしいプレゼンテーションが <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">ここ</a> から利用できます。</p>

<h2 id="モバイル_Web_開発手法">モバイル Web 開発手法</h2>

<p>以下の記事は、モバイルプラットフォーム向け開発の背景や手法です。</p>

<ul>
 <li><a href="/ja/docs/Web/Guide/Mobile/Mobile-friendliness">モバイルの親しみやすさとは？</a></li>
 <li><a href="/ja/docs/Web/Guide/Mobile/Separate_sites">別々のサイト</a></li>
 <li><a href="/ja/docs/Web/Guide/Mobile/A_hybrid_approach">ハイブリッドアプローチ</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li>
</ul>

<h2 id="関連文書">関連文書</h2>

<ul>
 <li>追加リソース: <a href="/ja/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">レスポンシブ Web デザイン</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li>
</ul>

<div class="originaldocinfo">
<h3 id="元の文書">元の文書</h3>

<p>Mozilla Webdev ブログの "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>" の記事として 2011 年 5 月 27 日に Jason Grlicky によって発行されました。</p>
</div>

<p> </p>