ウェブサイトをモバイルフレンドリーにする方法

2015年の夏、初めてモバイルよりもGoogleでの検索がデスクトップよりも多くなりました。’彼らを信じたほうがいい’それ以来上がっただけ!


もし、あんたが’この記事をもう一度読んで、チャンスはあなたです’モバイルフレンドリーなウェブサイトを持つことの重要性をすでに認識しており、モバイルユーザーに優れたエクスペリエンスを提供できるように努めています。その方法をお教えします!

あなたのウェブサイトをモバイルフレンドリーにするために、あなたは’する必要があります:

  1. モバイル対応のテーマまたはテンプレートを選択してください
  2. コンテンツを取り除きます
  3. 画像とCSSをできるだけ軽量にする
  4. フラッシュを避ける
  5. ボタンのサイズと配置を変更する
  6. リンクを空ける
  7. 大きくて読みやすいフォントを使用する
  8. ポップアップを排除する
  9. 定期的にテストする

しかし、最初に、モバイルフレンドリーとは実際にはどういう意味ですか?

について話すとき ‘モバイル対応’ ウェブサイト、私たちは’別の表示について話します ‘バージョン’ より良い体験を提供するために、モバイルからあなたのサイトを閲覧している訪問者にあなたのウェブサイトの.

これを実現するには、いくつかの方法があります。

  • レスポンシブデザイン –あなたのウェブサイト’sデザインは、画面サイズに適応するように調整されます。’デスクトップタブのサイズを変更するか、モバイルまたはタブレットからブラウジングします.
  • 動的な配信 –訪問者には、デバイスに応じて、サイトの異なる専用バージョンが表示されます’から見直す.
  • モバイルアプリ –場合によっては、モバイルオーディエンス用に完全に独立したアプリを用意することが最も理にかなっています(ただし、その場合は、ウェブサイトを利用しない人のために、ウェブサイトがスクラッチに対応していることを確認する必要があります)’それをダウンロードしたい).

レスポンシブデザインはあなたが目指すべき最低限のことであり、それは’s Googleが推奨するもの。そうは言っても、私たちはそれを考えています’いずれにしても、自動生成されたモバイルサイトをさらに編集する価値はあります。結局のところ、あなたは素晴らしいモバイルユーザーエクスペリエンスを目指しているのではなく、 ‘許容できる’ 1.

モバイルアプリがサイトで機能すると思われる場合は、それを支援できる開発者に連絡することをお勧めします.

あなたが楽しむかもしれないいくつかの他の記事はここにあります:

ウェブサイトをデザインする方法 – もし、あんたが’Webサイトの設計(または再設計!)を再開します。ステップバイステップガイドと考慮すべき重要なポイントについては、この記事を確認してください。.

ウェブサイトを構築する方法 –避難所’あなたのサイトはまだ始まっていますか?心配ありません。このガイドでは、プロセス全体について説明します!

SEOに最適な5つのウェブサイトビルダー –強力なSEO機能を備えたウェブサイトビルダーには、モバイルフレンドリーがテンプレートに組み込まれています。ここに最高の5つがあります.

1

モバイルレスポンシブテーマまたはテンプレートを選択してください

はい、これが最初のステップです。’大きな課題:モバイルレスポンシブテーマまたはテンプレートを選択する!
モバイルレスポンシブデザインが非常に重要であるため、’これは、ほとんどすべてのトップWebサイトビルダーが各テンプレートをカバーしてきたものです。例えば:

Squarespace –水密性の高いモバイル応答性を備えており、’サイトをゼロから再構築し、モバイルエクスペリエンスを最優先事項と見なす.

Wix –すべてのテンプレートはモバイル対応ですが、移動するときは常にモバイルビューで確認してください。 Wixサイトは非常にカスタマイズ可能であるため、大きな変更が行われない場合があります’tは非常にシームレスに翻訳します。’微調整する必要があります.

もし、あんたが’WordPressなどのCMSシステムを使用してサイトを再構築する場合は、サイトの構築に選択したテーマがモバイル対応であることを確認してください。’veはすでにサイトを構築しています。!

検索するだけ ‘レスポンシブテーマ’ ワードプレスで’ 独自のテーマライブラリ、またはThemeforestのようなサードパーティのサイト。レビューを必ず読んでください。可能であれば、モバイルからこのテーマを使用しているサイトを見て、自分の経験を評価してください。.

助けて!もし私が’mレスポンシブテーマについて、私はできる’それを切り替える?

