使いにくいUIデザインを作ってみた（ファッションECアプリ編）
めちゃくちゃ使いにくいシリーズが第3回目を迎えました。今回はファッションECアプリです。
⚠️デザイン課題を放置するリスクをお伝えするために、診断の様子を再現した架空のストーリーです。企業名、人物名、サービス名などもすべて架空です。特定の団体、人物、モノ、コトを批判する意図はありません。
概要
前提条件は下記の通りです。前回と同様に「患者と主治医」という構図でHighlight診断の様子を再現していきます。
患者：大手アパレル企業でEC事業責任者を務める小松 由美さん
診断対象：同社が展開するECアプリ「Shinobee」
アプリ形式：スマホネイティブアプリ
スクリーンショット：トップと検索の2画面
課題：フィードバックに応えても使いにくいという意見が絶えない
悩み：競争が激しい業界のためユーザー体験が二の次になってしまうことがある
ペルソナ
「収益もユーザー体験も大事」と考えるEC事業責任者。競争の激しいファッション業界で両立を目指しているが、時折、収益確保のためにマーケティング強化を優先し、ユーザー体験が後回しになることも。
基本情報
名前：小松 由美
ニックネーム：ECクイーン
年齢：42歳
職業：大手ファッションブランドのEC事業責任者
居住地：東京都内
経歴
20代にファッション業界に就職、ブランドのマーケティングを担当
30代後半にEC事業へ異動し、オンラインショップの売上を拡大
現在は大手ファッションブランドのEC事業全体を統括している
性格・特徴
実務的かつ数字重視の一方で、ユーザー体験にも大きな関心を持っている
競争が激しい業界の中で、収益目標を達成するために、時折マーケティング施策を重視しすぎてしまうことに葛藤を感じる
部下に対してはフレンドリーで、チーム内の意見を尊重しつつも、最終的には結果を求める姿勢
スキルセット
ECサイト運営やオンラインマーケティングに精通
データ分析を通じてユーザー行動を把握し、施策を立てるスキルがある
UI/UXデザインの基本的な知識があり、チームと協力して改善に取り組む能力がある
価値観・信念
「収益は重要だが、ユーザー体験もその鍵である」と信じている
競争の激しいファッション業界で、トレンドに敏感なユーザーを引きつけ、満足させることがビジネスの成功に直結すると考える
ただし、収益確保が急務となる局面では、マーケティング施策に集中するあまり、ユーザー体験の改善が後手に回ることもある
課題・悩み
マーケティングとユーザー体験のバランスを取るのが難しく、マーケティングに偏りすぎた際には、ユーザーからの「使いにくい」というフィードバックが増える
ユーザーがスムーズに商品を見つけられず、購買までのプロセスが複雑だと感じることが多い
収益の追求とユーザー体験の改善をどちらも両立させたいが、限られたリソースの中でそれを実現するのが課題
目標
収益目標を達成しつつ、ユーザーにとって使いやすいアプリを実現すること
マーケティングとデザインのバランスを取り、トレンドを押さえながらも満足度の高いユーザー体験を提供すること
競争の激しい業界でユーザーの信頼を勝ち取り、リピーターを増やすこと
Highlight診断
早速診断をスタートします。小松 由美さんを「ECクイーン」と記します。
■ 自己紹介
主治医：小松さんはじめまして。今日はよろしくお願いします。実は少し緊張しているんですよ。
ECクイーン：えっ、なぜですか？
主治医：Shinobeeの服を良く買っていて、アプリも良く使っているからです。好意的な先入観を捨てて診断にあたらないといけないなと。
ECクイーン：いつもご愛用いただきありがとうございます（笑）。今日はよろしくお願いします。実は私も少し緊張しています。
主治医：えっ、なぜですか？
ECクイーン：内緒で来ているんです。私はEC事業責任者として、収益もユーザー体験も高めなければならない立場です。しかし、さまざまな事情で時にユーザー体験が犠牲になっていることに後で気づくことが多くて。アプリは外部パートナーに伴走してもらっていた時期もありましたが、現在は内製しています。そのため、しばらく社外の専門家の意見を聞いていません。そんなこともあって、チームの誰にも言わずにこっそり来ました。
主治医：なるほど、小松さんの危機感が伝わってきました。お互い緊張しているならおあいこですね（笑）。緊張は捨てて、ユーザー中心設計の観点から、アプリのことを一緒に見ていきましょう。
ECクイーン：お願いします！ユーザー体験と収益のバランスについて、客観的な視点をいただけると嬉しいです。
■ 対義語
主治医：早速本題に入りましょう。トップ画面、上から順にいきましょうかね。まずはタブのラベルについてです。この命名方針を聞かせてください。
ECクイーン：Shinobeeには女性向け、男性向け、子供向けの3つのカテゴリーがあります。そのままだと百貨店さんのような格式高いカテゴリー名になってしまうので、カタカナ表記にしています。
主治医：並び順にも配慮がありそうですね。
ECクイーン：はい。アパレルは基本女性がメインターゲットです。女性のほうがファッションへの投資意欲が男性よりも圧倒的に高いんです。でも、レディースを先頭においてるのは単にメインターゲットだからじゃないんです。弊社はSDGs、リサイクル・リユース、地域社会への貢献など、さまざまな社会課題の解決に取り組んでいますが、同時にダイバーシティとインクルージョンも大切にしています。いまの時代に配慮した並び順なんです。
主治医：良く分かりました。とても適切な方針だと思います。一つ確認したいのが、レディースという呼び方です。「ウィメンズ」にしなかったんですね？
ECクイーン：そこかよ！（笑）
主治医：そこだよ！（笑）、というのは半分冗談で「レディース」という呼び方で問題ない認識です。アプリ全体を見渡せば、御社が改善を繰り返しているのは伝わってきます。ので、小さなところから始めたいなと思いまして。
UIデザインでは、一貫性のある対義語の使用が重要な原則の一つです。これはヤコブ・ニールセンのユーザビリティ10原則の「一貫性と標準化（Consistency and Standards）」に関連しています。いくつか例を挙げますね。
開く / 閉じる (Open / Close)
有効化 / 無効化 (Enable / Disable)
表示 / 非表示 (Show / Hide)
追加 / 削除 (Add / Delete)
登録 / 解除 (Register / Unregister)
例えば「追加」と「削除」は、ユーザーにとって一つは肯定的な操作であり、もう一つが逆の操作であることが直感的に理解できますよね。この対義性により、ユーザーがボタンやアクションの効果を誤解するリスクが減り、インターフェースの学習コストを低く抑えられます。また、統一された対義語を使うことで、UI全体の一貫性が保たれ、UXが向上するんです。
ECクイーン：なるほど、対義語の一貫性という視点は確かに見落としていました。これって、ユーザーが迷わず操作できるようにする工夫なんですね。
主治医：そうですね。一貫性のある対義語を使うことで、ユーザーが迷わず、スムーズに操作できるようになります。これは特に新規ユーザーや、あまりアプリを使い慣れていない方々にとって重要です。慣れたユーザーでも、操作がより速く、正確になる効果があります。
話を戻しましょう。私の主観ですが、レディースとメンズのほうがカジュアルで日常的に使われる表現のように思います。一方、ウィメンズとメンズはややフォーマルな響きがあって、他社ブランドではその呼び方が多いですよね。それで、御社はどういう方針なのかな、という確認の意味での質問でした。どちらも「女性用」「男性用」を指していますし、御社が適切と思うほうが正解だと思います。対義性の話だけ覚えておいてもらえたらと。
ECクイーン：ありがとうございます。こういった細かい点が実はユーザー体験に大きく影響するんですね。アプリ全体でどうなっているか、デザインチームにチェックしてもらい、必要に応じて統一化を図りたいと思います。あわせて、実際のユーザーの反応も確認できるといいかもしれません。
■ 可読性
主治医：アパレルのECはトップ画面が特徴的なアプリが多い印象ですが、Shinobeeは際立っていると思います。ここについて、アパレル本職でかつ事業を統括する小松さんから説明を聞きたいです。
ECクイーン：服は人が着るためにデザインされるものです。着用して初めて価値が伝わる商品です。メインビジュアルの全面にモデルの着用写真を採用しているのは、服の魅力を最大化するための施策なんです。
主治医：その施策は効果的だと思います。実際、見惚れてしまうことがあります。
ECクイーン：うわぁ、そういってもらえてうれしいです。
主治医：余談になりますが私は学生時代、古着屋でバイトしてたことがあって、ファッションが好きなんです。だから着用シーンが載ってない服をオンラインで買うことはまずありません。小松さんの、「人が着て初めて魅力が伝わる」という考えに共感できます。
ECクイーン：弊社は撮影専用スタジオを社内に用意していて、モデルもそうですが、専属のフォトグラファーもいます。私たちの生み出す服が最も美しく見えるビジュアル作りにコストをかけています。
主治医：素晴らしいですね。御社だからこそできることでもあると思いますが、小さなブランドでも、やるところはスタッフの着用写真を載せていたりしますよね。ビジネス観点で見れば、結局は企業努力という話になりますが、私はファッションには人生を豊かにする力があると信じています。だから、小さいことからでもやって欲しいと願ってます。
話を戻すと、Shinobeeのメインビジュアルの魅せ方は秀逸だと思います。ただ、文字の可読性に問題があります。キャッチコピーや商品名、価格などが表示されていますが、いまの白文字は明るい写真との相性が悪いことが明白です。ユーザーテストをしたら「読みづらい」という声が圧倒的多数になるはずです。
ECクイーン：そこは社内でいつも議論になっていますが、現状こうなっちゃいます……。メインビジュアルを邪魔しないよう、デザイナーが文字に影をつけて何とかしのいでいるのが実情です。
主治医：社内での議論の様子が目に浮かびますね。デザイナーさんの対応は適切だと思います。フォントも変えていますね。M PLUS 1でしょうか。OS標準のものよりもシンプルでモダンなデザインが特徴で、視認性が高いフォントの一つです。このフォントは日本語と英語の両方でバランスの取れた字形型が採用されていますので、小さなサイズでも読みやすくShinobeeの世界観にあっているように思います。読みやすさに配慮しているのに、抜本的な解決には繋がっていないのが現状という感じですね。
WCAGというウェブコンテンツのアクセシビリティガイドラインがありますが、これはアプリにも適用できるガイドラインです。今回の写真と文字の組み合わせで、この基準を満たせているか疑問です。「読みづらい」となると、御社のメッセージが相手に届かない可能性が高まるということです。ここまでの話を踏まえて、小松さんはどう思いますか？
ECクイーン：メインビジュアルも魅せたいし、メッセージも伝えたいという社内方針は遵守すべきだなとは思ってます。ビジネス的には両立が理想的ですから。
主治医：社内のことはいったん忘れましょう。小松さん個人はどうあるべきだと考えてますか？
ECクイーン：個人的には……そうですね、読みづらいメッセージを掲載するのは本末転倒だと思います。結局、ユーザーに伝わらないなら意味がありませんから。多少メインビジュアルの効果が下がっても、文字の読みやすさは確保すべきだと考えます。
主治医：ありがとうございます。それを聞きたかったです。ユーザー体験を重視する姿勢が大切ですね。御社の新商品展開の速さを考えると、効率的な解決策が必要です。メインビジュアルを、なるだけ犠牲にせずに改善する案を、散々試してきたとは思いますが、いま一度検討してみてください。参考案をいくつか出しておきますね。
文字に輪郭や影をつける
いまよりも、もっとはっきりと文字に濃い影（ドロップシャドウ）や輪郭を付けることで、どんな明るさの背景にも対応可能にします。影や輪郭によって文字が背景から浮き出るように見えるため、ランダムな写真に対しても視認性が維持されます。
文字の色を動的に変える
写真の明度に応じて、文字色を動的に切り替える方法もあります。明るい写真のときは黒い文字、暗い写真のときは白い文字に自動で切り替えることで、コントラストを適切に維持できます。
文字に背景をつける
文字の背景に固定の色を使ったボックスを付けます。たとえば、黒や白のボックスの中に文字を配置することで、どのような背景であっても文字のコントラストが保たれます。この場合、背景ボックスに少しの透明度をつけると写真との一体感も持たせられます。写真の明度に応じて、ボックスの背景を濃くしたり薄くしたりといった対策も有効です。
グラデーションを写真に使用
写真全体に上下のグラデーションをかけ、写真がどのように変わっても文字の部分が見やすいようにします。例えば、上下から中央に向かって暗くなるグラデーションを入れることで、中央の文字の部分が常に見やすくなる効果があります。
ECクイーン：ありがとうございます。いただいた参考案を持ち帰って、デザイナーとマーケティングチームを交えて議論し、ユーザビリティとブランドイメージのバランスを取りながら、最適な解決策を見出していきたいと思います。個人的な意見も大切にしつつ、チーム全体で良い方向性を見つけていきたいですね。
■ ツールチップ
主治医：トップ画面の最後の質問です。ツールチップの意図を教えてください。
ECクイーン：これは最近のアップデートで追加された機能です。弊社の顧客層はさまざまな年代で構成されるので、使いづらい以前に「使い方が分からない」という方もいらっしゃいます。そういう方に向けた配慮として一時的に表示されるものです。一定時間表示されると自動的に消えます。
主治医：私も使っていて気づきました。御社はかなり積極的にアンケートを取っていますよね。「使い方が分からない」というのは定量データに基づいていると思いますが、このツールチップの効果についてのデータはもう取れてますか？
ECクイーン：いえ、まだ分析できるレベルの数は集まってないです。
主治医：推察になりますが、効果は出ていると思います。しかし、その効果は限定的なものになるはずです。既に使い方を知っている人には邪魔に感じられると思うので、そうでない人への対策という意味での「効果あり」という推察です。だけど、そうでない人だって、いずれは使い方を覚えますよね。そうなると、この表示は誰にとっても邪魔になり、うっとうしいと感じるユーザーが増えるでしょう。小松さんはこの問題をどう考えますか？
ECクイーン：確かにそうなってしまうことは予想できます。ただ数の原理というか、使いにくいという声が上がる限り、続けざるを得ない対策だなと。
主治医：小松さんの立場からすると、そうかもしれません。ただ、それは持続可能な発想ではないですよ。水が溢れたら塞ぐ、その繰り返しじゃないですか。使うために説明が必要なアプリは、UI破綻の兆候を示しています。水が溢れない抜本的な対策が急務ですよ。まあ、そこも含めて課題と感じてるからこうしてきてくれていると思いますが。
ECクイーン：そうですね。その「抜本的」が今すぐには思いつきませんが。
主治医：まずシンプルに考えてみてください。私たちは毎日スマホを使って仕事をしたり、友達とのコミュニケーションを楽しんだり、趣味を満喫したりしています。日ごろ使うアプリが、どういうUIデザインになっていて、それを使ったときにどんな感情を抱くか良く観察してみることです。Shinobeeのトップ画面は、かなり大胆なUIですが、いま一度見直してもらいたいのは、ここが個性を出す場所として適切なのかどうかです。
ときどき見かけませんか？ 独特なインターフェースになってて使い方が分からず、あきらめて離脱してしまうことが。私から見たら、そういうUIはデザイナーのエゴです。ECアプリはアートの展示場所ではないですよね。独自のUIデザインを追求するのはポジティブなことですが、ECアプリの最終ゴールってユーザーに商品を買ってもらうことじゃないですか。だとしたら、このトップ画面は抜本的に見直す必要があるはずです。
ECクイーン：さっき「小松さんはどう思うか」と聞かれてハッとしました。大きな組織ではトップダウンでいろいろなことが下りてくるし、競争が激しい業界なのでマーケ施策もどんどん打ち込まれていきます。そんな中で自分で良くないって感じてもノーといえないことがあるのは確かです。内製の課題、組織の課題、いろいろ考えることがありますが、自分がどう思うかという視点をもっと大切にしないとですね。そして勇気をもってノーというと。
主治医：組織論を語れる身分ではありませんが、こうして相談に来てくれた小松さんの勇気をリスペクトします。既に戦っていると思いますが、ノーと言える人間がいなくなると、きっとアプリのユーザー体験は崩壊します。私の知り合いで、変えられないことを変えることに情熱を傾けている若者がいます。最初は数人で始めて、徐々に「ノー」に共感する人間が現れ、いまでは数十人の組織になっているんですよ。社内でも社外でも必ず味方になってくれる人が出てきます。あきらめないで欲しいですね。
ECクイーン：ありがとうございます。UIの改善とビジネス目標のバランスを取ることの難しさを実感しています。でも、ユーザー中心設計の重要性を改めて認識しました。社内でこの視点を共有し、段階的にでも改善を進めていきたいと思います。先生は味方ですよね！？
主治医：もちろんですよ、いまのところ（笑）。私は中立に位置することに細心の注意を払っているので、誰かや何かに肩入れしません。あっ、これは仕事の話でプライベートではフレンドリーですよ。
ECクイーン：フレンドリーって自分でいうか！（笑）
主治医：突っ込みありがとうございますw
■ 検索容易性
主治医：では次の画面に行きましょう。トップ画面で検索ボタンをタップした時に遷移する画面ですね。全体を見る前に、このボトムナビ領域について説明をお願いします。
ECクイーン：Shinobeeはキーワード検索が少ないという定量データがあるんです。でも、商品のカテゴリーから探すといくつか操作が必要になってしまうので、商品を一発で見つけたい人向けに検索ボックスを配置しています。
主治医：「X」ボタンが出てきて、これが閉じるボタンになってますよね？
ECクイーン：はい、そうです。
主治医：Shinobeeのボトムナビは、左から「ホーム、検索、お気に入り、カート、プロフィール」という5つの機能が並んでいますね。ここは特に問題ないと思います。問題は、この「X」ボタンなんです。
ECクイーン：えっ、そうなんですか！？
主治医：一般的にボトムナビというのは、コンテキストの切り替えです。ニュースアプリで例えると速報と連載記事ってユーザーの利用文脈が異なりますよね。Shinobeeには大機能が5つあり、それぞれの機能へのサブトップ画面に移動できることをユーザーは期待する、と考えるべきです。ところが、この検索画面はそうなってません。スクリーンショットでは分かりにくいですが、実際にアプリを操作してみると、ホーム画面全体を覆い隠すようにオーバーレイ表示される挙動になっています。
ECクイーン：そうですね。この挙動が問題ですか！？
主治医：はい、今回持ってきてもらった中で一番問題のある箇所です。ユーザーはトップ画面で検索ボタンをタップしていますよね。なのに、検索アイコンは反転せず、ホームのアイコンが反転しています。ユーザーが見ているのは検索画面、反転しているのはホームアイコン。この状態が一致してません。検索画面が全画面を覆ってますよね。ユーザーは検索画面に遷移したと感じるはずです。だから「X」ボタンで閉じたときに、ホーム画面に強制的に戻されたような感覚に陥り、瞬時に迷子になるだろうということです。
ECクイーン：もしかして、キーワード検索が少ないという定量データは、それに関連していますか？
主治医：その可能性はあると思います。検索ボックスは見慣れたデザインになっていますので、使う人は使うでしょう。でもその前にさっき話した状態や画面の不一致が原因で、短期記憶が吹っ飛んでるかもしれません。人間が短期的に覚えていられる情報量って限られているんですよ。だから、こういう大きな不調和があると、何をしようとしていたか思い出せなくなる。吹っ飛ぶというのはそういうことです。
ECクイーン：なんか、凄い重大な問題が見つかったような気がしてきました。いやだぁ……。
主治医：トップ画面の話に戻りますが、ここはボトムナビというより、それぞれが独立したアクションのようにも見えます。しかし、プロフィールボタンをタップすると、プロフィールアイコンが反転するんですよ。つまり、あるときはアクションだけど、あるときはタブのように振舞っています。こういう一貫性の欠如が、使いずらいといわれる大きな要因の一つといえるでしょう。
ECクイーン：なるほど、ユーザビリティと認知心理学の観点から見ると、私たちのUIには、やはり大きな課題があるということですね。単なる見た目の問題ではなくて、ユーザーの行動に直接影響を与える重要な課題だということが分かりました。
■ カテゴリー検索
主治医：この勢いで、全体にいきましょう。カテゴリー検索です。Shinobeeが取り扱う商品が整然と並んでいて見通しが良く、何も問題ないように思います。でも大きな問題が一つあるんですよ。何か分かりますか？
ECクイーン：いえ、さっぱり……。
主治医：カテゴリーの写真です。写真の中に複数のものが映っていたりしますね。ユーザーの認知負荷が高いです。
ECクイーン：えっ、どういうこと！？
主治医：写真が理解の手助けになってないんです。僕らがいま座っているイスで例えましょう。脳の認知プロセスをざっくり説明をすると、こんな感じです。
視覚を使って四本足、背もたれ、クッションがついたモノを平面画像にする
脳内でその平面画像を立体化する
自分が知っているモノと照合する
これは「イスである」と認識する
このプロセスを瞬時に行うのが脳のメカニズムです。イスを見かけたら迷うことなく座るものだと認知できますよね。それは私たちが幼いころからイスを見てきて、使ってきて「イスは座るものだ」と習熟してきたからできることなんです。
この認知プロセスは、ゲシュタルト心理学の原則とも関連しています。特に「類似性の法則」と「近接性の法則」が、ユーザーがカテゴリーを識別する際に重要な役割を果たします。単純で明確なアイコンや画像を使用することで、ユーザーの認知負荷を軽減し、カテゴリーの理解を促進できます。「写真が手助けになっていない」という意図がなんとなく伝わりましたかね？
ECクイーン：はい、なんとなく……。
主治医：取り急ぎ作ってみました。美観は無視してください。どっちが分かりやすいですか？
ECクイーン：やだぁ……圧倒的に右です。
主治医：でしょう（笑）。カテゴリーアイコンは、ドン・ノーマンが提唱した「シグニファイア」の一種と言えます。シグニファイアは、そのオブジェクトの意味や目的を示す手がかりです。適切なアイコンは、ユーザーに即座にカテゴリーの内容を伝える効果的なシグニファイアとなります。しかし、いまの写真は手助けどころか理解のハードルを上げてしまっています。
ECクイーン：なるほど、ユーザーの認知プロセスを考慮したデザインが重要なんですね。これまで美しさや特徴を重視していましたが、ユーザーの理解を助けるという視点で見直す必要がありそうです。認知負荷を減らすことで、ユーザーがより速く、ストレスなく目的の商品にたどり着けるようになるということが凄く良く分かりました。ここは魅せる場面ではないということですね？
主治医：そういうことです！ ここはユーザーが商品を探したい場面です。魅せるよりも探しやすいことが重要です。ユーザビリティの観点から見ると、カテゴリーアイコンは「効率性」と「記憶しやすさ」というニールセンの原則に大きく関連しています。単純で明確なアイコンを使用することで、ユーザーは素早くカテゴリーを識別でき、次回の利用時にも容易に思い出すことができます。これは長期的なユーザー満足度向上にもつながるでしょう。
■ 統括
主治医：さて、今日お持ちいただいた2画面についての主な課題は一通りチェックできたかなと思います。どうでしたか？
ECクイーン：今日の診断で、ユーザビリティとビジネス目標のバランスの重要性を再認識しました。特に、ご説明いただいた原則やユーザー心理の観点から、ShinobeのUIとUXを抜本的に見直さないといけないと確信しました。短期的には可読性の改善や、カテゴリーアイコンの単純化など、すぐに着手できる項目から始めたいと思います。長期的には、ナビゲーション構造の一貫性など、より大きな変更も検討していきます。これらの改善を通じて、ユーザー体験の向上と、結果としての収益増加を目指したいと思います。先生がますますウチの服を買ってくれるように！（笑）
主治医：改善されると僕のユーザー体験は上がりますが財布からお金が消えるので複雑な心境です（笑）。小松さんの姿勢は、ユーザー中心設計の理想像です。今後の改善には、定量的なデータ分析だけでなく、ユーザビリティテストなどの定性的な調査も組み合わせると、より効果的でしょう。Shinobeeの進化を楽しみにしています。あと、人気商品の在庫がすぐになくなる問題を何とかしてくださいw
ECクイーン：欲しいものがあったら、こっそり私に連絡ください（笑）。今日の診断は本当に有意義でした。ユーザー中心設計の重要性を改めて認識できました。思い切って相談に来てよかったです。ありがとうございました！
まとめ
次回はスタートアップ企業をテーマにする予定です。もしこれを取り上げて欲しいなど要望がありましたら、気軽にコメントください！（記事化するお約束はできませんが🙏）
お問い合わせはこちらから（ヒアリングからお見積りまで無料です）。