見出し画像

デザイン力を鍛える【毎日UIUX：2週間目】

ぷろ

アゲリシャスな人生にしたい！
どーもこんにちは！プロディレクターゼスプリ（@zes_kiui）です。

さて先々週から「 #毎日UIUX 」というタグで、僕視点で見て「 良き 」と思ったデザインを紹介しており、週に1回noteでそのまとめを行っているのですが、今日はそれの第2回目になります！

前回はこちら＞＞

それではいってみよーー！！

・Yahoo乗り換え案内（7日目）

app store ： iOS／android

【良いところ（twitter以外）】
・到着時間など一番パフォーマンスの良い部分が、オレンジ色に
到着時間や料金など一番パフォーマンスが良いものが、何気にオレンジ色になっており、他の選択肢よりも目立っていますよね。
全体的なデザインのバランスもあるので、あからさまに目立たせるのではなく、さり気ない感じが良いですね。
【直してほしいところ】
・タクシー利用の目安をファーストビューに表示させてほしい
タクシー代の目安が表示されているのは良いのですが、表示の優先順位が低すぎますね。できれば、ファーストビューに表示させたい。
（みんな、タクシーの方が安そうであればそれを利用すると思うので、もっと比較しやすくしてあげたほうが良いですね。）

・ソロメシ（8日目）

サイト：https://www.solomeshi.jp/

【良いところ（twitter以外）】
・新着ニュース欄の日付がオレンジ色で視認性が悪い
これおそらくわざとだと思うんです。
店舗新規追加の時くらいにしか利用しないことが想定されるので、更新頻度が低いため、わざと視認性を悪くして日付が古いことを気付かせないようにしているのだと思います。
ユーザー向けではありませんが、良い工夫ですね。
【直してほしいところ】
・ダウンロード動線を固定化しても良さそう
アプリのダウンロード動線ですが、ファーストビューと、フッターの2箇所だけ…
このページの目的はアプリのダウンロードだと思うんですが、その目的を達成するためには、動線を増やす、もしくは動線をページ下部に固定化するなど、ダウンロードしやすい環境を用意してあげるのが良いと思います。

・マクドナルドモバイルオーダー（9日目）

app store ： iOS／android

【良いところ（twitter以外）】
・自由度が少なく、出てきたことをこなすだけ
注文を行うためのアプリなので、ユーザーができることの幅を狭めて、注文に集中できる環境を用意してありますね。
初めて使ったときでも、迷うことなく利用することができました！

・統一された使い方と色・見やすいアイコン、
商品選択画面とカート画面のデザインの一部に同じUIを使用したり、アプリのデザインに使用している色の種類を黄・濃い黒・薄い黒・赤と極力少なくし、この色ならこのアクションということがわかりやすくしていますね。
アイコンや写真なども含めてわかりやすく、直感的に操作しやすいです。
【直してほしいところ】
・ハンバーガーメニューは必要ない
直感的な操作のじゃまになっているのがハンバーガーメニュー。
このボタンからは、ログイン・ホーム・ご注文・サポートへ遷移できるボタンが用意されていますが、商品の購買行動を取っているときには不要なボタねすよね…せっかく、商品の注文に没頭できるデザインになっているので、この部分についてはトルツメしてしまっていいのではと思います。

・skyscanner（10日目）

app store ： iOS／android

【良いところ（twitter以外）】
・co2の削減ができる飛行機の便を紹介できる。
今の時代、環境問題に気をつけて便を選択する方もいるはず…
そんな方のために、環境に優しい便の情報も提供しています。
安さだけではなく、新しい価値観の創出をしているところが素敵です。

・アプリ内のアクションとアプリ外でのアクションのボタンの配置位置が別れている
航空券の検索一覧では、上部に行き先や人数など、航空券に関する情報が書き入れられており、下部に「通知」や「共有」などのアプリ外のアクションボタンが設置されています。
検索に使用するものは上部に集約し、通知などアプリ外で使用する要素と分けているので、操作が混同することがありません。
【直してほしいところ】
・乗り換えが必要な場合は待ち時間も記載してほしい
海外へ旅行するときにチェックするのが、「Transit（乗り換え）」ですよね。どれくらいの待ち時間が発生するのかもポイントの一つですので、そういった情報の記載もお願いしたいものです。

・北欧暮らしの道具店（11日目）

app store ： iOS

【良いところ（twitter以外）】
・注文前の商品選択画面に商品の画像が表示される
注文を行う前に、色やサイズなど選択するのですが、その選択画面に写真が表示されていて、文字だけではなく視覚的に情報を提供しています。
文字だけだと間違って注文してしまうユーザーもいらっしゃると思うので、この気配りがとても素敵ですよね。

・商品の画像を一覧で表示できるボタンがある
商品の紹介ページには、だいたい8枚程度の写真が紐付いていますが、1枚ずつスライドしてみていくのは面倒…
そんな悩みを解決するために、商品に紐づく写真を一覧で閲覧できるようにするボタンを用意しています。
【直してほしいところ】
・「残りわずか」などアテンドする言葉の印象が薄い
「残りわずか」や「NEW」などアテンドするメッセージが表示されていると、ユーザーが商品に興味を持ちやすくなるのですが、その文字が圧倒的に印象が薄いですね。
デザインに合わせて色味の調整をする必要はあると思いますが、これでは、アテンドに気付いてもらえないので、もっと気付いてもらえる様にデザインの改修を行ってみてもよいかと思います。

・Papiba（12日目）

サイト：https://papiba.net/

【良いところ（twitter以外）】
・説明が少ない＝簡単という印象を与えられる。
アプリのファーストビューにデカデカと「作り方は簡単３ステップ」と記載がある通り、サイトにもその3ステップしか掲載していないので、「説明が必要なく、簡単にページが作れるんだという印象を持ってもらいやすくなります。
【直してほしいところ】
・完成品のイメージが付きづらい。
簡単に作れるということを訴求しすぎて、制作物の情報量が少なく、どういったものが作れるのかのイメージが沸きません。
もう少し情報量を増やしてそのあたりを伝えてみてもいいかもしれませんね。

・Look me（13日目）

サイト：https://lp.lookme.me/

【良いところ（twitter以外）】
・取材したい人、されたい人の使い方が色分けされている
ユーザーの属性に合わせて、色の使い分けをしているのはわかりやすいですね。ここで使われている色は、最初のイラストの服の色をベースに選んでいるので、突如青系の色が出てきても違和感がないのです。
【直してほしいところ】
・取材後の流れがイメージしづらい
実際に取材される際の流れがイマイチわかりづらいですよね。
そこをもう少しわかりやすくすることで、登録率の向上につなげることもできるのではないかと思います。

・さいごに

なんとか2週間続けることができました！
UIUXの勉強にもなりますが、こんなサービスがあるんだなと、別の意味での気づきもあるので、やっていて楽しいですね！

では、また来週水曜日にお会いしましょう！
バイチャ！

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