「UIデザインの法則50」をi3DESIGNデザイナーチームが解説。迷わせない画面がすぐ作れる

家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん（@passion_tanaka）です。今回は、i3DESIGNデザイナーチームさんの「UIデザインの法則50」という記事を紹介するね。

i3DESIGN Designers「ユーザビリティの法則50」より・1章

フォームの入力項目が多い場合は、項目をグルーピングして画面を分割しましょう。フォームが長すぎると、ユーザーは入力を途中で辞めてページから離脱してしまうかもしれません。その上で、ステッパーを設置して現在の進捗状況を明示しましょう。

この「ステッパーで進捗を見せる」って話、実はうちの朝LIVEでも同じことが起きています。

私、毎朝LIVE配信をやってるんだけど、視聴者数が画面に表示された瞬間から、正直、そこが気になっちゃう自分がいる。多いと嬉しいし、少ないと寂しい……。コメントやシェアが来ると、ちゃんと届いてるって安心する。数字を気にしなくなったわけじゃなくて、今も気になる。でね、その「見える」があるから、今どんな状態なのかを自分で把握できるんだよね。

フォームのステッパーも同じ構造です。今どこにいて、あと何ステップ残っているか——それが見えないと、ユーザーは自分の状態が分からなくなって不安になる。数字そのものをなくすことが正解なのではなく、今の状態が見える形で常に置いてあることが大事です。

エンプティステート（1-6）も同じ発想。何も表示されない空の画面をそのまま置いておくと、ユーザーは「壊れているのかな」「まだ何もしていないだけかな」と迷ってしまいます。空っぽの状態にも「ここに何が入るか」「どうすれば埋まるか」を一言添えるだけで、不安は驚くほど減るんだよね。

【今日からできること】自分のサービスやLPの入力フォームを開いて、「今どこにいるか」が3秒で分かるか、自分の指で触って確認するのがおすすめです。分からなかったら、それはユーザーも同じように迷っているサインです。

i3DESIGN Designers「ユーザビリティの法則50」より・2章

「入力内容が不正です」「認証に失敗しました」「情報の取得に失敗しました」といった言葉はプログラム目線で書かれているためユーザーにとって有用な情報とは言えません。「半角英数字6文字以上で入力してください」のように、ユーザーが見て内容が理解できる言葉を使いましょう。

この「プログラム目線の言葉」の話、正直めちゃくちゃ刺さった。

私がずっと腹立たしく見てきたのが、「DX」「トランスフォーメーション」みたいなカタカナ用語で煙に巻く業者だった。蓋を開けたらExcelのマクロすら組めないのに、難しい言葉で説明されると、中小企業の経営者は「自分が分からないだけかも」と自己嫌悪に陥ってしまう。ぶっちゃけ、あれは相手の理解力の問題じゃなくて、説明する側が「わかる言葉」で話してないだけなんだよね。

UIのエラーメッセージも同じ構造です。「認証に失敗しました」はプログラムの都合であって、ユーザーの言葉ではありません。「パスワードは半角英数字8文字以上」と言われれば、ユーザーはすぐ動く。専門用語を使わないことは、手抜きではなく相手への礼儀です。

ボタンの文言（2-2）も同じ構造。「OK」「進む」だけでは、押した後に何が起きるか分かりません。「入力内容を確認する」「送信する」のように、実際に起きるアクションをそのまま言葉にするだけでいい。ユーザーは安心して指を動かせるようになります。

【今日からできること】自分のサービスに出てくるエラー文言を1つ選んで、専門用語ゼロで次に何をすればいいか分かる文に書き換えてみましょう。

i3DESIGN Designers「ユーザビリティの法則50」より・3章

ユーザーは、間違えたり、気が変わったり、興味本位でボタンを押したりします。そのためシステムは、ユーザーの間違いをすばやく修正したり、行った選択をやり直せるようにして、どのタイミングでもシステムをコントロールできるようにしましょう。

「いつでもコントロールできるようにする」って話、私はこれを真逆の立場で経験したことがある。

