UX改善|見た目を直す前に、要素の関係を診る

UX改善|見た目を直す前に、要素の関係を診る

「UX改善|見た目を直す前に、要素の関係を診る」の全体像をまとめた図解|部屋が使いにくいと感じたとき、最初にやりがちなのは家具を買い足すことです

部屋が使いにくいと感じたとき、最初にやりがちなのは家具を買い足すことです。僕も昔、狭い部屋に収納棚を2台買い足して、もっと狭くしたことがあります。あとから分かったのですが、問題は物の量ではなく動線でした。ベッドとデスクの間が45センチしかなく、毎日そこで体を横にして通っていた。棚を足す前に、家具の配置の関係を診るべきだったのです。

画面の改善も、まったく同じ間違い方をします。使いにくいと言われると、ボタンの色を変え、機能を足し、もっと使いにくくする。今日は、UX改善という仕事の順番——見た目を直す前に何を診るか——の話をしていこうと思います。前置きはさておき、本題に入ります。

① UX改善とは。UI改善との違い

「UX改善とは。UI改善との違い」を図解したスライド|UX改善とは、プロダクトやサービスの体験全体——迷わず目的を果たせるか、また使いたくなるか——を良く…

UX改善とは、プロダクトやサービスの体験全体——迷わず目的を果たせるか、また使いたくなるか——を良くする取り組みのことです。UI改善はその一部で、画面の見た目と操作部分を良くする取り組みを指します。

関係を一言で言うと、「UIは画面の中、UXは画面の前後まで」です。ボタンを押しやすくするのはUI改善。そもそもそのボタンに辿り着くまでの流れを短くするのはUX改善。この記事は両方を扱いますが、順番は必ずUX(流れ)→UI(見た目)です。逆にすると、「押しやすいのに、誰も辿り着かないボタン」ができあがります。

② 改善が失敗する2つの典型

「改善が失敗する2つの典型」を図解したスライド|改善の依頼は、たいてい「なんか使いにくいと言われる」から始まります

改善の依頼は、たいてい「なんか使いにくいと言われる」から始まります。画面を見ると、失敗の形はだいたい2つに絞られます。

1つ目は、見た目だけを直すこと。色を今風にして、角を丸くして、フォントを変える。ところが使いにくさの原因が流れにある場合、見た目をいくら磨いても数字は動きません。

2つ目は、要素の関係を無視した寸法の決め打ちです。うちの社内教科書に、そのまま使っている悪い例があります。

社内UIデザイン教科書より・関係性を無視した寸法の決め打ち

「とりあえず、メニューの幅は切りがいいから300pxにしておくか」。この決め方の何が悪いかというと、隣り合うコンテンツ領域との関係を考えていないことです。平面を構成するとは、それぞれの要素の関係をデザインすることであって、要素ごとに寸法を決め打ちするのはレイアウトではなく、ただの寸法定義です。使いにくい画面の多くは、この「隣との関係の不在」を抱えています。

③ 診断|どこが悪いかを、2つの道具で見つける

「診断|どこが悪いかを、2つの道具で見つける」を図解したスライド|直す場所を決めるために、うちでは2つの道具を併用します

直す場所を決めるために、うちでは2つの道具を併用します。

1つ目は行動データです。どの画面で離脱が多いか、どのボタンが押されていないか、入力のどの欄で1分止まるか。数字は「どこで起きているか」を教えてくれます。

一方で、数字は「なぜ起きているか」を教えてくれません。そこを補う2つ目の道具がヒューリスティック評価です。専門家が経験則のチェックリストに沿って画面を歩き、問題の候補を列挙する手法です。

豆知識をひとつ。この経験則の原典は、ユーザビリティ研究の第一人者ヤコブ・ニールセンが1994年に整理した「10のユーザビリティヒューリスティック」です。30年前の道具がいまも現役なのは、対象が流行りの見た目ではなく、人の認知の癖だからです。ニールセンにはもうひとつ有名な主張があり、「テストは5人で行えば、問題の大半が見つかる」。③の診断も⑥の計測も、少人数で速く回してよい、という実務の後ろ盾になっています。

