レスポンシブWebデザインはどれほど重要ですか？

最近、レスポンシブWebデザインを使用することの長所と短所についてさまざまな意見を聞きましたが、小さな地域を対象とするスモールビジネスがレスポンシブWebデザインを実装する必要があるかどうか疑問に思っていましたか？

これに関していくつかのサブ質問があります：

1. 異なる次元/デバイスに個別のコードを使用するのではなく、レスポンシブWebデザインを使用する方が良いでしょうか？

2. SEOに潜在的に（正または負に）影響する可能性はありますか？

3. この設計方法を使用してビジネス向けにWebサイトを最適化するときに遭遇する主な問題は何ですか？

モバイルインターネットの使用は、今後数年以内にデスクトップの使用を超えると広く予測されているため、あらゆるビジネスにとって、何らかのモバイル最適化が真剣に検討される必要があります。

多くの点で、これは小規模のローカライズされたビジネスに特に当てはまります。予想通り、多くのモバイル検索は近くの物を見つけることに焦点を当てる傾向があります。

2012年5月現在、レスポンシブデザインは、スマートフォン向けに設計する際にGoogleが推奨する業界のベストプラクティスです。主な利点の1つは、1つのサイトを実行していることです。それは、設計、構築、保守、および宣伝を行う1つのサイトです。効率的です。

SEOの観点から見ると、別個のモバイルサイトegmexample.comをホストするということは、2つの別個のサイトを最適化し、ビジネス価値（PageRank、権限など）を2つの場所に分割する必要があることを意味します。ユーザーエージェント検出を介して同じURLでコンテンツを提供することでそれを回避できますが、これは作業の重複に対処せず（2つの別個のサイトです）、ユーザーエージェントの確保など、より技術的な課題ももたらします検出は機能し、最新の状態に保たれます。検索エンジンが適切なコンテンツを適切なインデックスにインデックス付けするなど。

全体として、レスポンシブデザインはエレガントなソリューションです。

他の質問に答えるには：

1. 上記にも触れましたが、モバイル市場の発展の速さも考慮してください。モバイルソリューションの柔軟性が高いほど、遅れをとる必要がなくなります。

2. 比較対象に依存しますが、上記のように、他の2つの主要オプションのいずれかに、重大なSEOの課題が付随しています。

   「クローキング」、つまり、ほとんどの実装のレスポンシブデザインに固有のコンテンツを検索エンジンから隠すという問題については、いくつかの懸念がありました。ただし、私の知る限り、これは主要な検索エンジンのいずれからも明確に回答されていませんが、Googleが「ベストプラクティス」と見なしていることは、Googleがコンテンツの正当な隠蔽を識別できることを示している操作上の理由により、デバイスの最適化の理由やその他の正当性の低い隠蔽。

3. 主な課題は、モバイルユーザーに表示するコンテンツを決定することだと思います。サイトによっては問題にならないかもしれませんが、多くの場合は問題です。ここで重要な考慮事項は、モバイルユーザーが何をしようとしているかを理解することです。たとえば、iPhoneを使用している人は、おそらく迅速で簡単な情報や取引を望んでいます。iPadを使用している同じ人は、よりゆったりとしたブラウジングエクスペリエンスに興味を持つ可能性が高くなります。

その背後にある考え方は、デバイスに関係なく訪問者に最適なブラウジング体験を提供することです。モバイルデバイスを使用する訪問者の数は減少するのではなく増加する可能性が高いため、そのルートに行くのはまったく理にかなっています。

ブログやCMSには手頃な価格の（安いとは言えない）テーマが数多くあり、すぐに試して、気に入ったものがあるかどうかを確認できます（すべてのお客様のデバイスまたは一部のデバイスで確認してください）。

1. 特別な理由がある場合は、常に1つのコードベースに集中してください。理由としては、「ウェブアプリ」のような専門的なウェブサイトを提供したい場合があります。

2. SEO：いいえ。レスポンシブレイアウトと同じくらい良い面も悪い面も。

3. 最初はもう少し計画を立てる必要があります。最小のデバイスで表示されるコンテンツは何ですか、コンテンツの順序はどのようになりますか？そういうもの。または：私のコンテンツは、サポートされているすべてのディメンションで見栄えが良いですか？また、各サイズの画像のサイズを最適化して、ブラウザで拡大縮小された画像だけでなく、実際にサイズ変更された画像を配信することもできます。CMSがそれをサポートしていない場合は、さらに作業が必要です。

外部ソースからの広告を含める予定がある場合は、指定した形式が適切に再生されるかどうかも確認する必要があります。

編集：

Googleアナリティクスなどの過去のウェブ分析データがある場合は、モバイルユーザーと非モバイルユーザーの数を簡単に探し、使用されているデバイス（実際のハードウェアまで）を特定し、画面解像度を確認できます（「彼らは実際に私のページを見るのか、それともその一部だけを見るのか、スクロールする必要があるのか​​？」）。

