ブログをよりモバイルフレンドリーにするためのヒント

公開: 2017-02-25

Googleは最近、モバイルフレンドリーなアルゴリズムの更新を使用して、すべてのブログがモバイルフレンドリーかどうかを確認し、そうでないブログにはペナルティを課すと発表しました。そのため、多くのブロガーは、自分のWebサイトをよりモバイルフレンドリーにする方法や、ブログがモバイルフレンドリーかどうかを知る方法さえ疑問に思っていました。そのため、ブログをモバイルフレンドリーにすることが非常に重要である理由と、実際にそれを行う方法について、最も重要な情報をまとめました。

現在、ブログの訪問者の大部分は、コンピューターではなくモバイルデバイスを使用しています。また、Googleは、モバイルデバイスでの表示に適したサイトのランキングを上げることを誓約しているため、ブログやWebサイトがモバイルデバイスに適していることを確認することがこれまで以上に重要になっています。

もちろん、それはグーグルが望んでいることだけではありません。ブログをモバイルフレンドリーにすることは、あなたとあなたの読者の最大の関心事でもあります。なぜなら、非常に多くの人々がモバイルデバイスを使用してインターネットをサーフィンするため、ブログを読むのがより便利になるからです。 Pew Internet Projectの調査によると、携帯電話の所有者の3分の1以上が、デスクトップやラップトップよりも携帯電話を使用してインターネットにアクセスしています。したがって、ブログをスマートフォンで簡単に表示したり、ブログの読者数を増やしたりしたい場合は、モバイルフレンドリーを検討する必要があります。そして、それは実際には人が考えるよりも簡単に達成できます。

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

Googleがこのモバイルフレンドリーなアルゴリズムを考案したとき、モバイルフレンドリーなテストツールを使用して、誰もがこの指標についてブログやウェブサイトをテストできるようにしました。「テストするURLを入力してください」ボックスにブログのURLを入力し、「テストを実行」をクリックするだけで、ツールはブログがモバイルフレンドリーかどうかを教えてくれます。

ウェブサイトがモバイルフレンドリーな場合は、何もする必要がないため、少しリラックスできます。ただし、このGoogleツールで、ブログがモバイルデバイスで最も読みにくいと判断された場合は、この部門でできるだけ早く改善を行う必要があります。

WordPress、Joomla！、Drupal、Blogger、Tumblr、Google Sites、Bitrixなどのコンテンツ管理ソフトウェア（CMS）を使用してブログを運営している場合、これらのソフトウェアシステムのほとんどは、カスタマイズが問題になることはありません。あなたのウェブサイトを自動的にモバイルフレンドリーにするツールを提供します。ただし、CMSソフトウェアを使用せずにWebサイトを作成するという昔ながらのルーツを使用した場合、またはCMSを使用したが、Webサイトがまだモバイル標準に達していない場合は、改善方法に関するヒントをいくつか紹介します。あなたのサイトのモバイルフレンドリー。

1. CMSを最新バージョンに更新し、モバイルテーマを使用します

CMSを使用している場合は、ソフトウェアを更新するか、ブログに使用しているテーマを変更するだけです。ほとんどのCMSは、サイトをモバイルフレンドリーにするためのすべてのツールをすでに提供していますが、CMSが最新バージョンに更新されていることを確認する必要があります。たとえば、Joomlaは、ソフトウェアの最新バージョンに更新された場合にのみ、モバイルサポートを提供します。ただし、他のソフトウェアでは、Webサイトのテーマを変更してモバイルフレンドリーにする必要がある場合があります。これは、一部の古いテーマはモバイルデバイスでは見栄えが悪く、どちらにも適していないためです。これを行うには、CMSの管理パネルに移動し、ダッシュボードの[テーマ]タブを見つけて、ブログのテーマを応答性が高くモバイルフレンドリーなものに変更します。たとえば、WordPressは何百もの異なるテーマを提供しており、それらの大部分は無料でレスポンシブです。残念ながら、モバイルサポートを提供しないCMSを使用している場合は、さらに改善が必要であり、コンテンツ管理ソフトウェアを切り替える方が賢明かもしれません。

2.小見出しを使用する

モバイルユーザーにとって便利なブログコンテンツの経験則は、記事を1つの長いテキストにするのではなく、小さな段落のテキストを吸収させることです。したがって、ブログ投稿のテキストは適切に構成されている必要があります。これにより、読者はテキストを簡単に方向付けることができます。これは、小見出しを使用して簡単に行うことができます。小見出しを使用すると、テキストは自動的に多くの小章に分割され、記事を読んでいるときに読者がその場所を失う可能性は低くなります。また、スマートフォンで何かを読んでいるときに場所を失うことは、多くのモバイルデバイスユーザーにとって非常に一般的な問題です。モバイルスクロールでは、長い単調なテキストの読み取りが困難になるため、見出しを使用して解決してください。

見出しは、見出しタグを使用して簡単に挿入できます。最大かつ最も重要な見出しのタグは<h1>です。このタグは、テキストのタイトルに最も一般的に使用されます。他の見出しには、<h1>から<h6>までのトップダウン階層があります。これはほとんど目立たない見出しですが、コンテンツを分割して読みやすくするのに役立ちます。

3.画像に適切なサイズを選択します

ブロガーは通常、ブログ投稿で使用する画像のサイズを通常のコンピューター画面サイズに応じて選択しますが、ブログ投稿が携帯電話のような小さな画面で表示される場合、画像は通常すべて終了します。同じサイズになります。これは、モバイルデバイスのユーザーが適切な比率で画像を表示できないことを意味します。したがって、画像を作成して、サイズが小さくなるだけでなく、通常は1500 x 2500ピクセル未満の画像が最適であるだけでなく、サイズも小さくします。500KB未満をお勧めします。モバイルデバイスに適した写真を用意することに加えて、画像のファイルサイズを縮小すると、読み込みに使用するデータが少なくなるため、ユーザーはページをより速く読み込むことができます。

写真をファイルサイズとサイズで小さくするには、Photoshopを使用する必要がないため、手元にあるフォトエディタを使用します。 JPEGminiまたはPixlrのいずれかを使用することをお勧めします。これらのフォトエディタを使用すると、画像の品質を損なうことなく画像のサイズを縮小できます。

4.レスポンシブデザインを使用する

ブログやウェブサイトのレスポンシブデザインは、ウェブサイトをブラウザウィンドウの幅に自動的に適応させるため、さまざまなプラットフォームやさまざまな画面サイズのデバイスからより便利に表示する機会を提供します。また、ブログの訪問者が読みやすいように、この適応中に通常はブログのデザインが変更されます。たとえば、画像が縮小され、列が垂直に整列し、メニューも変更されます。しかし、これらの変更がそれ自体では起こらない場合は、自分でそれを行うために使用できるツールがあります。

たとえば、 Foundation 3 、 Skeleton 、 Bootstrapなどです。これらのフレームワークはブログを自動的に調整するため、どのデバイスでも読みやすくなっています。これらを使用することは、すべての可能な組み合わせを自分でコーディングするよりもはるかに簡単です。もちろん、これは、ビューポートの幅（vw）、ビューポートの高さ（vh）、ビューポートの高さと幅の最小値（vmin）、ビューポートの高さと幅の最大値（vmax）などのCSS3の新しい相対的な長さの単位を使用して行うこともできます。ただし、コーディングには時間だけでなくスキルも必要です。経験豊富なプログラマーでない場合は、前者のオプションを使用することをお勧めします。

5.シンプルなデザインを使用する

大規模で複雑なデザインのWebサイトはモバイルデバイスで遅くなるため、モバイルユーザーはシンプルなサイトデザインを好みます。シンプルなデザインはまた、統計的にほとんどのモバイルユーザーが非常に短い注意期間を持っているため、派手なデザインで読者の注意をそらすのではなく、コンテンツに読者の注意を向け続けるのを容易にします。

つまり、サイトのレイアウトをシンプルでわかりやすくすることを意味します。サービスプロバイダーが提供するテーマを使用している場合は、それをより単純なテーマに変更するだけです。たとえば、WordPressは、モバイルデバイスを圧倒することなく、デスクトップでも見栄えのする、エレガントでシンプルなデザインを数多く提供しています。ただし、HTMLを使用してWebサイトを作成した場合は、簡単なテンプレートをダウンロードできます。これにより、サイトの見栄えが良くなり、モバイルフレンドリーにもなります。たとえば、 Envato Marketは、サイトから選択して使用できるさまざまなシンプルなデザインを提供しています。

6.標準フォントを使用する

興味深いフォントはブログをよりクリエイティブに見せることができますが、すべてのモバイルデバイスが豪華なデスクトップフォントをサポートしているわけではないため、これらのフォントはブログのモバイルリーダーにとっても煩わしいものになる可能性があります。そのため、コンテンツを表示するには、モバイルデバイスのユーザーは新しいフォントを携帯電話にダウンロードする必要があります。これは、多くの人にとって価値のない面倒な作業です。その上、すべてのフォントがプリインストールされていても、サイズが小さいため、よりクリエイティブなフォントがスマートフォンで読みにくい場合があります。

