EC利用時のデバイスはスマホが約8割らしいのでスマホのUIについて考察する #フロントエンド

背景

今年入社して初めて案件を抱えるも、デザイナーとの打ち合わせで自分がスマホでコンテンツを見る機会が少なすぎることを知る。(9:1でPCを使用しています)

弊社はファッションECに特化しています。
そこで、ファッションECをスマホのブラウザでひたすら閲覧して思ったことを書きます。

今回はこの２つに限定します。

実際に、業務でもタップの領域が明らかに足りないところがあり改善してみました。
エンジニアとデザイナーの間でデザインの共通認識を持つと、コミュニケーションも円滑になります。

今回は、主に色使いに注目します。

ブランドイメージを少なからず知っている方がいいので、日頃自分が好んでいるブランドから選びました。¹

ハンバーガーメニューを開くと、YOHJI YAMAMOTOではブランド一覧が、BshopではWOMENのカテゴリーが予め展開してありました。
このブランドはどこを一番みてほしいのかが一目でわかるのが良いです。

結構あります。PCと同じ表示のままのサイト。
今回考察した2サイトは44px以上あって押しやすい😆

ここからはかなり主観が入りますが、
筆者が思うYOHJI YAMAMOTO のイメージは 黒, 袴 などです。
サイト自体も白黒で統一されており、バナーなどで白黒以外の色を使用したとしても彩度を落としています。

続いて、Bshopのイメージは シンプル,ベーシック,単色などです。
こちらもイメージ通り、全体的に白黒で統一されており、洗練されたイメージを与えます。

デザイナーとのコミュニケーション
- 筆者ではないですが、デザインを起こす段階からペアプロのような形でやっているエンジニアとデザイナーもいます。実装時のコストダウンも期待できそう。
- 特に色については彩度,明度,コントラストなどの言葉をを用いたほうが伝わりやすいです。
計測に興味が湧いてくる
- やりたいことはたくさんですが時間は有限ですね..有効な対策は刺さるところに刺さねば！😏
正直、悪いところもたくさん見つけてしまう..
- 改善案も含めて筆者はチームのslackでひとりごとと称して投稿しています。チームの誰かが拾ってくれることもあり、教えてもらったり議論が深まることもあるのでオススメです。