My logbook : 屋久島方丈記 
Home > backnumber目次 > 記事  
  日誌編  ・ 偏見ご免のたわごと編  
  たわごと編: No.501
 
  2019.02.04 レスポンシブ化_PC版表示不良との指摘で  
 
  最近Google Search Consoleからのメールで、私の登録しているPC版サイトについて、モバイル・ユーザビリティの問題が検出されたので出来る限り解決した方がよいと指摘された。
問題点は以下の3件。
・1 クリック可能な要素同士が近すぎる
・2 テキストが小さすぎて読めない
・3 ビューポートが設定されていない

Google検索で私のサイトのページが出ると、モバイルフレンドリーでないと但し書き表示が出ているのは大分前から知っていたが、もともとPC版として作成しているものだからと気にしていなかった。今回指摘されて自分のスマホで見てみたら全体が縮まっていたり文字のサイズが変わったりしていて意図通りのページ表示になっておらず見るに堪えない。そこで対策する気になった。

まず、 ・3 については、ビューポート設定を追加しデバイスの画面サイズに合わせた表示が出来るようにするしかない。
・2 については、文字が指定通りに表示されるよう設定するが、ページと文字が正しく表示されても小さすぎて見にくい文字がある場合は、画面を拡大して見てもらうしかない。
・1 については、ハイパーリンクが列挙してあるからだが、ページと文字などが正しく表示されても狙いのリンクがタップしにくい場合は、画面を拡大してタップしてもらうしかない。

一応そういう方針で、スマホなどでサイズや文字の乱れが起こらないようにするやり方を説明しているネット記事を調べ、私のPC版をモバイルフレンドリーにするため最低限のレスポンシブWebデザインにする方法を探した。その結果以下の二つでよさそうだと思った。

まず、ルートに以下のCSS(例えばsmphstyle.css)を追加する。
body { -webkit-text-size-adjust: 100%; }
これは文字を指定通りの大きさのままにするもので、ブラウザーが勝手に調整できないように100%と設定するとのことである。
次いで全ページ・コードの<head>内に、以下を追加する。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.35, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="smphstyle.css">
これでデバイスの画面サイズで見やすいようにページが表示される。上記ビューポートの設定では初めはページ全幅pxのうちのデバイスの全幅分pxが表示される。その表示されるページは例えば0.35倍までに向け縮小操作していくとデバイス全幅にページ全幅が表示されるようになる。

私はそう理解して、その変更を以下のサイトに施して、私のスマホで確認したところ一応想定したとおりになった。
・ My logbook:屋久島生活の断片
・ My logbook:屋久島方丈記 (本サイト)
・ 屋久島釣り場案内

ところが、そのあとまた次のような指摘のメールが来た。
・4 コンテンツの幅が画面の幅を超えている
私の縮小操作して全幅表示になればよいという方針では、モバイル・ユーザビリティはまだ満たされないようである。そこでまた ・4 に関する記事をネットで調べたところ、ビューポート設定の initial-scale=1.0 を削除すると初めての表示が画面サイズに合わせてなされるとあった。そこでそう変更したところ、私のスマホでページを初めて表示するとデバイス全幅にページ全幅が表示されるようになった。

しかしそのあとも ・4 という指摘がなされること変わらない。私としてはbody { -webkit-text-size-adjust: 100%; }とビューポート設定があってページ全幅表示が可能で拡大縮小が出来れば、旧来のPC版はモバイルフレンドリーと認定してしかるべきな気がしている。

スマホ出現以前の2000年以来サイトを作成して来ていまに至っているのだから、基本的な作成方法は当時と変わらず、私のサイトは当然PC版である。いまでは合計1000ページ以上あり、喜寿の私には全面改定するのは大変でもうその気も起きない。そして表の幅は絶対値指定で多用、ハイパーリンクも多用している。それが悪さしているのかも知れないが、実用上は今回の変更で問題ないように思える。Googleの判定基準が厳しすぎるのかも知れない。サイトのページはコンテンツそれも文章の中身が最重要だと思うが、見てくれでばかり指摘されるとめげる。AIがいまだ長文理解に弱いせいか、外観で検索結果に優先的に反映される流れが進んでいるようだが、スマホで短文が世の中にはびこって、むかしテレビが世の中を白痴化すると言われたみたいなことをGoogleが言われる日が来る心配はないのかと気になる。

ところで、最近はモバイル・デバイスで閲覧する割合がPCより多くなって来ており、検索サービスでもレスポンシブWebデザインのページが優先されるようになったというはなしである。それ自体は理解出来る。しかし私のサイトがコンテンツ勝負と言いたいわけではないが、旧来のレスポンシブでないPC版、それもコンテンツ勝負のサイトの優先度が低くなってひとの目に触れにくくなるのは困った事態である。そうならないようにとの意図をもって今回問題点を指摘してくれたのならありがたく思わなければいけないが、私の対応能力は低く変更できたのは前述の内容にすぎない。そして私は実用上今回のPC版を最低限レスポンシブにしただけの変更で問題ないと思えるのだが、それでもモバイルフレンドリーでないらしいから検索に引っかかりやすくなったりあるいは閲覧数が増える効果があるかどうかは分からない。


(関連記事)
屋久島方丈記・偏見ご免のたわごと編:
  No.493  AIには苦手らしい_長い文章の読み書き  (2018.12.10)
屋久島生活の断片・HP作成雑感
  ("4.コンテンツのこと [2000(H12).12.01]" の項が関連記事)

. 
 
 
back
「My logbook : 屋久島方丈記」は、「 My logbook : 屋久島生活の断片」の
日誌編 と 偏見ご免のたわごと編 の 継続版です。
My logbook : 屋久島生活の断片」の ご案内
日誌編 と 偏見ご免のたわごと編 (2010.05.31までの記事)
屋久島釣り場案内
妻関連の「SpinCom」と「SpinCom Gallery」