モバイルページ検索優先対策

佐野

佐野 2015年5月22日

最近、Google検索がHTTPS対応のサイトを優先するという事が記憶に新しいのですが、
それに加え、スマホ対応サイトがさらに優先されるという事もわかりました。

そこで急遽ではありますが、単一HTMLでスマホ向けのページを作成する事にしました。
そのために、以下のサイトを参考にさせていただきました。

Googleから『モバイル ユーザビリティ上の問題が検出されました』を1時間で対策する方法

そして以下がGoogleのチェッカーです。

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

しかし、サイト全体をモバイル対応にしようと思えば、そうサクッとはいかないものです。
単純計算でモバイル対応の分で、工数も倍になるでしょうし。
要は、ひとまずはトップページだけでもチェッカーをあざむければ・・・もとい、
合格すればよいのです。

作成前に、早速チェッカーでチェックしてみたいと思います。

20150522125355

う~ん、やっぱりダメでしたね。
プレビュー画面を見ると、ページ右側が画面からはみ出ている事がわかります。

20150522125400

その他にも、リンク同士の距離や、文字の大きさも評価基準となるようです。

どのようなサイトを作ればよいのかと言うと、
要は縦スクロール1本、拡大操作なしでも文字を読めるよう、
情報を集約したページを作成すればいいのです。

今回は、弊社本家サイトのwww.taf-jp.comのモバイル対応を例にしていきます。

素材もモバイル向けに作り直そうと思うと、色々作業が混在するので、
ひとまずはページ作成に注力するために、画像は流用します。

画像のサイズですが、こちらもモバイルサイズに統一しなければ、
画面からはみ出し、チェックに引っかかります。
ですが、容量がそれほど大きい画像でもなければ、リサイズせずとも、
CSSでimg要素に対して、「width:100%;」を指定しておけば、親要素に合わせて画像が伸縮してくれます。
これで画像はみ出しの件は解決できるはずです。

SEO対策用のmetaタグ類は、元のページからソースコードを見て、コピペすればいいでしょう。

WS000002

www.taf-jp.comのトップには、スライドショーとブログの更新情報しかないので、
「サービスメニュー」ページの内容を抜粋する事にしました。
他ページのリンクも、上にボタンの見た目で配置しておくことにします。

とにかく、横スクロールをなくす事と、文字を大きめにする事を考えれば、合格はできるレベルです。

こちらが、実際に作成したページです。

一応、これでチェックが通るようにはなりました。やったね!

20150522125449

スマホ等の携帯端末でアクセスした際に、スマホ用ページにリダイレクトするよう、
JavaScriptを仕込んでありますが、それでもチェックは通ります。

実際に作ってみて思ったのですが、大きな画像を取り扱える事と、
きれいな文字で表示される事以外は、一昔前のガラケー用サイトを作っているような気分でしたね。

個人的に思うには、スマホ自体、ピンチで拡大縮小もでき、
画面スライドで自由にスクロール可能になり、
PCサイトを閲覧するにも充分な機能を有しているようにも思えるのに、
それをわざわざモバイル版を作る事自体、逆戻りのような気がしますけどね。
そりゃあ、親指1本で操作できたり、
画面に合わせて文字も改行してくれるに越したことはありませんが、
そこまでしなければ理解できない情報にも問題はあると思います。

ぶっちゃけると、個人的にはモバイル用に縦1列にまとめられたレイアウトよりも、
本文やリンクのリストがきっちりレイアウトで分けられていて、
縮小表示することでページ構造が一望でき、
文章も、区切りもなしにダラダラと書いていたりしていなければ、
本体の向きを縦横変更したり、ピンチで拡大縮小したりしてでも読みますけどね。
内容の濃い情報を読むのであれば、それなりの状況を作ってから読むようにはしますし、
ましてや、スマホ歩きのために気を使うような気にはなれません。

しかし、HTTPSは通信が暗号化されるため、まだ説得力はあるものの
(SSLに出費できる人が優先されるという事になるが)、
モバイル用サイトの方が優先されるというのは、どのような意図があるのかという疑問も残ります。
おそらくは、スマホの普及率を見ての考えかもしれませんが、
検索の優先度を、情報よりも構造で左右されるという点にも疑問は残ります。

あくまでも優先度が変わるだけであって、検索に引っかからないわけではないので、
それでもいいという人や、情報を探す人にとっては、過度に焦る必要はないとは思いますが、
逆に企業サイトにとっては、用途や目的で検索され、表示される事で広告効果にもなるため、
企業様にとっては、やはり死活問題となってくるでしょう。
とはいえ、モバイルサイトを本格的に作成しようとなると、単純に考えて工数も倍程度になるため、
そこは検索に引っかかりさえすればいいペライチのHTMLを用意するだけでよいか、
工数に含めて本格的に作業するかも考えておくとよいでしょう。