このサイトを作っている途中の話です。「説明文が縦に長くて読みにくい」と言われました。文字を大きくすれば済む話かと思ったのですが、測ってみたら原因はまったく別のところに2つありました。
感想のまま直すと、たいてい外す
「読みにくい」は感想です。感想のまま手を動かすと、行間を広げたり文字を大きくしたり、思いつく順に触ることになります。それで直ることもありますが、直らなかったときに次の手がありません。
そこで手を止めて、「読みにくいとは何が起きている状態か」を先に決めました。今回は、本文の横幅が狭くて1段落が何行にも折り返されている状態のことだろう、と仮に置きました。
決めてしまえば測れます。このサイトの全ページを開いて、幅が一定より狭いのに行数が多い段落を機械的に拾い出しました。すると、自分が疑っていた場所とは違うところが引っかかりました。
原因は2つあって、どちらも文字の大きさではなかった
1つめは、番号つきの手順リストでした。番号を左に置いて本文を右に流すレイアウトにしていたのですが、見出しと本文を並べて書いたときだけ、本文が番号用の細い列に落ち込んでいました。幅にして50pxほどの隙間に文章が押し込まれ、十数行に折り返されていた箇所がありました。サービスページの「進め方」のあたりです。
書き方を少し変えれば直るのですが、それだと次に書くときに同じ書き方をしたらまた壊れます。どう書いても本文が正しい側に入るように直しました。
2つめは、カードを常に3列に並べていたことでした。画面が広いときはよくても、そうでないときに1枚あたりの本文が300pxくらいまで痩せます。列数を固定するのをやめて、一定の幅を切ったら自動的に列が減るようにしました。いま見ていただいている画面でも、幅を狭めると途中で2列になります。
直したかどうかも、同じ物差しで確かめる
直したあとに、最初と同じ抽出をもう一度かけました。引っかかる段落はゼロになりました。狭い画面でも崩れていないことも合わせて確認しています。
この「直す前に測る、直した後にもう一度測る」をやると、報告が楽になります。「読みやすくなったと思います」ではなく「該当箇所はゼロになりました」と言えるからです。
見た目の話こそ、感想で始めて数字で終わらせるのがいいと思っています。感想は人によって違いますが、数字は共有できます。