![見出し画像](https://assets.st-note.com/production/uploads/images/136911053/rectangle_large_type_2_1e7dfb3b3a33d0ee080f884bd4af9215.png?width=1200)
Daily UI #017
プロンプト: 購入領収書
何を購入されましたか?何日ですか?商品はいくらでしたか?そして、どのようなソースとベンダーからのものでしょうか?顧客サポート情報、追跡番号または受領番号、事業所/電話番号/ウェブサイト、必要に応じて写真、その他の関連要素などの他の要素を考慮してください。
ヒント:通常、レシートの下部と上部はあまり活用されていません。今後のプロモーションやニュースについて顧客に知らせたり、フィードバックを求めたり、QR コードを使用してソーシャル メディアを宣伝したりするのに最適な場所となります。
Dribbble または Twitter で #DailyUI を付けてデザインを共有します
今回はレシートのUI設計です。
参考にしたデザインは、Nikhil Varghesさんのこちらの作品です。
私は、#012のスマートウォッチのデータを活用して、同じようなレイアウトを日本語で置き換えてみました。
今回学習できたことは、フォントサイズは4種類まで、フォントウェイトは2種類まで。レシートだからカラーではなくモノクロが良かったかもしれないが、あえてデバイスに届くという設定でカラーにしました。
そして、黒文字は#000000を使う場面はほとんどなく、どちらかというとグレーっぽい黒を使うと再確認できました。今回に関して言えば、背景色は#333333、文字色はすべて#5b5b5bで統一しました。ちなみに、QRコードも色も#5b5b5bにしてあります。
![](https://assets.st-note.com/img/1712809569601-roFmdLGeKs.png?width=1200)
この記事が気に入ったらサポートをしてみませんか?