スマホで見やすいサイトにするために直したこと（白背景・横スクロールをなくす）

きっかけ

私はサイトをパソコンで作っているため、確認もパソコンの画面ですませがちでした。あるとき、自分のスマートフォンで全サイトを順に開いてみたところ、パソコンでは気にならなかった読みにくさに気づきました。

特に気になったのは、背景の色と、画面が横にずれてしまう点です。そこで、すべてのサイトを白い背景にそろえ、スマートフォンで横にずれないように直しました。

用語の説明

• 横スクロール：ページの幅が画面より広く、指で横に動かせてしまう状態
• viewport（ビューポート）：スマートフォンでページを表示するときの、画面の幅の設定
• CSS：ページの見た目（色・大きさ・並び方など）を決めるための書き方
• レスポンシブ：画面の大きさに合わせて、レイアウトが変わるように作ること

背景を白にそろえた理由

以前は、白い背景のサイトと、そうでないサイトが混ざっていました。スマートフォンで順に見ていくと、サイトごとに見た目がばらばらで、まとまりがないと感じました。白以外の背景では、文章が長い記事ほど読み続けるのがつらく感じました。

白い背景に、濃い灰色や黒に近い文字という組み合わせにそろえると、長い文章も読みやすくなりました。色を使うのは、見出しやリンクなど、目立たせたい部分だけにしています。

横スクロールのよくある原因

横にずれる原因は、ページの中のどこか1か所が、画面の幅より広くなっていることです。一般によくある原因は次のとおりです。

• viewport の meta タグが入っていない
• 画像の幅が、画面の幅より大きいまま表示されている
• 長い URL や英数字が折り返されず、はみ出している
• コードのブロックの長い行が、ページ全体を押し広げている
• 横に並べた要素が、スマートフォンでも横に並んだままになっている

確認して入れた書き方

次のような書き方を、全サイトの共通の部分に入れました。コードのブロックは、ページ全体ではなく、ブロックの中だけで横に動かせるようにしています。

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

img { max-width: 100%; height: auto; }
body { overflow-wrap: anywhere; }
pre { overflow-x: auto; }

確認のチェックリスト

直した後は、実際のスマートフォンで次の点を確認しました。

• どのページでも、指で横に動かしたときに画面がずれないか
• 文字が小さすぎず、拡大しなくても読めるか
• ボタンやリンクが、指で押しやすい大きさになっているか
• 表の代わりに箇条書きを使うなど、横に長い要素がないか
• ゲームやツールの画面が、画面の幅に収まっているか

よくあるつまずき

• パソコンのブラウザの幅を狭くしただけで確認を終え、実際のスマートフォンで見ていない
• トップページだけを確認して、記事ページの長い URL やコードを見落とす
• 1つのサイトだけ直し、ほかのサイトに同じ直しを入れ忘れる

私の場合

私のサイトはすべて Vite と React で作っていて、見た目の基本的な部分はよく似ています。そのため、1つのサイトで直した書き方を、ほかのサイトにもそのまま入れることができました。

スマートフォンで見る人がどれくらいいるかは、Cloudflare Web Analytics で確認できます。数字にかかわらず、自分の手で一度すべてのページを開いてみるのが、一番確実な確認方法だと感じています。

文字の大きさと行の間隔

背景の色とあわせて、本文の文字の大きさと行の間隔も見直しました。スマートフォンでは、文字が小さいと拡大しないと読めず、拡大すると今度は横にずれてしまいます。本文の文字は小さくしすぎず、行と行の間を少し広めに取ると、読みやすくなると感じました。

見出しの大きさも、パソコンに合わせて大きくしすぎると、スマートフォンでは1行に収まらず、何行にも折り返されてしまいます。画面の幅によって見出しの大きさを少し変えるようにしました。

ゲームやツールの画面で気をつけたこと

脳トレのミニゲームのように、画面の中でボタンを押すサイトでは、ボタンが小さいと押し間違えが起きやすくなります。スマートフォンで実際に遊んでみて、押しにくいところがないかを確かめるのがおすすめです。押しにくい場合は、ボタンの大きさや間隔を広げます。

また、ゲームの画面が画面の幅より大きいと、遊んでいる途中で画面がずれてしまいます。ゲームの画面も、スマートフォンの画面の幅に収まっているかを、横スクロールの確認と一緒に見ておくと安心です。

次にやること

直したら、新しい記事を公開するたびに、スマートフォンで一度開いて確認する習慣をつけるのがおすすめです。特に、長い URL やコードを含む記事は、はみ出しやすいので注意して見ています。

ほかの記事