友好

どういうわけか、私の山行記録のいくつかはGoogleの検索結果で上位に出ることが多いのですが、その検索結果の下に気になる文言が表示されていることに気付いたのはつい最近のことです。

ページがモバイルフレンドリーではありませんとはどういうことか？この青い字のところをクリックしてみると「モバイル フレンドリー テスト」なるテストが始まりましたが、その結果は……。

どうやら、スマートフォンなどでこのサイトを見ると、PCなどで見るのと同じプロポーションで全画面表示しようとするために全体に圧縮された状態になってしまい、スマホユーザーに対して「フレンドリーではない」ということのようです。こちらの「備忘録」はWordPressで運用しているので当然にレスポンシブ・デザインなのですが、juqcho.jpのメインサイトは昔ながらの（？）HTMLで作られているために、こういうことが起こります。

そこで試みに、このサイトをモバイル端末で見るユーザーというのはどれくらいいるものなのかを知るために、Google Analyticsで8月1カ月のアクセスログをチェックしてみると、次の通りアクセスのほぼ半分がモバイル端末またはタブレットによるものでした。

なるほど、これだけのユーザーがモバイル端末でアクセスしているなら、そのために「フレンドリー」になるような改造を加える価値はありそうです。ではどうするのかということですが、今は何でも検索すれば答が見つかる便利な時代。あれこれ調べてみると、ポイントになるのはHTML上の「viewport」の設定とメディアクエリによるCSSの条件分岐、そしてモバイル用CSSでの表示調整であることがわかりました。

というわけで、ここからは備忘も兼ねて。こまごまとした説明は省いて、まずモバイル端末でアクセスしたときに上書き適用されるCSSを以下のように作成しました。

もっとも、通常のCSSの内容と見比べないと意味がないのですが、簡単に説明すると、重要な変更点は次の点です。

• コンテンツの幅指定を、ピクセルによる絶対値での設定から画面幅に対する比率（「96%」など）に変更。
• 通常の画面で右端に表示させている目次パート「sidebar」を非表示にする（メインコンテンツの下に表示させてもよいかもしれない）。
• 各ページのタイトル「h1」の上にバックグラウンド表示させている大きめなサイトタイトルの画像を省略する。
• 画像や動画のサイズが大きい場合にモバイル端末の幅に収まるように縮小表示する。

ついで、このサイトにアクセスしたときに縮小表示しなくなるように「viewport」を設定し、その上でブラウザの画面幅が一定値を下回ったとき（主としてモバイル端末でのアクセス時を想定）にはこの「mobile.css」が適用されるようにHTMLに次のように書き加えました。

二つ目の赤線がメディアクエリでの条件分けで、ブラウザでの表示領域の幅が738ピクセル（このサイトのメインコンテンツ（サイドバー以外の部分）の幅728ピクセル＋左右に余白5ピクセル）を下回るときに「mobile.css」が適用されるように設定されています。これによって、モバイル端末からこのサイトにアクセスしたときにも「フレンドリー」な表示が確保される仕組みですが、念のためここでもう一度「モバイル フレンドリー テスト」を実行してみました。

よしよし。これでとりあえずGoogleから文句を言われることはなくなりそうですが、これはGoogleのアルゴリズムにとってフレンドリーなだけで、人間にとって真にフレンドリーなサイトにするには、折々にiPhoneでチェックしてバグ出しをしなければならないでしょう。

ちなみに、上記の通り「mobile.css」の適用の分岐ロジックはアクセスするデバイスの種類ではなくブラウザの表示領域の横幅なので、たとえPC等で見ていてもブラウザの幅を狭めれば表示がリアルタイムで切り替わり、CSSの機能を目の前で実感できるという面白い体験ができます。