スタバのスリーブから学ぶ、アフォーダンスとシグニファイア【UXデザイン】

とある午後、サンフランシスコのスタバでラテを買った際に気づいたことがある。

カップの外側に、熱い飲み物による火傷を防止するためにつける「スリーブ」が非常に上手にデザインされていることを。

そう、スタバロゴの顔がついている茶色い帯のような物体のことだ。

それをよく観察してみたところ、UXデザインにおける「アフォーダンス」と「シグニファイア」を上手に活用し、ユーザーにとって使いやすい設計になっていた。

ということで、今回は普段の日常生活で馴染みのあるアイテムを通じて、UXデザインに関する構成要素を学んでみたいと思う。

スタバのスリーブ

UXデザインにおける「アフォーダンス」と「シグニファイア」とは？

そもそも普段聞き慣れない「アフォーダンス」と「シグニファイア」とは何か？これはデザイン用語、それもUXデザインで利用される単語だ。

専門的に深ぼるとかなり詳しい概念があると思うが、あえて簡単に説明すると:

アフォーダンスとは
プロダクトやサービスに施された視覚的・物理的な表示で、どのように利用するかを、わかりやすく感じさせるためのデザインの要素のこと。

アフォーダンスが優れていると、難しい説明をしなくてもユーザーは使いやすさを感じるし、実際にユーザーが使った際にもその役割を迷うことなく使うことができる。

例えば、角が丸い箱に「サインアップ」と書いてあればサインアップボタンだと直感的に理解できる。など。

シグニファイアとは
「このように動きますよ」というシグナルを送ってくれる設計のこと。ユーザーに適切な行動を伝えるための印や音、認識可能な指標を指す。

それによりユーザーが直感的に感じられる役割を果たす。

例えば、ボタンの上にマウスを持ってくると色が変わることで、押すと送信されるなどの何かしらのアクションが発生する。など。

(専門家の皆様、間違ってたらすみません。)

アフォーダンスとシグニファイアについて

スタバのスリーブのUXデザイン

さて、本題のスタバのスリーブにおけるUXデザイン。それもアフォーダンスとシグニファイアについての役割を分析してみよう。

皆様にも馴染みの深いスタバのカップとスリーブだと思うが、そのスリーブの内側を観察したことはあるだろうか？

よくみてみると、滑り止めのギザギザしたデザインの内側に無色透明の物体が付着している。これは実は接着剤で、高温に触れると接着剤が溶けて、スリーブがカップとくっつく仕組みになっている。

熱い飲み物を入れたカップにスリーブを装着すると、包み込まれたカップがずり落ちないように設計されているのだ。

内側に接着剤が仕込まれているスタバのスリーブ

アフォーダンス要素

スターバックスのスリーブには。アフォーダンスがしっかり定義されている。

カップにフィットし、その形状や外周はカップよりも大きく、コーヒーカップにフィットするように上と下は空洞になっている。

また、カップのロゴよりも大きめの顔が印刷されていることで、パズルのようにロゴとその外側に顔を合わせたくなる心理効果もある。

スリーブの形、色、内側のギザギザの設計、そして、この接着剤。これらの構成要素により、スリーブの役割を想像できやすいし、期待される実際の機能も担保されている。

アフォーダンス設計の上手なスタバのカップとスリーブ

シグニファイア要素

加えて、このスリーブには “ちょっとした” シグニファイア要素が隠されている。冒頭で説明した通り、シグニファイアはユーザーに  “さあ、このように使ってください” とシグナルを届ける仕組み。

スタバのスリーブは、カップを通すためにスリーブを広げた際に、「カチッ」とした音が出るようになっている。これは内側の接着剤が離れた音だと思われる。

この音が、音声信号としてのシグニファイアの役割を果たしている。この音がすることで下記の信号を送ってくれている。

• スリーブが開いたので、カップを入れてください
• このスリーブには粘着性があります
• 熱くなった表面に触れると粘着性が復活します

 

View this post on Instagram

 

A post shared by Mudassir Azeemi (@mazeeemi)

まとめ

こんな感じで、日常の身近にある製品でも、興味を持ってじっくりと観察してみると、どのような意図でデザインがされているかを学ぶことができる。

今回のスタバのスリーブでは、UXデザインにおけるアフォーダンスとシグニファイアに関して直感的に理解することができた。

• アフォーダンスだけではプロダクトの目的を示すことはできない
• 明示的なアフォーダンスとともに、対象物の意図や目的を定義するシニフィエが必要である
• プロダクトデザインは、「どのように見えるか（デジタル、リアルを問わず）」ではなく、「マクロとミクロの相互作用」が適切に含まれていることが重要
• 粘着性のあるスリーブは、スターバックスがカップを持つ人に対して 「飲料はやけどする 」と警告しているため、不要な訴訟を回避するのにも役立つ。少なくとも、この粘着性のあるスリーブにより、ユーザーがカップを持っている間、不快になることなくラテを楽しむことができる
• プロダクトのデザインは、そのブランドのビジョンを体現する必要がある。今回のスタバの場合はその詳細までのUXデザインを通じ、同ブランドの「一度に一人、一杯、一地域から、感動体験を届ける」というビジョンを体現していると感じる

UXピラミッド – UXデザインの正しい評価方法 –

ぜひ皆さんも、日々の生活で興味を持った商品やサービスのUXデザイン要素を研究してみると面白いかも。

筆者: Brandon K. Hill / CEO, btrax, Inc.