がんの闘病で入院して、朝LIVE配信を強制的に中断せざるを得なくなったことがある。仲間のただっちが代わりに配信を続けてくれて、病室からその様子を見た時、正直「居場所を奪われた」みたいな複雑な気持ちもあった。でも、結果的にただっちも成長して、番組はより良くなって、私の負担も減った——手放したら全部良くなった、という体験だった。

UIの話に戻すと、これは逆から見た「ユーザーの自由」でもあります。ユーザーが安心して操作を手放せるのは、「間違えてもやり直せる」「戻れる」という保証があるから。戻り道がない画面は、ユーザーに「一度触ったら後戻りできない緊張」を強いてしまいます。

委ねる側も、委ねられる側も、戻れる道があるから安心して次の一歩を踏み出せるんだと思う。

【今日からできること】自分のアプリやフォームで「一度押したら戻れないボタン」を洗い出して、取り消し・修正の導線を1つ足してみましょう。戻り道を先に用意しておくと、ユーザーは思い切って触りにいけるようになります。

i3DESIGN Designers「ユーザビリティの法則50」より・4章

視覚情報のうち、80%以上が「色彩の情報」と言われています。色が与える影響は大きく、配色1つで好印象にも悪印象にもなり得ます。多少の個人差はあれど、人の持っている色に対してイメージはほぼ同じであるでしょう。例えば、赤は「危険・禁止・エラー」であったり、緑は「安心・正常」などを連想します。

色と機能を揃える話、これはまさに私の原体験そのものだった。

中卒フリーターからリフォーム会社でWEB集客を独学で習得して、「言葉と写真と導線で人の行動を変える」魔法に魅了され、EC事業で月商6000万円を達成した。あの頃叩き込まれたのは、デザインの綺麗さより先に、「見た人がどう感じてどう動くか」を1つずつ裏切らないことだった。

その感覚を今のUIに当てはめると、色と機能の一致もまったく同じ話だと思う。「赤いボタンは危険、緑は安心」みたいな、人が無意識に持ってる色のイメージを裏切らないだけで、ユーザーは迷わず動ける。地味な一致の積み重ねなんだよね。

UIでも、削除ボタンが青かったり、リンクとボタンが同じ見た目だったりすると、ユーザーは「これは何だろう」と一瞬止まります。その一瞬の迷いが、離脱や誤操作につながる。地味な一致の積み重ねが、結局は一番効くところです。

タブとアコーディオン、セレクトとチェックボックスのように見た目が似ているパーツ（4-2〜4-3）も、一度混同されると次から全部疑われてしまう。ユーザーは「1回目の体験」をそのまま次の判断材料にするので、最初の一致がその後ずっと効いてきます。

【今日からできること】自分のサービスの「危険なボタン」と「安心して押せるボタン」の色を並べて、赤・緑のイメージ通りになっているか3分だけチェックしてみてほしい。

i3DESIGN Designers「ユーザビリティの法則50」より・5章

誰しも、自分のした作業が無駄になることは嫌なはずですが、システムでもそのようなことが起こります。例えばパスワードを決める時の条件や、アップロードするファイルのサイズ制限など、アクションを起こした後にエラーを指摘された経験はないでしょうか？

この「後出し条件」の話、正直、業界で一番腹が立った瞬間を思い出した。

「AIで御社の売上が10倍になります」って大風呂敷を広げるコンサルを何度も見てきた。蓋を開けたらChatGPTに文章を書かせて終わり。何百万も払って何も変わらない。見た目は豪華で中身はスカスカな3万円の情報商材に、私自身が騙された経験もある。あの時から決めてるのは「期待値コントロール＋内容しっかり」。やるからには、先に条件と中身を全部見せて、後出しはしないっていう信念なんだよね。

UIの「条件は先に提示する」も、結局は同じ信頼の話です。パスワードの条件を入力後に出すのも、値段を最後に見せるのも、ユーザーからすると「後出しされた」という同じ痛みになる。先に見せる勇気は、結果的に信頼として返ってきます。

取り返しのつかないアクションを他のボタンから離して置く（5-2）話も同じ根っこ。「データ損失の3割は人的ミスが原因」という調査があるほど、人は隣にあるボタンを普通に押し間違えます。だからこそ、削除ボタンだけは物理的に距離を取っておく必要があるんだよね。