Webサイトが古い、応答しないテーマまたはテンプレートを使用して構築されていて、’切り替えることができません。このコード行を各ページに追加してみてください’男性だけの:

つまり、ページはデバイスの幅に合わせて自動的に再フォーマットされ、横長のスタイルから縦長に切り替わります.

2

コンテンツを取り除きます

君は’素敵なレスポンシブテーマまたはテンプレートを選択したので、ここで’準備はいいですか?違う!

適切なテンプレートまたはテーマに切り替えることは大きなステップですが、’そのモバイルエクスペリエンスを完成させるために取るべきいくつかの1つ.

今’s Webサイトの自動化されたモバイルビューを見て、それを取り除きます。

オファーを蒸留する

あなたのページの主な目的を理解する’続けて、ドン’これをモバイルバージョンでもっと目立つようにするのをためらってください.

Trainlineの次の例をご覧ください。

Trainlineモバイルフレンドリーの例

このホームページは、電車の切符を検索するようユーザーに促すように設計されており、このフォームはモバイルバージョンで中心的な役割を果たします。デスクトップ版ではこれは強引すぎるように見えますが、モバイル版では機能します.

大量のテキストを避けます

あなたのウェブサイトのコピーは、多くの場合(ブログ記事を除いて、この記事のように!)短くて甘いはずですが、モバイルではこれがさらに重要になります。 Web用に作成するためのヒントを読み、仮想はさみを長いテキストの塊に持っていきます。.

フォームを短くする

長いフォームの入力は、多くの場合、面倒な作業ですが、携帯電話ではどうでしょうか。移動して?忘れてください!長いフォームは、あなたが言うことができるよりも早く読者を失うでしょう ‘これは必要項目です’. すべてのフォームを確認してください’モバイルでの再表示は、’絶対に必要.

トップチップ! 厄介な自動修正は、フォーム入力を時間の大きな無駄に変える確実な方法です。スイッチをオフにして、読者のストレスを解消してください。フォームのコードにアクセスできる場合は、オートコレクトフィールドが autocorrect = off. 3

画像とCSSをできるだけ軽量にする

あなたのウェブサイトをできるだけ軽くすることは常に良い考えです–しかし、それは正確にはどういう意味ですか?さて、あなたのウェブサイトの各要素は仮想を運びます ‘重量’ –かどうか’sファイルサイズのビデオまたは画像、またはWebサイトがクリックされるたびにロードする必要があるコード.

グーグルはウェブサイトの速度が遅いことを意味する重要なランキング要因であるという事実について非常に明確でした(別名. ‘ヘビー’)ウェブサイトは検索エンジンの結果ページ(SERP)での競争に負けます。.

モバイルの場合、これはさらに重要です。もし、あんたが’離れた場所にWebページをロードしようとしたことがありました。’理由がわかります.

それで、あなたはそれについて何ができますか?

画像を圧縮する

あなたが’サイトに画像を再アップロードする–モバイル版またはデスクトップ版–それ’kraken.ioなどの無料のオンラインツールを使用して画像を圧縮することが重要です。これにより、画質に妥協することなく、画像のファイルサイズを大幅に削減できます。.

サードパーティで動画をホストする

動画をサードパーティにアップロードしてサイトに埋め込むことにより、仮想 ‘重量’ これらのビデオのほとんどは、あなたのサイトではなく、選択したサイトに保持されます.

Wistiaはこれに人気のプラットフォームですが、YouTubeも機能します–あなた’あなたを確認したいだけです’自動再生をオフに切り替えて、無関係なビデオが’tあなたの後にプレイします。これを行うには、単に:

  • WordPressページに移動するか投稿します
  • 埋め込まれたコードを見つけて、 ‘テキスト’ タブ
  • src =と書かれている部分を見つけます”youtubeurlhere”
  • 追加 ?autoplay = 0&rel = 0youtubeurlhere
  • コードはsrc =を読み取るはずです。”youtubeurlhere?autoplay = 0&rel = 0″
  • ヒット ‘更新’ あなたも’行ってよかった

トップチップ! あなたがしない場合’YouTubeでコンテンツがダウンしすぎると思う(一部のビデオでは’t完全なページのコンテキストなしで多くの意味をなす)、可視性を ‘リストにない’. そうすれば、誰もあなたのウェブサイト以外のどこでもそれに出くわすことはありません。 4

フラッシュを避ける

Flashはアニメーションの作成によく使用されますが、通常は使用されません’tモバイルデバイスでサポートされているため、完全に回避することをお勧めします.

5

ボタンのサイズと配置を変更する

