仕上げの磨き

動くところまで来たあとに残るもの

ここまでで、あなたのアプリは動くようになりました。ボタンを押せば反応し、数字も出ます。それでも画面をじっと眺めていると、なんとなく素人くさく見える瞬間があります。この「なんとなく」の正体を言葉にして潰していくのが、この回のテーマです。

プロが作った画面と、動くだけの画面の差は、機能の数ではありません。ほとんどが余白と揃えと文言の3つに集まります。この3つは、AIに頼めば数十秒で直ります。ただし「もっとおしゃれにして」と頼んでも直りません。どこがどう気持ち悪いのかを、あなたが名指しできる必要があります。

違和感の正体は3つに分けられる

余白

余白とは、文字や部品のまわりの空きのことです。画面の端に文字がぴったり張り付いていると、窮屈で読みにくく感じます。逆に空きすぎるとスカスカに見えます。困ったときは、画面の外周に少し空きを作り、部品と部品のあいだにも同じくらいの空きを入れると、それだけで落ち着いて見えます。

揃え

揃えとは、部品の左端や中心の位置がそろっているかどうかです。見出しは中央なのに本文は左、金額だけ少し右にずれている、といった状態は、理由がなければ視線が落ち着きません。「縦のラインを1本にそろえてください」と頼むだけで、かなり見栄えが変わります。

文言

文言とは、画面に出ている文字そのものです。「送信」と「追加」と「登録」が混ざっていたり、見出しだけ英語だったりすると、作りかけの印象になります。同じ意味の操作は、同じ言葉に統一します。

頼み方の型

悪い例と良い例を並べます。

良い例は、直したい場所と、直したあとの状態が書いてあります。AIは好みを推測できませんが、指定された状態にすることは得意です。仕上げの工程では、感想ではなく注文を書いてください。

この回の演習

おこづかい帳の画面を仕上げます。見出しと、記録を並べる場所と、追加ボタンがある状態から始めます。余白を入れ、部品の幅をそろえ、ボタンの文言を整えるところまでを、AIへの指示だけで進めてください。

直したあとは、必ず自分の目で画面を見返します。指示どおりに直っていても、見た目が良くなっていないことはあります。そのときは、また1つだけ注文を足します。仕上げは1回で決めるものではなく、小さな注文を数回重ねるものです。

• 見た目の注文は「おしゃれに」ではなく、直したい場所と直したあとの状態で書きます
• 余白と揃えと文言の3点に絞ると、AIが迷わず直せます