クラシル改善案（リデザイン案）

クラシルは普段からよく使っているサービスですが、一人のユーザーとして「もっとこうだったら良いな」と感じた点があったので、それについて話していこうと思います。
感じた課題が、動画再生画面の「お気に入り、もう一品」のボタンの以下の２点です。

・「もう一品」という言葉から機能が伝わりにくい
・ボタンと背景の色が同じで認識しにくい

これらをもう少し詳しく説明します。

「もう一品」のボタンの機能を正確に言うと、「この料理によく合うおすすめの組み合わせを提案し、献立を助ける」機能だと思います。ただ、現在の「もう一品」という言葉からはこの機能が十分に伝わらないのではないかと思いました。

次に認識しにくいという点は、
現在のボタンはファーストビューでは広告の下部に重なる様に存在していますが、ベースカラーが白色の広告が表示された場合、アプリのベースカラー、広告のベースカラー、ボタンの色が全て白色で見つけづらいと感じました。

また、このボタンだけが広告の下にあり、動画や他のボタンと離れています。
私の場合動画を見てからお気に入りに追加するかを判断することが多かったのですが、その際にお気に入りのボタンを見つけれなかったという体験がありました。

このような理由からこれらの課題を解決できるようなリデザイン案を考えました。

リデザインをするにあたりはじめにトレースしました。

リデザイン案１

ボタンを枠線で囲い、影を濃くすることで強調し視界に入りやすくするようにしました。

また、「お気に入り」のボタンは「お気に入り」という言葉がなくても伝わると考えアイコンだけにし、「もう一品」という言葉を「おすすめの組み合わせ」とすることで機能が伝わりやすくなったのではないかと思います。

現在のボタンより目立たせることを目的としてリデザインをしましたが、逆に目立たせすぎないようにするという点を気をつけました。

リデザイン案２

スクロールで追従する必要はないと判断しボタンを無くし、動画の周辺に機能全てが集約されるように変更しました。

「おすすめの組み合わせ（献立をつくる）」としたことで、ひと目見ただけでどのような機能か理解できるようになったのではないかと思います。
「おすすめの組み合わせ」のボタンは、「たべれぽ」や「質問」のボタンより使用するユーザーが多く使用される頻度も高いと予測し、文字を太字にすることで「たべれぽ」、「質問」のボタンより強調しました。

いいね機能はリデザイン案１と同様に、言葉がなくても伝わると判断しタイトルの横に配置しました。

最後に

今回リデザイン案を作成しましたが、デザインに関しては本を数冊読んだ程度の知識しかなく、あくまで一人のユーザーとして課題に感じた点がどうすればよくなるか？という点だけを考えてデザインしました。
sketchも使用したことがなかったため、主に以下の記事を参考にしながら進めました。
最後まで読んでいただきありがとうございました。

参考にした記事