ホーム ビジネス SEO 非公開: ウェブサイトをモバイル ユーザー向けに最適化するにはどうすればよいですか?

ウェブサイトをモバイル ユーザー向けに最適化するにはどうすればよいですか?


サイトがモバイル対応であることを確認しましたか?

Google がモバイルファーストと呼ばれる新しいポリシーを導入したことをご存知ですか?

ますます多くの Web ユーザーがデスクトップ コンピューターから移行し、代わりにモバイル デバイスを使用してブラウジングやショッピングを行っています。

レスポンシブ Web デザインにより、すべてのプラットフォームで均等なレベルで動作するサイトを作成できるようになりました。しかし、それでも、レスポンシブ デザインはモバイルの UX 最適化戦略のほんの一部にすぎません。

真のパフォーマンスの最適化が必要な場合は、他の代替手段も考慮する必要があります。

これが、 モバイル ファースト エクスペリエンスとしてサイトを構築することに非常に重点が置かれている理由です。簡単に言うと、モバイルファーストとは、デザインとコンテンツが最初にモバイルユーザー向けに最適化されていることを意味します。

そうは言っても、この投稿はまったく新しいサイトをデザインすることに関するものではありません。代わりに、モバイルファーストの基本的な設計原則をいくつか見ていきます。そして、モバイル ユーザーのユーザー エクスペリエンスを最適化するための技術的な点に時間をかけて取り組んでください。

モバイルを念頭に置いたデザイン

Web は主に、デスクトップ ユーザーにサービスを提供するという原則に基づいて構築されています。本物の Web、つまりテクノロジーの真の進歩は、美しい全画面ディスプレイに表示されるのが最適です。しかし、スマートフォンやその他のモバイル デバイスは重要なものであり、モバイル ファースト デザインの概念に適応し始める時期が来ています。

モバイルを考慮した設計
モバイルを考慮した設計

常識的なレスポンシブ デザイン以外に、モバイル ファースト Web デザインに実装すべきデザイン要素は何ですか?

  • 優先順位付け。モバイル画面は利用可能な表示スペースに制限されています。また、デスクトップのはるかに広い水平構造とは対照的に、モバイル画面は垂直方向にコンテンツを表示します。これは、優先順位付けを使用して設計する必要があることを意味します。ユーザーにとって最も重要な要素はどれですか? CTA ボタンがある場合、モバイル ユーザーにとってどれだけ見やすくなりますか?
  • まずは内容。 2番目に色を付けます。モバイル デザインではいくつかの興味深いことを行うことができますが、デスクトップ デザインの範囲内では決してありません。したがって、まずコンテンツに道を譲ってください。コピーやその他のコンテンツ部分を読みやすく、アクセスしやすいものにします。モバイル画面では、気が散る視覚要素があまり許容されません。
  • 簡単なナビゲーション。モバイル デバイスでは、どこかをクリックするだけでホームページに戻ることはできません。もちろん、この種のナビゲーションを事前に計画している場合は別ですが。そしてそうすべきです。可能な限り、Scroll-to-Top ウィジェットだけでなく、シームレスなスティッキー ヘッダーも試してください。

これが正しく行われているかどうかを確認する最善の方法は、携帯電話を使用して (私はいつもそうしています! )、サイトにアクセスすることです。物事がどのように感じられ、どのように流れていくかを徹底的に調べてください。

カフェに座っているとき、または空港で飛行機を待っているときは、誰かの肩をたたいて、あなたのサイトをチェックするように丁寧に頼みましょう。その後、座ってフィードバックを聞いてください。ほとんどの場合、人々があなたの Web サイトのユーザー エクスペリエンスをどのように認識しているかに驚かれるでしょう。

リソースの最適化

リソースの最適化
リソースの最適化

UX のためではなく、個人的な好みのためにビジュアルを使用していることにどのくらいの頻度で気づきますか?それは実際に起こります。クリエイティブな作業を行う場合は、メディアの最適化がどのように機能するかを理解することは有益です。

