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

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

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

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

前回の記事はこちら

ECサイトのデザイン

前回同様「Daily UI」のサービスで作成したものをリメイクしました。

今回の記事でも2つのお題のリメイクデザインを掲載します。

どちらもECサイト画面です。

商品詳細画面

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

お題：ECサイトの商品詳細画面

ターゲット：ファッション好きな20代男性

特徴：会社員、残業、ショッピングが好き、似合うか不安、新しいもの好き

一言：雰囲気を感じながら、通販で買い物したい！

情報項目の一例：商品名、ブランド名、カラー、値段などの詳細情報、お気に入りや共有、購入導線に移る機能

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

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

全体の配色は水色にしました。フレッシュさを感じる水色にすることで、「新しさ」を意識した記憶があります。

今見ると水色と黒の組み合わせが少し固い印象を受けるため変更しても良かったのではないかと思いますね。

画像は次の写真もあることがわかるように矢印のアイコンを入れていますが、全部で何件あるのか一目でわからなく不親切だと感じます。

サイズや色は上記の画面内で表示することでどんなサイズがあるか一目でわかった方が良いという意図の元こちらの画面内で完結させました。

サイズや色はボタンのつもりで一応押し間違えないように余白も意識したつもりですが、そもそもボタンであることがわかりづらい見た目になっていると感じます。

「購入する」ボタンは目立たせた方が良いと考え、大きめに表示しています。

当時なりに考えを巡らせつつ作成した記憶はありますが、3年経った今見ると突っ込みどころが多いですね。

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

一画面版

画面全体版

全然変わったなという印象を受けるのではないでしょうか。

まず先述の通り文字色が黒で少し固い印象を受けたため、少し濃い水色と白の組み合わせに変更しました。シャドウを取り入れることで前のデザインののっぺり感を減らしつつ、新しさも出せたのではないかと思います。

ボタンは固定に変更しました。画面内のどこにいてもすぐ購入できるようにする意図があります。お気に入りも同様に固定にしてすぐ登録できるようにしました。

またボタンの形は楕円に変更しました。前のデザインは四角の要素が多く固い印象を受けるかと思いますが、このようにすることで柔らかい印象を受け親しみやすさが増すのではないかと思います。

画像はスクロールできるようにしてどれぐらい画像数があるのか把握しやすいように変更しました。また、選択している画像のカラーが何かすぐわかるようにテキストを入れました。

レビュー要素を盛り込み、口コミを気にするユーザーの心理に応えました。

あとはスクロール量を増やしすぎないように、商品情報/サイズ/レビューをタブ切り替えできるようにしました。選択している箇所はタイトルを太字にして下線も出るようにしています。

コーディネートの項目を入れて、日常使いの参考にできるようにしました。

他に欲しい要素を考えた時に、おすすめ商品を載せて検索の手間を省けるようにすると便利なのではないかというのと、また別の商品を見たい時にカテゴリが表示されていると良いのではないか(検索画面に移動する必要がなくなる)と考え載せました。

サイズやカラーは「カートに入れる」ボタンを押した後にポップアップが表示され、そちらで選択できるように変更しました。下記のデザインがポップアップとなります。

そして背景色は薄いグレーに変更しました。白が背景色だと背景が目立ちすぎてしまうと考えたからです。本来背景は目立たせるものではないため…。

在庫が一覧で見られるようになるとわかりやすいと思いつつ、サイズとカラーの組み合わせはパターンが多いので商品詳細に載せるとスクロール量が増えてしまうと考えました。そこでポップアップに切り替えました。

では両方のデザインを見比べてみましょう。

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

前は見出しがどれなのかわかりづらかったのも、フォントの太さを変えたりサイズを少し大きくしたりすることでわかりやすくなりましたね。

このように比較してみるとよりわかりやすいと思うのですが、要素の横幅を広げました。こうすることで画面が間延びしないようにしつつ、1つの項目内で表示できる幅が広がるので画面の縦幅が狭まる＝スクロール量が減るメリットもあります。

 

続いてカート内画面も載せていきます。

カート内画面

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

当時は商品カード内の要素の配置にものすごく苦戦した記憶があります。主に購入数のプルダウンと削除ボタンですね。2つの要素はそれぞれ押し間違えてしまうといけないものなので余白を空けることを意識しました。ですが、その余白を意識したことによって謎の間が存在する違和感のある配置になってしまっています。

そして合計金額は目立たせた方が良い！と思って配置しており、それ自体は良いのですが「￥」と「円」が並んでいる謎仕様になっていますね…。

「購入へすすむ」と「ショッピングを続ける」のボタンサイズが同等なのも本当にそれで良いのか？と感じます。

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

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

まずカート内に何点入っているかを記載し、点数がわかるように変更しました。

商品カードは周りの線をなくしてシャドウにすることで柔らかさと新しさを出しました。

カード内の配置も基本左寄せに変更して謎の配置にならないようにしました。削除ボタンだけ動きがイレギュラーなので右寄せ配置にしています。

ボタンは「購入手続きに進む」を大きくして次の行動を喚起させています。

また気軽に他の商品も検討できるように、こちらでもおすすめの商品項目を設けています。

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

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

左のデザインは全体的にのっぺりとしており画面全体が薄くあまり印象に残らないデザインになっているかと思います。

逆に右のデザインは鮮やかな水色を使用したり、フォントの色を濃くしたり太くしたりして目立つようになったのではないでしょうか。

 

まとめ

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

また数年後も同じお題をリメイクしてみると、更に自分の成長度合いが目に見えて面白そうですね。

ここまで読んでくださりありがとうございました！

次回は別の記事を投稿していくかと思いますが、その際も読んでいただけると嬉しいです。