こんにちは、Mackerel のデザイン担当です。 今回リリースされた、新しいサイドバーをご紹介させていただきます。
まずはこちらの画像をご覧ください。 Before（旧サイドバー）とAfter（新サイドバー）の比較です。
一見すると、違いは小さく見えるかもしれませんが、今回のアップデートには「日々使う人の快適さ」をとことん追求した工夫が詰まっています。
見直した背景と目的
従来のサイドバーを使っていて、 「どこから何にアクセスすればいいのか、少し迷うな」 「スクロールが多くて、目的の情報にたどり着くのが面倒だな」 と感じる場面がありました。
情報や機能が増えていく中で、このままでは将来的にもっと煩雑になるという懸念もあり、 今回のアップデートでは、情報構成と操作性をゼロから見直すことにしました。
キーワードは、 「見たい情報に、すぐアクセスできること」。 日々の業務の中で、迷わず・無駄なく・心地よく使えるUIを目指しました。
新しいサイドバーでできるようになったこと
今回のアップデートで、以下のような改善を行いました：
- ダッシュボード／サービス／APMを横断的に一覧表示できるようにし、複数の視点からモニタリングがしやすくなりました。
- 各一覧は「お気に入り」のみに絞って表示されるため、ユーザーの関心に合わせたカスタマイズ性が向上しています。
- APM（アプリケーションパフォーマンスモニタリング）のサービス一覧表示に対応し、よく閲覧するサービスの様子をワンクリックで確認することができます。
- 一覧の開閉がトグル式で操作可能になり、その開閉状態はweb storageに保存されます。これにより、毎回自分の使い方に戻ってくる、という心地よい体験が実現しています。
- これまで各セクションで別々だったスクロールは、全体スクロールに統一。画面操作の迷いがなくなり、スムーズに情報を追えるようになりました。
お気に入りとスクロールについて例を示しますと、ダッシュボード／サービス／APMにおいては、よく使うものに対して★をクリックして「お気に入り」を設定する機能が以前から用意されています。
従来のサイドバーの挙動では、「お気に入り」に設定したものは先頭に配置されるものの、ブラウザの高さによっては領域がスクロールするように挙動が変わります。お気に入りが増えてくると、狭い領域の中でスクロールすることが毎回必要になって不便でした。
新しいサイドバーではこれを改善し、「お気に入り」に設定したものだけに絞るとともに、表示可能な量を増やし、できるだけスクロールせずに表示するように変更しました（お気に入り以外も含めた全部の名前を参照するには、「ダッシュボード」「サービス」「APM」をそれぞれクリックしてください）。
設計に込めた思い
この改善にあたって、私たちが最も意識したのは、 「ツールではなく中身に集中してもらうこと」です。
サイドバーというのは、毎日必ず目にし、操作する場所です。 だからこそ、情報の出し方や操作のストレスをできるだけ減らし、 「考えなくても自然に操作できるUI」を目指しました。
「今自分がどこにいるか」 「次に何を見たいか」 それが直感的にわかるように、横断的な一覧、トグルによる開閉、お気に入りに絞った表示、と構造と視線の流れに気を配ったつもりです。
一見すると地味な改善かもしれませんが、毎日使うからこそ、じわじわと使いやすさを感じてもらえたらと思います。
新しいサイドバーの利用方法
新しいサイドバーは現時点では初期設定ではOFFとなっております。 ご利用にあたっては、ユーザーインターフェースの設定から明示的に有効化していただく必要があります。 ぜひご自身の環境でお試しいただき、ご意見・ご感想をお寄せくださると嬉しいです。
1:「アカウント設定」から「ユーザーインターフェース」に移動
2: ページ下部の「新しいサイドバーを有効にする」をONにする
最後に
新しいサイドバーは、今後の運用・開発をより効率的に、そして心地よく支えるインターフェースです。
ぜひ実際に触っていただき、「あ、楽になったな」と感じていただけたら嬉しいです。 これからも小さな改善を積み重ねながら、みなさんの声を取り入れて進化させていきたいと思います。
ありがとうございました。
