kamenokoki.com

【49日目】Googleにスマホ対応できていないと怒られた!

Posted:  Last Update:

※こちらは日記です。モバイルユーザビリティの対処法は書き記事に詳しくまとめています。

サイトを作成し始めて49日。昨日までの3日間は記事に目次を入れることに専念して成功!今日はサイトを作成し始めてからの日数を自動的に計算するPHPを作ろうと思っていたのですが…。

ロードマップ

ちなみに、ロードマップで進み具合を見ると下記の通りです。Wordpressなし、HTMLとPHPを駆使してサイトを自作しようと奮闘しています。

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
  • 収益化に最適なサイトにアップグレードする
    • コンテンツを充実させる(他の作業と同時進行)
    • サイトを見てもらえるようにサーチエンジンに登録する
    • sitemap.xmlとRSSを作成する
    • コンテンツに合わせてサイトを修正、スマホにも対応する ←今ここ
    • お問い合わせページを作る
    • 検索ボックスを作る
    • サイトマップページを作る
    • 個人情報に関するページを作る
    • SEOとセキュリティについて調べ、対応する
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

Google Search Consoleからメールが届いた

実は昨日Google Search Consoleからメールが届いていたんですよ。昨日は目次を作り終えたかったので、「ないない」したのですが…。やっぱり無視できない!

Google Search Consoleから「サイト kamenokoki.com で「モバイル ユーザビリティ」の問題が新たに検出されました」という掲題でメールが届いて、次の4点を指摘されていました。

  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます
  • ビューポートが「デバイスの幅」に収まるよう設定されていません
  • コンテンツの幅が画面の幅を超えています

実は前にも問題を指摘されていて、10月1日に対応をしました。その後もスマホ対応できるように色々と修正したのに!

しかも、前回よりもエラー件数が増えてる…。下2つは前回なかった…。

原因を探ってみた

原因を突き止めて対応しよう!…と言っても、原因の予測はついています。10月1日に設定した「ビューポート」でしょう。10月1日に慌てて下記のような設定にした「ビューポート」。

<meta name="viewport" content="width=640">

画面幅が640px以下になると、画面幅640pxだと想定して画面を構成してくれるんです。おそらく、画面幅が400pxの時も画面幅640pxだと想定して表示しているのだと思います。文字の大きさは400/640、つまり本来の大きさの2/3で表示されている?必然的に要素間の幅も様くなって、クリック可能な要素同士が近づいちゃうんだろうな。

ちなみに、Googleのヘルプページで推奨されている「ビューポート」の設定がこちら。

<meta name="viewport" content="width=device-width, initial-scale=1">

そして、今の私のサイトにこの推奨設定を適用すると、スマホではひどい表示崩れがおきます。

こちらが、今現在のスマホページ。「<meta name="viewport" content="width=640">」を使っています。
2020.10.18 表示崩れを蹴り槍回避している今のページ

そして、こちらがgoogle推奨設定「<meta name="viewport" content="width=device-width, initial-scale=1">」を適用したページ。すっごい、びとい!
2020.10.18 ビューポート設定の表示崩れ

Googleの推奨設定を使う-ヘッダデザイン変更1

今現在の「<meta name="viewport" content="width=640">」の設定は良くないらしいので、Google推奨の設定に変えるしかなさそうです…。表示崩れはサイトのデザインを変えるしかなさそう…。

さっそく作業に取り掛かりたいのですが、失敗するといけないので、テスト環境を作りたいと思います。ちなみにテスト環境の作り方はローカルで内部転送テストをしたいときのApacheの設定の「サイトの専用ホストを準備しよう」に詳しく書いてあります。

テスト環境でGoogle推奨の「<meta name="viewport" content="width=device-width, initial-scale=1">」に切り替えて、サイトを色々と見てみました。一番表示が崩れているのがヘッダなので、ヘッダのデザインを変えてみます。

これまで「なんでみんなヘッダまで中央寄せなんだろう」と思っていましたが、その理由がよくわかりました。たぶん、一番レスポンシブデザインにしやすいんでしょうね。ヘッダ、中央に寄せてみたいと思います。

変更したページがこちら。まぁまぁ、いいのではないでしょうか。
2020.10.18 ヘッダをスマホ用に変更した

スタイルシートはこんな感じで設定しました。「title」が「kamenokoki.com」の設定。「ul」は「ホーム、記事、日記」の部分の装飾です。

header{ text-align: center; margin: 1em 0 1em 0; }
#title { color:#000000; font-size:1.5em; font-family:"arial black"; margin: 0em 0 1em 0em; white-space: nowrap; }
#title img{ width:1em; height:1em; vertical-align: middle; }
ul.headerlinklist{ margin: 0 -20px 0 -20px; box-shadow: 0 1px 3px #008000; padding:0; }
ul.headerlinklist li{ display: inline-block; margin: 0; padding: 0.3em 1em 0.3em 1em; font-weight: bold; }

Googleの推奨設定を使う-ヘッダデザイン変更2?

ヘッダを変更して、スマホには対応できたのですが、パソコンで表示すると、とっっっても白くなりました…。これをどう対処しよう…。

今の画面はこんな感じです。
2020.10.18 ヘッダをスマホ対応したらPC画面は白くなってしまった…

なんか、上に帯でも入れてみようかな…?なんとかなるかな?

なんとかならなかった…。ダサすぎる…。
2020.10.18 ヘッダを変えたらとってもダサい

Googleの推奨設定を使う-ヘッダデザイン変更3

上の緑色の帯を失くして、もとに戻しました。どうしようかな。とりあえず、それっぽくするために、リンクを英語にしてみました。ダサさが倍増したよ!どうすればいいの!!!超迷子です!!!
2020.10.18 なんとなくリンクを英語にしておいた

いろいろなブログを見て回って、デザインについて考えました。PC用とスマホ用でデザインを変えようと思います。最初からそうすればよかった…。

大きい画面は元の横広のヘッダに戻しました。でも、これはこれでダサい気がする…。

よく分からなくなっちゃいました…。どうしよう。

今日はここまで!

まだスマホ対応できていないのですが、デザインがよく分からなくなってしまったので、一日寝かせたいと思います。明日はいい案がきっと思い浮かぶはず!

なかなか前に進めませんが。また明日…。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告