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

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

求人

セールススタッフ

LVMH Watch & Jewelry

セールススタッフ

年収

300万 〜 450万

詳細を見る

ジャーナル

LOEWE(ロエベ)求人に応募する前に確認!特徴や名作バッグシリーズなどを紹介

LOEWE(ロエベ)求人に応募する前に確認!特徴や名作バッグシリーズなどを紹介

記事を読む

求人

セールススタッフ

LVMH Watch & Jewelry

セールススタッフ

年収

300万 〜 450万

詳細を見る

ジャーナル

元Jリーガーが立ち上げたアパレルブランド「FIDES」。コラボのこだわりと目指す未来とは

元Jリーガーが立ち上げたアパレルブランド「FIDES」。コラボのこだわりと目指す未来とは

記事を読む

ジャーナル

【イベントレポート】LVMH Watch & Jewelryの人事に聞く!採用したい人物像とは?

【イベントレポート】LVMH Watch & Jewelryの人事に聞く!採用したい人物像とは?

記事を読む

ジャーナル

【3/22(金)】「Discover LVMH Watch & Jewelry Vol.2」開...

【3/22(金)】「Discover LVMH Watch & Jewelry Vol.2」開...

記事を読む

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

コラボ

俳優上野樹里が手掛ける人にも地球にもやさしいものづくりプロジェクトブランド「T...

TuiKauri 俳優上野樹里が手掛ける人にも地球にもやさしいものづくりプロジェクトブランド「T...

詳細を見る

コラボ

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

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

詳細を見る

コラボ

【いろはグランホテル松本駅前】コラボパートナーになってホテル...

IROHA GRAND HOTEL 【いろはグランホテル松本駅前】コラボパートナーになってホテル...

詳細を見る

コラボ

瀬戸焼ブランド「m.m.d.」と一緒に、付加価値のあるものづくりをしたい企業様、ク...

m.m.d. 瀬戸焼ブランド「m.m.d.」と一緒に、付加価値のあるものづくりをしたい企業様、ク...

詳細を見る

Powered by

FIND THE NEXT

次の記事を探す

現在の人気記事

NEWS LETTERニュースレター

人気のお買いモノ記事

公式SNSアカウント