When I take a screenshot, the roughness of the UI becomes visible.

I've been developing an app called Browser Kitty, and I've been thinking about something lately.

Even when I think "Yeah, this looks pretty good" during normal operation,

when I take a screenshot, suddenly things start bothering me.

It doesn't bother me when it's moving

When actually operating the app, my eyes are following buttons and result displays, so I don't really notice the small details.

But when it becomes a screenshot, I'm looking at the entire screen as a single image.

Then suddenly I notice things like:

• The whitespace is wider here
• The button heights are slightly different
• The heading position is off
• This explanation text is longer than the others
• The right side feels a bit heavy
• Isn't this icon a little small?

It's strange how things that didn't bother me on the moving screen suddenly become visible.

Fixing work starts even though it's supposed to be for promotion

Browser Kitty also creates screenshots and promotional videos for each app.

Originally, the task should be:

"It's finished, so let's take a screenshot"

But in reality, it goes like:

Take a screenshot

↓

Notice something bothering me

↓

Fix it

↓

Take another screenshot

↓

Something else bothers me

It's become more of a final UI check than screenshot creation.

Static images don't hide flaws

Especially list screens and result screens have a lot of information, so imperfections stand out.

When operating, I know "I should press here," but in a static image, only the overall balance of the screen remains.

So when looking at a screenshot, I think:

"If someone seeing this for the first time, where would they even look?"

And I reconsider things.

As a result, I shorten explanations, reduce buttons, or tighten up whitespace.

Lately I take one screenshot early on

Since I've done this many times, recently I've started taking a screenshot even before completion.

Even if something looks fine in the browser, I can notice things when it becomes an image.

I'm not sure if this is the correct method for UI review, but for solo development it's quite useful.

And today too, I'm thinking:

"I was just supposed to take a screenshot, you know?"

while fixing the UI.

Browser Kittyのアプリを作っていて、最近よく思うことがあります。

普通に操作していると、

「まあ、いい感じかな」

と思っていた画面でも、スクリーンショットを撮ると急に気になるところが出てきます。

動いていると気にならない

実際に操作していると、目線はボタンや結果表示を追っているので、細かいところは意外と気になりません。

でもスクリーンショットにすると、画面全体を一枚の画像として見ることになります。

すると、

- ここだけ余白が広い

- ボタンの高さが微妙に違う

- 見出しの位置がずれている

- この説明文だけ長い

- なんとなく右側が重い

- このアイコン、ちょっと小さくない？

みたいなことが急に見えてきます。

動いている画面では気にならなかったのに、不思議です。

紹介用なのに、修正作業が始まる

Browser Kittyではアプリごとにスクリーンショットや紹介動画も作っています。

本来は、

「完成したからスクリーンショットを撮ろう」

という作業のはずです。

でも実際には、

スクリーンショットを撮る

↓

気になる

↓

直す

↓

もう一回撮る

↓

別のところが気になる

という流れになりがちです。

もはやスクリーンショット作成というより、最終UIチェックになっています。

静止画はごまかせない

特に一覧画面や結果画面は、情報量が多いので粗が目立ちます。

操作していると「ここを押せばいい」が分かるのですが、静止画になると画面全体のバランスしか残りません。

なので、スクリーンショットを見て、

「初めて見た人は、どこを見ればいいんだろう」

と考え直すこともあります。

結果的に、説明を短くしたり、ボタンを減らしたり、余白を詰めたりします。

最近は先に一枚撮る

そんなことを何度もやっているので、最近は完成前でも一度スクリーンショットを撮るようになりました。

ブラウザ上では問題なく見えていても、画像にすると気づけることがあります。

UIレビューの方法として正しいのかは分かりませんが、個人開発ではかなり便利です。

そして今日も、

「スクショ撮るだけだったはずなんだけどな」

と思いながらUIを直しています。