したがって、Times New Roman、Verdana、Comic Sans MS、WildWest、Bedrockなどの従来のフォントを選択してください。また、使用するフォントの読みやすさをチェックして、スマートフォンの小さな画面で表示したテキストが読めなくなることのないようにします。一般的な経験則では、Webサイト上のテキストは少なくとも14ピクセルである必要があります。これにより、画面が非常に小さいモバイルデバイスを使用している場合でも、テキストが読みやすい大きさになります。

7.ページあたりのコンテンツを最小限に抑える

コンピューター、タブレット、スマートフォンなどのデバイスにページが読み込まれると、デバイスはページのすべてのコンテンツをダウンロードします。通常、コンピューターを使用している場合は問題は発生しませんが、大量のデータがモバイルデバイスを圧倒する可能性があります。これを回避するには、各ページのコンテンツの量を最小限に抑える必要があります。これにより、ブログがすべてのモバイルデバイスで確実に機能するようになります。

ページのコンテンツを1ページあたり5MB未満に減らすことをお勧めします。どのブラウザでもページコンテンツのサイズを簡単に確認できます。オンラインで利用できる多くのWebページサイズチェッカーツールの1つを使用するだけです。 5 MBを超える場合は、ページのテキスト、画像、その他のコンポーネントのサイズと量を手動で減らすか、ブログの抜粋を使用して、訪問者がブログを簡単に表示できるようにします。

8.YouTubeビデオを使用する

ブログの記事に多くのビデオを投稿する傾向がある場合は、モバイルデバイスではコンピューターとは大きく異なるように見えることを覚えておく必要があります。さらに、一部のモバイルデバイスは特定のビデオ形式をサポートしていないため、ユーザーがサイトでビデオを再生できなくなる可能性を回避するには、埋め込みYouTubeを使用します。 YouTubeがすべての動画に提供する埋め込みコードはすでに応答性があります。つまり、ほとんどすべてのデバイスで動画を表示でき、動画のサイズや形式についてストレスを感じる必要はありません。

「購読」ボタンの下にある「共有」ボタンをクリックしてから「埋め込み」タブをクリックし、提供されたコードをサイトにコピーすることで、YouTubeビデオの埋め込みコードを取得できます。また、変換したり調整したりすることなく、完璧なサイズのビデオを投稿に含めることができます。

9.リンクをタップ可能なボタンとメニューに置き換えます

多くの場合、Webサイトのリンクは小さすぎて、モバイルユーザーが指で簡単かつ正確にタップすることはできません。また、ブログリーダーにとっては、コンテンツを正確にタップできない場合に表示したいので、非常に煩わしい場合があります。そのため、Webサイト上のすべてのリンクを、少なくとも44ピクセル×44ピクセルのサイズのボタンに置き換える必要があります。

WordPressなどのCMSを使用している場合は、プラグインを使用してこれらのボタンを作成できます。 CMSコントロールパネルに移動し、適切なプラグインを見つけてインストールし、指示に従って適切に使用します。ただし、Webサイトを自分でコーディングした場合は、これらの無料のリンクボタンジェネレーターの1つを使用できます。これにより、ボタンを自分でコーディングするときに使用する時間を節約できます。

10.テストを続ける

最後に、すべての改善を行い、ブログが可能な限りモバイルフレンドリーであると思われる場合は、インターネット上にあるGoogleテストツールまたはその他のモバイルフレンドリーテストツールを使用してブログを再度テストします。これですべてが正常になり、ブログがモバイルフレンドリーではないためにペナルティが発生しないことがツールによって保証されている場合は、優れたコンテンツを作成することで、リラックスしてWebサイトを成長させ続けることができます。ただし、念のため、複数の異なるデバイスからWebサイトをテストすることをお勧めします。

友人や家族に、携帯電話やタブレットからブログを見てもらいます。 AndroidとIOSデバイス、およびまったく異なるオペレーティングシステムを搭載している可能性のあるデバイスからサイトをテストします。そして、それらのデバイスでブログのすべてのメインページに目を通します。ブログのモバイルフレンドリーを実際にテストすることによってのみ、サイトが実際にすべてのガジェットから簡単に表示および読み取りできることを確認できます。

モバイルの使いやすさは、優れたサイトデザインを実現するだけでなく、ウェブサイトでのユーザーエクスペリエンスを向上させることでもあります。そのため、ブログをモバイルフレンドリーにすると、見やすく理解しやすいため、より多くの人がWebサイトに戻ってきます。また、携帯電話を主要なデバイスとしてWebサーフィンに使用する人の数は年々増加しているため、Webサイトがこれらのスマートフォンユーザーに親しみやすく、コンテンツを次のように表示することを確認することが最も重要です。便利で読みやすい方法でそれらを。