スマホ最適化 【 1 】 モバイル ユーザビリティの問題って?

   2015/03/27   icon-clock-o読了時間:約8分9秒

ある日、モバイル ユーザビリティに問題があるよとGoogleさんに言われて
焦った私がモバイルフレンドリー合格を目指してレスポンシブWebデザインでサイトを構築するために
ビューポートやメディアクエリーを設定するお話です。

もう何言ってるのか分からないですよね。私もよく分かっていません。
コンピュータ業界とWeb業界の横文字率ってものすごいなと改めて思いました。

日本語で言い直すと
スマートフォンやタブレットでの使い勝手が悪いサイトだからなんとかしなさいとGoogleさんに言われて
焦った私がGoogleさんのスマホ適合基準を満たすために、どんな機器でサイトを見ても大丈夫なように
表示領域や見栄えを整えるお話です。

ちょっと分かりやすくなりましたでしょうか。
そんなこんなでまずはどうしてそんなことになったかの経緯から。
私の愚痴に付き合っている時間なんて無いよ!という方は次の記事からご覧ください。
 ⇒スマホ最適化 【 2 】 スマホ表示の確認と作業の流れ
 ⇒スマホ最適化 【 3 】 ビューポート(viewport)の設定
 ⇒スマホ最適化 【 4 】 メディアクエリー(Media Queries)の設定
 ⇒スマホ最適化 【 5 】 htmlファイルとCSSファイルを編集

 目次 

Googleさんの権力と一市民な私

ウェブマスターツールからエラーのお知らせ

モバイル ユーザビリティとは
   ∟レスポンシブWebデザインとは

Googleさんの権力と一市民な私

以前、SEO対策業者さんにだまされてGoogle帝国の法に触れ、
その怒りを解いてもらうまで平身低頭どころか五体投地で崇め奉る勢いで謝り続けたことがあります。

どういうことかというと、Googleさんが非推奨・あるいは禁止としている手段で
SEO対策業者が検索順位を上げようとしたので、その会社に依頼をしていた弊社サイトは
Googleさんの警告を受け、検索結果に表示される際の順位をものすごく下げられたんですね。
その会社は基本的に何もしてくれなかったので、自力で悪いところを直せるだけ直して
何度もGoogleさんに『 修正したので検査してください。許して! 』という申請をしてやっと許してもらえました。
 詳しくは Googleガイドライン違反と再審査 の記事などをご参照ください。

あれは悲しい出来事でした・・・(。・ × ・)
強大な領土と権力を誇るGoogle帝国の怒りを買うということは、この広大なネット世界の中で難民になるも同然。
あくまでもGoogleさんにひれ伏す善良な市民で居たい私は、もうあんな目に遭いたくない・・・!という一心で
二度とSEO対策業者に関わらないことと、自力でサイト運営を頑張ることを決意しています。

そんなわけで、Googleウェブマスターツールというブラウザツールを使って
Googleさんが下々の者(私)に出すお触れに注意を払うようにしていたのですが、
ふと気づくと知らないお触れが出ていました。

ウェブマスターツールからエラーのお知らせ

トップのお触れでは今日も異常なし。
ウェブマスターツール01
念のため細かいところも見ておこうかな。
おや?項目が増えてるような・・・?
ウェブマスターツール02

開いてみると・・・
ウェブマスターツール03
わああああぁああめちゃくちゃエラー出てる!!
どういうことなの。
唐突に増えた項目、気にしていなければ気づかないエラー。
この容赦のない感じこそがGoogleさんのご威光を顕しているかのようです。

Googleさんいわく、
『 サイトに影響を及ぼしているモバイル ユーザビリティの問題を修正してください。 』
画像のとおり、エラー内容は
・タップ要素同士が近すぎます
・ビューポートが設定されていません
・フォントサイズが小です
・コンテンツのサイズがビューポートに対応していません
以上の4点。

お上の言うことですから従いたい気持ちは山々ですが、いきなりそんな色々言われても。
あと横文字やめて日本語で言ってくださいよ・・・

モバイル ユーザビリティとは

携帯機器における使い勝手のこと。
スマホやタブレットが普及し、Webサイトを見る主な環境がパソコンだとは言いきれなくなったので、
現存のパソコン用サイトもスマホで見たときのことをちゃんと気にしてよね!ということのようです。
詳しくはGoogleさんのヘルプ【 モバイル ユーザビリティ 】をご覧ください。

これによれば私どものサイトは
・指で押すにはリンクが近すぎて押し間違えちゃう
・ユーザーが使っている機器に合わせて表示を変える設定がされてない
・スマホで見たら文字が小さすぎ
・横にスクロールしたり、縮小を使わないと表示できない項目がある
だからモバイル ユーザビリティ上の問題があるサイトだよ、ということのようです。

ちなみに問題があるから【 モバイル フレンドリー テスト 】にも不合格。
モバイルフレンドリーテスト
このテストに不合格ということは、スマホを使っているひとに優しくないサイトだから
検索結果のとこで『 スマホ対応 』のラベルも貼ってあげないし、もしかしたら検索順位が下がるかもよ、と書いてありました。
スマホ対応ラベル
えええええーーーー・・・・・まじですか。
モバイルにはフレンドリーでも私にはフレンドリーでない。
相変わらず容赦のないGoogleさんは恐ろしいお方。

改善策としては、サイトそのものをレスポンシブWebデザインにするか、スマホ用のサイトを新たに作るか。
しかしスマホ用の別サイトを作ってしまうと、訪問してくれるひとがスマホ用とパソコン用に分散してしまうので
検索エンジンからの評価的にあまり宜しくありません。
そうなるとやっぱりレスポンシブWebデザインかー・・・と
ちょっと遠い目になりながらレスポンシブWebデザインに改装することにしました。

最初からレスポンシブWebデザインで作ってあったサイトさんは問題なく合格できるんだろうなーと羨ましく思います。
サイトを作り始めたときは手探り状態だったのでそんな上級ワザなんて知る由も無かったんですよね・・・
これからも手探りですが改善に向けて頑張っていきます。

レスポンシブWebデザインとは

レスポンシブWebデザインとは、サイトを見ている機器や、その機器の画面サイズに関わらず
最適な状態で表示されるサイト構築方法のこと。
 
 Responsive Web Design JP 
 こちらは日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトさんです。
 改装のイメージ参考にご覧ください。

機器によって違うページに案内したり、違うファイルでそれぞれ対応したりといった方法ではなく、
一つのファイルでどの機器でも対応できるように設定するのがレスポンシブWebデザインです。
最初の設定さえなんとかすれば、ファイル数が少ないので後々の更新も楽になりますし、
複数のページにアクセスが分散してしまうことも避けられるので、現在のサイト構築で主流となりつつあるようです。

しかし既にあるサイトをビフォーアフターの如き大幅な改装をするような匠の技も時間もないので、
なんとか手間を掛けずに最小限の変更に留めたいところ。
そこで次回から私がどうにかこうにか最小限の改装をした経過を書いていこうと思います。
私と同じくスマホ対応する必要に迫られて
『 何をどうしたらいいの!? ヽ(´Д`;≡;´Д`)丿 』となっている方のお役に立てれば幸いです。



 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket