SHOWROOMのUIをカイゼンしてみた

こんにちわ、エンジニアのきむらです。現在は主にフロントエンドを担当しています。

今回は、IBPでSHOWROOMの既存UI改修のプロトタイプ制作をしてみたのでその報告です。

※ IBPに関してはこちら tech.showroom.co.jp

はじめに

入社前からずっと気になっていて、直したかったUIがありました。

それが、こちら

こちらは、SHOWROOMのPC版のグローバルナビゲーションです。 ナビにカーソルがホバーすると、自動でナビがでてきます。

実際の動きはこちら（SHOWROOMの実際のサイト）

いかがでしたか？

ずっと触っていると私はこんな気分になります（あくまで個人の感想です）。

SHOWROOMはサービスの特性上、配信に関する改修やイベントの改修が優先されるため、どうしてもこのようなUIの改修は後手後手になってしまうところが正直あると思っています。

ユーザさんも気になっているはずですが、ありがたいことにそこまで重大な問題になっていません。

が、日々のカイゼンの積み重ねはとても大事なわけでして、IBPでまとまった時間が取れるようになったため、ここで一気にやってしまおうと思ったのでした。

改修の方針を考える

いままでの私の開発経験上、以下の２点は特に気をつけなければいけないと思っています。

* 開発者が良かれと思ってつけた機能は、案外ユーザには不要なケースが多い

* ユーザが想定しない動きをするUIは使いづらい

これを踏まえると上記のUIは、

• ナビが、ホバー時に自動で意図せず出てきて、コンテンツが見えづらくなる

• アニメーションはユーザの目を引くので、意図せず出てくるとコンテンツから意識がそがれる

が課題だと思っています。 更にこのUIではもう１つ課題があり、

• アニメーションがなんか遅い

点が気になります。 Googleが提唱するマテリアルデザインのガイドラインによると、デスクトップでのアニメーションの速度は150〜200msがよいとの記述がありました。

現状のナビゲーションは、delay 100ms と アニメーション 300ms に設定されていたため、だいぶ遅いようです。

以上を主な改修箇所とし、UIを改修することにしました。

改修内容

前項の内容を踏まえて、改修した内容がこちら

ホバーしたら勝手に出てくるのをやめる

ユーザのアクションでナビの開閉をします。今回はよくあるハンバーガーメニューを採用しました。

これは「ボタンを押した」 -> 「画面が反応した」という、ユーザが想定しやすいUIです。

アニメーションの速度を速くする

ガイドラインをもとに200msに設定し、自動で出てこないので delay をなくしました。

おまけ

ブラウザのウィンドウ幅が十分に広い場合、ナビを閉じておく必要がないため開いた状態にし、ウィンドウ幅が狭い場合のみ現状の閉じたデザインに変更しました。

ユーザの視認性の向上を目的としています。

改修後の画面

できあがったものがこちら

ウィンドウ幅が広いときは、ナビが最初から開いている

ハンバーガーメニュー

ウィンドウ幅を変えると、ナビの開閉状態が変わる

細かい問題はまだまだあるでしょうが、多少「よくあるサイト」「見慣れたサイト」になったのではないでしょうか。

まとめ

UIに正解はないと思っていますが、「根拠のある」「納得感のある」ものである必要はあり、またノウハウをまとめている記事はインターネット上にたくさんあります。

また、書籍もあります。

このあたりはデザインセンスとかは関係なく、学習すれば身につく領域で、いろいろな情報を日々アンテナをはって得たり、他社のサービスを良く見てみることがとても大事だと思いました。

そして、自分が作っているサービスは、たとえ使いにくいと思っていてもずっと触っていると慣れてしまいます。

慣れてしまう前に、気になる部分はどんどんあげだし、改修していくスピード感もまた必要だと感じました。

いっしょに働きませんか！

SHOWROOMでは、一緒にプロダクトを作り上げていく仲間を絶賛大募集中です。

職能や役割にかかわらず、自分たちが楽しく働ける仕組み、ユーザさんに良いと思ってもらえる機能をボトムアップでどんどん作り上げていける会社ですが、まだまだ人が足りません！

後手後手になっている改修をスピード感もって行うためにも、エンジニア、そしてデザイナーがもっと必要です。

興味が湧いた方は一度ぜひ遊びに来てください！ www.wantedly.com