【51日目】Googleに指摘されたモバイルユーザビリティの問題に対応-2
Posted: Last Update:
※こちらは日記です。モバイルユーザビリティの対処法は書き記事に詳しくまとめています。
関連記事
Google Search Consoleの「モバイル ユーザビリティ」で「テキストが小さすぎて読めません」という指摘を受けたけど、どう対処すればいいの？そんな時は、ビューポートを設定するだけで簡単に解決できます！ビューポートの設定方法をご紹介するとともに、ビューポートの設定で表示が崩れてしまった時の対処法もご紹介します！
サイトを作成し始めて51日。数日前にGoogle Search Consoleから「モバイル ユーザビリティで問題が検出された」というメールが届きました。指摘された問題を解消すべく、一昨日からスマホ画面でも見やすいページにしようと格闘しています。
Google Search Consoleからのメール
Google Search Consoleから「サイト kamenokoki.com で「モバイル ユーザビリティ」の問題が新たに検出されました」というメールが届いたのが4日前。次の4点を指摘されていました。
- テキストが小さすぎて読めません
- クリック可能な要素同士が近すぎます
- ビューポートが「デバイスの幅」に収まるよう設定されていません
- コンテンツの幅が画面の幅を超えています
原因はすぐに分かりました。画面の幅が狭い時にどのようにページを表示するかという「ビューポート」の設定。私のサイトでは、「<meta name="viewport" content="width=640">」と指定していました。一方、Googleの推奨は「<meta name="viewport" content="width=device-width, initial-scale=1">」。
推奨設定に変更すると、スマホ画面では表示崩れがひどい！それでも一昨日から2日間サイトのデザインを変えて、なんとかスマホ画面でも（辛うじて）見られるサイトに変更しました。ちなみに、作業前と作業後の違いがこちら
→
今日の作業
昨日までの作業で、ヘッダ部分はなんとか表示崩れを起こさずにスマホで表示できるようになったので、今日は「新着」の所を綺麗にしていきたいと思います。画面で言うと、この部分。
10日ほど前に必死に作った最新投稿の箱…。こんなにすぐに訂正する羽目に陥るとは思いませんでした…。
またまたデザインに悩む
サイト全体のデザインの時もそうですが、ここ数日のスマホ対応ページでも、デザインに悩みまくっています…。私、根本的に美的センスがなさ過ぎて、デザインとか超苦手です。他の方のサイトを見て、なんとなく「こんなもんだろう」と作っています。今回も、人のページを見て、アイディアを盗んで来よう！
スマホで見たときに、「画像全面押し」のデザインにしている方と、「画像はおまけ」のデザインにしている方がいました。私の場合には、「画像はおまけ」派かな？デザインを変えてみます。
ちょっと変えるだけなのに30分もかかってしまいました…。こんな感じにしました。いかがでしょうか？
HTMLやPHPは触らず、スタイルシートの設定を変えただけです。ご参考までに、スタイルシートの該当箇所はこんな感じ。
@media screen and (max-width:600px){#latestparent{grid-template-columns: repeat(1, 1fr);grid-auto-rows: max-content;}}
↓画面幅が広い時は横並びの箱を3つにする
@media screen and (min-width:600px){#latestparent{grid-template-columns: repeat(3, 1fr);grid-auto-rows: max-content;}}
@media screen and (max-width:600px){#latestchild{grid-template-rows: auto 1fr;grid-template-columns: 5.5em auto;grid-gap: 0 0.5em;}}
↓画面幅が広い時は縦一列
@media screen and (min-width:600px){#latestchild{grid-template-rows: auto auto 1fr;grid-template-columns: auto;}}
@media screen and (max-width:600px){#latestcimg{grid-row: 1;grid-column: 1;}}
@media screen and (max-width:600px){#latestctitle{grid-row: 1/3;grid-column: 2;}}
@media screen and (max-width:600px){#latestcdescription{display: none;}}
@media screen and (max-width:600px){#indexlinktime{grid-row: 2;grid-column: 1;justify-self: center;align-self: end;}}
↓画面幅が狭い時は左下に表示広い時は最下部右に表示
@media screen and (min-width:600px){#indexlinktime{justify-self: end;align-self: end;}}
スマホ対応完了！
デザイン的な問題は別として、これでGoogle Search Consoleに指摘されたスマホ対応は完了です！
ところで、参考にしようと色々なサイトを見て回ったときに、自分のサイトの根本的なデザインに問題があることに気づいてしまったのですが…。大幅にページ変更をした方がよさそうな気がする…。でも、今日は全体のデザインを変える心の余裕がない…。
いまいちなデザインはおいおい変えていくとして、本来の作業に戻りたいと思います…。
サイトのデザインはじっくり考えよう…。
サイト作成開始からの日数を自動計算するPHP
本来の作業。やりたいことをリスト化していました。次は、毎日毎日手打ちで入れている「何日目」という日付を自動で入れるPHPです！これを自動で処理できるようになったら、毎日の更新がとっても簡単になります。
ちなみに、こちらがやりたいことリストです。
- ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する ←完了
- ブログと記事の、それぞれのトップページを作る ←完了
- サイトのトップページを作り直す ←完了
- ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする ←放置中
- 日記の「何日目」を自動で入れられるようにする ←ここをやる
- ファビコンを作る ←完了
- 記事に目次を入れる ←完了
ちょっと検索してみたのですが、PHPの「function」という、関数を作れてしまう機能が便利に使えそう。呼び出すときは「<?php function名(); ?>」だけで処理をしてくれる優れもの。
っと、ここで今日はタイムアップです。明日は、日付を自動計算するPHPを作っていきたいと思います！
では、また明日。
おまけのロードマップ
おまけです。ロードマップで進み具合を見ると下記の通りです。「コンテンツに合わせてサイトを修正、スマホにも対応する」から一歩も進んでいません…。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 収益化に最適なサイトにアップグレードする
- コンテンツを充実させる（他の作業と同時進行）
- サイトを見てもらえるようにサーチエンジンに登録する
- sitemap.xmlとRSSを作成する
- コンテンツに合わせてサイトを修正、スマホにも対応する ←今ここ
- お問い合わせページを作る
- 検索ボックスを作る
- サイトマップページを作る
- 個人情報に関するページを作る
- SEOとセキュリティについて調べ、対応する
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
