見出し画像

クラシルのリデザイン 詳細ページ

delyの坪田さんがリデザインを募集!ということでこれ幸いと挑んでみました。

今回は詳細ページの提案です。figmaのプレビューはこちら

https://www.figma.com/proto/rm1iWybZSveCOKhrfSBLAw/kurashiru-reDesign?node-id=14%3A93&viewport=183%2C220%2C0.5874391794204712&scaling=scale-down

目標

わかる=>できるかも!につなげるため
レシピを見たときにできるだけ早くレシピの概要が把握できるようにする

レシピの情報をファーストビューに入れる

たべれぽなどユーザーのレビューにあたるものは判断基準として大きいと思われるので早い段階で提示します。
お気に入り数はレシピデータに紐づいて持っているという仮定です。。

またレシピ下部にある作業時間と金額の目安も重要な指標と思われるのでこれも早い段階で載せます。

画像2

手順・ポイントの付近にメリハリを付ける

手順の箇所、とっかかりが少なく、目が流れてしまいそうなのであしらいを追加しました。

レシピのポイントは該当手順の場所に移動させ、わかりやすくします。

画像2

また、栄養素のアップグレード領域をやや目立たせるように
kcalやgの単位を表示することでリアリティを追加しました。

UGCを促すためたべれぽの投稿などのボタンをすこし目立たせるように変更しました。

この記事が気に入ったらサポートをしてみませんか?