レスポンシブデザインのモバイルバージョンはどれが優れていますか。 モバイル版とレスポンシブデザインのどちらを選択しますか? モバイルデバイス向けのレスポンシブデザインの利点
アダプティブ デザインとサイトのモバイル バージョンのどちらが優れているかを判断するには、まず、なぜこれが必要なのかを理解する必要があります。
comscore.com によると、モバイル デバイスで Web サイトを閲覧するユーザーの割合は年々増加しています。
アクティブなモバイル データ加入者ベース、世界、100 万人、2007 ～ 2015 年
これに関連して、検索エンジン用の新しいアルゴリズムが開発され、追加のランキング要素が導入されました。現在、検索結果では、サイトがどれだけモバイル フレンドリーであるか (モバイル デバイスでの表示に便利) が考慮されています。 Google では、モバイル フレンドリー アルゴリズムが 2015 年 4 月 21 日に、Yandex - 「ウラジオストク」では 2016 年 2 月 2 日に開始されました。
サイトのデスクトップ版とモバイルデバイス用に調整されたバージョン
Web サイトのページがモバイル デバイスで快適に閲覧できるかどうかを検索エンジンが判断する方法:
- ページには、表示するために水平スクロールやズームを必要としないコンテンツが含まれている必要があります。
- サイトには、多くのモバイル デバイスで動作しない要素 (Flash、Java アプレット、Silverlight プラグインなど) が含まれていてはなりません。
- ページ上のテキストは拡大縮小せずに読める必要があります。
- リンクは簡単にクリックできるように十分な間隔をあけて配置する必要があります。
最も重要なことは、検索エンジンは Web サイトをモバイルフレンドリーかどうかを明確に評価することです。
Google の PageSpeed Insights ツール (https://developers.google.com/speed/pagespeed/) は、サイトのページの読み込み速度とその使いやすさを判断するのに役立ちます。 PageSpeed スコアは、ページの読み込み速度とユーザー エクスペリエンスに関して 0 から 100 ポイントの範囲で指定できます。例:
85 点以上の結果が良好とみなされます。
サイト ページがサービス要件を満たしていない場合、次のようなトラブルシューティングのための推奨事項の形式でレポートが発行されます。
このサービスは、Web サイトの問題の初期診断と特定に使用できます。
Web サイトのモバイル バージョンまたはアダプティブ バージョンを開発する必要があるのはどのような場合ですか?
サイトを「モバイル」視聴者向けに適応させる価値があるかどうかを理解するには、ユーザーがサイトにアクセスするデバイスごとのトラフィックごとに Web 分析システム (Yandex.Metrica または Google Analytics) で分析する必要があります。 視聴者の 15% 以上がスマートフォンまたはタブレットを使用している場合は、アダプティブ レイアウトまたはモバイル バージョンを開発することをお勧めします。 ここではサイトのトラフィックを考慮することが重要です。 たとえば、訪問者数が多いサイト (1,000,000 以上) では、サイトのトラフィックの大部分を無視できないため、この基準は低くなります。
モバイル版サイト
モバイル版- モバイル デバイスでの表示に適した別のバージョンまたは別のテンプレート。 サイトのメイン バージョンにあるすべてのブロックが表示されるわけではありません。
モバイル版の「特別な機能」: モバイル版に切り替えると、ブラウザーのアドレス バーの URL が変更され、プレフィックス「m.」が追加されます (例: m.example.ru)。
コンピューターのモニターとモバイル デバイスで表示: モバイル バージョンはメイン バージョンとは異なります。
モバイル バージョンに対応した Web サイトの例: http://www.lamoda.ru/ (m.lamoda.ru)。
モバイル版サイトの主な利点
- 軽量であり、その結果、読み込み速度が速くなります。 これは、インターネット アクセス速度が遅い (GPRS または弱い 3G) 場合に不可欠です。
- ユーザーは、どのバージョンを表示するか (モバイルまたはメイン) を選択できます。
- モバイルデバイスでサイトを見やすくするための検索エンジンの要件を満たします。
モバイル版のデメリット
- サイトに変更を加える必要がある場合、通常バージョンのサイトとモバイル版サイトの両方に変更を加える必要があり、作業量は 2 倍になります。
- 開発するときに、コンテンツの一部を放棄しなければならないことがよくあります。
- サイトのモバイル バージョンとメイン バージョンは異なるドメイン上にあるため、メイン ドメインの動作要因は改善されません。つまり、これは SEO 最適化にとってマイナスになります。
これは、さまざまな表示解像度でサイト要素のサイズと位置が変化する Web ページの特別なデザインです。 サイトは、PC モニター、スマートフォン、タブレットなど、開いたデバイスのサイズに自動的に適応します。 このタイプのレイアウトのおかげで、サイトはさまざまなデバイスで便利かつ明確に表示されます。 アダプティブ デザイン テクノロジを使用すると、サイトの機能がまったく損なわれることはありません。
コンピュータのモニターとモバイルデバイスで表示します - アダプティブバージョンはメインバージョンとは異なります
アダプティブ バージョンのある Web サイトの例: http://www.mvideo.ru/。
モバイルデバイス向けのレスポンシブデザインの利点
- すべてのコンテンツに対して 1 つの URL。
- 柔軟なインターフェイス - 任意の画面幅に合わせてサイトの快適な表示を設定できます。
- アダプティブ デザインは、モバイル デバイスでサイトを見やすくするための検索エンジンの要件を満たしています。
- サイトにアダプティブ バージョンがある場合、モバイル デバイスでの動作要因が改善され、サイトの全体的なパフォーマンスが向上します。 これは検索結果でのランキングに大きなプラスとなります。
モバイルレスポンシブデザインのデメリット
- ディスプレイ解像度ごとに個別のサイト ページ レイアウトを作成する必要がある。
- アダプティブ バージョンは、モバイル バージョンとは異なり、通常モードに切り替えることができません。 つまり、ユーザーにはサイトを表示する選択肢がありません。 欠点は、アダプティブ バージョンにエラーがある場合に関係します。たとえば、要素が正しく表示されないなどです。
- アダプティブ バージョンで正しく表示されるように設定する必要があるため、新しいページ テンプレートを追加するのは困難です。 既存のページテンプレートに情報を追加しても表示に問題はありません。
モバイル デバイス用のアダプティブ レイアウトとモバイル バージョンのサイトではどちらが優れていますか?
Web サイトにとって最適なソリューションは、モバイル デバイス用のアダプティブ レイアウトを使用することです。 多くの欠点はありますが、アダプティブ レイアウトを備えた Web サイトはより機能的です。 また、ページ テンプレートの存在は、実際には 2 つの異なるサイトがあるため、コンテンツ追加作業が重複するモバイル バージョンとは対照的に、サイトへのコンテンツの追加が簡単であることを意味します。 大きな利点は、アダプティブ バージョンによってメイン サイトの動作要因が改善されるという事実です。 これは、プロモーションとユーザビリティの観点から役立ちます。 これに基づいて、アダプティブ レイアウトを優先して選択することをお勧めします。
検索エンジンのプロモーションにかかるコストとその結果は、サイトをモバイル デバイスにどのように適合させるかによって異なります。
ブックマークへ
Ashmanov and Partners のオプティマイザーである Dmitry Mrachkovsky 氏は、アダプティブ サイトとモバイル サイトのどちらを選択するか、またどのような目に見えない問題が発生するかを語りました。
レスポンシブ Web サイトとモバイル Web サイトの利点
SEOの観点から、スマートフォンとタブレット向けにどの適応テクノロジーがより効果的であるかという質問に明確に答えることは困難です。 主要なプレーヤーの中でも、どのような解決策にも賛成する人が圧倒的に多いとは気づきませんでした。 M.Video、DNS、Wildberries、Aviasales はアダプティブ レイアウトを使用し、Lamoda、220 Volt、Yulmart、Yandex.Market はモバイル サイトを使用します。 しかし、1 番目と 2 番目の場合にどのようなメリットがあるかを見てみましょう。
M.Video Web サイトと 220 Volt Web サイトのモバイル版のアダプティブ レイアウト
アダプティブ レイアウトを使用すると、別のモバイル バージョンを開発する必要がなくなります。 これには次のような利点があります。
- モバイルデバイスで表示するために別のページ構造を必要としません。 CSS を使用してサイトのデスクトップ バージョンを調整するだけで十分です。
- デスクトップ版とモバイル版では単一の URL が使用されます。 したがって、サイトのコンテンツは重複せず、ページ同士が競合することはなく、プロモーション作業がデスクトップおよびモバイル検索のランキングに影響を与えます。
モバイル バージョンは、より高価で柔軟なソリューションです。 メインサイトに影響を与えることなく編集できます。 これには次のような利点があります。
- モバイル サイトは、コード レベルで不要な機能を削除することで、できるだけ簡単かつ迅速に読み込むことができます。
- デスクトップ版のサイトでは利用できなかった機能を追加することで、モバイル ユーザー向けのインターフェイスを改善できます。
- ユーザーは、必要に応じていつでもモバイル デバイス上のサイトのメイン バージョンに切り替えることができます。
もう 1 つのテクノロジー、RESS について触れたいと思います。 デバイスに応じてユーザーのデスクトップまたはモバイルのテンプレートが表示されますが、ページの URL は変わりません。 RESS は、上記のアダプティブ バージョンとモバイル バージョンの利点を組み合わせたものです。 しかし、これには 2 つの欠点もあります。実装が複雑で高価であることと、まれで不人気な電話モデルを識別する際にエラーが発生することです。
アダプティブ レイアウトの問題
アダプティブは経済的で便利なソリューションですが、検索エンジンのプロモーションの観点から見ると、いくつかの落とし穴があります。
アダプティブの誤解
アダプティブ レイアウトを誤って実装し、コード内の 1 ページにデスクトップとモバイルの 2 つのテンプレートを同時に表示する人もいます。 ユーザーのデバイスに応じて、コードの必要な部分が表示されたままになり、残りは display: none を使用して非表示になります。 これにより、次の 3 つの問題が生じます。
- すべてのコンテンツ要素 (テキスト、画像、H1 および H6 見出し、ブレッドクラム、関連製品および推奨製品など) は 2 回ロードされます。 そして、検索エンジンは重複を非常に嫌います。
- コンテンツの未使用部分は CSS を使用して非表示にします。 この問題に関する検索エンジンの意見は曖昧です。 Google は非表示ブロックのコンテンツを無視すると述べ、Yandex はページ全体のコンテンツを考慮すると述べました。 ほとんどの SEO 専門家は、このようなスキームが制裁に該当するリスクを生み出すことに同意しています。
- コードが重複しているため、サイトの読み込みが遅くなります。
このような実装は、RESS テクノロジーに対する間違ったアプローチです。
不要な要素を非表示にする
アダプティブ バージョンのインターフェイスをより便利にするために、邪魔なブロックやカタログ カテゴリ内の大きなテキストなど、一部の機能が削除されているものもあります。 不要なものは、 display: none を使用して非表示にします。 しかし問題は、すべてのコードがページの読み込みに使用され、サイトが遅いことです。 さらに、上で述べたように、検索エンジンはそのようなコンテンツに対して物議を醸す態度をとっており、制裁に該当するリスクがあります。
JavaScript の誤った使用
モバイルデバイスに不要なブロックが表示されるのを避けるために JS を使用する人もいます。 ただし、この方法は display: none よりも優れているわけではありません。 デスクトップ版であっても、検索エンジンが意図したコンテンツをインデックス付けしないリスクがあります。 一般に、検索エンジンは、特に正しいインデックス作成のための多くの条件が満たされていない場合、AJAX コンテンツを常に正しく認識するとは限りません。
なぜ人々は依然としてレスポンシブデザインを使用しているのでしょうか?
アダプティブの選択は、通常、サイトの 1 つのバージョンのみを開発できることと、複数の URL で問題が発生しないことの 2 つの主な利点によるものです。
これは、複数の地域にプロモーションする場合にも便利なソリューションです。 私たちは 1 つのドメインにすべての努力を集中し、デスクトップとモバイルの検索で結果を獲得しています。 これを行うには、対象の領域を Yandex.Directory 内のサイトにリンクする必要があります。
また、Google の場合は、支店の住所を含むページを作成して、検索エンジンがどの地域で事業を展開しているかを認識できるようにします。 単一ドメインのアダプティブ レイアウトは、M.Video で非常にうまく使用されています。 このストアは、製品、カテゴリ、情報のクエリに対するモバイルおよびデスクトップの検索結果で高い位置を占めています。
逆に、地理サブドメインを使用してページのテキストの関連性を高めることもできます。 この場合、spb.site.ru、samara.site.ru、kazan.site.ru などのサブドメインには、Yandex.Webmaster を通じてリージョンが割り当てられ、トポニムを示すヘッダーとメタ タグが書き込まれます。 もう 1 つの利点は、地域ごとに結果を追跡するために地域サブドメインに対して個別の分析を簡単に設定できることです。 このプロモーション方法は MediaMarkt によって実践されています。
モバイル版サイトの問題
モバイル サイトの欠点は、開発コストが比較的高いことだけではありません。 このテクノロジーを選択するときに発生する可能性がある、あまり目立たない問題のリストを次に示します。
ダブルプロモーション業務
モバイル サイトはメイン サイトとは別に最適化およびプロモートされるため、アダプティブ サイトの場合よりも多くのリソースが必要になります。 モバイル バージョンが正しくインデックス付けされ、デスクトップ バージョンと競合しないことを確認して、最適化を開始する必要があります。 これを行うには、Yandex.Webmaster と Search Console でそれらをリンクし、正しい rel="alternate" 属性を指定し、インデックス作成と XML マップ生成を構成します。
コンテンツ内の絶対リンクによる混乱
デスクトップ テンプレートとモバイル テンプレートは、99% の場合、同じデータベースからコンテンツを読み込みます。 プロトコルとドメインを示すデスクトップ サイトの内部ページへの絶対リンクを使用している場合、それらはモバイル ページに表示されます。 リンクをクリックすると、次の 2 つのシナリオのいずれかが起こります。
- デスクトップ バージョンにユーザー エージェントが定義されている場合、モバイル バージョンのページがユーザーに対して開きます。
- 他の場合には、ユーザーにはデスクトップ ページが表示され、モバイル バージョンを作成する作業が無駄になります。
この場合、サイトの内部リンクジュースが壊れている可能性があります。 この問題を回避するには、コンテンツ内で相対リンクを使用します。 つまり、 href 属性には、 https://site.ru/page/ の代わりに /page/ を指定します。
デスクトップサイトとモバイルサイトのコンテンツと構造は異なる場合があります。 したがって、エラーを回避するには、検索時に両方のコンテンツにインデックスを付けることが論理的です。 Googleは、モバイル版でデスクトップサイトのコンテンツが正規であることを示すことを推奨している。 一方で、検索エンジンは非正規ページのコンテンツは考慮されていないとしている。
Yandex はこの点において明確であり、モバイル ページとデスクトップ ページのコンテンツを個別にインデックス付けします。 これを行うには、メイン バージョンからモバイル バージョンに rel="alternate" 属性を設定するだけです。また、デバイスのユーザー エージェントを考慮して、デスクトップ バージョンからモバイル バージョンへの 301 リダイレクトを設定することもできます。
モバイルファーストインデックス要件のあいまいさ
モバイル ファースト インデックスへの移行に備えるには、サイトのモバイル バージョンを正規ページとして選択するのが論理的です。 確かに、モバイルファーストに関する推奨事項には独自の曖昧さがあります。 たとえば、Google のガイドラインでは、モバイル版とデスクトップ版のコンテンツは類似している必要があるとされていますが、「類似性」の程度は開示されていません。
デスクトップ検索でのランキングには特定のコンテンツ ブロックが必要で、モバイル バージョンでは不要ですが、モバイル バージョンが優先される場合はどうなるでしょうか?
モバイル サイトのインデックス作成に関する Google のガイドからの抜粋
モバイル ファースト インデックスの実装に関する Google のレポートからの抜粋
ターボページの軽率な使用
ランキングに影響を与えることを期待して、検索エンジンのイノベーションを無差別に導入する人もいます。 たとえば、Yandex ターボ ページは、検索における本格的なモバイル ページに代わるものではなく、ユーザー機能のごく一部が含まれており、コンバージョン率が低くなります。 商用 Web サイトをお持ちで、モバイル版の品質に自信がある場合は、記事やレビューのあるページであっても、急いで「ターボ」を実装しないでください。
外部リンクの影響を軽減する
特に Google 検索では、リンクはランキングにとって依然として重要です。 モバイル サブドメインを取得すると、一部のユーザーがソーシャル ネットワークやフォーラムでそのサブドメインにリンクし始めます。 もう 1 つの部分では、メイン サイトのアドレスへのリンクが使用されます。 その結果、モバイル検索とデスクトップ検索では、1 つのドメインを使用した場合よりもリンクの影響が小さくなります。
地域プロモーションの特徴
上記では、単一ドメインと地域サブドメインを使用して、アダプティブ製品を地域的に宣伝する 2 つの方法について説明しました。 モバイル版のこれらのオプションを検討してみましょう。
最初のケースでは、メイン ドメインとモバイル サブドメイン m.site.ru を昇格させます。 それぞれの領域は、Yandex.Directory を通じて指定する必要があります。 問題は、サイトのモバイル バージョンをブランチに独立してリンクすることができない場合があることです。 テクニカル サポートに連絡する必要がありますが、結果が保証されるわけではありません。 サイトのモバイル バージョン用に別の組織を作成することはできません。 そのため、分岐数が多い場合にはバインディングに時間がかかる場合があります。
通常、m.spb.site.ru や spb.m.site.ru などのサブドメインを使用するオプションは除外されます。 たとえば、Kholodilnik.ru はそれを使用していますが。 ただし、この場合は、モバイル バージョンとデスクトップ バージョンのすべてのリージョン間でアドレス指定を構成し、最新の状態に保ち、変更を追跡し、Web マスター向けのサービスを監視する必要があります。 これは報われる可能性が低い大変な作業です。
モバイル適合性テストの申請
モバイル フレンドリー性テストのためにサイトの最適化されたバージョンを Yandex.Webmaster に送信しない場合、そのサイトはモバイル検索結果に表示されない可能性があります。 この問題はアダプティブにも当てはまります。 これは常に起こるわけではありませんが、ウェブマスターのメッセージに従うことをお勧めします。
サイトのモバイル版へのリージョンの割り当てに関する Yandex テクニカル サポートとのコミュニケーションの一部
モバイル版を使用する理由
モバイル版の主な利点は、間違いなく、別個のテンプレートを作成できることと、読み込み速度が速いことです。 さらに、古いサイトでは、アダプティブ バージョンを実装するよりも、別個のモバイル バージョンを作成する方が簡単です。
また、多くの SEO 専門家は、アダプティブ サイトの代わりにモバイル サイトを導入した後、検索トラフィックが増加したと指摘しています。 成長の理由が、ランキングに悪影響を及ぼしたアダプティブ レイアウトのエラーによるものであることは除外しませんが。
どのオプションを選択するか
Web サイトをゼロから開発している場合、または小規模なプロジェクトがある場合は、アダプティブ レイアウトを詳しく調べてください。 これは、より経済的で高速なソリューションです。 ただし、将来的にサイトの一部をモバイル デバイスに表示しないようにする必要がないように、すぐに機能を計画することをお勧めします。
ユーザーエクスペリエンスを優先する場合は、モバイルバージョンを選択する必要があります。 デスクトップに影響を与えることなく変更できます。 これは、サイトがそのセグメントのデスクトップ検索結果で主導的な位置を占めている場合に重要です。
RESS テクノロジーを使用することもできますが、この場合、Google はモバイル バージョンを優先することに注意してください。
RESS を使用したサイトのインデックス作成に関する Google のガイドからの抜粋
どのようなテクノロジーを選択する場合でも、サイトとそのバージョンが正しくインデックス付けされ、できるだけ早く読み込まれ、すべてのデバイスで問題なく表示されるようにしてください。
SEOスペシャリストのおかげで
新しい本『ソーシャル メディア コンテンツ マーケティング: フォロワーの頭の中を理解し、ブランドに恋をさせる方法』をリリースしました。
サイトのモバイル バージョンはメイン サイトの複製バージョンであり、携帯電話やタブレットからリソースのページを簡単に表示および移動できる特別なレイアウトが使用されています。
私たちのチャンネルの他のビデオ - SEMANTICA でインターネット マーケティングを学びましょう
携帯電話は長い間、地球上のほとんどの住民にとって親友となってきました。 最新のモバイル ガジェットはデスクトップ コンピューターの役割をほぼ完全に引き継ぎ、インターネット上のユーザーの行動を根本的に変えました。 これらは情報源であると同時に、多くのタスクを実行する手段でもあります。 人生のダイナミックな動きには時間を最も効率的に使うことが必要であるため、私たちは長い間、外出先で調べたり、購入したり、予約したりしてきました。
インターネット上の各プロジェクトには独自のメイン Web サイトがありますが、モバイル デバイスの画面解像度はコンピューターやラップトップの解像度とは異なります。 そのため、表示が非常に不便なため、携帯電話からこのサイトを使用することはほとんど不可能です。 そのため、ポケット ガジェットで読みやすい、最適化されたバージョンのサイトが必要でした。
サイトのモバイル版が必要な理由は何ですか?
情報提供と販売の両方で同一の Web リソースが大量に存在するため、訪問者の忠誠心が欠如します。 したがって、インターネット ユーザーには、訪問者がリソースのナビゲーションが不便な場合などに、時間を無駄にするのではなく、サイトを離れて競合他社に移動することを選択する機会があります。 この状況により、管理者は訪問者を惹きつけるだけでなく、訪問者の滞在意欲を高めるために、最も快適な環境を作り出す必要があります。
対象ユーザーを最大限にカバーし、快適な環境を作り出すことが、このサイトのモバイル版の目的です。
モバイル版サイトの分離は、長年利用されているモバイル端末からのサイトへの快適なアクセスを実現するものです。 スマートフォンでは、サイトは 1 列で表示されるため、モバイル版のサイトを作成する前に、開発者はデザインを慎重に検討する必要があります。訪問者の機能をまったく低下させないようにすべてを配置し、同時に、リソースとの対話を可能な限り便利にします。
使い方
訪問者にどのバージョンを表示するかを決定する原則は、ユーザーがサイトにアクセスしたときにデバイス画面が自動的に検出されることです。 画面幅がモバイル ガジェットとして識別された場合、別のサブドメインにあるモバイル バージョンのリソースへのリダイレクトがトリガーされます。 今後、検索エンジンがこのバージョンを別のリソースとして認識しないようにするには、メイン サイトと同じドメインにサブドメインを配置することをお勧めします。そうしないと、サイトのモバイル バージョンを宣伝することが逆効果になります。
Webサイトをモバイル版に移行する方法
特定の原則があり、それらを実装するにはプログラミングとレイアウトのスキルが必要です。
モバイルで このバージョンでは、デスクトップ バージョンとの一般的なコンセプトを維持する必要がありますが、同時に、個別の設計ソリューションと使いやすさのための最も便利なインターフェイスを開発する必要があります。 訪問者の画面上のリソース要素は、指でクリックしやすいように適切な間隔で配置され、十分な大きさで表示される必要があります。 その後、テストと最終的な打ち上げが行われます。
モバイルバージョンとアダプティブレイアウト
サイトの別個のモバイル バージョンと並行して、別の解釈されたバリエーション、アダプティブ デザインがあります。
サイトのモバイル バージョンがアダプティブ バージョンとどのように異なるかを理解してみましょう。
アダプティブ サイトはリソースの別のバージョンではなく、メイン サイトであり、ログインしているデバイスの解像度に自動的に調整されます。
アダプティブ レイアウトの利点には、メイン サイトと同じアドレスがあるため、リダイレクトが必要ないことが挙げられます。 これにより、検索エンジンによるランキングにおけるサイトの地位が大幅に強化されます。 開いている間、全く同じサイトのコンテンツと機能が表示されますが、その外観はウィンドウのサイズに合わせて調整されます。 また、リソースの最適化も可能です。
しかし、適応バージョンの開発はより労働集約的なプロセスであり、それに応じてイベントのコストも高くなります。
アダプティブ デザインは、オンライン ストア、ブログ、名刺、Web サイトなど、訪問者の回転数がそれほど多くないリソースに適しています。これらの主なタスクはコンテンツを配信することです。
モバイル版の長所と短所
モバイル版は読み込み速度が速く、ナビゲーションが簡単です。 訪問者が目にする気が散る情報は最小限であるため、訪問者が積極的な行動を起こす可能性が高くなります。 さらに、別のモバイル バージョンはデスクトップ バージョンから完全に独立しています。 これにより、それらを個別に操作できるようになります。
この概念の欠点には、SEO プロモーションの分野における特定の困難が含まれます。 同じコンテンツを投稿すると重複とみなされ、サイトのプロモーション プロセスへの悪影響を排除するための別の対策が必要になります。 モバイル版は汎用性が低いことを考慮し、メインサイトの維持費とは別に費用項目が必要となります。
このサイト オプションは、すでにメイン サイトへのトラフィックが多いが、再設計せずにモバイル デバイスへのロイヤルティを高めたい大規模プロジェクトに適しています。 ほとんどの場合、ソーシャル ネットワーク、電子メール サービス、ニュース ポータルなど、読み込み速度が重要なリソースには、別のモバイル バージョンが適しています。
要約すると、今日、あらゆるインターネット プロジェクトにとって正当な必要性は、モバイル デバイス上でサイトを正しく表示する機能であるとしか言えません。 これをどのように実装するかは、サイトの目標と目的、予算、能力によって異なります。
そこでは、アダプティブ デザインがなぜ必要なのか、その利点は何なのか、必要かどうかについて検討しました。 記事から理解できたように、レスポンシブ デザインは必要であり、誰もがそれを必要としています。 今日は、Web サイトにどちらが適しているか、アダプティブ デザインと独立したモバイル バージョンを見ていきます。
当社は常に改善し、新しい経験を積んでいます。 この記事では、そのうちの 1 つについて説明します。
記事の最後には素敵なボーナスがあります:)
モバイル版
このサイトのモバイル版は、スマートフォンおよびタブレット向けに設計された別のバージョンです。 通常はデザインがあります 最適化されたモバイル デバイス向け。その結果、コンテンツは読みやすい形式で表示され、読み込みはほぼ瞬時に行われます。 通常、m.site.ru または mobile.site.ru の形式でサブドメインに配置されます。
利点
利便性
ユーザーは前後や斜めにスクロールする必要はありません 適切なコンテンツを探しています、目的のテキストを読むために増減します。 サイト全体が 1 つの列で表示され、上から下にスクロールする必要があります。 通常、すべてのコンテンツは構造化され、論理ブロックに分割されます。
ダウンロード速度
一般に、モバイル バージョンの設計は非常に簡素化されており、コードとスクリプトが最小限に抑えられているため、モバイル デバイスでのサイトの読み込みが非常に高速になります。
サイト上の編集
モバイル版は実際には別のサイトであるため、変更を加えるのは難しくありません。 変更がモバイル バージョンにのみ影響し、デスクトップ バージョンには影響しないことを確認する方法について心配する必要はありません。
メインバージョンに切り替える
ほとんどの場合、モバイル バージョンでは利用できない機能を使用する必要がある場合、ユーザーは問題なくサイトのメイン バージョンに切り替えることができます。
欠陥
複製
異なるサブドメインに重複したコンテンツがあると、検索エンジンのプロモーションに悪影響を及ぼします。 原則として、モバイル版の作成にはプログラマーが、プロモーションにはSEOのスペシャリストが携わります。 そして、たとえテスト版でSEO専門家の要望がすべて考慮されたとしても、そのままの形で実戦版に移行するとは限りません。 多くの場合、転送中に何かが変更されたり、何かが追加されたりします。 その結果、モバイル版では重複によりランキングに問題が生じる可能性がございます。
アップデート
メイン サイトに追加されたすべてのコンテンツは、モバイル バージョンでも複製する必要があります。 また、サイトがたとえばニュース ポータルで毎日更新される場合、これは非常にコストのかかるプロセスになる可能性があります。
機能の制限
高機能ソリューションはモバイル バージョンに移行されないことがよくあります。 通常、モバイル サイトを作成する前に、モバイル デバイスからのユーザーのリクエストと行動が分析され、このデータに基づいて、モバイル訪問者にとって本当に重要なものだけが提供されます。
モバイル版は十分に実績があり、今でもウェブマスターによってよく使用されています。 同じことがモバイルアプリケーションにも当てはまります。 しかし、これはすでに非常に高価であり、平均的な Web サイトにはモバイル アプリケーションを開発する余裕がありません。
アダプティブレイアウト
レスポンシブに設計された Web サイトは、デスクトップとモバイル デバイスの両方で同様に便利に表示されます。
利点
実装の容易さ
通常、アダプティブ レイアウトでは、画面幅が希望の表示サイズに調整されます。 これらはすべて HTML と CSS を使用して実装できます。 最新の CMS とフレームワークを使用すると、これを数回クリックするだけで実行できます。 そして、最新のテンプレートはすでにアダプティブ デザインをすぐに提供します。 あとはインストールするだけですか？ 数分で、あらゆる視聴者にとって使いやすいレスポンシブ デザインが完成します。
SEO
モバイル版で異なるサブドメインでコンテンツの重複が発生した場合でも、ここではそのような問題は発生しません。 ページのアドレス (URL) は 1 つですか? 画面やデバイスの解像度が変わっても、デザインが崩れたり、モバイル バージョンにリダイレクトされたりすることはありません。 このオプションは、モバイル バージョンの robots.txt の rel="canonical" 属性または禁止よりも、重複コンテンツの問題をより適切に解決します。
欠陥
重さ
通常、適応性により、ユーザーが利用できるすべての機能が残されます。 これは、モバイル訪問者が、小さなスマートフォンのディスプレイではすぐに把握することが難しい、乱雑なスクリプトや大量の情報に遭遇する可能性があることを意味します。 デスクトップのサイズが 200 ～ 250 KB であるのが通常である場合、モバイルのサイズは通常 50 KB 未満です。
訪問の目的
ユーザーは連絡先情報、道順、支店の有無などを調べるためにサイトにアクセスすることがよくあります。 また、サイトによっては、目的に到達するまでにいくつかの難しいページを移動しなければならない場合もあります。
選択の余地ない
モバイル バージョンでは、プログラマーがブロックを歪めてロゴの後ろに電話を隠した場合でも、いつでもデスクトップ バージョンに切り替えることができ、拡大縮小しても連絡先情報を確認できます。 プログラマがアダプティブ レイアウトを失敗した場合、必要なものを見つけ出さなければなりませんが、誰もがそれができるわけではありません。 したがって、適応設計は、最初に非常に適切かつ有能に設計され、次に同様に有能にテストされる必要があります。
結論: アダプティブ レイアウトかモバイル バージョンか?
ここには単一の正解はありません。 タスクごとに最適なオプションが選択されます。 また、レスポンシブ デザインは、あるサイトでは理想的ですが、別の場合ではサイトの使いやすさに関連した問題のみを引き起こす可能性があります。 大規模なプレーヤーや容量の大きいサイトの場合は、ユーザーが必要とする機能のみを備えたモバイル アプリケーションを作成する方が簡単な場合があります。
私たちの意見では、情報 Web サイトしか持っていない場合は、レスポンシブ デザインが最適です。 テキストや画像を圧縮することは、使いやすさを損なわずに Web サイト上の巨大な電卓を再設計する方法を決定するよりもはるかに簡単だからです。
ただし、Web サイトに巨大な機能を備えた個人アカウントがある場合、または Web サイトをアダプティブ デザインに移行するのが難しい場合は、ユーザーのためのすべてのツールが便利に配置できるモバイル バージョンを作成する方が簡単です。
まだ Web サイトをお持ちでなく、これから作成することを検討している場合は、すぐにアダプティブ デザインを開発に組み込むことをお勧めします。
モバイルデバイス向けのウェブサイトの最適化。 ルール 。
デスクトップ インターネットの視聴者の増加は 2015 年に停止
ロシアと世界のインターネット Web サイトに掲載されたデータによると、2015 年にデスクトップ インターネット視聴者の増加、つまりデスクトップ コンピューターからネットワークにアクセスする人の数が完全に止まりました。
同時に、携帯電話やタブレットを使用してインターネットを閲覧する人の数は毎年着実に増加しています。 たとえば、2013 年にはこの数字は 56%、2014 年には 61% でしたが、2015 年の 5 か月間でモバイル デバイスからサイトにアクセスするユーザーの数は再び増加し、約 86% に達しました。
さらに、モバイルサイトを通じたオンラインストアでの購入だけでなく、さまざまなサービスの注文数も増加しており、この数字は前年同期と比べて70％近く変化しています。
これらの事実は、Google や Yandex などの主要な検索プラットフォームでは無視できませんでした。
Google の新しいモバイル フレンドリー アルゴリズム
2014 年 11 月以来、Google はモバイル検索結果で「モバイル フレンドリー」サイトをマークしています。
そして、2015 年 4 月 21 日から、検索エンジンはモバイル デバイスに対応していないサイトの順位を下げ始めました。
アルゴリズムの変更は本質的に世界的なものであり、すべての国に影響を与えるため、検索結果が劇的に変化します。 同時に、「モバイルデバイスフレンドリー」の要件を満たすリソースには、ランキングの際に特別なマークが付きます。
現在、これらの変更はスマートフォンからの検索結果にのみ適用されることを強調しておく必要があります。 適応されていないサイトは、通常の検索結果で降格されません。
の必要性に関する Yandex の立場 サイトのモバイル版を作成する今のところ私はより忠実です。 しかし、「良いサイトとは人々のために作られたサイトである」という同社のモットーは、修正されたバージョンがプロモーションの成功に役立つことを示唆しています。
これは、Yandex.Webmaster サービスの「サイトのモバイル版」セクションの出現によって間接的に示されます。 このセクションでは、サイトがモバイル インターネット視聴者をターゲットにしていることについて Yandex に警告する方法について説明します。
Yandex と Google の「モバイル フレンドリー サイト」の要件には、一定の違いがあります。 特に、海外の検索エンジンは、サイトのすべてのバージョンに対して単一の URL を要求します。 Yandex 自体は (たとえば、画像検索用の Yandex のモバイル バージョン、Yandex.Dictionaries) を使用しており、モバイル バージョンと標準バージョンを異なるサブドメインに分割することを全員に積極的に推奨しています (「サイトのインデックス作成」セクションの 7 番目のポイント)。 引数: これにより、システムはさまざまなデバイスからのリクエストでサイトの必要なバージョンを表示しやすくなります。
そもそもなぜサイトのモバイル版が必要なのでしょうか?
携帯電話またはタブレットを手に持っていて、興味のあるサイトへのリンクをたどったと想像してください。 そして、文字が小さく、ページが正常に読み込まれないことさえあり、不要な要素がたくさんあり、何が何であるかを理解するのが困難です。 このような状況を避けるために、私たちは別個の軽量または サイトのモバイル版、特に小さな画面を備えたデバイスに適合しています。
主な違いは次のとおりです。
さまざまな種類のモバイル デバイスの機能
サイトがモバイルフレンドリーかどうかを確認するにはどうすればよいですか?
Web サイトがモバイル対応かどうかを確認するには、7 つの無料オンライン サービスのいずれかを使用できます。
- モバイル端末での見やすさをチェック - リンク ;
- iPad または iPhone から Web サイト表示を閲覧するためのエミュレータ - リンク;
- さまざまなデバイスや画面からサイトを表示できるサービス - リンク;
- 最も一般的なデバイスである iPhone、iPad、Android - リンク; で Web サイトがどのように表示されるかに関する情報を取得するサービス。
- モバイル画面に表示できるかどうかサイトをテストするためのツール - リンク;
- 複数のモバイルデバイスでサイトを同時に表示 - リンク;
- もう 1 つの機能的なサービスはリンクです。
あなたのサイトがモバイルフレンドリーであることを検索エンジンに伝えるにはどうすればよいでしょうか?
リソースがモバイル指向であるという事実に検索エンジンの注意を向けると、モバイル デバイスで検索しているユーザーを正確にページに誘導できるようになります。
Yandex では、このために「サイトのモバイル版」セクションに示されている方法のいずれかを使用できます。
Google は、ページのバージョンがモバイルかどうかをシステム自体が判断すると想定しています。 検索エンジンが「モバイル フレンドリー」であると認識するには、Google の検索スパム部門の責任者であるマット カッツ氏が特別インタビューで述べた、次のようないくつかの推奨事項に従う必要があります。
- JavaScript や CSS のブロックはありません。
- ページのデスクトップ バージョンからモバイル バージョンへ、またはその逆のリダイレクトが正しく構成されています。
モバイル、アダプティブ、レスポンシブ Web サイト バージョン: 違いは何ですか?
一般的な用語では、「サイトのモバイル バージョン」と「サイトのアダプティブ バージョン」という概念が完全な同義語として使用されることがよくあります。 このシリーズには「レスポンシブ Web サイト」という概念が追加されることもあります。 ただし、この概念の使用は正しくありません。 その理由を考えてみましょう。
モバイル版サイト
これは、画面解像度の低いデバイスからの閲覧のために特別に作成された別のサイトです。 したがって、アドレスと技術パラメータが異なります。 構造やレイアウトが異なります。
利点:
- 変更が容易であるため、 モバイル版サイトメインのものに結びついていない。
- ユーザーの選択: 気に入らない場合は、モバイル バージョンを無効にして通常のドメインに切り替えることができます。
欠点:
- 別の住所を覚えておく必要がある。
- 機能が制限されており、場合によってはコンテンツの縮小版。
- 追加の作成コスト。
- モバイルバージョンがメインバージョンと重複していると見なされないように、検索エンジンに双方向の注釈を付ける必要がある。
サイトのアダプティブ バージョン
アダプティブ Web サイトまたはアダプティブ Web デザインを備えた Web サイト (adaptivedesign) は、サイトにアクセスしたデバイスの画面のサブサイズと機能に合わせてレイアウトが自動的に調整 (適応) されるテンプレートです。
コンテンツが画面の幅いっぱいに単純に引き伸ばされる、いわゆる「フレキシブル レイアウト」とは異なり、レスポンシブ Web デザインのサイトでは、画像が湾曲したり、空白スペースの「穴」が生じたりすることはありません。 さらに、流動的なレイアウトはデスクトップ用に開発され、アダプティブ レイアウトは最初はモバイル デバイス用に作成されます。つまり、モバイル デバイス用に最小限のレイアウトが開発され、その後高解像度向けに機能が拡張されます。
レスポンシブ Web デザインは、流動的なレイアウトと漸進的な機能強化の共生であると考えられています。
利点:
欠点:
- ユーザビリティに問題があるため、 対象となる視聴者グループのいずれかにとって重要なマイナーセクションは、モバイルユーザーにとって不便をもたらす可能性があります。
- ページ コード圧縮を使用している場合でも読み込みが遅くなります (これも常に便利であるとは限りません)。 結局のところ、サイトの「重み」は実質的に変わりません。
もちろん、同じコンテンツを含むサイトの複数のバージョン (デスクトップ コンピューター用とモバイル デバイス用に別々) を作成するよりも、単一のアダプティブ バージョンを作成する方が簡単、高速、低コストであることに注意してください。 ただし、これが実際に機能するのは、レスポンシブ デザインが適切に実装されている場合のみです。そうでない場合、サイトはユーザーにマイナスの印象を与えてしまいます。
サイトを適切に適応させるには、HTTP リクエストの数を減らし、CSS と JavaScript を最小限に抑え、読み込み速度を向上させることが必要です。
また、リソースはスキャンに利用可能な状態にしておく必要があります。 これを行うには、ページの表示に直接影響するサイト上の主要なファイル (広告を含む) への robots.txt ファイル内のアクセスをブロックしないでください。 Googlebot が CSS および JavaScript 画像にアクセスできない場合、モバイル ブラウザでページがどのように表示されるかを判断できません。
したがって、検索エンジンはそのページがモバイルデバイスに適合していることを理解できず、ユーザーに誤って表示されてしまいます。
サイトのレスポンシブバージョン
「レスポンシブ Web デザイン」と「流動的な」Web サイト レイアウトの概念が同一視されることがあります。 実際、サイトのレスポンシブ バージョンは「流動的な」レイアウトとその上のメディア要素に基づいており、HTML と CSS のみを使用して実現されます。
レスポンシブ Web サイトのデザインは、ページ レイアウト (メディア クエリ、柔軟な画像) のみを操作するため、ある意味ではアダプティブ デザインの一部であるのはこのためです。
つまり、レスポンシブ Web デザインは、さまざまなデバイス向けの Web サイトやアプリケーションを作成するための戦略です。 レスポンシブ Web デザインはレイアウトを調整するための単なるテクニックであり、CSS3 メディアクエリ クエリを使用して行われ、すべての一般的なブラウザー (Google Chrome、Mozilla FireFox、Opera) でサポートされています。
レスポンシブ デザインのサイトは、動的表示リソースと呼ばれることもあります。 この場合、同じ URL が使用されますが、HTML のバージョンは異なります。 システムは、ユーザーのブラウザに関する入手可能な情報に基づいて、必要なオプションを選択します。
「レスポンシブWebサイトデザイン」の概念の中には「RESS」（Responsive Design + Server Side）という概念もあります。 このシステムは多くの Google サービスで使用されており、独立したモバイル バージョンとアダプティブ バージョンのサイトの両方の利点が含まれています。
利点:
- 単一のアドレス (アダプティブ デザインの場合と同様)。
- html と css の特別な最適化によりトラフィックを最小限に抑え、不要な JavaScript を削除します。
- ターゲティングの可能性（たとえば、Android がインストールされているガジェットの場合は GooglePlay から、Apple の場合は iTunes からアプリケーションをダウンロードすることが推奨されます）。
- デバイスの種類ごとに独自のレイアウトを作成する機能。
欠点:
- 多額の人件費（いくつかのレイアウトオプションを作成する必要がある）、それに応じてプロジェクトのコストが高くなります。
- 各デバイスに適合させると、ユーザーが使用しているバージョンに応じて異なるコンテンツが表示される場合があり、それがマイナスな印象を与える可能性があります。
- インターネット アクセス デバイスを決定するためのメカニズムが不完全。
- コンテンツの配置に関する問題 (情報ブロック、ウィジェット、メディアの順序)。
- ブラウザーが画像を縮小すると、リソースとトラフィックのコストが増加します。
Google によるモバイル デバイス向けサイトの最適化にご協力ください
Google の従業員はヒント システムを開発しました。これに従うことで、サイトをモバイル デバイスに適応させる問題を解決できるようになります。
まず、Google.Webmaster のメイン ページで、リソースの反対側に、サイトがモバイル デバイス用に最適化されていないことが示されます。
主な推奨事項の最初のポイントの横にある機能を使用すると、エラーのレポートを表示でき、エラーが見つかったページ数と、対応するボタンをクリックするとアドレスが示されます。
間違ったページ数の変化を示すグラフの前にリンクがあり、そのリンクに続くと、モバイル デバイスで表示するためのサイトの要件と主なエラーに関する情報が含まれるトレーニング記事を読むことができます。
また、モバイル開発者向けの Google サービスに関する公式ページのセクションの 1 つでは、モバイル サイトの最適化における一般的なエラーのリストとその解決方法を見つけることができます。