Daily UI #017 Purchase Receipt

　知り合いのUXデザイナーさんにDaily UIを勧めていただいたことをきっかけに始めました。

Daily UIとは

　毎日異なるUIのお題に取り組み、UIデザインの基礎や情報設計、表現力を継続的に学ぶトレーニングです。

目的

• UIデザインを継続的に制作し、画面構成や情報設計を学ぶ

• 「なぜこのUIなのか」を考え、UX/UIデザインの引き出しを増やす

• デザインを改善しながら、表現力や設計力を身につける

やる理由

• 良いUIパターンを学び、自分の引き出しを増やす

• 制作経験を積み、デザインのスピードと判断力を高める

• ポートフォリオとして作品を蓄積し、自分の成長を記録する

今回のテーマ

購入レシートをデザインする。

競合分析

• セブン

  • 商品名・商品価格・合計金額を太字にして、購入内容と支払額をひと目で確認できるようにしている

  • 小計と税額は合計金額より控えめに表示し、金額の内訳を追いやすくしている。

  • 支払い方法・店舗情報・ヘルプを余白と区切り線で分け、必要な情報を探しやすくしている。

• タコベル

  • 商品名と合計金額を太字で示し、購入内容と支払額を確認しやすくしている。

  • 商品写真と数量を添えることで、何をいくつ注文したかも分かる

  • 画面上部には地図と住所を配置し、受け取り場所をすぐ確認できる

  • 税・手数料は控えめに表示して情報に優先順位をつけ、下部にはヘルプへのリンクを用意して、注文について困ったときに問い合わせできるようにしている

  • 白を基調に、紫を住所の枠やボタンに使ったすっきりしたデザインである。

• スターバックス

  • 商品名は大きな文字、合計金額はさらに大きく太い文字で表示し、購入内容と支払額をすぐ確認できるようにしている

  • サイズやミルクの種類、税・チップ、支払い情報は控えめな文字で示し、情報の優先順位をつけている

  • 小計・税・チップと金額を点線でつなぐことで、左右に離れた項目を目で追いやすい

  • 丸い商品写真は購入品の識別を助ける

  • 白を基調にスターバックスの緑をアクセントとして使い、「Call store」ボタンも見つけやすくしている

作成したレシート

　コンセプトは、カフェらしい落ち着きと温かさを持たせながら、購入内容・合計金額・店舗情報をひと目で確認できる画面を目指しました。

英字フォントにはLexend、日本語フォントにはNoto Sans JPを使用しました。背景色は#FAF2E8、アクセントカラーは#66735B、タイトルカラーは#292623、サブテキストは#8C8A88とし、落ち着いた配色にまとめました。

商品写真は丸く切り抜き、商品を視覚的に確認しやすくしました。また、小計・税・チップは合計金額よりも控えめなグレーで表示し、合計金額は最も大きく太くすることで、情報の優先順位を明確にしました。

購入情報には支払い方法と店舗名を表示し、店舗ロゴを店舗名の横に配置することで、どの店舗で購入したのかを視覚的にもすぐ確認できるようにしました。

制作時間

• デザイン：1時間

• 分析：30分

• 合計：約1時間30分