使いにくいUIデザインを作ってみた（会員管理システム編）
今日は番外編として、「患者と主治医」という構図でHighlight診断の様子を再現してみました。アプリのUIデザインを手掛けたのはレトロマスターと呼ばれる中村 秀樹さん。クライアントから使いにくいと言われ続けていて、しぶしぶ相談に来て、Highlight診断を受ける、という設定です。
⚠️デザイン課題を放置するリスクをお伝えするために、診断の様子を再現した架空のストーリーです。企業名、人物名、サービス名などもすべて架空です。特定の団体、人物、モノ、コトを批判する意図はありません。
ペルソナ
Windows 95のフィーバー世代、30年前からUIデザインの知識がアップデートされていない自称巨匠系デザイナー。
基本情報
名前：中村 秀樹
ニックネーム：レトロマスター
年齢: 50歳
職業: フリーランスデザイナー
居住地: 東京都内
経歴
1990年代初頭にデザイン専門学校を卒業
Windows 95発売時に中堅ソフトウェア会社でキャリアをスタート
2005年頃からフリーランスとして活動開始
性格・特徴
自信家で自身のデザインスキルを高く評価している
「昔ながらの」デザイン手法にこだわりを持つ
自身を「巨匠」と称することがある
スキルセット
Windows 95時代のGUIデザインに精通
ピクセルパーフェクトな設計にこだわる
Photoshop CS2を主な制作ツールとして使用（最新版への更新を拒否）
価値観・信念
「使いやすさ」は視覚的な分かりやすさから生まれると信じている
フラットデザインやミニマリズムを「手抜き」だと考える
スキューモーフィズムこそが最高のUIデザインだと主張
課題・悩み
最新のデザイントレンドについていけず仕事の機会が減少している
クライアントから「古臭い」という評価を受けることが増えた
若手デザイナーとのコミュニケーションに苦戦している
目標
自身のスタイルを守りつつ現代のプロジェクトで活躍すること
「クラシック」なデザインの価値を若い世代に伝えること
自身の経験を活かしたデザインコンサル業を確立すること
Highlight診断
ペルソナの時代背景をイメージしながら、わざわざ作った信じられないほど使いにくいUIデザインがこちらです。
なかなかの出来栄えだと思いませんか😎。仲良しのお客さん数人に見せてみましたが、誰もが「見たことある！」という反応をしてくれました。ちなみに、いまだにこういうアプリが稼働している世界があります😅
早速診断をスタートします。中村 秀樹さんを「レトロマスター」と記します。
■ ヘッダーロゴ
主治医：中村さんこんにちは。私と同じ世代ですね！カジュアルにお話ししましょう。今日はよろしくお願いします。まずヘッダーロゴから行きましょうか。このデザインについて説明をお願いします。
レトロマスター：世の中のアプリって、だいたい左上にシステムの名前を置きますよね。イタリックにするとおしゃれ感が出るのでやってみた感じですね。自分的に絶妙な斜め具合だと思うし、斜め上の発想ができるデザイナーなんだなと感じてもらえたら光栄です。
主治医：おしゃれかどうかは人によって好みがあるので触れません。まず、中村さんにとって衝撃的な事実からお伝えしないといけません。日本語フォントには、そもそもイタリックがないんです。
レトロマスター：えっ……。そうなんですか。
主治医：西洋のイタリック体は手書き文字から発展し、引用や強調、外国語の単語を区別するために使われます。一方、日本では書道の伝統により、筆圧や線の太さで表現を行い、強調には太字や下線、傍点が使われます。日本語フォントにイタリックがないのは、文化的背景と言語の特性に基づく選択であり、代替の表現方法が発達した結果といえるんです。
日本語をイタリックで表記しているサイトをときどき見かけますが、あれはたぶん欧米のテンプレートをそのまま使っているだけです。タイポグラフィーの知識があるデザイナーなら、日本語にイタリックを使うことはほぼありません。話が長くなるので、詳しくは書体デザイナーの巨匠、Monotype.の小林 章さんの本を読んでみてください。
ユーザビリティ観点から1点だけ指摘をすると、日本語文字をイタリックにすると視認性が低下します。特に漢字は明らかに読みにくくなります。
レトロマスター：でも、日本語もイタリックにできますよね！？
主治医：一部のアプリの話ですね。あれはソフトウェアで機械的に傾けただけです。CSSで傾けるのも同様ですね。イタリックは西洋の慣習であり、日本語にはそのような慣習がありません。別の表現方法で強調するのが適切です。
レトロマスター：まったく知らなかった……。自分的にかなりウケが良いと思ってたんですけど、ここからしてクライアントに嫌われているのかもしれない。
主治医：ここは一般的にロゴが置かれる場所ですよね。ロゴ制作はおそらく中村さんの作業スコープではないと思いますが、さっと作ってみました。
ChatGPTとCanvaがあれば3分くらいで作成できます。「Engagio（エンゲージオ）」という名前は「顧客と共に築く信頼の絆」みたいなイメージです。
ロゴってそのアプリの顔になりますからね。UIがラフ段階であっても、こういうものを「雑ですけど仮置き用に作っておきました」という感じでブランディングやマーケの人たちが持ってくる前に挿し込んでおくと、早い段階でクライアントから好感されると思います。置くだけでアプリが品格っぽいものを持つようになるんです。そういう力がロゴにはあります。
■ ヘッダーメニュー
主治医：次にヘッダーメニューに行きましょう。いろいろ気になるところがありますが、まずは説明をお願いします。
レトロマスター：システム全般に関する機能をここに寄せました。ヘッダーってそういうの置きますからね。特に通知の件数は赤く目立つようにしていて、ユーザーは絶対に見逃せないし、気が利くと感じてると思います。ちょっと自信あります。
主治医：ヘッダーにシステム全体に作用するアクションを置くのは適切です。ただ、使用頻度はどうでしょう。CSV読込設定は頻繁に変更しますかね。使用頻度によって最前面に出すか、メニュー内に隠すか決めるのが一般的です。
それと赤い通知の件数ですが、見過ごせない致命的な問題があります。通知というのは、電話中の人に割り込んで話しかけるようなものなんですよ。通知することがないならばユーザーに知らせる必要がないですよね。「0件」という表示はまったく意味がありません。逆に無駄に目を引きユーザーの認知負荷を高めてユーザー体験をネガティブにしています。
レトロマスター：うーん、そういう発想はなかったなあ。ただ目立つのは良いんですよね？
主治医：はい。むしろ目立たたせるために、このようなビジュアルにします。ちなみに、この色はRGB値でいうと#FF0000ですよね。この赤背景と黒文字の組み合わせは、WCAGのコントラスト比レベルAAを満たしていますが、目に刺さります。中村さん、改めて見てみてどう思いますか？
レトロマスター：まあ確かにそういわれればそうですね。目立つことを意識し過ぎたか……。
主治医：地球が滅亡するレベルのアラートなら良いのかもしれません。毎日これを見るユーザーのことを考えたら、もっと目に優しく、かつ警告として伝わる色の組み合わせがいくらでもありますよ。
■ サイドメニュー
主治医：次にサイドメニューに行きましょう。このメニュー項目はどういう方針で並べていますか？
レトロマスター：会員管理システムなので、それに関する機能をここに寄せ集める方針です。先頭にヘルプ文章も入れていて、使い勝手に配慮してます。ユーザーは凄い親切だと思ってくれているはずです。迷いようがないですからね。
主治医：顧客というワードからつながる構成を目指したのは良いことですね。ユーザーにとって、このシステムがどういう機能セットを持っているかを理解するのに役立ちます。しかし、私は親切だとは感じませんでした。
レトロマスター：えっ、なぜですか？
主治医：理由をざっと述べます。
「会員管理システム」と言いつつ「顧客」というワードを多用しており、管理対象が会員なのか顧客なのか不明確。
操作方法の説明がノイズ。メニューの役割はPCユーザーのメンタルモデルに根付いていると仮定してよい。説明がないと使えないのは問題。
現在の選択状態が分かりにくい。「メニュー」と「顧客名簿閲覧」が同じ書体・サイズ・装飾で表示され、ユーザーが迷子になる可能性が高い。
文言が冗長で一貫性がない。「エントリー」の唐突感や「顧客編集」と「顧客情報編集」の違いが不明確。抹消に至っては「世界からおまえを抹消する」、ような脅しに感じられる。
情報が適切に分類されていない。「パスワード変更」は顧客向けではなく、ログインユーザー向けの機能ではないのか。
以上の推察から、最適解はこうです。
登録
編集
削除
口座管理
設定
統合できそうなもの、または別の場所に置くのが適切だろうものを私の主観でばっさり削りました。すっきり伝わりやすくなったと思いませんか。
レトロマスター：確かに。会員管理システムであることは分かってるので、そこは省けるってわけですね。ここは見直さないとダメだな……。
主治医：（心の声：「ここは」じゃなくて「ここも」だぞw）
■ テーブル
主治医：このテーブルがメインコンテンツですね。まずは説明をお願いします。
レトロマスター：ノートPCで使うことをイメージして、小さい画面でも多くの情報が見れるようにしました。ここは実はかなり苦労したんです。どれだけ詰められるかの戦いでしたね。苦労の成果というか、私的に究極のミニマリズムを達成できたと思ってます。
主治医：小さなスクリーンで多くの情報が把握できるのは、一般的には良いことです。しかし、読みやすさとは別の話です。人間には目休めとなる余白が必要なんですよ。
ぎちぎちに詰めた努力は画面を見ればわかります。しかし、人間が一度に処理できる情報量は限られていて、こういう画面のことを情報過負荷（Information Overload）と呼ぶんですが、要するに情報量に圧倒されて、認知負荷が増大した結果、ユーザーの脳が疲れ、正常な判断が難しい状態になるんです。
レトロマスター：苦労したのに、逆に読みにくくなっているなんてショック……。
主治医：言うかどうか迷いましたが、中村さんのためを思ってお伝えします。デザインの用語についてですが、中村さんのデザインはミニマリズムとは言いません。ミニマリズムは、徹底的にかつ慎重に不要なものを削ぎ落として初めて達成されるものです。正直なところ、私から見て、中村さんのデザインはむしろマキシマリズムです。
レトロマスター：ショックミー！www（奇声）
■ アラート
主治医：画面の下部に警告文が表示されていますね。まずはお話を聞きたいです。
レトロマスター：これはユーザーに厳守してもらわないといけない、まさに警告文なんです。このシステムにおける憲法といっていいものですね。これを守れないと最悪の場合、控訴されたり逮捕されることになります。だから厳しく、かつピュアな赤でわざと目に刺さるようにデザインしました。
本当はフェラーリのようなレッドにしたかったです。でもここはおしゃれ感出すとこじゃないなって思って泣く泣く自粛しました。こういう判断って一般のデザイナーはなかなかできないですよね。僕は巨匠と呼ばれる立場なのでお手本にならないとダメなんですよ。ユーザビリティの観点から見ても、ここにケチをつける人はいないはずですね。
主治医：警告文を読むと、個人情報の取扱いについての注意事項に見えます。控訴されたり逮捕されたりするかどうかは、企業のコンプライアンスや従業員の行動結果によると思いますが、まあ言いたいことは分かります。
ストレートにいうと、これは強制退去のような通告に近い文章です。そして意味がよく分かりません。憲法のような文体にしたかったとしてもですよ。「管理者権限の付与実行が必要」って中村さん、読み上げてみてください。舌嚙みそうになりませんか。「管理者権限が必要です」で済む話だと思います。
レトロマスター：クライアントからの要望だったんですよ。
主治医：中村さんは熟練デザイナーとして、クライアントと戦わないといけないです。クライアントは利益向上を重視しがちですが、ユーザーが使ってくれなければ売り上げにはつながりません。だから、中村さんにはユーザー体験の重要性をクライアントにしっかり説明し、改善を実現する責任があるはずです。
レトロマスター：仕事をもらっている立場なので、なかなか強くいえないですよ。
主治医：それは中村さんが超えないといけないハードルですね。議論って喧嘩じゃないですよ。本質を追求するための意見交換です。私の過去の経験則でいえば、そういう姿勢はむしろクライアントから信頼されます。こういう戦いを積極的にしていかないといつになってもデザイナーの地位は上がりません。「見た目を作る人」と見なされ続けます。私も頑張ってるので、中村さんも頑張ってください。
レトロマスター：ちょっと自信がないけど頑張ってみます……。
主治医：あと「固くお断りしております」も違和感がありますね。この文章から推察するに、そもそも個人情報をローカルPCにダウンロードできたらダメなんじゃないんですか。だとしたら、ダウンロードできないデザインと仕様にすべきだと思いますよ。そうしたら警告文なくせるかもしれません。そういう引き算をしていくのがミニマリズムです。
言いたいことご理解いただけましたかね。あっ、私がユーザビリティ観点からケチをつけた初めての人間になりますねw
レトロマスター：おっしゃる通りで耳が痛くなってきました。確かな知識もないのにユーザビリティという言葉を軽々しく口にしてきちゃったなと。ちょっとショックミーです。
■ アクション
主治医：画面右にアクションが並んでいます。この意図を教えてください。
レトロマスター：これはなかなか画期的なデザインなんです。ボタンを丸くするって流行ってますよね。最新のトレンドを抑えつつ、良く使うものをアクションとして並べました。ここまでトレンディなシステムはなかなかないです。自信作です。
主治医：デザインのトレンドは変化します。丸いボタンは昔からありますが、スマホの普及で一般化しました。GoogleのMaterial DesignのFloating Action Button（FAB）はその一例です。
Material DesignではElevation（高さ）によりUI要素の優先度を示しますが、この丸ボタンにはElevationがないので、ボタンとしての認識されにくいです。さらに、ダウンロードは丸から文字がはみ出ていますよね。こういうことが起こったときは、それが適切ではないことを示す神からのお告げだと思ってください。形状を見直すべきというサインです。見逃さないでくださいね。
レトロマスター：確かに……。冷静に見るとクリックできるようには見えないかもですね。丸ボタンにこだわる理由もこのように指摘されると怪しくなってきました。
主治医：設定、取消、完了については、どの機能と文脈がつながっているのか分からないので、ごめんなさい、この箇所に関する診断は割愛させてください。
■ チャットボット
主治医：「いらすとや」さんのイラストを用いたUI要素ですかね。まずどういう機能なのかを教えて欲しいです。
レトロマスター：クライアントがチャットボットを付けたいというので付けました。なので、これはチャットボットです。困っているユーザーを助ける戦隊ヒーローは、このシステムに相応しいキャラになると考えて置きました。
PCロボに聞いてみよう、という文章を入れてるんですが、ちょっとクスっとしませんか。業務用システムに遊び心を取り入れた、かなり先進的な事例になるはずです。そのうちどこかから取材が来るんじゃないかなと待ってます。
主治医：たぶんチャットボットだとは思いました。頼りになりそうな存在感を出していますね。ちなみに他の場面で「いらすとや」さんのイラストを用いている場面はありませんよね。念のための確認ですが、商用利用には20点までという規約があるので、そこはチェックしたほうがいいですよ。
本題に入りますが、まずこの戦隊ヒーローがクリックできるように見えません。ノーマン博士の言葉でいうと、アフォーダンス（暗黙的示唆）がなく、シグニファイア（明示的要素）もない状態です。イラストがただ置かれているだけ。これがインタラクトでき、チャットが起動するということにユーザーは気づけないでしょう。
レトロマスター：そこまでは考えてませんでした。自分の中で戦隊ヒーローがはまりすぎて、使うユーザーの気持ちが見えてなかったです。
主治医：それと「PCロボに聞いてみよう！」は、意図は分かりますが唐突感がありますね。さっき警告文は憲法のようだとおっしゃっていたじゃないですか。急にここだけ先生が幼稚園児たちに話すような口調になっていて、システム全体の文言に一貫性が欠けているといえます。ニールセン博士のユーザビリティ10原則でいう4番の「一貫性と標準化（Consistency and Standards）」に反しています。あと黒枠で囲っているので、入力フィールドのように見えますね。これも先ほどの原則に反しています。
レトロマスター：指摘を受け全体を見直してみると、その場その場で文言を決めていたことに気づきました。読みずらい、伝わりずらい……。使いにくいと言われて当然に思えてきました。
主治医：PCロックというのは……話が長くなりそうなので、この箇所の診断は終わりにしましょう。
■ バックグラウンドテクスチャ
主治医：最後の確認です。バックグラウンドに布のようなテクスチャが置かれています。意図を教えてください。
レトロマスター：これは古き良き時代へのオマージュです。私が駆け出しのUIデザイナーだったころはグラフィックの性能が低くてこういうことができなかったんですよ。いまは違います。ここだけの話ですが、最初は動画を置いていたんですよ。背景が動くってかなり斬新ですよね。さすがにそれは行き過ぎているというか、時代がまだ自分についてきていないと思うので、導入を見送ると言う大人の決断をしました。
主治医：中村さんが誰かや何かにオマージュをささげたいという気持ちは尊重したいです。しかし、端的にいうと、このバックグラウンドのお陰で画面上の全UI要素の視認性が著しく下がっています。
例えばmacOS Sonomaでは、アニメーション壁紙がデスクトップに深みとインタラクティブ性を加えています。動画のように動き続けるのではなく、トランジション効果として使用され、ユーザー体験を向上させています。
さて……。ここまでの話を聞いて、私と年代が近いですし同じ時代を生きてきた仲間としてはっきり伝えさせてください。時代が中村さんに追いついてないのではなくて、中村さんが時代に置いていかれています。トレンドは目まぐるしい速度で変わっています。若い世代にバトンタッチするのも私たち世代の役目だと思いますね。
レトロマスター：周りにこういうことをやれる人間がいなかったので、私がデザインを担当してきましたが、今日の話を聞いて自分がいかに傲慢だったかを思い知りました。デザインの指摘もそうですが、先生と話せてよかったです。
まとめ
実際のHighlight診断は、おおむねこういう流れでインタビューをして、課題を指摘し、改善案を提案します。アーキビジョンにはニールセン博士のユーザビリティ10原則に基づく独自のチェックシートがあり、診断結果をスコアとチャートで可視化しています。
このように可視化されると、「どの軸を改善していくか目標を定めるのに役立つ」と声をいただけて、その後の本格改善に伴走する事例も出ています。
予想以上に長くなりました🙏 今回は架空のシステム、架空の相談者を元に、Highlight診断がどのように行われるかその一端を紹介しました。アプリやシステムのデザインに関する悩みがありましたら、気軽にお問い合わせください！
お問い合わせはこちらから（ヒアリングからお見積りまで無料です）。
この記事が気に入ったらサポートをしてみませんか？