次の10個の問いは、ニールセンの10原則をうちの現場の言葉に置き直したものです。道具を持たなくても、これで自分の画面を歩くだけで、改善候補はかなり見つかります。

#問い
1いまシステムが何をしているか、画面から分かるか。
2使っている言葉は、利用者の言葉か(社内用語になっていないか)。
3間違えたとき、すぐ戻れるか。
4同じ操作は、どの画面でも同じ見た目か。
5そもそも間違えにくい作りか(確認より予防があるか)。
6覚えていなくても使えるか(思い出させる表示があるか)。
7慣れた人の近道があるか。
8余計な情報が視界に混ざっていないか。
9エラーの文章は、原因と次の一手を言っているか。
10説明を読まなくても主要な流れを終えられるか。

④ 優先順位|全部は直さない

「優先順位|全部は直さない」を図解したスライド|診断すると、直したい場所は必ず10件や20件見つかります

診断すると、直したい場所は必ず10件や20件見つかります。ところが、全部直そうとした改善は、たいてい終わりません。優先順位は2本の軸で切ります。

  • 頻度: その画面・操作を、1日に何回通るか。
  • 深刻度: そこで詰まったとき、目的を諦めるか、迂回できるか。

毎日通る場所の深刻な詰まりが最優先、たまにしか通らない場所の軽い引っかかりは後回し。実は、この表を作るだけで「声の大きい指摘」ではなく「数字に効く指摘」から着手できるようになります。

⑤ 実例|実在アプリを再設計した記録

