PageSpeed Insights で検証した【モバイル】のユーザーエクスペリエンス(UX)を100点にするための解決方法

ユーザー エクスペリエンス(操作性)を100点にする

Google Developers のツールである「PageSpeed Insights」を使えばモバイル端末の「ユーザー エクスペリエンス(操作性)」を検証できます。こちらは「速度」とはちがって、工夫していけば、だれにでも100点が獲得できる項目です。

当ブログでも先月くらいからゆっくりと改善していって、ようやく100点がとれました。

PageSpeed Insights【ユーザー エクスペリエンス】で100点

検証される項目は5つ。

  • viewport の設定
  • コンテンツのサイズを表示域に合わせる
  • タップ ターゲットのサイズを適切に調整する
  • プラグインを使用しない
  • 判読可能なフォント サイズの使用

以上の点に対して、推奨される解決策を参考に、対処していけばいいだけです。ほかの検証ツールを利用してみたい方はこちらのリンク先を参考にしてください。

モバイルSEOに役立つGoogle純正ツール×5 | 海外SEO情報ブログ

ユーザー エクスペリエンスで指摘される項目の解決方法

それでは、ひとつずつ簡単な説明と対処した方法を書いていきます。

viewport の設定

モバイル端末の「viewport」というのは「仮想ウインドウサイズ」のことです。「表示領域」というような意味になります。モバイル端末における Web サイト表示の最適化には不可欠な機能です。

パソコンであればブラウザが表示しているウインドウ内になりますが、スマートフォンやタブレットなどのモバイル端末になるとウインドウの考え方がないので、デバイスのスクリーンサイズがブラウザの表示するウインドウのサイズとして位置づけられます。

viewport の指定がないと、スマートフォンやタブレットでは、一般的なデスクトップ画面の幅で表示することになります。ようするに、パソコンのブラウザで表示されたサイトのデザインをそのまま縮小させて、モバイル端末の画面内に収めてしまうということです。画面内に小さくなって表示されるので、一覧性はあるものの、コンテンツが見にくくなりますね。

たとえば、モバイル端末で Yahoo! JAPAN 公式サイトを【PC表示】と【モバイル表示】の両方で見てみると、以下のようになります。

Yahoo!サイト【PC表示&モバイル表示】

左側が【PC表示】をそのまま iPhone 5(320px)に合わせて縮小した表示です。もはや何が書いてあるのかわからないくらいに文字が小さくなっています。右上の広告はサイズが合わず、外にはみ出してしまい、その分だけ右側に余白が生まれています。

右側が、【モバイル表示】に最適化されたデザインです。

モバイル端末の小さなスクリーンサイズに合わせて Web ページを作るときには、あらかじめ HTML の<head>内に meta 要素を使って記述しておけば、【モバイル表示】に最適化されたデザインを作ることができるようになります。

書くべきことはたったの1行。

これだけになります。意外とかんたんですね。プロパティの種類はいろいろあって、サイトに合わせて変更ができます。

たとえば Google の推奨するレスポンシブ Web デザインで作られたサイトであれば、

にしておきます。当ブログでもこの1行を<head>内に記述しました。

width=device-width

というのは、デバイスのスクリーン幅に合わせるという意味で、モバイル端末の種類が iPhone 5 / 6 Plus だったり、Nexus 5/6/7 だったり、その他の種類であったりしても、デバイス画面の横幅に自動で合わせるようにする、という指定です。 

initial-scale=1.0

というのは、最初に表示する倍率を1.0倍にすることを指定しています。

もっと詳しい話は以下のリンク先をご覧ください。

ビューポートを設定する – PageSpeed Insights — Google Developers

スマートフォン時代のWebサイト制作 第2回 スマートフォン特有の表示環境を理解する | デベロッパーセンター

実践!スマホサイトのviewport設定 – viewportとはなにか? | CodeGrid

HTML5/ページ全般/meta要素 表示領域を設定する – TAG index Webサイト

コンテンツのサイズを表示域に合わせる

viewport の設定が済んだら、つぎはスタイルシート(CSS)で、Web ページのコンテンツ表示を指定します。モバイル端末のスクリーンサイズに合わせて、Web サイトのデザインを修正していくことになります。

このとき、たとえば iPhone 5 に合わせて幅を絶対値 320px にしてしまうと、それ以外のスクリーンサイズである iPhone 6 Plus(414px)やNeuxs 5(360px) などには合わなくなってしまいます。

そこで、Web ページのコンテンツを特定の viewport に依存しないようにする指定が必要です。たとえば、

のようにして、相対的な幅の指定にしておきます。そうすることで、いまの例でいえば表示される画像があらゆるモバイル端末で横幅いっぱいに表示されるようになります。

コンテンツのサイズをビューポートに合わせる – PageSpeed Insights — Google Developers

また、CSS3 のメディアクエリ(media queries)を使う方法もあります。メディアクエリは、画面の解像度やウインドウ幅、デバイスの向きなどの条件指定に合わせて別々のスタイルシートを適用する技術です。

