ADVERTISING

スタバのスリーブから学ぶ UXデザインにおける「アフォーダンス」と「シグニファイア」

スタバのスリーブから学ぶ UXデザインにおける「アフォーダンス」と「シグニファイア」

サンフランシスコ発デザイン会社の公式ブログ
btrax

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

ADVERTISING

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

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

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

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

スタバのスリーブ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アフォーダンス要素

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

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

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

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

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

シグニファイア要素

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

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

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

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

まとめ

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

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

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

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

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

ADVERTISING

RELATED ARTICLE

関連記事

JOB OPPOTUNITIES

最新の求人情報(求人一覧

求人

ファシリティマネージャー

A Balloon Consulting

ファシリティマネージャー

年収

〜 600万

詳細を見る

ジャーナル

セカンドキャリアの三兄弟が営む人気の団子屋。それぞれのキャリアを活かしたファミリービジネスの可能性

セカンドキャリアの三兄弟が営む人気の団子屋。それぞれのキャリアを活かしたファミリービジネスの可能性

記事を読む

求人

Store Vice President

A Balloon Consulting

Store Vice President

年収

〜 2000万

詳細を見る

ジャーナル

ホテルとメディア、2つの顔を持つ「OF HOTEL」。仙台からアートやクリエイティブの新たなエ...

ホテルとメディア、2つの顔を持つ「OF HOTEL」。仙台からアートやクリエイティブの新たなエ...

記事を読む

ジャーナル

コロナ禍を経て、ブランド店舗のKPIに変化あり!外資系ラグジュアリーブランドのKPI設定の実態

コロナ禍を経て、ブランド店舗のKPIに変化あり!外資系ラグジュアリーブランドのKPI設定の実態

記事を読む

ジャーナル

【10/30(水)開催】65周年を迎えるベビースターからの発信!異業種コラボでお菓子売り場を飛...

【10/30(水)開催】65周年を迎えるベビースターからの発信!異業種コラボでお菓子売り場を飛...

記事を読む

コラボパートナーの募集情報
コラボ募集一覧

コラボ

”水辺の宿場町”をデザインコンセプトとするアートホテル「東京ベイ潮見...

東京ベイ潮見プリンスホテル ”水辺の宿場町”をデザインコンセプトとするアートホテル「東京ベイ潮見...

詳細を見る

コラボ

ドイツ腕時計ブランドの"ZEPPELIN"とのコラボレーションウォッチパートナ...

ZEPPELIN ドイツ腕時計ブランドの"ZEPPELIN"とのコラボレーションウォッチパートナ...

詳細を見る

コラボ

自治体の枠にとらわれない幅広いコラボ実績をもつ「サガプライズ!」とのコラボレーシ...

サガプライズ! 自治体の枠にとらわれない幅広いコラボ実績をもつ「サガプライズ!」とのコラボレーシ...

詳細を見る

コラボ

多方面で活躍中のデザイナー安藤大春とのコラボレーション

Ohal 多方面で活躍中のデザイナー安藤大春とのコラボレーション

詳細を見る

Powered by

現在の人気記事

NEWS LETTERニュースレター

人気のお買いモノ記事

公式SNSアカウント