UX／UIと世界観を線引きしようね、って話～あるいは、我々はいかにして「使いやすい」と「っぽさがある」を両立するのか～
プロダクトにとっては、
ここまでがUX（UI）の領域
ここからは世界観の領域
っていう線引きや、「決め」がいるのではないか。
という話です。ピンと来た人や、「そうだね」って人は、がんばって一緒に両立していこうな！ またね！
もうちょっと知りたい方は、先へお進みください。
ここでの「UX／UI」の定義
ユーザー体験を良いものにしよう、というユーザーエクスペリエンス（UX）の考え方があります。ユーザーインターフェイス（UI）はあくまでUXフローの一部分を担っているだけですが、直接ユーザーと対面するプロダクトとユーザーとの接点であり、担っている部分が重要すぎるので、よくUX／UIと併記したりします。
ここで言うUX／UIは、そんな感じの「ユーザー体験を良くするヤツ」と、ゆるやかに定義しておきます。
ここでの「世界観」の定義
ここで言う「世界観」とは、プロダクトのコンセプトや設計思想などを指します。
「優しい感じ」「SFっぽく」「硬派で」といった、プロダクトをこんなふうにしたい、というイメージだと理解してください。
UX／UIと世界観は、交わりがち
UX／UIは、プロダクトの仕様が決まったとき、なんとなく「こうするのが良い」という雰囲気が決まってきます。
守ったほうがいい「決め」や「考慮次項」も、だいたいあります。
・アイコンだけで操作を理解できる
・言語依存、文化依存なく操作を完結できる
・色弱の方にも識別しやすい配色である
・オブジェクトベースで操作が理解しやすい ……などなど
それに対して、「世界観」はプロダクトごとにさまざまな醸し出し方があります。
・カクカクしたフォントにする
・全体のトーンを白っぽく統一する
・ノイズっぽい画像を使う
・アイコンのデザインを統一する ……などなど
世界観を表現する手段は、どうしてもUIやデザインなどのビジュアルやグラフィックに関わってしまいます。そのためどうしても、UX／UIと世界観は、バッティングしてしまうことがあるのです。
UX／UIと世界観の相互干渉が招いた悲劇その1
2020年、ローソンのプライベートブランドのデザインが新しくなりました。
・優しい印象のフォントにする
・写真ではなくイラストにする
・訪日客にもわかりやすいよう、日本語以外の表記を多用
ほかにもいろいろな理由をもとに、シンプルで優しい雰囲気のパッケージに刷新されました。
ご存じの方も多いかもしれませんが、結果として、不評でした。しばらくしてから、一部パッケージに関しては修正を行う、という発表もなされたほどです。
デザインを刷新しようという挑戦を悪しざまに批判することや、ましてデザイン事務所を非難するのは見当違いだと思います。
とはいえ、デザインに対する批判が起こったのは事実です。
・文字ベースだけど、ローマ字表記が読みにくい
・写真がないから初見で商品がわかりにくい
・フォントはカワイイんだけど読みにくい
総じて、「商品を認識しにくくなった」という点が批判の対象です。
複数の商品が並んでいる場で、中身が何か、自分はどれを買いたいかを判断してもらうために、「商品の文字をすべて読まないと分からない」のは、UX設計としては悪手です。
また訪日客に配慮するなら、英語やローマ字での表記ではなく、写真や大きなイラストで表示したほうが良かったかもしれません。識字率が100％に近い日本では成立しても、そうでない背景をもった他国の方もいます。絵ならすぐに理解できるが、文字を読むのは時間がかかる、というケースも少なくありません。
ローソンのプライベートブランドのデザインを見てみる
実際のパッケージを確認してみましょう。
私が撮影したためUXが最悪な点はご容赦。
変更後のデザインと思われます（違ったらごめん）。
商品名が上下2箇所に入っていたり、日本語表記を優先するなど、判別しやすくなる工夫がされた後ではないでしょうか。
ですが商品イメージは小さく、典型的な「読んで判別してもらう」UIです。
セブンイレブンのプライベートブランドのデザインを見てみる
一方で、同じコンビニ大手のセブンイレブンのプライベートブランドのデザインを見てみましょう。
めっっっっっちゃカレーって分かる。分かり過ぎる。紙箱であるという違いはあるものの、デカい写真＋デカい文字で、一発で商品を判別できます。
無印良品の自社ブランドのデザインを見てみる
ローソンが目指していたシンプルなデザインに近いのではないかと思う、無印良品の商品も見てみましょう。
ローソンは無印良品の商品を試験的に取り扱っており、目指す路線が似ているのかもしれないな、と感じています。
（無印良品は、かつてはファミマで取り扱っていたんですけどね……。）
こちらもデカい写真＋デカい文字で、商品の判別がしやすくなっています。
加えて、コンビニ2社にはなかった「辛さランク」までも示してあります。コンビニの場合は売り場にカレー系商品を複数並べることは少ないですが、無印はカレーもめちゃめちゃ取り扱っています。だからコンビニとは異なり、スーパーのレトルトカレー売り場の商品と同じような文法でパッケージがデザインされているのではないでしょうか。
UX／UIと世界観の相互干渉が招いた悲劇その2
世界的に大ヒットしているコンテンツであり、トレーディングカードゲームの先駆者であるMagic: The Gathering（以下M:TG）の主席デザイナーであるMark Rosewater（マーク・ローズウォーター）氏は、デベロップに関するコラムをいくつも公開しています。
「文章の目的より優先される一文はない」
「できるからといって、求められていないシステムを試してはいけない」
「デベロップにはふさわしい機会がある」
上記をはじめとして、氏のコラムからはいくつも学びを得てきました。個人的な話ですが、私はかなり（良きにつけ悪しきにつけ）制作の参考にしています。
そんなM:TGは、実験的な試みをいくつも行っています。パイオニアであるがゆえに、枠組みを壊さなければ停滞してしまう、という危機感もあるのでしょう。
「色」がゲームの主軸なのに、「色」を失わせてしまった
M:TGについて説明するのは本題ではないので割愛しますが、重要なポイントだけお話します。
M:TGでは、「色」が極めて重要です。「赤に属するカード」であれば、火や熱に関係しており、攻撃的で刹那的な性質をもっている。「青に属するカード」であれば、水や冷気に関係しており、慎重さや熟慮を示す、といった具合です。
使いたい「色」に対応した、「色の魔力」を生み出してカードを使用します。
まずは、こんなカードを見てみましょう。
本来、カードのコストとして示される部分には「色の魔力」を示すアイコンが、色付きで示されています。
上記のように、通常は「色の魔力」を示す場合「対応する色のアイコン」が表示されています。
「緑の魔力」なら、「緑色」で示されているのです。
分かりやすい！！！
次に、問題となったカードを見てみましょう。
テキスト内の「色の魔力」を示すアイコンに、「色」がありません。そのため、分かりにくいとして非常に不評だったとのことです。
なおこれ以降は、問題となったテキスト内アイコンも改善されました。
同じカードですが、以下のようにテキスト内アイコンも修正されています。
（ちなみにのちなみに、当初は私の理解不足で誤った情報が記載されておりました。指摘してくださったM:TG界の有識者の方、ありがとうございます。不当に貶めてしまったマロー、ごめんなさい。）
UX／UIを優先しつつ、余白で世界観を表したい
そもそも、UX／UIも、世界観も、ユーザーと直に触れあうものです。この要素同士がお互いに干渉しあうのは、必然なのです。だからこそ、双方の妥協点を探る必要があります。
UX／UIは、「こうするといいよ」という事例がだいたい分かってきています。
一見すると、全員が「こうするといいよ」を守っていたら、すべてのプロダクトが、だいたい同じ見え方になってしまうような気がします。
ですが、実際にはそうはなりません。「こうするといいよ」の範囲に入っていない領域や、ある程度は自由に決められる余白のような部分も残されているのです。その余白を使って世界観を表現するように努めれば、UX／UIと世界観の干渉が起こりにくくなります。
ターゲットを正しく想定すれば、世界観による浸食もヨシ
どんなUX／UIが良いかはユニバーサルデザインなどでも言及されており、例えば、「誰にとっても見やすくするためのルール」は、だいたい決まっています。
もし、どうしても表したい世界観があり、その世界観がUX／UIを浸食するなら、諦めるしか手はないのでしょうか。
私は、そうは思いません。
特別な条件がそろえば、世界観がUX／UIを浸食しても良いのではないかと思います。
あらゆる商品やプロダクトには、コンセプトがあり、ターゲットもあります。
「ターゲットを決める」ということは、「プロダクトを使ってほしい人を選ぶ」行為であり、つまりは「ターゲット以外の人を切り捨てる」行為です。
切り捨てたターゲットに対するUX／UIの配慮は、気にしなくて良いはずです。切り捨てているので。
つまり、切り捨てたターゲットに対するUX領域が、先ほど言及した「世界観で使える、余白部分」に追加されるのです。
世界観がUX／UIを浸食しても、なんとかなっている例
M:TGの「色」の話に戻りましょう。このゲームには、「赤」「緑」「青」という色があります。これは、よろしくありません。
ユニバーサルデザインにおいては、これらの色を使って何かを区別・判別させることは避けるべきか、なんらかの工夫をするべき、とされています。
その理由が、色の識別能の多様性です。
先天性の色覚異常には、代表的なもので「赤緑色覚異常」と「青黄色覚異常」があります。赤緑色覚異常は、「赤」と「緑」の判別が難しくなります。青黄色覚異常は、「緑」と「青」の判別が難しくなります。
赤緑色覚異常は当てはまる人が特に多く、日本人男性の20人に1人は当てはまるといわれています。遺伝子的に欧米ではさらに多く、10人に1人ともいわれています。
「色」を失わせたカードが、大変な不評であったことを思い出してください。
M:TGの「色」を決める際、「赤」「緑」「青」を選んでしまった結果、メインターゲットである欧米人男性のうち10％を「不評であった、色でアイコンを判別できない状態」にしてしまっていたのです。
これは意図せずに10％のターゲットを切り捨ててしまった計算になり、決してマーケティング的には無視できる人数ではないでしょう。
ですがM:TGというコンテンツは、なんとかなっています。
失うモノよりも得るモノが多ければ、なんとかなる
切り捨てたターゲットが、状況に影響を与えるほど大きくなかったのか、あるいはアイコン内のマークによる補助情報で色識別の不利を補うことができたのかは、わかりません。
避けたほうがいい「色」を使っていますが、結果的にうまくいっています。
私は、以下のように理解しています。
「色」というデザイン空間を使うことにした際、色覚異常がある欧米人男性の10％は（意図せず）ターゲットから切り捨てられました。ですがその結果、「色」という要素を余白として使えるようになったのです。
ゲーム性や世界観の表現に「色」という余白を有効に使えたことで、切り捨てたよりも多くのユーザーをUX的に満足させることができ、ファン化できたのではないでしょうか。
UX／UIの要素を削れば必ず、それだけターゲットの数も減ります。
ですが生まれた余白を使って、世界観を「より深く刺さる」ように表現できれば、失った以上のターゲットを手に入れることができる、ということではないでしょうか。
もちろん、それが良い行為であるかどうかは、別のお話です。最近のM:TGは、多様性に極めて慎重に配慮するようになっています。特に、人種問題やLGBTへの配慮が顕著です。
切り捨てることも世界観であるなら、切り捨てないことも世界観なのでしょう。
世界観による浸食もヨシ、だが適切な範囲は守る
ここで再び、3社の商品を比べてみましょう。
無印良品が扱っている商品は、ゴテゴテしていない、シンプルな機能美が人気、というイメージがあります。
ですが実際に3社のカレーのパッケージを比べてみると、比較的ゴテっとしている印象を受けました。
前述の通り、パッケージに「辛さランク」を入れねばならぬなどの理由があるのでしょう。「必要最小限」に抑えても、それでもなお「ゴテゴテしている」なら、ゴテゴテも受け入れる、という姿勢なのではないでしょうか。必要な情報は、必要なので入れる、という選択を行っているように思います。
適切な範囲を外れて世界観がUX／UIを浸食すると問題が起こる
コンビニでは、「目的の商品の購入」＋「ながら買い」が主役です。
「あっ、単三電池使うのかよ。買いに行くか。」
「ちょいとアルコール入れたいな。コンビニでいいか。」
そんな感じで立ち寄り、目的の商品を探しながら、ついでに目についた「そういえば切れそうだった商品」や「なんか気になった商品」を買います。
コンビニはこのように、フラっと入って、サッと買う、という使い方が多いのではないでしょうか。
コンビニの商品を、あまり吟味はしません。
また、高齢者がスーパーの代わりに近所のコンビニを利用するようになっているという話もあります。
これらを踏まえると、ローソンのデザインが不評となってしまったのは、適切な範囲を外れて、世界観がUX／UIを浸食してしまったからではないか、とも考えられます。
目的の商品を探すのも、ながら買いをするのも、どうにもやりにくい。しかもメインターゲットに含まれている高齢者にとっては、ローマ字表記の商品名は馴染みがなく、文字を読まないといけないが老眼でよく読めない。
世界観を表現する余白を手に入れるために、絶対に切り捨ててはならないターゲットを切り捨ててしまった、と言い換えることができるかもしれません。
これでは、前述した失うモノよりも得るモノが多ければ、なんとかなるの真逆です。
UX／UIが悪いと、世界観を堪能する段階まで到達しない……場合によっては、商品にも到達しない
実際、このページの内容を書くために商品を探していて、一番商品を見つけるのに時間がかかったのがローソンでした。
ローソン→無印良品→セブンイレブンの順で寄り、最初から「たぶん、バターチキンカレーなら全店舗取り扱ってるだろ」と思って、商品は決め打ちしていました。
つまり私は、「目的の商品の購入」のために訪れた客というわけです。
無印良品は、めっちゃめちゃカレーが多かったのですが、思ったよりすぐに見つけられました。
セブンイレブンは、最寄り店にはこの商品しか置いてありませんでしたが、商品数には関係なく、一瞬で商品を判別することができました。
セブンイレブンには最後に立ち寄ったわけですが、「ここまで順調にバターチキンをそろえたんだ。セブンにもあってくれ、頼む！」と祈りながら入店したところ、かなり遠くから見た瞬間に「カレーは……ある！ 種類は……バターチキンだ！ やった！」と、なったことを覚えています。
少なくとも、「商品を見つけ、購入する」というUXに関しては、セブンイレブンがもっとも優れていたように思います。
ですが商品説明などは、無印良品も負けていません。説明文も大きめで、何より「辛さランク」がありがたい。アイコンなのも分かりやすくて良いです。
ローソンも、別にめっちゃ悪い、というわけではないのです。手元に商品を持っているのなら。
ですが、実際に店舗で似たデザインで統一されて陳列されていると、画一化された白っぽいパッケージに小さいイラストなので、本当に探しにくかったです。「商品一つ」としては良いのかもしれませんが、「店舗に陳列する」際には、少々キツいものがありました。
もちろん、デザイン刷新からもう一度改善されてかなり見やすくなっていましたし、デザインへ挑戦した試み事体や、デザインを行った所がどう、というお話ではないことは念を押しておきます。
また、味はどれが好きかも好みの話なので言及しません。
なお、電子レンジで温める際と、温めたあとに皿へ注ぐ際のやりやすさは、「セブンイレブン→ローソン→無印良品」の順であった、という個人的な感想も付け加えておきます。
UX／UIと世界観って、別っぽく話してるけど、結局全部がUX（ユーザー体験）だからね！
ここまで、UX／UIと世界観を別の視点から語ってきました。
ですが結局、世界観を味わうことやそれに触れることも「ユーザー体験」の一つである以上、世界観もUXの一部であることは忘れないようにしておきましょう。
無印良品の、「シンプルに。だけど必要な情報は、多少シンプルさを阻害しても入れる。」という方針は、UX／UIの考え方であると同時に、彼らが表現したいであろう「ユーザーのためになるシンプルさを提供する、という世界観」の一側面でもあります。
人種問題やLGBTへ配慮することや、特定の属性をもつ人を切り捨てないことも、守るべきプロダクトの世界観でもあり、同時にUXでもあります。
ターゲットを区切ることでUX／UI的な余白が生まれ、その余白で世界観を表現する、と伝えてきました。
ですが、どうしても世界観は余白からすこーーしだけにじみ出て、UX／UIに影響してしまうこともあると思います。そしておそらく、逆も然りです。
だから、UX／UIの領域と、世界観の領域を線引きしておこう
あくまでイメージですが、以下のような関係を考えています。
UX／UI
↕
UX／UIの領域にまで、にじみ出ちゃった世界観
【ここまではUX／UIの領域】
↕
UX／UIと世界観が共存する地帯（余白）
↕
【ここからは世界観の領域】
世界観の領域にまで、にじみ出ちゃったUX／UI
↕
世界観（制作陣が表現したいもの）
上記のように、お互いが関係しあっていることも意識してみましょう。これが、自分の領分をあまりにも超えてしまうと、前述した悪い例のような失敗を招いてしまうのだと思います。
うまいこと両立するには線引きと「決め」がすべて
結局のところ、うまいことUX／UIと世界観を両立するには、いかに、いい感じに決めるかにかかっているのだと思います。
「ここまではUX／UIの領域だから、妥協しない」
「ここは、UX／UIから切り離した余白の領域」
「ここは世界観の領域だから、プロダクトのコンセプトで決める」
上記のように、それぞれ領域を決めておくといいでしょう。
具体的には、以下のように考えることが多いように思います。
①ターゲットを明確にする。デモグラフィックだけでなく、プライマリペルソナ、セカンダリペルソナまで設定する。
②設定したターゲットに対して、必須のUX／UIの要素を洗い出す。
③設定したターゲットに対して、無視してもいいUX／UIの要素を挙げる。これが余白になる。
④プロタクトのコンセプトに基づいて、世界観を表現していく。
⑤余白は緩衝地帯とする。必要であれば世界観を表現する手段に使っても良いが、その必要がないなら、UX／UI的に正しい、とされている手法を守る。
特に、③と⑤の工程が重要に感じます。
どちらでもいい、という場面があったなら、無理に世界観を表現することに振れるのではなく、UX／UIの基本を忠実に守り、ユーザーサイドに使いやすくしたほうが利点が多い気がしています。
まとめ
・ターゲティングをもとに、UX／UIから切り離しても問題ない範囲を探し出し、そこを余白としよう。
・絶対に譲れないUX／UIの領域はどこまでか、どこからはコンセプトに従って世界観の表現に使ってもいいか、線引きをしておこう。
・UX／UIを基本的に優先し、余白で世界観を表現しよう。
・余白はすべて世界観の表現に使わなくてもいい。余ったらUX／UIの基本に従って設計しよう。
・メインターゲットに悪い影響を与えてしまう世界観は、再考しよう。
また、それでも表現したい世界観があるなら、覚悟してやってみよう。という意見も付け加えておきます。
うまくハマれば、使いやすく、しかもそのプロダクト唯一無二の、独特の世界観や「らしさ」「っぽさ」を表すことができるようになります。
と、いうよりも、普通すぎて何もフックがないプロダクトや、独自の世界観を表現したいんだろうけどUX／UIが悪いなー、もったいないなーっていうプロダクトが、悪目立ちしてしまうのでしょう。
バランスをとろうね！(暴論)
なんでこんなことを書いたかって言うと、UX／UIと世界観のバランスが最悪なゲームをプレイしてしまい、なんだかなーって思ったからです。
2000文字程度がWeb記事として読みやすいといわれているなか、8000文字を超えるUX／UIが最悪な文章にお付き合いいただき、ありがとうございました。
この文章が、みなさんのプロダクト制作において、表現したい世界観をいい感じにできることに少しでも貢献できたら幸いです。
それでは、みなさんに良きクリエイターライフがあらんことを。
この記事が気に入ったらサポートをしてみませんか？