これまで以上に、オンライン プレゼンスの効果的なモバイル表現を実現するためのベスト プラクティスとテクニックを開発プロセスに確実に組み込むことが重要になっています。
法律、医療、レストラン、技術、その他の業界を問わず、高品質なモバイル実装は ウェブサイト モバイルファースト時代における重要なステップです。
著者は、Google のモバイルファースト時代への移行に耐えられる一貫性のあるオンライン ウェブサイトを作成するために、技術的な SEO、Web サイト開発、モバイル デザインの原則など、モバイル開発のベスト プラクティスのいくつかの側面に焦点を当てることを推奨しています。
では、これ以上長々と説明せずに、高品質のモバイル ウェブサイトを実現するために重点的に取り組むべき 12 のベスト プラクティスをご紹介します。
1. ファーストビューは完全には消えていない
モバイル環境では、コンテンツが際限なくスクロールするため、画面上部が完全に消えるわけではないことを覚えておくことが重要です。
モバイル デザインでは、スクロールする理由があることを示すために、少なくとも一部のテキスト コンテンツを画面上部に配置することが望ましいです。
提供するものを見たいという心理的なメリットや欲求が完全になくなるわけではないので、さまざまなモバイル デバイスでこの点をある程度最適化する必要があります。
2. モバイルユーザーだけに焦点を当てる必要はない
モバイルとデスクトップが融合するにつれて、これらのプラットフォームのユーザーの目標と要望も変化します。
プラットフォームに基づいてユーザーが達成したいことに焦点を当てると、Web サイトを通じてより効果的に顧客にアプローチする総合的なアプローチを作成できます。
ユーザーが製品を購入する場合でも、提供しているサービスについて調査する場合でも、ユーザーの目標とビジネスの顧客獲得の組み合わせは継続します。
そうなると、こうした理想や価値観に特に焦点を当てる必要性は薄れていくでしょう。ただし、重要性が薄れるのではなく、モバイルとデスクトップの融合が進むにつれて、必要性が薄れるだけなのです。
3. レスポンシブデザイン技術を活用する
個別の m-dot ウェブサイト (m.example.com) の時代は終わりました。
モバイルファースト時代にこのような実装を使用する正当な理由は存在しません。
構造が非常に乱雑になる可能性があり、複数の URL が適切に最適化されていない場合は重複コンテンツの問題が発生します。
効果的な移行を確実に完了させるためのテクニックは数多くありますが、それ以外では、新しいテクノロジーの出現により、m-dot の実装は絶滅の道を辿っています。
今日、理想的な実装はレスポンシブデザインです。これらのデザインでは、メディアクエリと呼ばれるものを使用して、デザインがサポートするディスプレイ解像度を定義します。
それぞれの個別の解像度は、デザインにおける「ブレークポイント」、つまりレスポンシブ デザインが 1 つの解像度から次の解像度に移行するポイントと呼ばれます。
この種の構造を使用する利点は、m-dot 実装で発生する重複コンテンツの問題が発生しないことです。
また、モバイル実装には最新のテクノロジーが使用されます。
4. サイト速度を上げるには、「画像だらけ」ではなく「コード」を考える
幅 2 ピクセル、高さ 1200 ピクセルの繰り返し背景として、本当に 2 色の背景を使用する必要がありますか?
そうでない場合、代わりにコード化できるのであれば、代わりにコード化してください。
これほど小さなことではサイトの速度に大きな影響はありませんが、最適化が完了するにつれて、その効果は大きくなります。
次回、サイト監査を実行したり、Web サイトを作成したりするときは、「この画像は本当に必要か、それとも代わりにコード化するだけで済むか」と考えてください。
画像が本当に必要ない場合は、オブジェクトをコーディングすると、特にグラフィックを多用するサイト デザインでは、サイトの速度が飛躍的に向上する可能性があります。
5. WordPressをモバイル向けにカスタマイズする
WordPress には利用できるプラグインが多数あります。
そのため、モバイル互換性を高める機能を提供するものもあります。
この目的に最も役立つプラグインは、Duda Mobile、W3 Total Cache、および HTML と CSS を縮小するためのプラグインです。
6. デスクトップとモバイルですべてのコンテンツが同じであることを確認する
このベストプラクティスの背後にある考え方は、重複コンテンツとクローキングの疑いを回避することです。
安全のため、サイトのデスクトップ版とモバイル版のすべてのコンテンツが常に同じであることを確認してください。
これを確実に実現するために使用する最適な手法の 1 つは、レスポンシブ デザインです。
レスポンシブ デザインとは、知らない人のために説明すると、「メディア クエリ」を使用してさまざまなプラットフォームやデバイス間でデザインを自動的に切り替えるスタイル シートを作成することです。
可能な限りの速度を引き出し、デザインをシンプルかつ効率的にしたい場合は、CSS スプライトを検討してサーバー側のリクエストを減らすことを検討してください。
7. 「トップダウン」開発アプローチを採用する
「トップダウン」の開発アプローチとは、設計において行われた各決定の潜在的な結果をすべて最初から最後まで考慮することを意味します。
デスクトップファーストではなくモバイルファーストで開発し、その後にモバイルデザインを付け加えます。この開発アプローチは、最終的なデザインに問題が生じないため、理想的です。
例えば、デスクトップ用のウェブサイトを作成したとします。制作プロセスの4分の3ほど進んだところで、その上にモバイルサイトを作成したいと考えました。
モックアップを作成します。しかし、モックアップをコーディングし、トランジションを進めていくと、ここでバグが見つかります。そして、あそこでもバグが見つかります。そして、あちらでもバグが見つかります。これは、ボトムアップアプローチが機能せず、スコープクリープを引き起こすためです。
これは、予期せぬ問題が最後の瞬間に突然現れ、予期せぬバグが発生したり、プロジェクトが最初に計画されたときには想定されていなかった時間が増加したりする現象です。
実のところ、モバイル レスポンシブ デザインのトップダウン アプローチが最初から考慮されていれば、これらのバグや解決すべき問題が最後に現れて、このような恐ろしい問題が発生することはなかったでしょう。
8. 商品を売り込むために押し付けがましいインタースティシャル広告を使わない
はい、承知しています。あなたの製品は、この地球上で最も素晴らしく、最も素晴らしいものです。だからこそ、私たちは購入前にあなたのウェブサイトを訪れ、リサーチをしているのでしょう。
しかし、販売を邪魔するために、サイト全体で私たちの活動をブロックするような押しつけがましい広告を掲載する必要はありません。
可能であれば、邪魔なインタースティシャルを最小限に抑え、広告を下部または横に配置して、少なくとも広告をクリックして削除できるオプションを用意してください。
Googleは邪魔なインタースティシャル広告に対してペナルティを科す可能性があることに留意してください。この問題に関するGoogleの開発者ガイド、ウェブマスター向けガイドライン、そしてブログ記事も併せて読むことをお勧めします。
9. 実装の弱点を特定し、エラーをチェックする
弱点は必ずしもサイトの速度を意味するわけではありません。
これらは、異なるディスプレイや異なるプラットフォーム (Windows Phone と iPhone を考えてみてください) 間での実装に関する問題を意味する場合があります。
この目的には BrowserStack.com を使用するのがよいでしょう。
モバイル実装の最終段階に到達し、開発プロセス中に自分で発見すべきだった実装の問題をクライアントが発見するのを見ることほど悪いことはありません。
10. Flashビデオを使用しない
これは今の時代では一般的な慣習であるはずですが、いまだにそれを使用しているサイトを見かけます。
Adobe が Macromedia を買収して Flash ビデオを廃止すると、Flash ビデオはすぐに絶滅し、HTML 5 ビデオへの道が開かれました。
ウェブサイトで少なくとも HTML 5 ビデオを使用していない場合、ユーザーに悪影響を与える可能性があります。
11. Schema.org構造化データを使用する
Schema.org 構造化データは、検索エンジンが認識する必要のある特別な構造化情報を持つサイト上のページを識別するために重要であるだけでなく、モバイル インデックスが本格的に機能するようになると、Schema への依存度が高まることが予想されます。
これは、情報を理解するための簡潔で簡単な方法であり、その後、モバイル検索結果のリッチ スニペットに変換されます。
しかし、いずれにせよ、Schema構造化データはデスクトップ版でも使用すべきだと筆者は考えています。なぜなら、Schema構造化データを使用すると、ターゲットキーワードに基づいたリッチスニペット検索結果に表示される可能性が高くなるからです。正しく実装すれば、サイトの可視性向上に役立ちます。
12. JavaScript、CSS、画像などのサポートスクリプトをブロックしない
これは、デスクトップでもモバイルでも、あらゆるプラットフォーム向けのサイトを開発するときには常識であるはずですが、いまだにそれを行っている人もいます。
モバイルデザインをサポートするスクリプトがブロックされていないことを確認することが重要です。ブロックされると、将来的にモバイルのソフト404エラーなどの問題が発生する可能性があります。また、デスクトップの404エラーが発生する可能性もあります。
ただし、これらのファイルが Google によってクロールされないようにブロックすると、Google はこれらのファイルをクロールしてウェブサイトが正しく動作しているかどうかを確認できなくなります。
これができない場合、Web サイトを完全に理解できないため、ランキングが下がる可能性があります。
モバイルファーストの到来：実装の必要性が臨界点に達した
Google のモバイル ファースト インデックスの登場により、クロスプラットフォーム、クロスデバイス、クロス互換性のある Web サイトの実装が極めて重要な課題となりました。
つまり、遅らせる時間が長くなればなるほど、 モバイル実装だけでなく、 適切なモバイル実装にはさまざまなコストがかかります。
ランキングだけではありません。
まだモバイルに移行していない場合は、ぜひお試しください。
_____
by ブライアン・ハーニッシュ