【今日からできること】自分のフォームや申込みページで、入力前に見せていない条件を1つ見つけて、一番上に移動させてみましょう。ユーザーが損する前に伝えるだけで、印象はだいぶ変わります。

i3DESIGN Designers「ユーザビリティの法則50」より・6章

タイピングは負担が大きく、誤字脱字などのエラーにつながる可能性が高まります。テキスト入力の際には、入力中の文字に続く候補を表示しましょう。ユーザーが入力しようとしていたことや関連する候補を表示することで、入力の手間を省くことができ、よりスムーズに検索を行うことができます。

「覚えさせるな、候補を出してあげる」って発想、実は私が毎朝やってるモーニングページと同じ理屈だなって思った。

私は毎朝、紙にマインドマップで頭の中を書き出してる。iPadでもダメで、紙とペンじゃないと出てこないものがあるんだよね。頭の中に全部溜め込んだままだと、もやもやが消えないし、新しいアイデアも湧かない。一度外に出すことで、初めて整理される。

UIの入力候補や自動入力も、これと同じ役割を果たしています。ユーザーの頭の中にある情報を「思い出させる」のではなく、外側に出して見せてあげる。そのほうが、脳の負担がずっと軽くなるんだよね。覚えさせない設計は、ユーザーへの小さな思いやりです。

選択肢が2〜3個ならラジオボタン、価値のあるデフォルト値を先に入れておく（7-2〜7-4）話も同じ方向を向いてる。ユーザーに毎回考えさせるより、多くの人が選ぶはずの答えを先に置いておいたほうが、結局みんなが早く目的地にたどり着けるんだよね。

【今日からできること】自分のフォームで「ユーザーに一から思い出させている入力欄」を1つ探して、候補表示かデフォルト値をつけられないか考えてみます。小さな変更でも、体感は確実に軽くなります。

i3DESIGN Designers「ユーザビリティの法則50」より・8章

UIにおける情報の優先度と視覚誘導のためには、特定の要素を太字にしたり色をつけたりと、強調表現によって他の要素と差がつける必要がありますが、あれもこれもと足し算のように属性を増やしていくと優先度がインフレ・渋滞して逆効果となってしまいます。

この「足し算すると逆効果」って話、実家の惣菜屋「山口屋」の売り場を思い出しながら読んでた。

私は今も食材の買い出しに行くのが好きで、新しい発見や特売品、店の人との会話を楽しんでる。実家の商売っ子の血が騒ぐんだけど、繁盛してる店の売り場って、実はPOPも商品も「絞ってある」んだよね。あれもこれもと情報を足した棚は、結局どれも目に入らなくなる。一番売りたいものだけ、ちゃんと目立つ場所に置いてある。

UIの色やフォントも同じです。強調表現を足せば足すほど、逆にどれも強調されなくなる。地味な引き算ですが、一番伝えたいものを目立たせるのは、いつだって引き算のほうです。足し算は簡単だけど、引き算には勇気がいるんだよね。

情報のかたまりを7±2個に収める話（8-8）も、同じ引き算の発想です。人間の短期記憶が扱える量には限りがあるので、ナビゲーションもメニューも、欲張って全部並べるより、カテゴリでまとめて減らしたほうが、結局は使いやすいUIになるんだよね。

【今日からできること】自分の資料やLPで、太字・色つき文字を数えてみて、5個以上あったら本当に大事な1〜2個だけ残してみましょう。減らした後のほうが、たぶん読みやすくなります。

i3DESIGNデザイナーチームがまとめた50項目は、どれも「ユーザーを迷わせない」という1点に向かってるんだよね。

見える化、わかる言葉、戻れる自由、色と機能の一致、条件を先に、覚えさせない、情報を削る——今日紹介した7つの視点は、どれも今すぐ自分のサービスで確認できるものです。特別なツールも予算も必要なく、必要なのは「ユーザーの立場に一度戻ってみる」という、たった1つの動作だけなんだよね。

AIで画面や資料を作る時代だからこそ、このチェックリストの価値はむしろ上がってる。AIは早く作ってくれるけど、「ユーザーが迷わないか」を最後に見るのは、まだ人間の仕事だよ。今日から1つだけでいいから、自分のサービスで試してみてほしい。