[ 解決済 ] モバイルユーザビリティについて

VWSとは フォーラム Katawara [ 解決済 ] モバイルユーザビリティについて

[ 解決済 ] モバイルユーザビリティについて

  • このトピックには7件の返信、3人の参加者があり、最後にうなこにより1年、 6ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #71794

    koitabasi
    参加者

    Katawaraで作成したページをGoogle Search Consoleで検査するとモバイルユーザビリティという項目で以下のエラーが起きています。
    ・コンテンツの幅が画面の幅を超えています
    ・クリック可能な要素同士が近すぎます
    ・テキストが小さくて読めません

    手持ちのスマホで確認しても該当箇所が見当たらず困惑しています。
    Googleの仕様や使っているプラグインの問題もあるかと思いますが、改善方法やKatawaraの設定で気を付けることなどありますでしょうか。

    よろしくお願いします。

    Attachments:
    You must be logged in to view attached files.
    #71801

    うなこ
    モデレーター

    Google Search Consoleのエクスペリエンスの「モバイル ユーザビリティ」をクリックすると、
    「ページがモバイルで利用できない理由」などが出てきますか?

    出てくるようでしたらそちらから、例えば「テキストが小さすぎて読めません」をクリックして該当のページを確認することはできますか。

    どこか、問題の箇所が投稿記事内にあったりもするかもしれません。(私の場合がそうでした)

    • この返信は1年、 6ヶ月前にうなこが編集しました。
    • この返信は1年、 6ヶ月前にうなこが編集しました。
    • この返信は1年、 6ヶ月前にうなこが編集しました。
    Attachments:
    You must be logged in to view attached files.
    #71825

    koitabasi
    参加者

    うなこ様

    ご回答ありがとうございます。

    ライブテストの「利用できない理由」をクリックすると添付画像のように該当箇所と思われるスクリーンショットが表示されました。
    スクリーンショットを見ると、Katawaraの左に表示されるはずのメニューと思われるものが写っています。
    自分のスマホで確認した画面と違い、CSSが崩れた状態で認識されているようです。

    また、今回確認するにあたって何度かライブテストを行ったのですが、なんの設定も変更していないにもかかわらず、モバイルユーザビリティが「利用できます」と表示されることもありました。

    これらのことから原因がわかりますでしょうか。。

    Attachments:
    You must be logged in to view attached files.
    #71829

    問題が発生しているURLなどは記載されていませんでしょうか?

    #71837

    うなこ
    モデレーター

    添付画像から該当のページを確認しました。

    「テキストが小さすぎて読めません」

    段落ブロックでタイポグラフィを「小」を選択している文字があるようです。
    スマホで見ると「小」のサイズは読みづらいので、小さすぎて読めませんと出るのではないかと思いました。
    「小」を外すか、もしくはスマホサイズでは16pxくらいの文字にcssで調整する必要があると思います。

    「クリック可能な要素同士が近すぎます」

    事業所名・メールアドレスの変更とかユーザーの登録のリンクがありますが、
    このリンク同士がスマホサイズでは、少し近いので、指の太い方ですと押し間違える可能性があります。
    もうすこし離してあげるとよさそうです

    • この返信は1年、 6ヶ月前にうなこが編集しました。
    #71848

    koitabasi
    参加者

    石川様

    お世話になっております。
    初心者感丸出しのサイトが恥ずかしくて、URLを記載していません。

    Katawaraの仕様上、仕方がなく起きてしまうSearch Consoleのエラーなどはありますでしょうか?

    #71849

    koitabasi
    参加者

    うなこ様

    ご確認ありがとうございます。

    CSSが崩れてしまっているのが良くないのかと考えていたのですが、実際に「文字が小さすぎる」「要素が近すぎる」箇所があったのですね。確認してみると確かにタイポグラフィ「小」を指定している箇所がありました。ありがとうございます。

    「要素が近すぎる」箇所について、現状は段落ブロックで作ったテキストにリンクを埋め込んでおり、このままの体裁で行間を調整したいと考えています。カスタムCSSを付与する以外に行間を広げる方法はありますでしょうか?

    なにとぞ、よろしくお願いいたします。

    #71860

    うなこ
    モデレーター

    「要素が近すぎる」箇所について、現状は段落ブロックで作ったテキストにリンクを埋め込んでおり、このままの体裁で行間を調整したいと考えています。カスタムCSSを付与する以外に行間を広げる方法はありますでしょうか?

    現在は一つの段落ブロックに改行して3つのリンクテキストを入れていますが、一つづつ段落ブロックに分けて入れて(3つの段落になる)ブロックの共通余白設定で余白をお好みでつけるのはいかがでしょうか。

    VK Blocks (Pro) 1.29.0 で設置した各ブロックから共通の余白設定ができるようになりました

    • この返信は1年、 6ヶ月前にうなこが編集しました。
    Attachments:
    You must be logged in to view attached files.
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。