写真、イラスト、アイコン、ビデオなどの視覚要素は、Web ページで帯域幅を最も消費する要素です。

2018 年の平均 Web ページ サイズ。業界およびさまざまな国ごとにリストされています。
2018 年の平均ページ読み込み時間、あなたのものと比べてどうですか MachMetrics Speed Blog
2018 年の平均ページ読み込み時間、あなたのものと比べてどうですか MachMetrics Speed Blog

誰もが満たさなければならない決まった Web ページ サイズはありませんが、Web ページ サイズが小さいほど読み込み時間が速くなることは常識です。

では、ビジュアル コンテンツから余分な KB や MB を削除するにはどうすればよいでしょうか?

  • 画像のサイズを変更します。簡単そうに聞こえますよね?そうですね、 1980 x 1200 の画像をバックグラウンドで読み込むためだけに、モバイル サイトを何回閲覧したか数えることはできません。代わりに、必要に応じてフルサイズの写真を代替リンクとして提供する必要があります。必要な寸法に応じて、サイズ変更により画像全体のサイズを最大 80% 削減できます。ただし、モバイル デバイスの場合、最大でも 600 ~ 700 ピクセルの範囲を超える理由はありません。
  • 圧縮してファイルサイズを削減します。画像の圧縮/最適化は、サードパーティ ソフトウェアを使用して画像内に存在する色の数を減らすプロセスです。これにより、写真本来の品質を失わずに、ファイル サイズを大幅に削減できます。画像の圧縮についてサポートが必要な場合は、画像圧縮ツールの包括的なまとめを参照してください。
  • 代替のファイル形式を調べてください。 PNG と JPEG ファイル形式については誰もが聞いたことがあるでしょう。結局のところ、これらは Web 上の事実上の画像標準なのです。そんなに長くない。デジタル画像配信における最新かつ最高の技術は、 WebPおよび SVG ファイル形式を中心に展開されています。たとえば、SVG は自動的にscreen-size に拡大縮小できるため、特定のビジュアル コンポーネントを読み込むために必要なリソースの数が削減されます。

モバイルファーストのためのユーザーエクスペリエンスの最適化は、単なる注意事項です。衝動的にデザインするということは、決定の長期的な影響を考慮していないことを意味します。一方、マインドフルなアプローチは、モバイル ユーザーを最初から念頭に置いて構築するのに役立ちます。

洞察力:直感的なモバイル デザインの概念に沿って、モバイル デザインで同じビジュアル コンポーネントを再利用する必要はありません。モバイル上で、いくつかの背景画像を削除してカラー背景に置き換えても、ユーザー エクスペリエンスが損なわれることはありません。帯域幅をほんのわずかでも節約できる方法を常に探してください。

事前ロードと遅延ロード

読み取りにかなりの時間がかかるページにすべてのメディア リソースを読み込む必要がありますか?また、ユーザーがアクセスする前に外部ページをレンダリングするのに役立つでしょうか?

まず、ブラウザー ヒントとも呼ばれるプリローダーについて見てみましょう。

プリローダーは、ページが潜在的なナビゲーションの機会をブラウザーに伝える方法です。たとえば、ユーザーはページ Aからページ Bにアクセスするとします。

プリロードを使用すると、ユーザーはページ A のナビゲーション リンクをクリックする前にページ B をレンダリングできます。

プリロードディレクティブ
プリロードディレクティブ

プリロードは常に機能するとは限らず、最終的な決定はブラウザー次第であることに注意してください。デバイスのタイプや帯域幅などの要素は個別に考慮されます。