2番目の編集：

この投稿によると、「モバイルWebサイトとレスポンシブデザイン：ビジネスに最適なソリューションは何ですか？」Googleアナリティクスブログで、レスポンシブデザインを念頭に置いて設計されたサイトには、次のような長所があります。

• 更新のしやすさ
• 検索エンジン向けに最適化
• 変換コードとリダイレクトコードを追加する

別のモバイルサイトの長所：

• モバイルユーザーのニーズに合わせた設計
• Quickeサイトの作成
• 素晴らしいDIYオプション

公式のGoogleウェブマスターセントラルブログの記事「レスポンシブデザイン-メディアクエリの力を活用する」では、「レスポンシブデザイン」が実際にどのように実装されているかを紹介しています。

Google Developersの「モバイル向けに最適化されたWebサイトの構築」には次のように記載されています。

「Googleは、ウェブマスターがレスポンシブウェブデザインを使用する業界のベストプラクティスに従うこと、つまり、すべてのデバイスに同じHTMLを提供することを推奨します[...]」

最初に「レスポンシブデザイン」（RD）が流行語であり（誇張するためにRDがある要素にWidth：100％を配置すると、誇張して）、その重要性がより重要に見えることを最初に認識することが重要だと思います本当に最終的には他のすべてと同じように条件付きです。

RDを実装する必要はありますか？

それに答えるには、いくつかの定義を述べる必要があります：

1. 対象読者は誰ですか
2. あなたのターゲットはどんな観客ですか
3. あなたのウェブサイトの目的は何ですか
4. あなたのウェブサイトはどこからアクセスされますか（ほとんどの場合）
5. 等

これはマーケティング分析に非常に似ています。適切な視聴者に適したメディアを用意することです（おそらく、視聴者はほとんどの場合コンピュータの前に座っているか、最新のiPhoneを持ち歩いているなど）。両方を行うのであれば、もちろんRDが中心です。

異なる次元/デバイスに個別のコードを使用するのではなく、レスポンシブWebデザインを使用する方が良いでしょうか？

UIの複雑さと使用方法に依存します。典型的なページは、ほとんどの場合、さまざまなディスプレイに異なるCSSセットを使用してレンダリングできます。ただし、より複雑なまたは洗練されたUIには異なるアプローチが必要な場合があるため、使用するデバイス（たとえば、マルチタッチインターフェイスなどのGoogleマップ）に応じて異なるページ構造と戦略を提示するのが賢明です。

SEOに影響する可能性がありますか（正または負）。

SEOはデザインよりもコンテンツに関するものです。ただし、デザイン/レイアウトは重要ですが、デザイン/レイアウトはグーグルだけが知っていますが、一般的にコンテンツの品質が高い場合、実際のデザインよりも重要です。

この設計方法を使用してビジネス向けにWebサイトを最適化するときに遭遇する主な問題は何ですか？

間違った対象者向けに設計する。可能であれば、ターゲットを分析し、最新の技術データを提供します（プラットフォームに関する情報を提供する訪問者ログなど）

新しいテクノロジーは常にリスクを伴います。FacebookのHTML5問題。この時点では完全には成熟しておらず、IE6と標準の問題に類似したさまざまな問題を引き起こしています。

できるだけシンプルにしてください。派手なWebページは、ユーザーが実際にページを使用するまで、非常に短い時間しか価値がありません。クリックするたびにフェードが完了するまで1/2秒待たなければならない場合、ユーザーはすぐに失われます。そういうもの。

私は他の答えをざっと読み、冗長である場合は許します...私はこの時点で毎日8時間以上レスポンシブデザインをしています...クライアントはモバイルユーザーに「ユニーク」を持たせたいのでそれを望んでいます経験上、私の雇用主はそれを望んでいます。なぜなら、Googleが推奨する方法として自慢しており、合理化されているからです。（そして、GoogleがSEOに最もうまくいく可能性が高いことを行う方法として自慢している場合）

異なる次元/デバイスに個別のコードを使用するのではなく、レスポンシブWebデザインを使用する方が良いでしょうか？

私はそれが良いと言います、はい。ほとんどのコードは同じコードであるため、iPhoneアプリ、ドロイドアプリ、iPadアプリ、キンドルアプリを記述するよりも作業が少なくなります。

SEOに潜在的に（正または負に）影響する可能性はありますか？

設計の点から、私はそれが中立だと感じています。ただし、統計から、私のレスポンシブデザインは非常にうまく機能しています。クライアントはそれらを愛し、顧客はそれらを使用するのが大好きです。

この設計方法を使用してビジネス向けにWebサイトを最適化するときに遭遇する主な問題は何ですか？

最初に行うのは少し難しいです...メディアクエリの調査を行う必要があり、できればテストするモバイルデバイスが必要です。デスクトップ上のウィンドウのサイズを変更することは重要ですが、モバイルデバイスがインターネットをレンダリングする方法は、予想とは異なる場合があります。たとえば、ヘッダーにbgリピートを使用し、デスクトップでは表示可能な領域全体にまたがるレスポンシブサイトを設計しました。ただし、iOSでは何らかの理由で不足しています...

