スマホ非対応サイトで確認したい表示と操作

スマートフォンでホームページを確認するときは、画面を縮めて眺めるだけでは不十分です。読む、移動する、入力するという操作を順に試します。

検索順位や売上への効果を決めつけず、読者が内容を理解し、必要な行動を完了できる状態かを確認します。

実際の画面幅で順に確認する

最初に、読者が利用する主なページを選びます。トップページ、サービス案内、会社情報、問い合わせなどを、実際の利用順に開きます。

端末、画面の向き、確認したページを記録します。異なる条件の表示を混ぜず、同じ手順で問題が起きるかを確かめます。

文字の大きさだけでなく、一行の長さ、行間、背景との見分けやすさを確認します。拡大しなければ読めない場所を記録します。

長い一文や段落は、画面幅が狭いほど追いにくくなります。結論と理由を分け、見出しと段落の間に適切な余白を設けます。

専門用語は初出で説明します。文字を大きくするだけでなく、初心者が意味を理解できる文章へ整えます。

大きな画像、表、埋め込み部品、長い英数字は、横方向のはみ出しにつながります。問題のある要素を一つずつ特定します。

表は項目を減らす、内容を分割するなど、比較の目的を保った方法を検討します。重要な情報を画像だけにせず、本文でも説明します。

外部サービスの部品は、自社の画面だけで設定を変えられない場合があります。提供元の公式資料と現在の利用条件を確認します。

リンクやボタンは、表示されることだけでなく押して確認します。近くの要素を誤って押さず、押した後のページが正しいかを見ます。

フォームでは、入力、エラー表示、確認、送信後の案内まで進めます。画面を拡大したときも、項目やボタンが隠れないかを確認します。

電話や地図など別の機能へ移るリンクも試します。利用できない連絡方法や古いリンクが残っていないかを確かめます。

画面が狭いと、読者は情報を上から順に見ます。装飾より先に、ページの目的と読者が判断するための内容を配置します。

パソコンでは横に並ぶ要素が、スマートフォンでは縦に並ぶことがあります。見出し、説明、画像、ボタンの順序が自然かを確認します。

同じ案内を何度も繰り返すと、本文が長くなります。必要な場所へリンクし、各ページの役割を分けます。

複数の問題を同時に直すと、どの変更を確認しているか分からなくなります。文字、横幅、操作など、課題の種類ごとに進めます。

一つの端末で直っても、別の画面幅で崩れる場合があります。修正前と同じページ、順序、操作で再確認します。

スマートフォン対応は、決まった見た目へ合わせることではありません。読者が情報を読み、目的の操作を完了できるかを基準にします。

表示改善の支援内容も確認できます。問題が起きるページはお問い合わせから共有できます。