ある業務システムを納品して、3 ヶ月が経った頃のことです。
導入先のお客様にお礼の挨拶に伺ったとき、現場の事務スタッフの方が、こんな感想を聞かせてくださいました。
「使いやすい、というのとは少し違うんです。なんというか、気が散らない、という感じです」。
予想外の感想でした。私たちは「使いやすさ」を目指して設計したつもりでした。けれどその方が言いたかったのは、別のことだったのです。
そして、この一言は、私が UI 設計について長年考えてきた何かを、一発で言語化してくれました。
「使いやすい」と「集中できる」は、似て非なるものです。
「使いやすい UI」の罠
「使いやすい UI」とは何かを、一度真面目に考えてみてください。
多くの方が思い浮かべるのは、こういったものでしょう。
- ボタンが分かりやすい
- 色の使い分けで意味が伝わる
- ヘルプメッセージが親切
- アニメーションで遷移が自然
- 機能が網羅されている
これらは確かに、ユーザビリティの教科書に載っている要素です。
けれど、これらを全部詰め込むと、何が起きるか。
画面に情報が増えます。
色が増えます。
ヒントが増えます。
動きが増えます。
ボタンが増えます。
そして、ユーザーの脳は、それらすべてを処理するために、一瞬ごとに小さなエネルギーを使い続けることになります。
「ボタンの色が違う、これは意味があるのか？」
「ヘルプメッセージが出た、読むべきか？」
「アニメーションが動いた、何か変わったのか？」
「新しい機能が追加された、覚えるべきか？」
ユーザーは、UI と「対話」していないのです。UI に「対応」させられているのです。
そして、対応させられている間、ユーザーの注意は、本来やるべきタスクから少しずつ削れていきます。
集中できる UI の、3 つの条件
私たちがクワイエットリー社内で「集中できる UI」を設計するときに、繰り返し問う 3 つの質問があります。
1. この画面で、ユーザーは何をするのか？（1 つに絞れているか？）
業務システムの画面を設計するとき、私たちは「この画面で達成すべきタスク」を 1 つだけ書き出すルールを持っています。
「商品を登録する」画面なら、商品を登録すること。
「請求書を発行する」画面なら、請求書を発行すること。
「顧客一覧を見る」画面なら、顧客一覧を見ること。
複数のタスクが混在した画面は、設計時点で分割します。たとえタブで分けるという妥協であっても、画面の中で「同時にできることは 1 つだけ」を維持します。
これは、ユーザーが「次に何をすべきか」を考える認知負荷を、ゼロに近づけるためです。
2. CTA は 1 つだけか？
画面の中に、押せるボタンが 5 個あったとします。すべてのボタンの色とサイズが同じだと、ユーザーは「どれが今やるべきことか」を毎回考えなければなりません。
私たちは、画面の中で 「主要 CTA」を 1 つに絞り、それだけを目立たせることを徹底します。他のボタンは、テキストリンク、グレースケール、サイズを抑えるなどして、視覚的に劣後させます。
「次に押すべきボタン」を迷わせない。これが、ユーザーから不要な意思決定を取り去る最もシンプルな方法です。
3. 視線の階層が、1 → 2 → 3 と流れるか？
良い UI には、視線の流れが設計されています。
最初に目に入るのは何か。次に視線が移るのはどこか。3 番目に来るのは何か。
階層を作るとは、「全部を同じ大きさにしない」「全部を同じ色にしない」「全部を同じ余白にしない」ということです。一番大事な情報を、突出して大きく、他とは違う色で、余白に囲まれて配置する。これだけで、ユーザーは「ここを見ればいい」と直感的に理解します。
階層がない UI、つまりすべてが同じウェイトの UI は、見るたびに「どこから読めばいいか」を考えさせます。これも認知負荷です。
余白は、何もない場所ではない
ミニマル UI の話をすると、必ず話題になるのが「余白」です。
余白は、何もない場所ではありません。「他のものを引き立てるための、意図された空間」です。
たとえば、ある重要な数字を画面に表示するとき、その周囲に十分な余白を取ると、その数字は目に飛び込んできます。同じ数字を、他の情報と隅間なく並べると、その数字は他の情報に埋もれます。
余白は、視線の階層を作る最も強力なツールです。ボタンを大きくするのではなく、ボタンの周りを広く取る。タイトルを太くするのではなく、タイトルの上下に空白を作る。
引き算の設計とは、「装飾を減らす」ことではありません。「何が大事かを、空間で語る」ことです。
業務システムにおける、ミニマルの意味
冒頭の事務スタッフさんの言葉に戻ります。
「使いやすい、というのとは少し違うんです。なんというか、気が散らない、という感じです」。
不動産業の物件管理システムを毎日 8 時間使い続ける方にとって、「派手で楽しい UI」は罰ゲームに近いものです。アニメーションが動くたびに視線が奪われ、ヘルプが出るたびに集中が切れ、ボタンが多いたびに迷う。
そういう環境で 8 時間働き続けるとどうなるか。夕方には、判断力が枯れ果てます。
逆に、視覚情報がミニマルに整えられた UI で 8 時間働くとどうなるか。同じ仕事量でも、夕方の疲労感が違います。「気が散らない」というのは、つまりそういうことです。
私たちが業務システムを設計するとき、最終的に作っているのは、画面の見た目ではなく、ユーザーの 1 日の集中力の総量です。
結び ── ミニマルは、優しさの形である
ミニマルな UI とは、デザインのスタイルではありません。
ユーザーへの、ひとつの優しさの形です。
「この画面で、あなたが何をすべきか、私たちは整理しました」
「目立たせるべき情報を、迷わず見つけられるようにしました」
「不要な選択を、最初から取り除きました」
そういうメッセージが、装飾を引き算した画面から、無言で伝わります。
派手さで人の注意を引くことは簡単です。けれど、人の注意を引いた後、それを返せるかは別の話です。
私たちは、ユーザーから注意を奪わない設計を、これからも続けていきます。
著者プロフィール
橋本 周（はしもと しゅう）
株式会社QUIETLY 代表取締役。Web サイト制作・業務システム開発の現場で、長くデザインと UX の境界を考えてきました。