パソコンではきれいなのに、スマホでは読みにくくなっていませんか？

パソコンで整えた記事を、スマートフォンで開いたことはありますか？

文章が細かく折り返されたり、料金表の右側が見えなかったり。

パソコンでは気にならなかった読みにくさに、スマホで気づくことがあります。

今回は、WordPressの記事やお知らせを公開する前に確認したい、4つのポイントをご紹介します。

先に結論

スマホでは、見た目と一緒に読む順番も確認します。

・知りたい情報が見つけやすいか

・手動で入れた改行が邪魔をしていないか

・表や横並びの内容を最後まで読めるか

・ボタンの言葉が短く、行き先が分かるか

まずは、最近のお知らせを1つだけ開いてみてください。

1　知りたい情報が、下の方に埋もれていないか

スマホでは、一度に見える範囲が限られます。

長いあいさつや説明が続くと、営業時間や予約方法を探すのに何度もスクロールすることがあります。

たとえば、臨時休業のお知らせなら、最初に「いつ休むのか」を伝えます。

理由や補足は、そのあとに続けても大丈夫です。

予約の案内なら、対象のサービス、受付期間、予約方法など。

そのページを読む人が先に知りたいことを、冒頭に短くまとめてみてください。

すべてを最初の画面に詰め込む必要はありません。

見出しを順に追うだけで、必要な情報の場所へたどり着けるかも確認しましょう。

2　パソコンに合わせた改行が、残っていないか

パソコンできれいに見せようとして、文の途中に改行を入れていませんか？

画面の端で自動的に折り返された位置と、手動で入れた改行が重なると、極端に短い行が混ざり、文章が途切れ途切れに見えることがあります。

まずは、見た目をそろえるためだけの改行を減らしてみてください。

話題が変わるところでは段落を分け、1つの段落が長ければ文章を整理します。

住所や日時など、区切った方が分かりやすい改行まで消す必要はありません。

パソコンとスマホで、まったく同じ位置で行をそろえようとせず、それぞれの画面で自然に読めるかを見てみましょう。

同じ文章でも、手動の改行を減らすと、スマホの幅に合わせて読みやすく折り返せます。説明用にHTMLで制作した架空の表示例です。

3　表や横並びの内容を、最後まで読めるか

料金表や、サービスを横に並べた紹介欄も確認してみてください。

・表の右端にある料金や条件まで読めるか

・横並びの文章が、細い列に押し込まれていないか

・スマホで縦1列に並び替わったときも、説明の順番が自然か

内容を無理に収めるために文字を小さくする前に、並べ方を見直します。

短いサービス紹介なら、1つずつ縦に並べる方法があります。

表は、項目を比べるために必要なこともあるので、すべて箇条書きに変えなくても大丈夫です。

横にスクロールして読む表なら、最後の列まで動かせるか、表の続きがあると分かるかも確認してください。

表示の直し方は、テーマや使っているブロックによって変わります。設定が分からないときは、無理に触らず、どこが読めないかを控えておきましょう。相談するときにも伝えやすくなります。

4　ボタンに、説明を詰め込みすぎていないか

「サービスの内容と料金について詳しく知りたい方はこちらからご確認ください」

こんな長い言葉をボタンに入れると、スマホでは何行にも分かれたり、文字が窮屈になったりすることがあります。

説明はボタンの前に置き、ボタンには「サービス内容と料金を見る」のように、押すと何が見られるかを短く書いてみてください。

ただし、短くするために全部「こちら」にすると、行き先が分かりにくくなります。

予約のページなら「予約へ進む」、問い合わせなら「問い合わせる」など、実際の行き先に合わせます。

文字が欠けていないかに加えて、押した先が案内どおりのページかも確認しましょう。

説明はボタンの前へ。ボタンには、押すと何が見られるかを短く書いた例です。説明用にHTMLで制作した架空の表示例です。

最後は、実際のスマホでも確認する

WordPressの編集画面にスマホ表示の切り替えがあれば、まずそこで全体を確認します。

そのあと、可能なら実際のスマホでもページを開き、上から下まで読んでみてください。

未公開の記事をスマホで確認するときは、スマホのブラウザでも自分のアカウントでログインし、プレビューを開きます。確認のためだけに公開する必要はありません。

見た目だけでなく、「営業時間を探す」「料金を確認する」「予約ページを開く」など、お客さまの目的を1つ決めると、迷う場所に気づきやすくなります。

リンク先を見るときも、予約や問い合わせの送信まで行う必要はありません。

まとめ

スマホで確認したいのは、次の4つです。

・必要な情報にたどり着きやすいか

・不要な改行で文章が途切れていないか

・表や横並びの内容を最後まで読めるか

・ボタンの言葉と行き先が合っているか

まずは、最近のお知らせを1つだけ。

気になる場所を1か所直したら、パソコンとスマホの両方でもう一度確認してみてください。

もし「表の右側が見えない」「スマホだけ文章の並びが崩れる」など、自分では直しにくい場合は、スマホで表示した画面のスクリーンショットを添えて、ココナラ内のメッセージからご相談ください🌿