
クラシルのリデザイン 詳細ページ
delyの坪田さんがリデザインを募集!ということでこれ幸いと挑んでみました。
サービスを勝手にリデザインすると怒られる流れがあるとのことでして、クラシルは題材に使ってもらって構わないので、どんどんリデザイン案欲しい。
— 坪田 朋 / クラシル (@tsubotax) October 1, 2019
今回は詳細ページの提案です。figmaのプレビューはこちら
目標
わかる=>できるかも!につなげるため
レシピを見たときにできるだけ早くレシピの概要が把握できるようにする
レシピの情報をファーストビューに入れる
たべれぽなどユーザーのレビューにあたるものは判断基準として大きいと思われるので早い段階で提示します。
お気に入り数はレシピデータに紐づいて持っているという仮定です。。
またレシピ下部にある作業時間と金額の目安も重要な指標と思われるのでこれも早い段階で載せます。
手順・ポイントの付近にメリハリを付ける
手順の箇所、とっかかりが少なく、目が流れてしまいそうなのであしらいを追加しました。
レシピのポイントは該当手順の場所に移動させ、わかりやすくします。
また、栄養素のアップグレード領域をやや目立たせるように
kcalやgの単位を表示することでリアリティを追加しました。
UGCを促すためたべれぽの投稿などのボタンをすこし目立たせるように変更しました。