もしあなたのWordPressサイトがデスクトップ専用なら、訪問者を失っていることになります。半数以上の人が携帯電話で閲覧しており、あなたのサイトがモバイルフレンドリーでなければ、訪問者はすぐに離れてしまうでしょう。
ある古いサイトがデスクトップでは問題なく見えたのに、モバイルでは完全に壊れてしまったとき、私はこのことを痛感した。テキストは小さく、メニューは機能せず、直帰率は急上昇した。それを修正した後、私のトラフィックとサインアップはほとんど一晩で改善されました。
このガイドでは、デスクトップ専用のWordPressウェブサイトをモバイルフレンドリーにする方法を具体的にご紹介します。コードを触ったことがなくても、誰でもできる簡単な手順です。
1.あなたのサイトがすでにモバイルフレンドリーかどうかを確認する
何かを変更する前に、あなたのサイトがすでにモバイルフレンドリーかどうかをチェックしてください。多くの新しいWordPressテーマはデフォルトでレスポンシブ対応になっているので、気づかないうちに半分くらいまで進んでいるかもしれません。
最も手っ取り早くチェックする方法は、Googleの無料モバイルフレンドリーテストです。URLを貼り付けてエンターキーを押すと、数秒で結果が表示されます。
このレポートでは、あなたのサイトが合格かどうか、さらに携帯電話での見え方のスクリーンショットが表示されます。また、うまく機能していない場合は、修正方法も提案してくれる。
ある古いサイトでこのテストを行ったところ、目を見張るような結果が出た。フォントは小さすぎ、ボタンは重なり、メニューは開かなかった。このテストによって、問題を修正するための明確なToDoリストができた。
もしあなたのサイトが審査に通らなかったら、これを最優先にしてください。合格しても、読み続けてください。モバイル体験をさらに向上させる方法が見つかるはずです。
2.モバイル対応のWordPressテーマを選ぶ
現在のテーマがモバイルフレンドリーでない場合、レスポンシブWordPressテーマに変更するのが最も早い解決策です。レスポンシブ・テーマは、どんな画面サイズにも自動的に調整されるため、訪問者がズームしたり横にスクロールしたりする必要がありません。
WordPressの中で無料のオプションを見つけることができます。外観 " テーマ " 新規追加で "レスポンシブ "を検索してください。ワンクリックでインストールできるモバイル対応のテーマが表示されます。
ある古いサイトで初めてこれをテストしたとき、レスポンシブ・テーマに変更することでレイアウトの問題の半分が即座に解決した。最も簡単な改善策だった。
ユニークなものを作りたいなら、SeedProdをお勧めする。ドラッグ＆ドロップ式のテーマビルダーで、コードに触れることなく独自のレスポンシブWordPressテーマをデザインできる。
あらかじめ用意されたテンプレートから始めることも、各セクションを段階的に構築することもできます。いずれにせよ、ビジュアルエディターで変更をライブで確認でき、作成したものはすべて完全なモバイル対応になります。
つまり、あなたのウェブサイトは見栄えがよく、携帯電話、タブレット、デスクトップでスムーズに機能し、余計な微調整は必要ありません。
3.ナビゲーション・メニューの簡素化
モバイルの画面はデスクトップよりもはるかに小さいため、長くて複雑なメニューはうまく機能しません。訪問者がリンクを見つけるためにズームや横スクロールをしなければならない場合、訪問者は諦めてしまうでしょう。
最善の方法は、ナビゲーションをシンプルにすることです。メニューは、1画面に収まるような主要な項目だけに絞りましょう。そうすることで、人々が必要な場所に素早くたどり着くことが容易になります。
私自身のメニューのひとつを3つのメインリンクに簡素化したところ、その違いは大きかった。ユーザーは、必要なものを実際に見つけることができたので、サイトにいる時間が長くなった。
メニューをレスポンシブ対応にする方法がわからない場合は、モバイル対応のWordPressメニューを作成するためのステップバイステップガイドをご覧ください。
4.重要な情報を見つけやすくする
携帯電話であなたのサイトを訪れる人は、たいてい何か特定のものを探しています。それは簡単な答えかもしれませんし、あなたの連絡先の詳細、あるいはあなたのビジネスへの道順かもしれません。
情報が埋もれていれば、彼らは離れていくだろう。モバイルでは、余分なタップがいちいち遅く感じられ、イライラさせられる。
訪問者が最も必要としている詳細について考え、それらを前面に押し出すようにしましょう。そのための簡単な方法には、次のようなものがある：
- クイックアンサーを掲載した小さなFAQセクションの追加
- 短い説明ビデオを埋め込む
- 貴社の一番の特徴やサービスを強調する
私が取り組んでいたサイトで、問い合わせ先とFAQを上の方に移動させたところ、直帰率がすぐに下がった。人々は答えを探す必要がなく、即座に答えを見ることができたのだ。
ホームページにすべてを詰め込む必要はありませんが、必要なものは一目瞭然で、モバイルでも簡単にアクセスできるようにしてください。
5.大きく読みやすいフォントサイズを使用する
携帯電話で小さなテキストを読むことはほとんど不可能です。コンテンツを見るためにピンチやズームをしなければならないようでは、訪問者は離れません。
目安としては、本文のテキストは少なくとも14-16pxにすることです。見出しやボタンはさらに大きくすると、スキャンやタップがしやすくなります。
読み込みの速い、クリーンで標準的なフォントにこだわりましょう。派手なカスタムフォントはデスクトップでは見栄えがするかもしれませんが、モバイルではサイトの表示速度を遅くし、読みにくくする可能性があります。
あるブログでフォントサイズを大きくしたところ、すぐに直帰率が下がり、読者はスマホでも快適に読めるため、ページ滞在時間が長くなった。
詳しくは、ウェブデザインにおけるタイポグラフィについてのガイドをご覧ください。
6.コンタクトフォームとオプトインフォームを短くする
長いフォームは、モバイルで最も敬遠されるものの1つです。小さな画面にたくさんの詳細を入力するのはイライラするもので、ほとんどの人は最後まで入力しません。
フォームを見て、すべてのフィールドが本当に必要かどうか尋ねてみましょう。例えば、Eメールリストを作成する場合、通常は名前とEメールアドレスだけが必要です。
売上が目的なら、チェックアウトフォームはできるだけ短く、請求書と配送先情報だけにしましょう。余分な詳細情報を求めると摩擦が増え、カートの放棄が増えます。
あるクライアントの登録フォームを6つのフィールドから2つに減らしたところ、コンバージョンが約2倍になったことがある。モバイルでは、常に短い方が勝つのです。
7.ランディングページをモバイル対応にする
ランディングページはほとんどのコンバージョンが発生する場所ですが、もしモバイルでうまく機能しなければ、お金をテーブルの上に置き去りにすることになります。デスクトップでは完璧に見えたページが、スマホではボタンが切れていたり、テキストが重なっていたり、フォームに入力できなかったりと、完全に崩れているのを見たことがある。
最も簡単な方法は、モバイルコントロールが組み込まれたWordPressページビルダーを使うことだ。そうすれば、一度デザインすれば、どの画面でも正しく表示される。
SeedProdはこれを簡単にします。ワンクリックでインポートできるレスポンシブ・ランディングページ・テンプレートのライブラリが含まれています。そこから、ドラッグ＆ドロップエディターですべてをカスタマイズすることができます。
私が最も気に入っているのは、SeedProdでデスクトップとモバイルの表示を即座に切り替えられることです。スペーシング、フォントサイズ、ボタンの配置を小さい画面用に特別に調整することができます。
公開前にモバイル版をライブでプレビューし、その場で修正を加えることができます。そうすることで、デスクトップとモバイルの両方でコンバージョンが得られるページを自信を持って立ち上げることができます。
8.CTAボタンのサイズと配置を変更する
コール・トゥ・アクション（CTA）ボタンはページで最も重要な部分ですが、モバイルではしばしば見失われがちです。訪問者が簡単に見たりタップしたりできなければ、コンバージョンを逃してしまいます。
ボタンは親指でタップできる大きさにし、ユーザーが自然にスクロールする位置（通常は画面の中央か下部付近）に配置しましょう。1つのページに多くのCTAを重ねるのは混乱を招くので避けましょう。
ある調査によると、半数以上のウェブサイトで、CTAボタンを見つけるのに3秒以上かかっている。もしあなたのCTAボタンが一目瞭然なら、あなたはすでに優位に立っています。
あるランディングページで、登録ボタンを高い位置に移動させたところ、モバイルでのコンバージョンが2倍になったことがある。単純な配置の変更が大きな違いを生むこともある。
9.モバイルポップアップの削除または簡素化
ポップアップはデスクトップでは効果的ですが、モバイルでは良いことよりも悪いことの方が多いのです。小さな画面では閉じるのが難しく、ユーザーが間違った場所をタップしてしまうと、間違って別のページに飛ばされてしまうかもしれない。
最良の解決策は、ポップアップを軽く、邪魔にならないようにすることです。フルスクリーンのポップアップの代わりに、フローティングのハローバーや、ビュー全体を遮らない小さなスライドインを試してみてください。
私が担当したあるサイトでは、大きな入力ポップアップを小さな下部のバーに置き換えることで、苦情が減り、実際にコンバージョンが向上した。ユーザーは邪魔されたと感じることなくブラウジングを続けることができた。
さらにアイデアが必要な場合は、OptinMonsterのモバイルポップアップベストプラクティスガイドを参照してください。
10.モバイルフレンドリーなWordPressプラグインを使う
すべてのWordPressプラグインがモバイルを考慮して作られているわけではありません。適切なものを選ぶことで、スマホでのサイトのスムーズさが大きく変わります。
軽量で、レスポンシブで、小さな画面でテストされているプラグインを探そう。いくつかの良いオプションがあります：
- モバイルフレンドリーなフォームプラグイン
- レスポンシブ景品またはコンテストプラグイン
- モバイル用にリサイズするソーシャルメディア・フィード・プラグイン
- WordPressのキャッシュ・プラグインで読み込みを高速化
- レスポンシブ・メニュー・プラグイン
私自身のあるサイトでは、より軽いフォームプラグインに切り替えたところ、モバイルのロード時間が半分になりました。体験はよりスムーズに感じられ、コンバージョンはすぐに上がりました。
WordPressモバイルプラグインのおすすめは、こちらの記事で紹介しています。
11.ウェブサイトのスピードを優先する
遅いサイトは、モバイルでは破格です。調査によると、3秒の遅延でも訪問者の半数以上が離脱する可能性があります。すぐに結果が出ることを期待される小さな画面では、スピードはさらに重要です。
サイトを高速に保つ最も簡単な方法は、すっきりとしたデザインを使い、不必要なごちゃごちゃを避けることです。余計なスクリプトや画像、プラグインはすべてロード時間を増加させます。
サイトスピードを上げるための実証済みの方法には、以下のようなものがある：
- 大きな画像のリサイズと圧縮
- コンテンツ・デリバリー・ネットワーク（CDN）を利用する
- 画像と動画の遅延ロードを有効にする
- WordPress、テーマ、プラグインを常に最新の状態に保つ
- CSSファイルとJavaScriptファイルの最小化
- 重いバックグラウンド処理を減らす
あるサイトで画像を最適化し、CDNを追加したところ、モバイルのロード時間が半分になった。直帰率はすぐに下がり、ユーザーは各ページに長く滞在するようになった。
より詳細なヒントについては、WordPressのスピードとパフォーマンスに関する究極のガイドをご覧ください。
ウェブサイトのモバイルフレンドリー化に関するFAQ
デスクトップ専用のウェブサイトをモバイルフレンドリーにする方法について、この記事がお役に立てれば幸いです。WordPressに最適なSEOプラグインについては、こちらの記事もお勧めです。
Facebook、Twitter、YouTubeで、役立つヒントやチュートリアルをご覧ください。
