2014年12月1日月曜日

モバイル フレンドリー テストに合格しました

Googleモバイル検索の結果において、[スマホ対応]ラベルが付く可能性があるとのことです。

Google ウェブマスター向け公式ブログ: 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために

そのための指標になる、モバイル フレンドリー テストをGoogleが公開したので早速テストした結果。

Awesome! This page is mobile-friendly.

レスポンシブなデザインなので、たぶん大丈夫だろうとは思いましたが、測定中は緊張しましたw
ただし、Flashが使われているページの結果はこのとおり。

Not mobile-friendly.

ウェブマスター ツールのモバイル ユーザビリティでも違った指摘をしてくれます。

モバイル ユーザビリティ

たまたま、モバイルショップでiPhone 6を触る機会がありましたので、再度確認してみると、メインコンテンツの表示はたいへん良い感じ。我ながらすばらしいと感じたものの、サイドメニューが小さすぎて押せませんでした。これはいけない。モバイル ユーザビリティでも、そこのところを指摘されています。

あと、ささいなことですがサイドメニューのSVG画像が幅の狭いモバイル表示にすると上下に大きな余白が生じてしまっていました。デスクトップでは入念にチェックしましたが、やはり実物を触ってみないとわからないところもありますね。widthheightの指定のしかたがブラウザごとに多少異なるみたいです。Safariは普段チェックしていないというのもありました。

直すべきでしょうが、テンプレートは作っているときはいいですが、少し開発から離れると、どうなっているのかさっぱりで、思い出しつつ少し時間をとって取り組む必要がありそうです。

肝心の[スマホ対応]ラベルが付くという話は、Googleモバイル検索へいく方法がわからないので、UserAgentをスマホに変更して確認しましたが、まだどのサイトにも表示されていませんでした。

ラベルが付く付かないは別にして、やはりスマホの表示には対応しておきたいですね。


スマホは欲しいのですけど、買いたいと思う機種がないので未だガラケー。 そのためスマホに関しては全くの素人で他のレビューも読んでいませんが、分からないからこそ分かることもあるというもの。せっかく触ってきたので感想を書いてみたいと思います。

並んで展示されていたのは、iPhone 6 PlusiPhone 6iPhone 5s
今度は忘れないよう、しっかり名前を覚えてきました。

iPhone 6 Plusは一番画面が大きくて、Webページのユーザビリティも前に触ったiPadと同じくらい快適で、モバイルということを感じさせませんでした。
しかし、一目見た瞬間に、「これ電話?」「ポッケに入れて持ち運べるの?」と思いました。ばりばりネットをして、電話はあまり使わないユーザー向けでしょうか?正直、無理がある感じがしました。

iPhone 6は、ネットをするには画面がやや小さい、電話としてはやや大きいと言うのが感想です。ネットをして電話も利用するには、双方の妥協点ギリギリ一杯というところでしょうか。100点ではないですが、一番バランスが取れていると思いました。

iPhone 5sは電話として丁度良い。手持ちのガラケーは、かなり大きな画面なのですが、数年に一度、ネットする度に「二度と使わん!」と思います。あれは「やろうと思えばネットもできるかも」というだけで小さすぎて操作できません。カレンダーやメール、掲示板への書き込み用です。ページを制作するときも考慮しないか、対応するなら専用のページを用意するべきだと思います。
5sの画面はそれより一回り大きめなだけですが、操作性は飛躍的に良かったです。快適とは言えないまでも充分Web閲覧できますので、ページ制作には、ここまでは対応しておきたいです。