名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

MARKETING

モバイルファーストでホームページを制作するためのポイント

2020
.03.19


スマホの登場を皮切りにモバイル端末の普及が進み、それに応じてホームページをモバイル端末で閲覧するユーザーが増えました。モバイル端末によるホームページへのアクセス数は、既にパソコンを超えており、これからも増えていくことが予想されます。
また、2018年にGoogleが、モバイルファーストを導入したこともあり、これからのホームページは、モバイル端末を意識して制作することが重要です。
そこで今回は、モバイルファーストでホームページを制作するためのポイントを説明していきます。

【目次】
1.ホームページ制作におけるモバイルファーストとは
2.モバイルファーストでホームページを制作するためのポイント
a.モバイル端末にも対応するレスポンシブデザイン
b.ホームページの表示速度を見直す
c.小さい画面でも読みやすいフォントサイズを使用する
d.タップエリアを大きくする
3.今回のまとめ

ホームページ制作におけるモバイルファーストとは

モバイルファーストとは、モバイル端末でホームページを閲覧する際に、ユーザーがストレスなく利用できるようにホームページを設計する考え方や手法です。
関連する用語として、モバイルファーストインデックスがあります。これは、Googleが2018年に導入したホームページを評価する際のアルゴリズムで、モバイル端末で閲覧する際のホームページを、パソコン用のホームページより優先的にインデックスし、検索順位の決定にもモバイル用のホームページをより重点的に見るということです。
Googleは、モバイル端末用のホームページを評価の基準とするモバイルファーストインデックスに移行したため、モバイルファーストを心がけたホームページ制作をしましょう。
ただし、「モバイル」という言葉が先行してしまい、「パソコン用のホームページは疎かでもいい」「モバイル端末用のホームページを先に制作すること」などといったモバイルファーストの意味を間違って解釈している方が多いように感じます。たしかに、モバイル用のホームページの重要性は日々高まりつつありますが、パソコン用のホームページ制作を疎かにしていいことではないことを注意してください。

モバイルファーストでホームページを制作するためのポイント

ここでは、モバイルファーストを意識したホームページを制作するためのポイントを4つ紹介します。ここで紹介するポイントを正しく理解し、ユーザーにとって利用しやすいホームページを制作しましょう。

モバイル端末にも対応するレスポンシブデザイン

レスポンシブデザインとは、パソコンやモバイル端末を問わず、どの端末でホームページを閲覧する際においても、各端末のディスプレイ幅に自動で切り替わるデザインのことです。
モバイル端末は、パソコンのディスプレイサイズや解像度が異なるため、パソコン用のホームページをモバイル端末で閲覧すると、デザイン崩れや、文字が小さくなるため、ユーザビリティが著しく低下します。
パソコン用とモバイル用のホームページを別々に制作するという選択肢もありますが、URLが分かれることにより被リンクが分散し、それに応じてGoogleからの評価も分散します。また、同じ内容のホームページがインターネット上に二つ存在することになり、ミラーリングというペナルティの対象になって、Googleからの評価が下がる可能性があるため、必ずレスポンシブデザインでホームページを制作しましょう。

ホームページの表示速度を見直す

冒頭でも述べたように、モバイル端末によるホームページへのアクセス数は、既にパソコンを超えています。モバイル端末の通信速度が向上したことに伴い、ホームページの表示速度も速くなりましたが、主にWi-fi環境で使用されているパソコンとは異なり、4G通信で使用するモバイル端末は、表示速度が遅い傾向にあります。
また、モバイル端末を利用しているユーザーは、パソコンを利用するユーザーと比べて、腰を落ち着かせてホームページを閲覧するわけではなく、外出先で手軽に情報を求めているユーザーが多い傾向にあります。
これを裏付けるように、Googleは、「モバイル端末でのホームページの表示に3秒以上かかってしまうと、50%以上のユーザーが閲覧前に離脱してしまう」ことを発表しています。また、ホームページの表示速度は、Googleが検索順位を決定する際の指標の一つとして見ています。
ユーザーとGoogleの評価を下げないためにも、ホームページの表示速度を改善しましょう。

小さい画面でも読みやすいフォントサイズを使用する

モバイルユーザーにとってホームページがストレスなく利用できることをモバイルフレンドリーと呼び、これを実現するための一つが、フォントサイズを大きくして読みやすくすることです。
モバイル端末のディスプレイは、パソコンのディスプレイと比べて横幅が狭いため、フォントサイズを大きくしてユーザーにとって読みやすくすることが重要です。フォントサイズにはpx(ピクセル)と呼ばれる単位があり、Googleは14〜16pxのフォントサイズ を推奨しているため、これらのフォントサイズを意識してホームページを制作しましょう。
逆に、フォントサイズを必要以上に大きくし過ぎてしまうと、一行に収まる文字数が少なくなって行数が増えて読みづらくなるため、バランスの取れたフォントサイズの設定を心がけましょう

タップエリアを大きくする

パソコンでホームページを閲覧する際の操作は、主にマウスを使用しますが、モバイル端末は指(主に親指)でスクロールやタップなどの操作を行います。
マウスは、カーソルを見ることで細かな操作ができますが、親指はマウスと比べて太く細かな操作ができないため、小さいリンクが近づきすぎていると、誤って意図しないページに移動してしまいます。
このような、ユーザーにとって優しくないホームページを制作してしまうと、ユーザーのストレスが溜まることでホームページへの信頼を失ってしまいます。また、モバイルフレンドリーでないと判断され、Googleからの評価が下がります。
ユーザーにとって操作しやすいホームページを制作するために、タップエリアを大きくしましょう。

今回のまとめ

スマホの登場を皮切りにモバイル端末の普及が進み、それに応じてホームページをモバイル端末で閲覧するユーザーが増えました。
2018年にGoogleが、モバイルファーストを本格的に加速させたこともあり、これからのホームページ制作は、モバイル端末を意識することが重要です。
モバイル端末を意識したホームページを制作するために、「レスポンシブデザイン」や「表示速度の改善」などの4つのポイントを紹介しました。
これらのポイントを正しく理解して、ユーザーとGoogleから高い評価を受けるホームページを制作しましょう。

PAGE TOP