スマホで確認したら、別のツールみたいだった話
ツールを作るとき、私はほぼ常にパソコンの前に座って、パソコンの画面で確認しながら進めています。
「色はこんな感じかな」「ボタンの位置はここでいいか」「文字は読みやすいか」——そういったことを確認する画面は、いつもMacの画面でした。公開してからしばらく、そのやり方に何の疑問も持っていませんでした。
「なんとなく」スマホで開いてみたら
ある日、特に理由があったわけではなく、スマホでツール工房のサイトを開いてみました。ちょうど夜、布団に入ってからぼんやりしているときで、手元にあるのがスマホだけだったのです。
開いた瞬間に、「あれ、なんか違う」と感じました。
パソコンで見たときとは、ぜんぜん違う印象でした。
まず、ボタンが小さいと感じました。パソコンのマウスで押すときはちょうどいいサイズに見えていたのに、スマホで指を使おうとすると、なんとなく窮屈で、うっかり別のところを押してしまいそうな感じです。意識して慎重に押さないといけない、という感覚がありました。
次に、文字と文字の間が詰まって読みにくいと感じました。パソコン画面では余白があって読みやすかったのに、スマホで見ると、文字がぎゅっと押し込まれているように見えます。「窮屈だな」という印象です。
「公開しておいて、スマホで確認したことがほとんどなかったんだ」とそのとき初めて気づきました。自分はパソコンで作って、パソコンで確認して満足していただけで、スマホで見る人の視点が完全に抜けていたのです。
Claude Codeに「こう見えている」をそのまま伝えた
何が問題で、どう直せばいいのか、私には見当もつきませんでした。「レスポンシブ対応が……」という言葉は聞いたことがあっても、具体的に何をすればいいかは分かりません。このあたりの仕組みも、正直なところ自分でははっきり説明できません。
そこで、難しいことを考えるより先に、Claude Code に「スマホで開いたら、ボタンが小さくて押しにくいし、文字が詰まって読みにくかった」と、見たままをそのまま伝えることにしました。
返ってきたのは、「スマホの画面の幅にあわせて、ボタンの大きさや余白を自動的に変える仕組みを整えましょう」という提案でした。「画面の幅によって自動的に調整される」というイメージはなんとなく分かったので、お任せすることにしました。
あとは Claude Code が、それを実際の画面の調整に落とし込んでくれました。難しい設定は分からないままでしたが、「どこが使いにくかったか」を具体的に言葉にできれば、それで足りたようです。
直したあとはスマホでも確認した
修正が終わったあと、今度はちゃんとスマホでも確認しました。
ボタンが前より押しやすくなっていました。文字の周りに少し余裕ができていて、「さっきと比べて全然いい」と素直に思えました。一画面に収まる情報量も、なんとなく落ち着いた印象になりました。
この出来事から、何かツールを変えたあとはスマホでも確認するというのを、意識するようにしました。たった一度スマホで開いてみただけで、パソコン確認だけでは気づけなかったことが見えてきたわけですから、これを怠るのはもったいないと感じました。
「使う画面」で確認するということ
振り返って意外だったのは、「こんな当たり前のことを見落としていた」という発見そのものでした。
作るのはパソコン。でも使う人はスマホかもしれない——そのことは、頭では分かっていたつもりでした。でも実感として腑に落ちたのは、スマホで自分のツールを開いて「なんか使いにくいな」と感じた、その瞬間でした。
こういうことは、何となく「分かっている」と思っていても、自分で体験してみるまでは手が動かないものだと思います。サービスごとに雰囲気が違うのと同じで、画面ごとに見え方の違いがある、というのは、触れてみて初めてじわっと分かることでした。
「作る人の目線」と「使う人の目線」がずれていることは珍しくない、と今は思っています。細かい用語は後追いで覚えていけばよくて、「使う側の画面で確かめる」という感覚のほうは、知識より先に身についた習慣になりました。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