AI駆動開発

UI 部品 名前を間違えると、指示は別の場所へ行く

画面の一部だけを直すよう AI に頼むとき、部品を日本語の名前で指すことがあります。その名前が、直したい場所以外の文字にも当たると、頼んだ場所は残ったまま、別の箇所の文字が変わります。

この記事では、そうした指示が実際にどこへ行くかと、ずれを避ける言い方を、開いた一つの画面で試しました。

避けるには、名前が画面の一つの文字にしか当たらないようにします。同じ文字がもう一箇所にあるときは、直したいほうの位置や見た目の違いまで名前に入れると、一箇所に当たりやすくなります。

試したのは、アカウント設定の画面です。変えたかったのは、白い枠の中にある太い「表示名」だけで、それを「プロフィール」という文字にすることでした。ボタンを押すことや、入力欄へ文字を入れることは頼んでいません。指示の相手は、この画面の文字を書き換える AI です。

アカウントの設定画面。枠の外に大きい「アカウント」、白い枠の中に太い「表示名」と細い「表示名」、空の入力欄、塗りつぶしていない「やめる」と黒い「保存する」

画面は、表示名を変える欄だけを置いたものです。背景は薄いベージュで、中央に白い枠が一つあります。枠の外の左上に、大きい文字で「アカウント」とあります。枠の中は上から、太い「表示名」、そのすぐ下の細い「表示名」、横に長い空の入力欄、右下の「やめる」と、黒く塗った「保存する」です。ブラウザのタブも「アカウント」で、枠の外の大きい文字と揃っていました。

枠の中には「表示名」が二つあります。上の太い文字と、その下の細い文字です。単語が同じなので、名前に位置や見た目が入っていないと、画面を見ただけではどちらを指すか決まりません。

名前を一つ間違えたとき

一回目の指示は「タイトルを『プロフィール』に変えて」でした。画面の大きい文字を、そう呼びがちだからです。この画面でいちばん大きい文字は、枠の外の「アカウント」です。直したかった枠の中の太い「表示名」は、それより小さいです。

結果をブラウザで開くと、枠の外の大きい「アカウント」とタブが「プロフィール」になっていました。枠の中の太い「表示名」も、その下の細い「表示名」も、「表示名」のままです。「やめる」と「保存する」もそのままです。「タイトル」は、枠の外の大きい文字とタブの組へ行き、変えたかった枠の中の見出しには届きませんでした。

二回目は、変える文字を「プロフィール」のままにして、名前だけを「セクションの見出し」にしました。指示は「セクションの見出しを『プロフィール』に変えて」です。枠の中の太い「表示名」だけが「プロフィール」になり、タブは「アカウント」のままでした。細い「表示名」と二つのボタンも、最初の画面と同じです。変えたかった場所と、実際に変わった場所が、このとき一致しました。

確認は、結果の画面をブラウザで開き、タブ、枠の外、枠の中の太い文字、細い文字、空欄、二つのボタンの順に読みました。一回目で「プロフィール」になっていたのはタブと枠の外だけで、二回目で「プロフィール」になっていたのは枠の中の太い文字だけでした。

この画面で太い「表示名」を変えるときに使えたのは、二回目の「セクションの見出しを『プロフィール』に変えて」です。一回目の「タイトルを『プロフィール』に変えて」は、枠の外の大きい文字へ行きました。

「セクションの見出し」は、枠の中の太い文字を指す名前です。「タイトル」は、この画面では枠の外の大きい文字を指しました。名前が指す場所が一つに決まると、変わったのもその場所だけでした。

この画像のどこを指すか

ページの見出しは、枠の外のいちばん上にある、大きい「アカウント」です。一回目の「タイトル」が当たった場所です。タブの文字も、最初はこれと同じ「アカウント」でした。

セクションの見出しは、白い枠の中のいちばん上にある、太い「表示名」です。変えたかった場所で、二回目に変わった場所です。入力欄の説明ではなく、その枠の題です。

入力欄のラベルは、太い「表示名」のすぐ下にある、細い「表示名」です。太い文字と同じ単語ですが、別の部品です。今回の二つの指示には、この単語だけでは入れていません。

入力欄は、細い「表示名」の下にある、横に長い空欄です。最初から文字は入れていません。文字ボタンは、枠の右下にある、塗りつぶしていない「やめる」です。主ボタンは、その右隣にある、黒く塗りつぶした「保存する」です。ボタンを押したあとは見ていません。見たのは、名前がどの文字を変えるかだけです。入力欄と二つのボタンは、今回の指示では変えていません。

※ 執筆支援に AI を使用しています。事実確認・コード検証・構成の最終判断は著者が行っています。

シリーズ一覧を見る