新卒1年目に作成したUIデザインをリメイクしてみた①

こんにちは。デザイナーのasatoといいます。

私は現在入社4年目となります。1年目にスキルアップと称してUIデザインを作成していました。

3年経った今、自分がどれだけ実力が上がっているのか気になったので3年前に作成したもののリメイクをし、意図などを記載していこうと思います。

 

レシピアプリのデザイン

当時の私はCocodaというサービスが提供していた「Daily UI」というものでUI作成をしていました。

Cocodaは、UI/UXデザイナーを目指す人や現役デザイナーのために設計された学習プラットフォームでした。デザインの基本から実践的なスキルまで幅広くカバーしており、デザイン課題やプロジェクトを通じて実践的に学ぶことができました。

その中の一つである「Daily UI」は、合計50個のお題が存在し、自分でそのお題を継続的にこなすと言ったものです。

「Daily UI」なので理想は毎日作成することだと思いますが、私は2週間に1-2作品ペースで作成していました。

何故過去形かというと、こちらのサービスは2022年で終了しているからです。

今回の記事では2画面紹介しようと思います。

どちらもレシピのアプリ画面です。

レシピの検索画面

まずはお題について記載します。

お題：レシピの検索画面

ターゲット：食べ盛りの子どもを持つ夫婦

特徴：34才男女、食材はまとめ買い、時短、あたたかい、手軽さ、旬の食材も気になる

一言：冷蔵庫にある食材で美味しいご飯を作りたいな

情報項目の一例：キーワードを入力する検索欄、検索をアシストするキーワードやおすすめのサジェスト

上記のお題を元に新卒1年目で作成したのがこちら↓

当時の意図を思い出しながら記載していきます。

全体の配色はオレンジにしました。あたたかいとお題にあったので、温かみを感じるオレンジに決定しました。また、その色の印象を画面全体から出せるようにアイコンも丸みのある線が太めのものを選びました。

まず、レシピを作るにあたって何を作成したいか検索するところから始まると考えました。

そこでまずは検索欄を一番上に持ってきています。履歴も載せておくことで、自分が過去何を検索したのかすぐわかるようにしました。

次に、人気のレシピを持ってきました。人気＝支持されているので参考にしやすいと考え大きめに配置しています。写真を背景にすることで料理のイメージがつきやすいようにしました。

そしてその次はカテゴリです。

何を作りたいのか決まっていない場合でも、冷蔵庫にあるものから選べるようにこの項目を配置しました。

今見ると思うところがかなりあります。

例えば、検索欄やカテゴリは角丸のある四角なのに、人気のレシピはただの四角だったり、検索履歴は楕円となっており統一感がありません。他にも見出しとその要素の文字サイズのジャンプ率が全然なく、画面としてのメリハリがない上にどんな項目があるのか一目でわかりにくいです。

もっと見るがテキストリンクになっていないせいで、文言から押せることはユーザーがなんとなく察せるものの不親切です。

このようにデザインの荒さが目立つと思います。

そこで、3年後に作成したものはこちら↓

どうでしょうか。見やすさ、わかりやすさがかなり変わったのではないでしょうか。

まず、あたたかさが特徴としてあるので、オレンジや丸みのあるアイコン自体は変えていません。ですが、数年前のオレンジだと少し色が薄くこのオレンジを文字色として使用するには少し読みづらいと感じました。そこでオレンジの色を少し濃くして文字色にも適用しやすくしました。アイコンも一見数年前と全く同じに見えますが、数年前は線の細さが統一されておらず不揃い感があったところを、線の太さを調整し統一感を出しました。

一番上に検索欄があるのは同じです。イメージでは、検索欄をタップすると検索履歴が表示され、入力を始めるとサジェスト機能が出てくる形です。

新たに人気のワードといった項目を足しました。これは特徴にあった、旬の食材も気になるのワードを参考に増やしました。よりユーザーに沿った要素を入れ込みました。

また前のデザインでは、人気のレシピがかなり大きく表示され、画面が圧迫されていると感じたのでカードのサイズを小さくして横スクロールで見られるように変更しました。こうすることでファーストビュー内に収まる情報量が格段に増えたかと思います。横スクロールできることはカードを途中で途切れさせてわかるようにしました。

新しく追加した人気のワードでは、テキストリンクにしてしっかり押せることを明示しました。そして押し間違えないように、テキストとテキストの間の余白をある程度空けました。

お手軽レシピの項目では、完成品を大きめに写すことでどのような料理なのかわかりやすいようにしました。

カードは全体的に線をなくし、シャドウを後ろにつけました。全てを線で囲ってしまうと、少し固くなってしまうのでこうすることで柔らかい印象を与えるようにしました。

あとは見出しの文字サイズを大きめにして一目でどのような項目があるのかわかるようにしました。見出しの前に新たにアイコンをつけ、より見出しをわかりやすくしつつ柔らかいアイコンをつけて親しみやすさも演出しています。

細かいところで色と全体の幅を少し伸ばしました。前のデザインではデザインの横幅が狭く、少し寂しい印象を受けたので余白を狭め、間延びしないようにしました。

こだわりポイントを書いたところで、改めて両方のデザインを見比べてみたいと思います。

かなり成長したなという印象を受けますね。

レシピの詳細画面

続いてレシピの詳細画面も載せていきます。

まずは1年目の頃のもの。

ユーザーの視点で考えた時に要素として何があると嬉しいか？を考えて作成した記憶があります。完成像となる写真、他者からのレビュー、所要時間、材料、作り方があると網羅できるのではと考えました。

やはり横の広めの余白が気になりますね。

次に、3年後作成したものはこちら↓

かなり変わったのではないでしょうか。

全体的な統一感が出せるようにアイコンを見出しの横に入れています。

レビューも大事かもしれませんが、何人が気に入っているかという要素を取り入れてみました。そうした方がトップの項目にあった「人気」にも繋がりやすいと考えたからです。

トップとの連動という点ではカテゴリーの「肉」「野菜」をタグとして組み込みました。シャドウのデザインにしているので押せることを明示させています。

材料は線などで各項目を区切っていないと見づらいと感じたため、下線を引いています。

作り方も数字を目立たせることで各項目の区切りをわかりやすくなるようにしました。

また最後におすすめのレシピを載せることで気軽に他のレシピを巡回できるようにしました。

こちらも並べて比較してみましょう。

一目で成長度合いがわかるのではないでしょうか。

 

まとめ

このように同じ課題を年越しに行うと自分の成長度合いがはっきりとわかるので面白いですね。

ここまで読んでくださりありがとうございました！
次回もリメイク記事を投稿したいと考えています。