くわしくはレスポンシブ Web デザインの書籍を参考にしてください。

こちらのサイトには、メディアクエリの例がたくさん紹介されているので、デザインの参考になります。

Media Queries

タップ ターゲットのサイズを適切に調整する

タップターゲットというのは、Web ページにあるボタンやリンクやフォームなどを指しています。

モバイル端末は、基本的に、指の腹の部分を使ってタップすることになるで、重要なタップターゲットがあまりにも小さすぎると、何度やっても正確にタップできなかったり、まちがって他のボタンをタップしてしまったりしてしまいかねません。

その点で、パソコンのブラウザでクリックするときのように、マウスの利用を想定することはできません。

Google の推奨では

平均的な大人の指の腹のサイズは幅約 10 ミリで、Android UI のガイドラインで推奨されるタップ ターゲットの最小サイズは約 7 ミリ(モバイル ビューポートを適切に設定済みのサイトでは 48 CSS ピクセル)です。

とのこと。大事なことは以下の2点です。

  • 重要なタップターゲットは押しやすいように十分大きくする
  • 小さいタップターゲットの間には十分なスペースを確保する

タップ ターゲットのサイズを適切に調整する – PageSpeed Insights — Google Developers

当ブログで指摘されたのは、ウィジェットのタグクラウドでした。

パソコンのブラウザで見るには小さくてもマウスでクリックできますが、モバイル端末ではリンクとして表示されるタグの上下左右に余白が小さすぎて、うまく押すことができない状態になっていました。

変更点は以下の通りです。

まず「テーマのための関数(functions.php)」に以下のコードを追加して、タグクラウドで出力される文字サイズなどを変更しました。

続いてモバイル端末用のスタイルシート(CSS)を変更します。

display:block; で float:left; にしていろいろ変更することもできますが、この2行だけにするのが簡単です。文字の右側の余白と、行の高さを変更しています。

これで修正の指摘はなくなりました。

プラグインを使用しない

使いたいプラグインがあったとしても、そのプラグインを全てのモバイル端末がサポートしているとは限りません。またサポートしているとしても、プラグインを使うことにより、不具合やセキュリティ上の問題の原因になることがあります。さらに主要ブラウザ(IE、Chrome、Firefox)ではプラグインの制限をしています。

近年の技術開発のおかげで、プラグインを多用しなくても多くの手法が可能になっています。これから新しく Web サイトを作るのであれば代替の手段を選ぶことが賢明です。

プラグインを使用しない – PageSpeed Insights — Google Developers

判読可能なフォント サイズの使用

フォントサイズが小さすぎると何が書いてあるかわからなくなります。基本は 16px くらいにして、場所によって%で小さくしたり大きくしたりするのがいいと思います。

このあたりは自分の好きなデザインの Web サイトを参考にして、いろいろ試してみるのが一番ではないでしょうか。

読みやすいフォント サイズを使用する – PageSpeed Insights — Google Developers

さいごに

モバイル環境に合わせたサイト作成に関しては Google Developers で最近公開されたこちらのページも参考になります。

Webmaster’s Mobile Guide — Google Developers

Web Fundamentals — Google Developers

日本語訳がないページもありますが、そんなに難しい英単語があるわけではないので、読んでみることをおすすめします。イラストや動画もあるので、眺めているだけでも理解できるところがあるはずです。

さて、「ユーザー エクスペリエンス」の対応が完了したので、つぎは「速度」を解決したいところですね。

関連記事

Google の「モバイル フレンドリー テスト(Mobile-Friendly Test)」に合格して検索結果に「スマホ対応」ラベルを表示させよう

Google Chrome の検索結果に「スマホ対応」のラベルが付くようになった このところ Google はモバイル向けのツールを多く提供してきています。またモバイル端末で Google 検索をすると、タイトルの下に灰色の文字で小さく「ス…

新しく自作 WordPress テーマに変更しました

なんとか、完成にまでこぎつけました。 昼にテーマのファイルをアップロードして、変更してみたら、いろいろ表示に不具合が発生して、そのときに訪問された方にはご迷惑をお掛けしました。 ページによって新テーマと旧テーマの表示が違っていて「なんでやろ…

【マルチデバイス対応】 WordPress で作ったサイトをメディアクエリー(Media Query)とユーザーエージェント(UA)による判別でモバイル端末に最適化する方法

マルチデバイスに対応したサイトにする マルチデバイスに合わせた対応をする方法はいろいろありますが、今回は「レスポンシブWebデザイン」で使われる主要な技術のひとつである「メディアクエリー(Media Query)」と、「ユーザーエージェント…

自作 WordPress テーマのためのメモ

前回のところから、もうすこしおもしろいデザインにしたいと思って、いろんなサイトデザインを調べて見ることにしました。 とくに参考になったのが、 Themegraphy – WordPressテーマギャラリー Media Queri…

WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。 1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブッ…