アクセス解析は忍者ツールズの埋め込みとGoogle Search Consoleを使っています。
Google Search Consoleはサイトのダメ出しもしてくれます。
スマホでみても拡大すりゃいいんじゃないと思っていたのでサーチコンソールのモバイルユーザビリティが全て警告なのをしばらく放置していたのですがついにメスを入れる事にしました。
具体的には
ページがモバイルで利用できない理由
以下の問題があるページでは、良好なページ エクスペリエンスが実現されません。
- テキストが小さすぎて読めません
- クリック可能な要素同士が近すぎます
- ビューポートが設定されていません
- コンテンツの幅が画面の幅を超えています
問題１：テキストが小さすぎて読めません
現在推奨されてるフォントサイズはおおよそですが14px～18pxで自サイトでのサイズはだいたいが12pxなので確かに小さいのかと思ったのですが根本的な問題はそこじゃありません。
勿論フォントサイズを大きくすればこの警告は消せるのですがこんどはPCで大きくなりま過ぎます。
この警告が言いたいのはPC向けに作られている場合、スマホなどで表示するとコンテンツ幅で表示するので「サイトを開いた際に拡大しないと文字が読めない」これです。
問題２：クリック可能な要素同士が近すぎます。
これはほぼ上記に付随します。PC向けサイトを普通に作って入れる場合はそんなクリックし辛いとかはまずないです。
上記同様にこの警告が言いたいのは「サイトを開いた際に拡大しないとリンクエリアが小さくなりすぎて隣接するリンクが２つ以上あると押し間違いしちゃう」こんな感じです。
問題３：ビューポートが設定されていません
これは上記二つを解消するものです。
ビューポートを設定するとサイトに入った瞬間にスマホなどで適切な画面幅で表示されます。
タグを入れるとぱっと見は「最初からズームで表示されている状態」になるだけです。
ただこのビューポートを設定したこの状態は「この範囲がスマホ等の適切な見える範囲だよ」って意味です。
問題４：コンテンツの幅が画面の幅を超えています
これはビューポートを設定した時に「ウェブページが画面はみ出てる」って意味です。
問題１・２・３解決方法
これ自体は簡単です。
ビューポートタグを全てのページに入れるだけです。
ビューポートを設定すると画面スマホ等で見た時にその適切な範囲で表示されます。
するとフォントサイズが12pxでも十分に見える文字サイズですし、リンクも近すぎるっていう状態でもなくなります。
「ただしユーザーに拡大縮小させてはいけない」ので第四の問題となります。
問題４の解決方法
モバイルユーザビリティを凄く簡単に言えば「拡大縮小しないで見えるサイトにして」って事です。
さらに言えば幅400前後のサイトにしてって事です。
ビューポートタグを全てのページに入れて拡大縮小しないで見ようとすればコンテンツの幅がはみ出てますよね。それがダメなのです。
普通の幅固定のPCサイトであれば1000～2000pxとかの幅があると思いますがスマホでの場合はスマホのスタイルに書き換える。
具体的には
@media screen and (min-width:481px) {
.a{PC用すたいる}
}
@media screen and (max-width:480px) {
.b{スマホ用すたいる}
}
こんな感じです。
「@media screen and (max-width:480px) 」は最後に読み込ませます。
共通のスタイルを上書きする事が出来ます。
ただし空定義で設定を無効は出来ません。あくまでも上書きです。
もしもPCの時のみの設定がある場合は「@media screen and (min-width:481px) 」に居れればＯＫです。
スタイルシートは後に来るのが上書きです。
読み込みも後にする必要があります。
