モバイル フレンドリーとユーザビリティについて改めて考える

検索エンジン最大手であるGoogleが2015年4月21日に『モバイル フレンドリー アップデート』を開始して以来、ウェブサイトのモバイル対応はもはやSEOにとって必要不可欠になりました。さらに2016年の11月5日には、Googleの検索結果に大きく影響するアップデートである『モバイル ファースト インデックス』が導入予定であることが正式に発表されています。

今や誰もがスマートフォンを持ち歩き、インターネット検索においてもPCよりモバイル端末の利用者が多い状況です。

運営しているウェブサイトは本当にモバイル フレンドリーでしょうか？

『モバイル フレンドリー テスト』で合格するのはもちろんですが、さらに利用者のことを考えたモバイル フレンドリーとは何でしょうか？
この記事では、当サイトでも行っている施策も交えて、モバイル フレンドリーとユーザビリティにおけるTipsをいくつかご紹介していきます。

ページの表示速度の改善

ページの表示速度はモバイル フレンドリーにおける重要な要因の一つです。検索エンジンがページの表示速度を評価の基準にしている割合は微々たるものですが、それを差し引いても表示速度は速いほど良い結果を生み出します。

Amazonが行った調査によると、『ページ表示速度が0.1秒遅くなると、売り上げが1%低下する』という分析結果が報告されています。Googleは『サイトの起動時間が3秒以上だと、40%のユーザーがページ閲覧を断念してしまう』と伝えています。それほど表示速度は、速いほどユーザーの満足度が上がるのです。

これがモバイル端末となると、回線速度や性能の違いによって、PCで閲覧するよりもページの表示速度が遅くなりがちです。サイトの表示速度を少しでも上げるために、すぐに対応可能な方法をいくつか解説します。

画像の最適化

ウェブサイトに使用されるデータの中で最も容量が多いファイルが画像です。ウェブサイトで使用している画像は適切なサイズでしょうか？もしくは、それはCSSだけで再現可能なものなのかもしれません。綺麗だからとPNG形式のフォーマットばかり使ってはいないでしょうか？透過処理が必要な画像以外は全てJPEGを使用しましょう。

そして最後に、画像を可能な限り圧縮しましょう。現在では画像最適化ツールも便利なものが多数あります。ここでは手軽なウェブサイトサービスを一つ紹介します。

Optimizilla | オンラインイメージ最適化ツール

OptimizillaはJPEGとPNG画像を、画質を維持したまま可能な限り圧縮することができるサービスです。使い方も画像をアップロードしてダウンロードするだけです。

データ圧縮

圧縮可能なものは画像だけではありません。HTMLやCSS、JavaScriptファイルに関しても最適化は可能です。CSSやJavaScriptなら空白や改行、そしてファイルそのものの圧縮処理です。これにはgzip圧縮が効果的です。gzip圧縮を取り入れることで、サーバー間におけるデータ転送が少なく収まり、転送速度が向上し、結果的にページの表示速度も上昇します。

HTMLやCSS、JavaScriptの最適化には以下ツールがおすすめです。

Refresh-SF - Online JavaScript and CSS Compressor

こちらも使い方は、ファイルをアップロードして、ダウンロードするだけです。

gzip 圧縮についてはサーバーの設定により、対応手順が変わってきますので今回の記事では詳細な説明はしません。外部サイトとなりますが非常に分かりやすい記事がありますので、そちらをご参考ください。

gzip 圧縮によるサイトパフォーマンスを向上させる方法

gzip圧縮でCSSやJSなどの転送量を減らす方法

メニューの改善

モバイル対応サイトが増えてきた現在、よく使用されているのが『ハンバーガーメニュー』と呼ばれるメニューです。スマートフォンの小さな画面の中で、スペースを節約できるメニューですが、実はこれには大きな落とし穴があります。

それは、

1. ハンバーガーメニューが、メニューを開くボタンと認識されない可能性
2. 隠されているメニューが、開いてみるまで見えない
3. ユーザーはハンバーガーメニューを必ず一度タップしてから、更に遷移したいページのリンクをタップしなければいけない

などに分けられます。

現在においては多くのウェブサイトにハンバーガーメニューが実装されている経緯もあり、1の問題は薄まりましたが、2と3についてはウェブサイトの構成によって、ユーザビリティを大きく損なう原因になることがございます。

WEB改善事例においても、最初はハンバーガーメニューの導入を検討しましたが、サイトの内容を考えた結果、GoogleやMediumが採用している水平方向にスクロールするメニューを採用しました。

また、下方向へスクロールするとメニューが隠れ、上へスクロールすると表示されるようにし、コンテンツを読んでいる間は、その表示エリアが可能な限り広くなるように工夫しております。

これによって、少なくとも一部はメニューがファーストビューで見れるようになり、コンテンツを読んでいる間、つまり下へスクロールしている間はメニューが非表示になり閲覧の邪魔にならないというメリットを得ました。

ウェブサイトによって適切なメニューは違います。しかし可能な限り、重要なメニューは何もせずとも表示されるようにしたほうがユーザーの関心度は高まります。ファーストビューで見えるようにできたら、より効果的でしょう。

改行位置について

PCサイト向けに改行した文章が、モバイルでは思った位置で改行されないことは多々あります。できることならばbrタグは極力使用せず、正しい文章の切れ目をpタグで再現することが最も良いでしょう。しかし実際にはそうはいきません。

「どうしてもここはPCサイトでは改行したい…」

そういった場面は結構な頻度であります。そんな時はCSSで対応しましょう。

PCサイズ(961px以上)では改行、それ以下(960px以下)では改行なしにする

HTML

<p>そのころわたくしは、<span class="br-pc">モリーオ市</span>の博物局に勤めて居りました。</p>

CSS

.br-pc::before {
  content: '';
  white-space: normal;
}
@media (max-width: 961px) {
  .br-pc::before {
    content: '\A';
    white-space: pre;
  }
}

改行した箇所については必ずモバイルで確認しましょう。もしかしたらモバイルでは変な箇所で改行されてしまい、逆に読みづらくなっている可能性があるためです。PCサイトではよかれと思って行った改行も、横幅の狭いモバイルではユーザビリティを損なう恐れがありますので注意して対応を行う必要がございます。

まとめ

モバイルでの検索利用者が多い今、画像を使用し過ぎると当然ウェブサイトの表示速度は重くなり、ユーザーはすぐに別のサイトへ行ってしまうでしょう。だからといって可能な限り表示する項目を無くしてしまうと、今度はユーザーが何をすればいいのか分からなくなってしまいます。

きれいだから、自分が見やすいから、使いやすいからといった理由でサイトデザインを決めてはいけません。自分では使いやすくても、何も知らないユーザーがサイトへアクセスしたら、どういったアクションをするのか常に考えることが、とても大切です。

今回はすぐにできる対策に的を絞って記事にしましたが、機会があればより掘り下げた内容の記事を作成したいと思います。この記事がお役に立てば幸いです。