最も一般的なプリローダーのタイプは何ですか?

  • プリフェッチ。このタイプは、特定の URL が次のナビゲーションの選択肢となる可能性が最も高いことを示しています。また、ブラウザがリクエストを許可すると、重要なページ リソースが自動的にキャッシュされるため、次のページの読み込みが大幅に速くなります。
  • プリレンダリング。上記のタイプは特定のリソースのみを取得しますが、プリレンダリングはページ全体をキャッシュします。レンダリングされたすべてのコンテンツは、ユーザーのデバイスのメモリ内に保存されます。
  • DNS プリフェッチ。 DNS プリフェッチは、指定された DNS のみを解決します。その結果、ユーザーがサイト上で特定の「ターン」を行うと、実質的にナビゲーションにかかる時間が短縮されます。
  • 事前接続。上記と同じですが、TCP 接続と TLS 接続による接続とハンドシェイクも確立します。

プリローダーのコード例にはどのようなものがありますか?

 <link rel="dns-prefetch" href="customURL.com">
<link rel="preconnect" href="customURL.com">
<link rel="prefetch" href="folder/script.js" as="script">
<link rel="prerender" href="customURL.com/preview.html">

プリローダーは動的 HTML タグを使用するため、 Google Fonts などのコンテンツをプリロードしたり、WordPress に JavaScript アセットをプリロードするためのカスタム スクリプトを作成したりできます。

ところで、WordPress を使用している場合は、WP Rocket を使用してサイトを強化することができます。

プリローダーについて詳しく理解できたので、もう 1 つのホットなトピックである遅延読み込みについて話しましょう。

遅延読み込みとは何ですか?

ブログ投稿であろうと静的サイトであろうと、新しい Web ページにアクセスすると、ブラウザーはページのコンテンツ全体を取得し、そのコンテンツをネイティブのブラウジング エクスペリエンスとして提供します。ほとんどの場合、実際にはスクロールせずに見える範囲より先は表示されずに、ページ全体をダウンロードする必要があります。

一方、遅延読み込みでは、ブラウザーはユーザーのビューポート内にのみあるコンテンツを読み込む (レンダリングする) ように指示されます。そのため、サイズに依存する写真やビデオが特定のページに追加されている場合、それらのファイルはブラウザ画面がサイトのその部分に到達したときにのみ表示されます。

潜在的な SEO の問題を心配している場合でも、心配する必要はありません。 Yoast は、Google が遅延読み込みを使用するページをレンダリングしており、それを単なるパフォーマンス向上のシグナルとみなしていることを確認しました。

使用するライブラリとして私がお勧めするのは、画像のシンプルかつ効果的な遅延読み込みであるLayzr.jsです。スクリプトはプロジェクトのホームページでもアクティブ化されるため、リアルタイムでの実行を確認できます。 WordPress ユーザーは、パブリック プラグイン リポジトリで数十の遅延読み込みプラグインを見つけることができます。

ウェブキャッシュ

Web キャッシュは、ページのバージョンをコピーするという概念に基づいており、いつでもユーザーに表示できます。ページは、Web サイトのページに初めてアクセスしたときにキャッシュされます。新しいユーザーがそのページにアクセスしようとすると、ライブ バージョンを提供する代わりに、Web サーバーはキャッシュされたバージョンを表示します。

あらゆる種類のキャッシュの目標は、Web サイトのパフォーマンスを向上させ、必要なバックエンド リソースを削減することです。キャッシュ ソリューションに応じて、カスタム間隔やその他のトリガーベースのイベントを構成できます。

ウェブキャッシング
ウェブキャッシング

Web キャッシュで最も人気のある名前には、Varnish、Squid、Memcached などがあります。ただし、特に WordPress ユーザーの場合は、市場には他のソリューションもたくさんありますので、ご安心ください。

CDN へのサインアップを検討することもできます。

CDN (コンテンツ配信ネットワーク) とは何ですか?

コンテンツ配信ネットワークは、分散サーバーのグローバル クラスターを使用して、信じられないほど高速なコンテンツ配信を提供します。 CDN は、ビデオ、写真、JavaScript など、Web 上で人気のあるすべてのコンテンツ タイプを迅速に転送できます。最近では、Web トラフィックのほとんどが何らかの形式の CDN を通過します。