レスポンシブデザインを学び、試すことをお勧めします。ジャンプスタートのためにこのサイトをチェックしてください：http : //html5boilerplate.com

タイトルの質問に答えるために：それは重要であり、それを認識し、それをどのように設計するかを知る必要があり、それを使用しないことに決めた場合は、クライアントが設定される可能性があるため、その姿勢を守る準備ができているはずですこのデザインを持つことに。私の経験から、クライアントも顧客もレスポンシブデザインを愛しています。幸せな顧客と幸せなクライアントは私がそれを追求する理由で十分です:)

レスポンシブWebデザインは非常に重要です。新しいサイトを作成する場合は、サイトをレスポンシブにする必要があります。すでに、トラフィックの50％がモバイルデバイスとタブレットからのものであり、これが成長するだけでなく、インターネット利用の明らかに支配的な形態になりつつあります。

地理的に狭い地域をターゲットとする中小企業にとって、それはさらに重要です-新しい中小企業にとってSEOは非常に困難になりますが、製品が良ければ、あなたがしていることを共有する人を最大限に増やすことができます。

ソーシャルメディアを読むことになると、人々は現在、主にモバイルデバイスを使用しています-一般的には、朝はベッドで、夜はベッドで。

サイトがモバイルデバイスで使用できない場合、関連するオーディエンスにヒットした共有は無駄になります。これは必要ありません。それを避けることが重要です。

レスポンシブコードまたは個別のコードについて：レスポンシブデザインの主な欠点は、個別のコードベースほど高速ではないことです。この速度の低下は、サイトが他のサイトよりも0.2秒遅い理由に関して他の要因がユーザーの心に浮かぶ可能性がある小規模なローカルビジネスの場合、確かに無視できます。

レスポンシブデザインの大きな利点は、同じコードベースを維持できることです。これにより、メンテナンスコスト、テストコスト、および開発コストが削減されます。

最近のSEOの大きな特徴は「サイトの品質」です。サイトの品質を測定するのは難しいですが、一般的に言えば、Googleはこれを測定するためにサイトの直帰率と時間を使用します。サイトがモバイルを嫌う場合、トラフィックの50％が直帰率が高く、エンゲージメントの低い訪問者が多くなります（ページ上で10秒未満）。

これにより、Googleのペナルティが発生する危険性があります。GooglePandaと新しい（先週の）完全一致ドメインのペナルティを見てください。どちらも「低品質」のサイトにペナルティを科します。

この方法を使用してウェブサイトをビジネス向けに最適化する際に発生する可能性がある主な問題は、それが新しい流行語であり、誰もがそれを必要とすることです。

たとえば、最近、約1日ですべてのデバイスに完全に反応するショップ、フォーラム、Q＆Aセクション、その他のさまざまなページ、ブログなどを含むWebサイトを作成しました。

必要なことの基本は次のとおりです。

1. ボディのパディングとマージンを調整します
2. 代わりに、左側または右側のサイドメニューをドロップダウンに移動し、おそらく上部のオプションボタンの下に隠します。
3. コンテナのサイズを変更し、可能な場合は幅100％を使用します
4. すべての画像を幅100％に変更します
5. 電話で必要のないものを決定し（広告？）、それらを削除します（表示：なし）

サンプルコードを次に示します。

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

それは、「advertbox」のクラスを持つものをスマートフォンから削除し（最大幅480px）、身体のマージンを減らします。

新しいサイトを作成する場合は、すてきなクリーンクラスとすべてのデバイスに適したスタイリングを使用して、クリーンなデザインを確実に構築できるため、これを組み込むのはさらに簡単です。

これがお役に立てば幸いです！

私は別の視点でチャイムを作りたいです：

いいえ、必須ではなく、推奨されていません。ターゲットオーディエンスが誰であるかによります。アナリティクスを見て、モバイルからの割合を確認してください。モバイルユーザーの割合は、デスクトップユーザーに比べて大幅に低下していますか？

私が仕事をしている例を挙げると、サイトは反応しません。ただし、トラフィックの90％はデスクトップユーザーからのものであり、直帰率とイベント完了率はデスクトップ、モバイル、タブレットでほぼ同じです。

それを変更するコストの正当化ができるまで、それを行うための経済的インセンティブはありません。ユーザーの50％がモバイルを使用しているなどの抜本的な発言は、すべてのユーザーが対象ユーザーである場合にのみ適用されます。それ以外の場合は、完全に無関係で、従うべき悪いロジックです。

ターゲットにするモバイルユーザーの割合のみを確認する必要があります。特にB2Bアプリケーションの場合、ほとんどの人は空き時間に携帯電話を見ることはありません。月曜日から金曜日のデスクトップコンピュータではトラフィックが発生します。