スマートフォンで読みやすいページを作る

文字を詰め込まず、行間を確保する

小さな文字で情報を詰めると、読むために拡大する手間が増えます。本文は読みやすい大きさを基準にし、画面幅に応じて左右の余白を取ります。日本語の段落が長く続く場合は、話題の切れ目で分けましょう。

当サイトではゴシック体を使い、本文を標準18pxにしています。見え方には個人差があるため、ブラウザーの拡大を妨げず、文字を大きくしても内容が欠けないようにします。

横にはみ出すものを探す

幅が固定された画像、長いURL、比較表は横にはみ出す原因になりやすい要素です。画像は本文の幅に収め、表は内容を保ったまま横にスクロールできる領域へ入れます。本文そのものを小さくして無理に収めないようにしましょう。

確認時には画面幅を少しずつ変えます。特定のスマートフォンの幅だけで整えると、その中間の幅で窮屈になることがあります。

押す場所を分かりやすくする

リンクは色だけでなく下線や形でも識別できるようにします。隣り合うボタンには余白を取り、指で押したときに別のリンクを選ばないかを確かめましょう。「こちら」だけでなく「購入前チェックを読む」のように、移動先が分かる言葉を使います。

動きは読む妨げにならない範囲にする

表示時のフェードなどは、内容を見つける助けになる程度に抑えます。長い待ち時間、点滅、強い移動、勝手に切り替わる表示は避けましょう。端末で動きを減らす設定をしている人には、その設定に合わせた表示を用意します。

最後にメニューを開く、記事へ進む、目次を使う、戻るという普段の操作を、狭い画面で通して試します。