SUNABACOデザインコース〜番外編〜
※SUNABACOのデザインコースで番外編があったわけではありません。
ユーザー体験を構成する5つの要素
UX5段階モデル
1月9日から毎日トライしてみているので、それをこちらにも。
【照宝の蒸籠】
戦略
健康的で美味しい料理を手軽に作れる調理器具としての価値を提供する。
また、持続可能な素材を使用し、環境に優しい選択肢を提案することも戦略に含まれる。
ユーザーのニーズ
家庭でもプロでも簡単に「蒸し料理」ができるツール。
高品質で長く使えること。
美しいデザインで所有感を満たしたい。
要件
蒸し料理を均一に調理できること。
多段構造で複数の料理を同時に調理可能。
持ちやすい形状と構造。
コンテンツ要件
ブランドロゴ「照宝」の刻印。
天然素材を使用したデザインと手触り。
構造
食材を蒸籠に並べる。
蒸し器(またはフライパン)にセットし、火にかける。
蒸気が均一に行き渡り、食材を調理する。
蒸し上がった料理をそのまま食卓に提供可能であり視覚的な美しさも活用
「照宝」の刻印(ブランドの信頼感をアピール)
素材感と職人技の美しさ。
多段構造の実用性。
骨格
蒸籠の多段構造が見た目と使いやすさの両方を考慮。
上部の編み目が蒸気を効率よく通し、内部に熱がこもり過ぎないよう設計されている。
丸い形状は鍋にフィットしやすく、ユーザーの操作性を高める。
表層
天然竹の温かみのある色合いと伝統的な手工芸品の質感。
ブランド刻印「照宝」が視覚的に品質を保証。
手触りが持つナチュラルな感覚が心地よい。
手作業で組み立てられた高級感を感じさせるディテール。
【近所の飲食店のメニュー表】
気になったきっかけ
周りのお客さんがほとんど注文している(私も)
前は違う場所に記載されていたのに、メインメニューの横に手が気になっていることに気がついた。
戦略
店側の目的はランチメニューにデザートを追加注文してもらい、売上を増加させること。
一方、利用者側の目的は、食事後に手軽にデザートを楽しむことで満足感を得ること。
• ユーザーのニーズ
・ランチ後に手軽に注文できる手頃な価格のデザート
• 見た目が魅力的で、気軽に試せる量や価格の設定(この場合、レモンケーキ¥350)
要件
• 機能要件
• メニュー内で視認しやすく、注文を誘導する配置。
• 価格帯が明確で、選択しやすいデザートの提案。
• メニュー右上の手書きの追加情報(ランチデザート:レモンケーキ¥350)が目立つ位置に記載されている。
• その内容が直感的にわかりやすい(「レモンケーキ」の具体的なイメージが湧きやすい)
構造
• インタラクションの流れ:
1. ランチメニューを見て、料理を決定。
2. 右上に書かれた「ランチデザート」に気付き、手軽さと価格から興味を引かれる。
3. レモンケーキが追加され、食後に提供される。
4. 食後の満足感が向上。
• 情報の優先順位:
メニューの右上に書かれた「ランチデザート」が、目立つ位置にあることで注文につながる。視覚的なアクセントとして重要な役割を果たしている。
骨格
• メニュー内で「ランチデザート」の手書き情報が視覚的に注目されやすい場所(右上)に配置。
• フォントの違いや配置が、他の情報との差別化を強調している。
• 利用者の行動を導く要素:
• 手書きの「ランチデザート」が「限定感」や「特別感」を演出。
• 価格が手頃で追加注文のハードルが低い。
表層
• 手書きの文字が温かみを感じさせ、ユーザーに親しみを与える。
【noteの記事を更新すると登場する画面】
戦略
• 目的
• note運営側の目的
ユーザーが記事を公開した達成感を感じ、継続して投稿を続けてもらうこと。また、SNSシェア機能を通じて読者(利用者)を増やすこと。
• ユーザーの目的
公開の確認をするとともに、シェアすることで自分の記事を広め、読者との接点を増やすこと。
• ユーザーのニーズ
• 記事が無事公開されたことを確認したい。
• 達成感を味わいたい(164日連続投稿などの進捗が示される)
• SNSで簡単に記事をシェアしたい。
要件
• 公開成功を知らせるメッセージ表示(例:「記事が公開されました」)
• 記事の連続投稿記録を強調する表示(例:「164日連続投稿!」)
• SNS共有用のアイコン(X, Facebook, LINE, リンクコピー)を提供
• コンテンツ要件
• 明確な達成感を与えるテキスト(「またひとつ、作品が読者に届くようになりました!」)
• シェアボタンの視覚的な配置とアイコンデザイン
構造
• インタラクションの流れ
1. 記事を公開ボタンで投稿
2. 成功画面が表示され、達成感を得る
3. 必要に応じてSNSやリンクを使って記事をシェア
•情報の優先順位
1. 「164」の数字(視覚的に最も目立つ)
2. 成功メッセージ(「記事が公開されました」)
3. SNSアイコン(行動を誘発)
骨格
• 中央に大きく「164」と数字を配置し、視覚的インパクトを与える
• 成功メッセージを上部に配置して安心感を提供
• 下部にシェア用のボタンを横一列に並べてわかりやすく配置
• 利用者の行動を導く要素
• 数字やメッセージの達成感が、記事を公開する満足感を高める
• シェアボタンのアイコンデザインが直感的で、次の行動を促す
表層
• 背景色(ピンク)に花のイラストを配置して柔らかさと親しみを演出←多分9種類くらいイラストはある
• 大きな「164」の数字が目立ち、ユーザーに成果を明確に伝える
• シェアボタン(X, Facebook, LINE)のアイコンデザインが、用途をすぐに理解できるように設計されている
• 柔らかい色合いや成功を示すデザインが、ユーザーにポジティブな感情を引き起こす
【ついつい買ってしまうコーヒーのメーカー】
戦略
• ブランド目的: 簡単で手軽なブラックコーヒーを提供し、日常のリラックスした瞬間を楽しんでもらう。
• ユーザー目的: 時間がない中でも簡単に高品質なブラックコーヒーを飲みたいニーズを満たす。
• 価値提案: ミルクや砂糖なしでも飲みやすい味わいを100本パックで提供する経済性。
要件
• 「ミルクなし・甘さなし」の特徴を明示。
• 100本入りでコストパフォーマンスの良さを強調。
• 開け口の工夫(ミシン目を使用して簡単に開けられる)
• 緑を基調としたデザインで、シンプルさを訴求。
• コーヒー豆とスティックのビジュアルで直感的に内容を伝える。
構造
情報の優先順位
1. ブランド名「Blendy」と大きなフォント。
2. 「スティックブラック」「ミルクなし・甘さなし」のシンプルな説明。
3. 100本入りというボリュームの訴求。
4. 開け口の説明はパッケージ下部に配置し、使用方法を明示。
• ナビゲーション
• 開封手順が一目でわかるデザイン。
• 使用時の流れを視覚的にサポートする。
骨格
• 緑を基調にし、白と金の文字色で視認性を確保。
• 開け口の位置を具体的に示し、ユーザーが迷わないようにしている。
• ミシン目を入れることで、ツール不要で開けられる操作性を実現。
• 一目でわかる「開け口」の表記。
表面
• コーヒー豆とカップのイメージで直感的に製品内容を伝える。
• 視覚的に「甘さなし・ミルクなし」というシンプルさを強調。
• 太字の「Blendy」でブランド認知を強化。
• 必要情報を絞り込み、文字数を抑えた整理されたデザイン。
【今治のお友達がくれたお土産】
戦略
• 目的: 消費者に団子の味や種類を直感的に伝えることで、購入時の安心感を与え、購入意欲を高める。また、視覚的な美しさで購買体験を向上させ、贈り物や観光土産としての魅力も強化。
• ターゲット
• 日常的に和菓子を楽しむ消費者
• 贈答用として購入する人
• 観光客など初めて商品を手に取る人
要件
• 開封せずとも内容物が理解できる。
• 団子の実際の色(緑・黄色・紫)と、パッケージの「だんご」の文字背景色を一致させることで、視覚的な情報伝達を強化。
• 和風キャラクターやデザインを活用し、親しみやすさを演出。
構造
• パッケージの色使いが団子の内容をそのまま表しており、簡単に理解できる情報構造。
• キャラクターのイラストがブランドの雰囲気を伝え、商品の特徴を視覚的にサポート。
• 「色」を軸に団子の内容を伝えるため、ユーザーは見た目だけで内容を把握可能(なんとなくの味のイメージ)
• 視覚的要素のみに依存するため、言語の壁を超えるデザイン。
骨格
• 団子の色と文字背景の丸い色が一致することで、視覚的に簡潔でわかりやすいレイアウト。
• キャラクターのイラストが中央に配置され、ブランドの親しみやすさをアピール。
• 色の統一感が強く、視覚的にシンプルで整理された印象。
• 購入者が余計な情報を探す必要がなく、直感的に理解できる。
表層
• 団子の実際の色と背景の文字色が完全に一致しているため、見た目の美しさが際立つ。
• キャラクターや和風の配色が、日本らしい雰囲気を伝え、親しみやすさを強調。
• 手軽さ、親しみやすさ、和の伝統が視覚的に伝わるデザイン。
【コンビニに売っていたパック】
数種類ある中で、私が選ぶならこれ。
それってなんで?がきっかけ。
戦略
• 信頼性(薬用)と親しみやすさ(デザイン)を兼ね備え、初心者からリピーターまで幅広く支持されるブランド戦略。
• 手軽さ(8分)、効果の実感(薬用成分)、安心感(フリー成分)を訴求し、ニーズを的確に満たしている。
• 肌の悩みを短時間で効率的に解決し、清潔感や自信を取り戻す体験を提供。
要件
• 主にニキビや肌荒れに悩む若い世代(10代後半~30代女性)を想定しており、デザインや文言もこれに特化している。
• 使用シーン: 「8分で8時間の効果」と謳っており、忙しい現代人向けの時短ケア商品として位置づけられている。
• 競合との差別化: 医薬部外品の認可を受けた点、W有効成分配合、肌荒れ防止と美肌ケアの二重アプローチなど、効果の面で強みを持つ
構造
1. 表側では「どんな肌の悩みを解決するか」→「主要成分の特徴」→「効果への期待感」を伝える。
2. 裏側では具体的な「使用方法」→「成分の詳細」→「安心感を与えるフリー成分」を網羅。
• 階層性: 裏面の情報は効能・成分説明・使い方が順序立てて配置され、必要な情報をすぐに見つけられる。
• QRコード: 下部に配置され、公式サイトへの誘導を用意しアクセスしやすい
骨格
• 表面の情報配置が整理されており、使用者が知りたい「効能」「成分」「使い方」などが分かりやすく区分されている。
• アイキャッチ部分(キャッチコピーや「W有効成分」)と詳細情報(成分説明や使用方法)のメリハリが明確。
• 重要な情報(「ニキビ」「肌荒れ」など)は目立つフォントと大きさで表示され、視認性が高い。
表層
•パッケージ全体は柔らかい色合いで、紫や水色を基調とした女性らしいデザイン。キャラクターのイラストや文字の配置が視覚的に魅力的で親しみやすい。
• 「薬用」「W有効成分」など、信頼性を感じさせる文言が目立つ位置に配置されており、効果を強調。
• 「ニキビ・肌荒れ徹底ケア!」など、その悩みを持つ層に購買意欲を刺激する文言が目を引く。
【マクドナルドのコーヒー】
戦略
・ McDonald’sのコーヒーブランド「McCafé」の一環として、カフェ品質のコーヒーを手軽に提供し、マクドナルド利用者にカフェ体験を提供する。
• コーヒーを日常的に飲む層(学生、ビジネスパーソン、主婦など)。手軽で安価、かつ美味しいコーヒーを求める人々をターゲットにしている。
• 大手コーヒーチェーン(スターバックスやドトール)より低価格でありながら、品質に妥協しない点を強調。
• 手軽においしいコーヒーを飲みたいというニーズを満たし、リラックスやリフレッシュの時間を提供。
要件
• 香りが高く、満足度の高いコーヒーの味。
• 持ち運びしやすい設計(蓋付きカップ)
• ブランドの一貫性を感じさせるデザイン。
• コンビニコーヒーとの差別化を図るための「McCafé」ブランドの訴求。
• おしゃれで映えるカップデザイン。
構造
• 視覚的に「McCafé」のロゴを大きく配置し、ブランド認知を強化。
• 小さく控えめな「McDonald’s」のマークでブランドの繋がりを示す。
• 利用シーンの設計: 持ち帰り・店内どちらにも対応し、どこでも快適に飲めるよう配慮。
• 飲みやすさ: カップの構造や蓋の飲み口を考慮し、スムーズな飲み心地を提供。
骨格
• 黄色を基調とした明るいデザインで元気な印象を与える。
• ロゴが中央に配置され、視認性が高い。
• 持ちやすさを考えたカップの形状。
• 片手で持ちやすく、蓋がしっかり閉じるため持ち運びやすい。
• 飲み口が滑らかで、液体が漏れにくい構造。
表層
• 明るい黄色と黒のコントラストが視覚的に目を引く。
• ロゴの書体が柔らかく、おしゃれで親しみやすい。
• 小さなマクドナルドの「M」マークで、親しみと信頼を持たせる。
• カップの表面は滑りにくい素材で構成され、手触りが良い。
• コーヒーの品質を感じさせるシンプルかつ洗練されたデザイン。
┈┈┈┈┈┈┈┈┈┈┈┈┈
こうやって書き起こして考えてみると世の中で売れているのもの、目に入るものは誰かがデザインしたものなんだなぁて。
これUX5段階モデルやって!
もお待ちしてます。
大切な時間を使って読んでいただけて本当に嬉しいです。ありがとうございます。
もしこの記事が好き!いいな!そう思っていただけたら是非ハートをクリックしていってください。フォローもコメントもシェアも大歓迎です。