LAF Design

2019年最新版｜スマホのホームページの最適化に必要な事

WEB

2019年11月2日

皆さんこんにちは

現在インターネットアクセスの半分以上がスマホなどのモバイルデバイスからの、アクセスになっています。

また今後ますますモバイルからのアクセス数が増える傾向があります。

パソコンで訪問したときは快適だったのに、スマホのホームページに訪れるとテキストのフォントサイズが小さ過ぎて閲覧しにくかったり、表示がエラーになっている機能があったりして使いづらさを感じるサイトもあります。

その為スマホに最適化したホームページの重要性が高まっています。

そこで今回は、スマホに最適化したホームページの作り方についてお伝えします。

1 SEO対策の為のスマホ用ホームページ
- 1.1 スマホのホームページにはレスポンシブWebデザインが必須
2 スマホのホームページはAMPで高速化
- 2.1 AMPを構成する要素
3 まとめ

SEO対策の為のスマホ用ホームページ

ブログ運営者にとってGoogleの検索アルゴリズムは、集客に大きな影響を与えます。

その為SEO対策として、スマホのホームページを最適化することが求められています。

ユーザビリティを向上したモバイルフレンドリーに最適化するには、モバイルブラウザでサポートされていないプラグインなどを使用しないことや、テキストのフォントサイズ、クリックできる要素同士の間隔などをスマホに最適化する必要があります。

そこで便利なツール「モバイルフレンドリーテスト」というものがあります。

モバイルフレンドリーテストではスマホでのページの使いやすさをテストします。

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

モバイルフレンドリーなウェブサイトは、オンラインでの存在感を高めるうえで欠かせないものです。

現在では、多くの国でスマートフォンのトラフィックがパソコンのトラフィックを上回っています。

お持ちのウェブサイトがまだモバイルフレンドリーでなければ、ぜひモバイルフレンドリーサイトにしましょう。

Search Console のモバイルフレンドリーテストツールでは、サイト上のページがモバイルフレンドリーかどうかをすぐにテストできます。

出典：Search Console ヘルプ https://support.google.com/webmasters/answer/6352293

運営しているサイトのスマホのホームページが最適化しているかチェックすることで、SEO対策にも強くなります。

スマホのホームページにはレスポンシブWebデザインが必須

様々な画面サイズまたはウェブブラウザに応じても、サイトの見やすいを保って最適化を目指したウェブデザインの手法です。

レスポンシブウェブデザインでは、HTMLが１つなのでWebサイトに載せる情報を修正や更新する時に作業の効率化、URLも同じなのでSNSなどにシェアされやすいメリットがあります。

ただ、HTMLが1つなのでパソコンと同じデータをスマホにも読み込ませるため、ホームページの表示までに時間がかかりユーザーが離脱するデメリットがありました。そこでレスポンシブウェブデザインと同時に注目されたのが「AMP」です。

スマホのホームページはAMPで高速化

スマホのホームページに最適化するためによく聞くAMP（Accelerated Mobile Pages）直訳すると、モバイル端末でホームページを高速で表示させるための仕組みのことです。

AMPを構成する要素

・AMP HTML AMP HTMLはスマホのホームページを高速で表示するために「制約が設けられた」HTMLです。既存のHTMLに制限することでWebデザインが簡素化でき、データ量を少なくできます。

多くのスマホのホームページが似たデザインになっているのは、AMP HTMLを使っているからです。・AMP JS AMP JS以外のJavaScriptを容認しないことで高速化を実現します。・Google AMP Cache AMPを適用するとされたスマホのホームページは、Google、Twitterにキャッシュとして保存、ホームページを開くときにキャッシュの利用してページの読み込みを高速化しています。

AMP対応することでホームページの表示速度を早くして、ユーザーの離脱を防ぐことができます。一般的にAMPを実装すると、モバイルページの表示速度が約4倍、データ量が約1/10になると言われています。

AMP対応かどうかは、スマホで検索したときにアドレスの頭の部分にカミナリマークがあるかどうかで区別することもできます。