Webデザイン・設計に欠かせない「モバイルフレンドリー」とは?対応ポイントと基礎知識

フォーザウィン社員発のIT業界にまつわる豆知識。
「フォーザウィンアカデミー」

HOMEフォーザウィンアカデミー 〉Webデザイン・設計に欠かせない「モバイルフレンドリー」とは?対応ポイントと基礎知識

Webデザイン・設計に欠かせない「モバイルフレンドリー」とは?対応ポイントと基礎知識

shutterstock_722868550_0000

検索サイト大手であるGoogleは、Webサイトが「モバイルフレンドリー」であるかどうかを検索結果に反映するようになりました。
そのため「モバイルフレンドリー」ではないWebサイトは、Googleのモバイル検索において順位が低下する可能性が出ています。

今回は、Webデザイン・設計時における「モバイルフレンドリー」対応ポイントと必要な知識について紹介していきます。

もくじ

  1. 「モバイルフレンドリー」とは
  2. 「モバイルフレンドリー」の対応ポイント
  3. 「モバイルフレンドリー」かチェックする方法
  4. まとめ

 

◆「モバイルフレンドリー」とは

「モバイルフレンドリー」とは、モバイル(スマホ)用に表示を最適化し、ユーザーが快適にモバイルでWebサイトを閲覧できるようにすることです。
また、「モバイルフレンドリーにする」「モバイルフレンドリー化する」とも言われ、同様にスマホ対応することを意味します。

 

◆「モバイルフレンドリー」の対応ポイント

「モバイルフレンドリー」にするためには、Webサイトにレスポンシブデザインを導入し、あらゆるデバイス(PC・スマホ・タブレット等)からのアクセスでも同じURLで表示できるようにすることがGoogleで推奨されています。

「モバイルフレンドリー」の制作に必要な対応ポイントについて紹介します。

・読みやすいフォントサイズを選択する
デスクトップで閲覧できるWebサイトをスマートフォンで表示した際、文字サイズが小さく読めないことがあります。
Googleの推奨するフォントサイズは16ピクセルになります。

読みやすいフォントサイズ・行間を意識して、フォントを選択することがポイントになります。

・viewportを設定する
ユーザーはデスクトップPCやタブレット、スマートフォンなど、さまざまな端末を利用してWebサイトにアクセスします。
viewport(ビューポート)とは、端末の表示領域を意味しています。
viewportを設定していない場合、Webサイトは一般的なデスクトップでの表示を想定した画面領域に合わせてレンダリングされます。

スマホ対応する際は、viewportを設定をし、スマートフォンでの視認性を良くすることが不可欠になります。

・viewportを固定幅に設定しない
「viewportを設定する」の内容で触れたように、端末により画面の大きさと表示領域はそれぞれです。
そのため、viewportが固定されたWebサイトは、端末により大きすぎて情報内容を1画面で表示できなかったり、小さすぎて空白が出てしまうことがあります。

viewportは固定幅で設定せず、どのような端末にも対応できる設定にすることが必要になります。

・リンクやボタン同士の距離を調整する
タッチパネルを指で操作するスマートフォンの場合、リンクやボタン同士の距離が近すぎると正しくタップできないことがあります。
スマホユーザーのリピーターを獲得するためには、ユーザーの利便性を考え、誤った操作を防ぐ為にリンクやボタン同士の距離を調整することが重要になります。

・Flashの使用を避ける
多くのデスクトップ用ブラウザはFlashのコンテンツに対応していますが、モバイル用ブラウザの一部は未対応です。
そのため、スマホ対応のWebサイト制作時は、Flashは使用しないほうがいいでしょう。
これまでアニメーションに利用されることが多かったFlashですが、現在はHTML5が主流となっています。
HTML5を使用することで、Flashを使用しなくても複雑なアニメーションを表示できるようになりました。

FlashのアニメーションをHTML5に変換するツールを利用してみても良いでしょう。

・インタースティシャル広告を利用しない
インタースティシャル広告(Interstitial advertising)とは、画像表示時やページ遷移時に画面全体で表示されるWeb広告です。
パソコンと比べて画面サイズの小さいタブレットやスマートフォンの場合、ページコンテンツがインタースティシャル広告の後ろに隠れてしまい、ユーザーの利便性を著しく低下させるため、インタースティシャル広告の使用は避けた方が良いでしょう。

 

◆「モバイルフレンドリー」かチェックする方法

ユーザーとしても運営者としてもメリットの多い「モバイルフレンドリー」ですが、Webサイトが対応しているかどうかをチェックする必要があります。

「モバイルフレンドリー」のチェック方法について紹介します。

・モバイルフレンドリーテストでチェックする
Googleが無料で公開しているモバイルフレンドリーテストツールを用います。

Webサイトがスマホでの閲覧に適しているかどうかをチェックすることが出来ます。

・PageSpeed Insightsでチェックする
ページスピードなどのパフォーマンスをチェックするツールですが、「モバイルフレンドリー化」されているかどうかもチェックすることが出来ます。

・モバイルフレンドリー 一括実行ツール(Excel)
Tokyo Search Professionalsが各企業などのSEO担当者に向けて、モバイルフレンドリーを一括でチェックできるツールを公開してくれています。

このツールは、Windowsとエクセルが必須ですが非常に便利なツールになります。

 

◆まとめ

スマートフォンが広く普及した今、スマートフォンからWebサイトへのアクセスが増加しています。
Webサイトへのアクセス維持、増加のために、これからのSEO対策にはあらゆるデバイス向けにサイトを最適化することが大切となってきます。

ユーザーエクスペリエンスやページ速度を改善し、「モバイルフレンドリー」に対応しておきましょう。

最新記事

2018.11.08
2018.11.06
2018.10.31
2018.10.24
2018.10.17

カテゴリー

TOP