コンテンツ配信ネットワークについて覚えておくべきことは、需要の高い Web サイトで使用するときに最も効果的に機能するということです。したがって、月に数千人の訪問者しかサービスを提供していない場合、目に見える改善を確認するのは難しいかもしれません。それでも、CDN は、Web サイトの読み込み時間を改善し、帯域幅のコストを削減し、コンテンツの可用性を高め、全体的なセキュリティを強化するための優れたソリューションです。

CDN の使用経験がない場合は、 Cloudflare を試してみることをお勧めします。Cloudflare は永久無料プランを提供しており、学習を始めるのに最適なプラットフォームです。 Cloudflare が期待に応えられない場合は、市場で最高の無料 CDN プロバイダーに関する記事をチェックしてください。

AMP (高速モバイル ページ)

Google のAM P プロジェクトは、強力なモバイル最適化です。基本的に、AMP はページを必要最低限​​の要素まで削ぎ落とし、超高速な読み込みエクスペリエンスを提供するだけでなく、コンテンツの読みやすさを優先します。ページ速度がいかに重要であるかを考えると、ほぼ瞬時の読み込み時間にはノーと言える勇気を振り絞ることができますか?

さて、これらの流行語はすべて素晴らしく聞こえますが、AMP はどのように機能するのでしょうか?

AMP は、表示できるコンテンツの種類に一定の制限がある、最低限の HTML ページです。これにより、スクリプトの実行などの制限により、読み込み時間が大幅に短縮され、全体的なパフォーマンスが向上します。

たとえば、JavaScript は AMP では動作しません。もちろん、 GitHub で入手可能な AMP JS ライブラリを使用する場合は別です。 JS ライブラリを使用すると、広告ブロッカーの回避などの特定の結果を達成できますが、真のパフォーマンスが必要な場合は、生の AMP が最適です。

AMP の興味深いケーススタディ:

コミット前のテスト

この時代では、プロジェクト用に別のステージング環境を用意しない理由はありません。ほとんどのクラウド ホスティング プラットフォームはデフォルトでステージング環境を提供しているため、プロバイダーにステージング環境にアクセスできるかどうかを確認してください。

コミットする前にテストする
コミットする前にテストする

ステージング環境とは何ですか?

これを説明する最も簡単な方法は、現在稼働中の Web サイトを見ることです。

このサイトはいわゆる運用サイトであり、サイトのベースとなるすべてのコード、スクリプト、コンテンツのリアルタイム バージョンです。このコンテキストにおけるステージング環境は、実稼働サイトのコピーです。言ってみればダミーサイト。また、このステージング環境では、ライブ サイトを中断することなく変更を加えたり、新しい機能を追加したりできます。

私はいつも Ashley Harpp の投稿「時間を無駄にしない – コミットする前に変更をテストする」を思い出します。

私たちが特定のことを避けるためにどのように自分自身を「騙す」かについての彼女の見解は、私たちが間違いを犯したときにどのように責任を負いたくないかを示す典型的な例です。それにもかかわらず、Ashley の投稿には、ローカル ステージング環境をセットアップするための便利なツールへのリンクも含まれています。

検査は思っているほど怖いものではありません。しかし、実稼働サーバー上のデータベース全体を誤って削除してしまったら、本当に怖いのは確かです。

構造化データマークアップの導入

構造化データマークアップの展開
構造化データマークアップの展開

構造化データのマークアップは、一般にスキーマ マークアップとして知られています。これは、Web サイトのコンテンツに関する背景と詳細を提供する一種のメタデータです。したがって、この構造化データ マークアップを追加すると、モバイル Web サイトが検索エンジンからより多くの許可を得やすくなります。したがって、検索エンジンはコンテンツの意味をより正確に理解できるようになります。

さらに、構造化データ マークアップは、JSON-LD、Microdata、RDFa などの標準化された形式を使用して、特定の Web サイト コンポーネントに注釈を付けます。

これには、製品、レビュー、評価、価格、日付、イベントの場所などに関する情報が含まれます。最終的に、検索エンジンはページのスキャン中にこれらのデータを抽出し、SERP のリッチ スニペットをハイライトするために使用します。

構造化データ マークアップを適用するには、さまざまなスキーマ マークアップ ジェネレーター ツールを利用できます。このツールを使用すると、構造化データのマークアップを Web サイトに簡単に適用できます。コンテンツに最適なスキーマの種類を選択し、必要なコード スニペットを作成できます。

構造化データのマークアップをウェブサイトの HTML に追加した後、 Google 構造化データ テスト ツールを使用して、その正確性を確認します。

音声検索オプションの実装

音声検索オプション
音声検索オプション

Siri、Google アシスタント、Alexa などの仮想アシスタントの人気の高まりにより、音声検索オプション対応の Web サイトが非常に人気が高まっています。閲覧時間を最小限に抑え、柔軟性を高めるために、人々は音声検索オプションを利用するようになりました。これにより、入力せずに必要な情報を迅速に取得し、アクティビティを完了することができます。

音声検索を実装して Web サイトを最適化するために実行できる戦術は次のとおりです。

ロングテールキーワードを適用する

音声検索は主に自然言語での問い合わせやクエリの形式をとります。音声アシスタントを利用する場合、ユーザーはよりカジュアルな口調で話すことがよくあります。その結果、ロングテール キーワードを使用し、カテゴリや専門分野に関するよくある質問に回答することで、コンテンツを最適化できます。さらに、訪問者が尋ねる可能性のある正確な質問を考慮し、コンテンツ内で明確かつ簡潔な方法で回答します。

明確かつ簡潔な回答を提供する

音声アシスタントは通常、ナレッジ グラフまたは強調表示されたスニペットに基づく情報を使用して、ユーザーのリクエストに簡潔かつ明確な応答を提供します。したがって、頻繁なクエリに直接対処する方法でコンテンツを構成できれば、音声検索の結果として Web サイトが選択される可能性が大幅に高まります。

ウェブサイトのナビゲーションと構造を強化する

音声アシスタントが簡単に巡回して認識できるように、サイト内のナビゲーションをわかりやすくします。ナビゲーション メニュー、ヘッダー、内部設定を最適化するだけで、スムーズなユーザー エクスペリエンスが実現します。これにより、音声アシスタントによるマテリアルのインデックス作成と検索が向上します。

注目のスニペットをターゲットにする

強調スニペットは検索結果の上部で強調表示されるため、音声検索結果で注目を集める最適な方法です。したがって、素材が強調スニペットに取り込まれて表示されるように、素材を構造化してください。たとえば、質問に簡潔かつ効果的に答える、箇条書きを使用する、データを表やリストに整理するなどです。

閉会の宣言

スムーズなモバイル エクスペリエンスを実現するために Web サイトを最適化することは、それほど難しいことではありません。必要なのは、少しの決意をして、この記事で概説した方法を喜んで適用することだけです。おそらく、コンテンツ キャッシュや遅延読み込みなどについてはすでによく知っていると思いますが、ステージング環境やプリローダーについてはどうでしょうか?

この投稿がモバイル Web サイトの最適化の現状に少しでも光を当てられれば幸いです。

「ウェブサイトをモバイル ユーザー向けに最適化するにはどうすればよいですか?」についてわかりやすく解説!絶対に観るべきベスト2動画

「“モバイルファースト”とはスマホサイトを最初に作ること? 本来の意味を正しく理解すべし!」【Web担当者必見!】
ホームページ制作におけるスマホ対応の方法や考え方。レスポンシブかユーザーエージェントか徹底的に解説!