「なんか使いづらい」をAIにどう伝える？朝ライブで考えた画面の直し方
こんにちは、neco.です🐈⬛
サイトを使っていて、「なんか使いづらい。でも、何が使いづらいのか説明できない」ということ、ありませんか？
AIに画面を作ってもらった時も、ちゃんと動くのに、ちょっと迷うことがあるんですよね。
9月14日の朝ライブでは、KAWAIさんの「UIの『使いにくい』を直す20の視点」を、くまさんと一緒に見ていきました。
UIは、ボタンや入力欄など、使う人が触れる画面のことです。
この資料を見ながら「その観点で自分のサイトもAIにチェックしてもらうとよさそう」と話していたので、今回は、私が特に気になった例と頼み方をまとめます。
ライブでサイトを修正する実演をした回ではなく、画面を見て改善の視点を考えた回です：）
入力欄はある。でも、どっちに入れるの？
最初に見たのが、「近接の原則」という考え方でした。
近くに置かれたものは、同じまとまりとして見えやすい、というものです。
16分40秒付近。KAWAIさんの資料をライブで表示した場面から、該当部分を引用。
ライブで私が気になったのは、メールアドレスとパスワードの欄。
文字と入力欄が全部同じような間隔で並んでいると、「この『パスワード』って、上の欄？下の欄？」と迷ってしまいますよね。
ここは説明文を増やす前に、対応する文字と入力欄を近づけてみる。
どこまでが1セットなのかが見えれば、読んで考える手間を減らせそうです。
申込フォームだけでなく、見出しと説明文が並ぶ資料でも、「どれとどれがセットか」を見るきっかけになります。
のっぺりした画面には、「同じカテゴリー」を伝える
続いて見たのは、配送先と請求先を別々の枠に分けた例です。
18分03秒付近。KAWAIさんの資料「共通領域の原則」の一部。
何でも同じ面に並んでいると、どこからどこまでが関連した情報なのか、ぱっと見で分かりにくくなります。
枠や背景の違いで区切ると、それぞれがひとまとまりだと伝わる。
この例を見ながら、私は普段AIにこんなふうに頼んでいる、と話しました。
プロンプト：ライブで話した、普段の頼み方
同じカテゴリーずつ、同じカテゴリーに見えるようにして。
「いい感じにして」だけだと、文字の色が変わるのか、配置が変わるのか、AI任せになります。
「関連する情報が、同じグループに見えるように」と伝えると、直したい理由が少し具体的になりますよね。
ただ、何でも枠で囲めばいいわけではありません。
区切りを増やしすぎると、今度は画面が細切れになってしまうので、まずは混ざって見えるところから考えるのがよさそうです。
ボタンは「押すと何が起きるか」が分かる言葉に
私、少し前に、目立っていた「戻る」ボタンをうっかり押して、入力したものを全部消してしまったことがあるんです。
この話もライブでしましたが、あれは「いやー！」ってなりました（笑）。
ボタンが目立つことと、使う人が迷わないことは、セットで考えたいですね。
そのうえで、ボタンに書く言葉も気になります。
27分26秒付近。KAWAIさんの資料「情報の匂い」の一部。
資料では、「詳しくはこちら」から、行き先の内容が分かる言葉に変える例がありました。
「料金プランを比較する」なら、次にどんな画面が出てくるのか想像しやすいですよね。
ライブでも、「登録する」のように、何が起こるかを動詞で書いた方がいい、という話になりました。
自分の画面なら、ボタンだけを読んだ時に、押した後のことが分かるか。
それだけでも見直す場所を見つけられそうです。
「保存できた？」も、画面の使いやすさ
保存ボタンを押したのに、結果がページのずっと上に小さく出ている。
「できたのかな？」と上を見たり下を見たりしたら、しれっと表示されていた……。
これも、ライブで話していた「使いにくい」のひとつでした。
結果が表示されていても、見つけられなければ不安になりますよね。
操作した場所の近くで、何が起きたか分かるようにする。
ボタンの見た目だけでなく、押した後まで見ておきたいところです。
予約完了の例も分かりやすかったです。
31分45秒付近。KAWAIさんの資料にある完了画面の例を、ライブで拡大表示した場面。
予約が終わったこと、確認メールを送ったこと、次に予約内容を見られること。
必要な案内が、ひとつの場所にまとまっています。
私はここに、Googleカレンダーへ登録するボタンもあるとありがたい、と話していました。
これは資料の完成画面に実装されていた機能ではなく、見ながら出た「あるとうれしいね」というアイデアです。
使う人が次に何をしたいかを考えると、完了画面にも足したいものが見えてきますね。
AIに見てもらうなら、こんな頼み方に
ライブでは、資料のURLをAIに渡して「この観点で自分のサイトをチェックして」と頼む案が出ました。
その発言と、この回で見たポイントをもとに、コピーして使える形に整理するとこうなります。
プロンプト：ライブの発言をもとに整理した依頼例（この文章での実行は未実演）
この資料の観点で、私のサイトの画面をチェックしてください。
参考資料：
https://x.com/kawai_design/status/2098698136600690965
確認したいサイト：
［ここに自分のサイトのURLを入れる］
特に、次のところを見てください。
・ラベルと入力欄の対応が分かるか
・同じカテゴリーの情報が、ひとまとまりに見えるか
・ボタンを押すと何が起きるか、言葉で分かるか
・操作後の結果や、次にできることが見つけやすいか
気になる箇所と、どう直すと分かりやすくなるかを教えてください。
URLだけではAIがページを開けない時は、確認したい画面のスクリーンショットも渡すと、どこを見てほしいかを共有できます。
ここは記事で補足した使い方です。
まず気になる画面をひとつ選ぶと、提案も読み比べやすいと思います。
きれいに揃えることも、伝わりやすさにつながる
資料の位置や余白を揃える話では、20代の頃に上司から言われていたことも思い出しました。
左端などの位置をきちんと揃えるだけでも、「ちゃんと仕事をしてくれそう」という印象につながる、と教わったんですよね。
画面づくりも、難しい法則の名前を全部覚えるところから始めなくていいと思います。
「どの欄に入れればいい？」「このボタンを押すとどうなる？」「今、保存できた？」。
そんな小さな迷いをひとつずつ見つけて、言葉にしてみる。
AIに「もっと使いやすく」とお願いしたい時も、今回のような具体例があると、会話を進めやすくなりそうです(´ ˘ `)
出典
画像の引用
- 本文の画面画像は、neco.のYouTubeアーカイブからキャプチャしています。
- 画面内の原資料はKAWAIさん（@kawai_design）の上記投稿です。この記事で取り上げた内容の説明に必要な部分を引用しています。
著者
neco. 🐈⬛
AI活用コンサル／ITエンジニア。朝ライブや勉強会で、仕事に使えるAI活用法を発信しています。
AI neco の図書館