「実例|実在アプリを再設計した記録」を図解したスライド|うちのメディアには、2015年から続く、実在の大手アプリを実際に再設計してみせた連載(APP Red…

うちのメディアには、2015年から続く、実在の大手アプリを実際に再設計してみせた連載(APP Redesignシリーズ・9本)があります。UX改善の実物を見たい人には、解説より雄弁です。

実は、どの回も最初にやっているのは色やボタンの変更ではなく、「体験の流れと、要素の関係の診断」です。②で書いた順番が、実物でどう進むかの記録として読めます。

受託の実例もひとつ。百貨店とアパレルをつなぐ衣服のシェアリングサービスcarite(カリテ)では、画面の改善を、モックアップを関係者で演じながら反復する形で回しました。接客・実装・デザイン・ビジネスの4つの視点で売り場の文脈を再現し、「意思決定が起きない瞬間」を見つけては直す。行動データがまだ無い新サービスでは、このロールプレイングが③の診断の代わりになります。

⑥ 計測|改善したつもり、を数字で締める

「計測|改善したつもり、を数字で締める」を図解したスライド|改善は、出して終わりではありません

改善は、出して終わりではありません。ここを飛ばすと、④で決めた優先順位が正しかったのかも、②の診断が当たっていたのかも、永遠に分からないままになります。締めの作法は2つです。

  1. 直す前に、動くはずの数字を1個決める。完了率、離脱率、所要時間、問い合わせ件数。どれか1個でいい。
  2. 前後を同じ条件で測る。たとえば前後14日ずつ、同じ曜日構成で見る。期間や対象が変わると、改善の効果と季節の効果が混ざります。

数字を決めずに直した改善は、「良くなった気がする」だけで終わります。ただし、数字が動かなかった改善にも価値はあります。診断が間違っていた合図なので、③に戻れます。

⑦ AI時代のUX改善

「AI時代のUX改善」を図解したスライド|生成AIで画面を作るコストが下がり、改善案を10本作ることは簡単になりました

生成AIで画面を作るコストが下がり、改善案を10本作ることは簡単になりました。ここで、価値の置き場所が変わります。案を作る力ではなく、「どの詰まりを直すべきかの診断」と「動いたかどうかの計測」に価値が移る。作るのが速い時代ほど、③と⑥の腕がそのまま改善の腕になります。

もうひとつ、AIは診断の相棒としても使えます。画面のスクリーンショットを渡して、③の10個の問いで点検させると、人が見落とす候補を拾ってくることがあります。ただし、AIの指摘も「候補」です。頻度と深刻度の優先順位付けと、直すかどうかの判断は、数字と現場を知っている人の側に残ります。

⑧ 一緒に覚えておきたい概念

「一緒に覚えておきたい概念」を図解したスライド|UX改善の隣に置く概念です

UX改善の隣に置く概念です。

  • ユーザーインタビュー — 「なぜ」を当事者の事実から掘る調査。聞き方の設計が本体。
  • ユーザビリティテスト — 実際に使ってもらい、詰まる場所を観る検証。ニールセンの「5人で大半見つかる」の主戦場。
  • UXデザインのプロセス — 改善が工程全体のどこに座るか。UXデザインとは
  • UI/UXデザイン会社の選び方 — 外部に頼む場合の比較。18社を言葉で解析して3つに分けた

よくある質問

Q. UX改善とUI改善の違いは何ですか? A. UI改善は画面の見た目と操作部分の改善、UX改善は画面の前後を含む体験全体の改善です。順番はUX(流れ)→UI(見た目)が原則で、逆にすると使われない画面を磨くことになります。

Q. UX改善は何から始めればよいですか? A. 直す前に診断からです。行動データで「どこで詰まっているか」を見つけ、ヒューリスティック評価の10個の問いで「なぜ」の候補を挙げ、頻度×深刻度で優先順位を付けます。着手はそのあとです。

Q. ヒューリスティック評価とは何ですか? A. 専門家が経験則のチェックリストに沿って画面を点検し、問題の候補を挙げる評価手法です。利用者を集めるテストより速く安く回せるので、診断の入口に向きます。この記事の10項目はその実務版です。

Q. 改善の効果はどう測ればよいですか? A. 直す前に、動くはずの数字(完了率・離脱率・所要時間など)を1つ決めておき、前後を同じ条件で測ります。数字を先に決めない改善は、効果があったかどうかを後から判定できません。

Q. UX改善の成功事例にはどんなものがありますか? A. この記事では、実在アプリを再設計したAPP Redesignシリーズ(JR東日本・UNIQLO・TSUTAYAなど9本)と、衣服シェアリングサービスの立ち上げでモックアップ検証を反復した実例を紹介しています。共通するのは、見た目の変更より先に体験の流れを診断していることです。

Q. 行動データが無い新サービスでも診断できますか? A. できます。ヒューリスティック評価と、モックアップを使ったロールプレイングやユーザビリティテストが、データの代わりになります。少人数で速く回すのがコツで、5人程度でも主要な問題の大半は見つかります。

Q. UX改善はどのくらいの期間がかかりますか? A. 診断と優先順位付けは数日から2週間で回せます。改善そのものは範囲によりますが、頻度×深刻度で上位に絞れば、最初の1巡は小さく速く終えられます。1巡目の目的は、直すことと同時に、計測の型を作ることです。

Q. AIでUX改善はできますか? A. 診断の相棒としては使えます。画面を渡して10個の問いで点検させると、見落としの候補を拾えます。ただし優先順位の判断と、数字での効果検証は人の仕事として残ります。案を作る力より、診断と計測に価値が移っています。

この記事を書いた会社について

アルチェコ(ARCHECO)は、UXデザイン・AI開発・新規事業開発を組み合わせた事業共創スタジオです。この記事の診断の考え方は、社内のUIデザイン教科書(本文にスライド1枚を実物のまま掲載)と、実在アプリを再設計してきた9本のAPP Redesignシリーズの実務から来ています。「見た目より先に、関係を診る」という順番は、その両方に共通する背骨です。改善の診断からの伴走は、UX/UIデザインのサービスページをご覧ください。

余談ですが、あの狭い部屋は、棚を1台手放してベッドの向きを90度変えたら解決しました。増やした物より、手放した物と動かした向きが効いた。改善というのは、だいたいそういうものだと思います。

以上です。

You May Also Like