ほとんどすべてのWebサイトがボタンを使用して、他のセクションやフォームにリンクしています。しかし、 ‘良い’ ボタンはすぐに ‘悪い’ それなら携帯電話のボタン’sが間違った場所にある、またはサイズが間違っている.

スマートフォンの持ち方と使い方を考えてください。たぶんあなたです’親指を使って、ほぼすべてのこと、つまり、できることなら何でも’親指で手を伸ばすことは完全な痛みになります.

ここに’■モバイルサイトにCTAを配置する目的:

モバイルフレンドリーなウェブサイトの作成:CTAを追加する場所

だから今あなた’ボタンが適切な場所にある’適切なサイズにするための時間です。それは一般的にあなたを意味します’少し大きくする必要があります–それは’結局のところ、マウスよりも親指で正確にクリックする方がはるかに難しい.

6

リンクを空ける

マウスではなく親指で正確にクリックするのがいかに難しいかと言えば、次のポイントにうまくいきます。リンクを見てください。!

より具体的には、あなた’モバイルサイトのハイパーリンクを確認します。

  • アレン’近すぎる, 誤って間違ったものをクリックするのを防ぐため.
  • モバイル向けに最適化されたページにリンクする シームレスなユーザージャーニー.

7

大きくて読みやすいフォントを使用する

それ’sデスクトップでは少なくとも14pxのフォントサイズを使用することをお勧めしますが、モバイルバージョンでのフォントの外観を必ずテストしてください。’少し上げたい.

フォントの読みやすさも再確認してください。それ’デスクトップでより実験的なフォントを試すことの1つですが、この動きがモバイルで報われることはほとんどありません。つまり、あなた’フォントをそのままにしたい ‘ブランドで’ すべてのプラットフォームで可能な限り.

サイトのモバイルビューで作業する場合、’プレイする領域がはるかに狭い。デスクトップでは、テキストを改行や画像で区切ることができます。モバイルでは、異なるテキスト行を太字にするか大文字にして、それらが互いにマージするのを止めてください.

8

ポップアップを排除する

注意深く使用すると、ポップアップはサイトのデスクトップバージョンで非常にうまく機能します。あなたはそれらに気づいたかもしれません’私たちがWBEのかなりの数ページで使用しているものについて.

ただし、モバイルに関しては、ポップアップはできるだけ避けてください。処理する画面が小さいだけでなく、’tユーザーが画面を出ようとしたときなど、重要なタイミングでトリガーするようにポップアップを調整する.

9

定期的にテストする

モバイルサイトがモバイルフレンドリーかどうかを確認する最良の方法は、テストすることです。君は’次の3つの方法でこれを行います。

Googleを介してURLを実行する’sモバイルフレンドリーツール

Googleには無料のモバイルフレンドリーテストツールがあります。誰でもこのツールを使用して、特定のURLのモバイルフレンドリー度をテストできます。’sホームページ(以下を参照)、またはサイト内のページ.

Googleのモバイルフレンドリーテスト

デスクトップからさまざまなデバイスサイズを試す

サイトの応答性を確認する優れた方法は、開いているWebサイトのタブの形状をいじることです。タブの幅を狭くすると、サイトが ‘契約する’ よりモバイルフレンドリーなバージョンに変身します.

モバイルで何かの外観をすばやくテストするには、Webページを右クリックして、 ‘調べる’, 次に、上部のツールバーに表示される2つの画面のアイコンをクリックします。

デスクトップからモバイルバージョンを表示

ウェブサイトをモバイルフレンドリーにする方法:概要

ウェブサイトをモバイルフレンドリーにする方法を説明していただき、ありがとうございます。ここに’これらのステップをもう一度:

ウェブサイトをモバイルフレンドリーにする方法:

  1. モバイル対応のテーマまたはテンプレートを選択してください
  2. コンテンツを取り除きます
  3. 画像とCSSをできるだけ軽量にする
  4. フラッシュを避ける
  5. ボタンのサイズと配置を変更する
  6. リンクを空ける
  7. 大きくて読みやすいフォントを使用する
  8. ポップアップを排除する
  9. 定期的にテストする

ほとんどのサイトにとって良いニュースは、ハードワークの大部分はおそらくあなたのテーマやテンプレートによって行われるということです。そうは言っても、私たちはそれを考えています’モバイルユーザーが許容できるものではなく素晴らしい体験を確実に得られるように、上で概説した追加の微調整を行う価値があります。結局のところ、統計によると’ユーザーの大部分を占める可能性が高い!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map