PCで完成しても、スマホで確かめる。Web制作初心者のための見直し方

Web制作を学び始めると、パソコンで見えている画面を基準に作業しがちです。
文字も画像もきれいに収まったので完成。

ところがスマホで開くと、見出しが不自然に折れ、ボタンが探しにくくなっていることがあります。
スマホ確認は、縮めた見た目を眺めるだけではありません。
そこで必要な情報を読み、操作してみる時間です。

実際の用事を決めて、触ってみます。

一回の確認で、見るものを絞る

例として、架空の手作り石けん教室のページを使います。
初めて参加を考える人に、内容と開催場所、持ち物を伝える練習課題です。

スマホでページを開いたら、まず「何のページかが分かるか」を確認します。
次は「開催場所を見つける」、その次に「参加方法へ進む」。
用事を分けると、途中で見た目の細部だけに気を取られにくくなります。

画面の端から順に眺めるより、使い道を先に決める方法です。
押した場所、迷った場所、読み返した場所をメモすると、修正したい点が具体的になります。

文字は、大きさと折り返しを一緒に見る

見出しが目立つかだけでなく、意味の途中で読みづらく切れていないかを見ます。
「初心者向け石けん教室」が細かく何行にも割れるなら、文字サイズ、見出しの幅、
言葉の長さを順に確かめます。

本文も読んでください。

作り手は原稿を覚えているので、目を滑らせるだけで分かった気になりやすいです。
スマホをいつもの距離で持ち、初めから数段落読んでみます。
行の間が詰まりすぎていないか、背景と文字を区別しやすいかも見ます。

文字を小さくして全部を収める前に、同じ説明が重なっていないかを読み直す方法もあります。
不要な一文を整理できれば、読みやすさを保ったまま内容を短くできます。

画像の「見せたいところ」が残っているか

横長の写真を狭い画面に合わせたとき、伝えたい部分が切れていないかを見ます。
教室の雰囲気を伝える写真なのに、手元だけになっているなら、目的に合う表示か考え直したいところです。

逆に、画像を全部見せようとして小さくした結果、写っているものが分からなくなる場合もあります。
写真の役割を一つ決めて、表示方法を選びます。練習用の画像には、使用してよい素材を用意してください。

画像の中に説明を詰め込んでいる場合は、その文字が読めるかも確認します。
ページ本文として置ける説明なら、画像に全部入れる必要があるかも見直せます。

ボタンは、押す前と後を確かめる

参加方法のボタンを見つけられるか。
近くのリンクと間違えて押さないか。
何が開くかを文字から想像できるか。

この三つを実際に試します。
「詳しくはこちら」だけでは、何についての詳細か分かりにくい場合があります。
「参加に必要なものを見る」なら、目的との関係が読み取れます。
ボタンの色を目立たせる前に、言葉を見直してみてください。

押せた後も確認します。

別のページへ進んだら、行き先が合っているかを見ます。
同じページの下へ動くなら、必要な見出しが画面内に現れるかを見ます。
操作できたことと、目的を果たせたことを分けて確かめるわけです。

直す順番は、困り方から決める

気になる場所がいくつも出てきたら、
「情報が読めない」「操作できない」「見つけにくい」「見た目を整えたい」に分けます。
先に、読むことや操作を妨げる箇所から直すと、次に確認する範囲が見えます。

例えば、タイトルの細かい位置より、画面の外へはみ出した参加ボタンの修正を先にする。
直したら同じスマホで、同じ用事をもう一度試します。
変更前と条件をそろえることが、比較の手掛かりになります。

横へ動かさないと読めない場所を探す

スマホで画面の外にはみ出すものがないかも見てください。
長い見出し、大きな画像、横に並べた項目など、狭い幅で収まりにくい場所を中心に触ってみます。
本文を読むのに何度も横へ動かす必要があるなら、配置を見直す候補です。

ただ、はみ出して見えるからといって、いきなりページ全体を縮めると、文字まで小さくなってしまいます。
どの部分が外へ出ているのかを絞り、その箇所の幅や並び方から確かめます。

修正を依頼するときも、「スマホで崩れる」だけではなく、「持ち物の三つの項目が横一列のままで、右
端を読めない」と書くと具体的です。自分で直すときにも、調べる範囲が狭まります。

正直、パソコンで作った画面だけを見ていると、スマホの不便は見つけにくいです。
今日は練習ページをスマホで開き、開催場所か問い合わせ先を探してみてください。
迷った場所を一つ記録し、直した後に同じ操作を試しましょう。