スマホで見やすい
レイアウトの基本。

読みやすくする6つの基本

1. 最初の画面に主題と行動を置くページ名、短い説明、最も押してほしいボタンを近くに置きます。何のページか分からない状態を避けます。
2. 関連する情報を近づける画像・見出し・説明・ボタンを一組としてまとめます。関係のない内容とは余白をあけます。
3. 見出しで文章を区切る画面を流し読みしても、何が書いてあるか分かる大きさと文言にします。
4. 基本は1カラムで並べるPCで横に並ぶカードも、スマホでは縦に並べると読みやすくなります。左右への細かい視線移動を減らせます。
5. ボタンを押しやすくする十分な大きさと周囲の余白を取り、本文リンクや危険な操作の近くに詰め込みません。
6. 画像が文章を邪魔しないようにする画像は内容を補うものにします。重要な文字を画像だけに置かず、本文でも内容が分かるようにします。

実機で確認する3つの場面

親指で最初のボタンを押せるか

画面を開いた直後に、主なボタンを迷わず押せるかを確認します。小さすぎる、他のリンクと近すぎる場合はサイズや余白を見直します。

途中で読み返したくならないか

一段落が長すぎたり、見出しが内容を表していなかったりすると、現在地を見失います。見出しと余白を増やして、まとまりを分けます。

横にずれていないか

横長の画像、固定幅の表、長いURLが原因で横スクロールが出ることがあります。実際のスマホ幅で、左右にずれないかを確認します。

デザインは「飾る」より「迷わせない」

配色やアニメーションは印象を作れますが、主役は情報です。作品ページなら「遊ぶ」、ブログなら「答えを読む」、問い合わせなら「連絡する」を目立たせ、ほかの要素は主役を邪魔しないように整えます。

よくある質問

スマホ用に別のサイトを作る必要はある？

一般には、画面幅に合わせて並び方を変えるレスポンシブ設計で、ひとつのページをスマホとPCの両方に対応させます。

ボタンはどれくらいの大きさがいい？

指で押しやすい大きさと間隔を確保し、端末で実際に押して確認することが重要です。