2016年9月20日に「Backlogユーザーの集い -UIデザイン大幅リニューアルを語り合いましょ会-」を開催しました!当日は台風にも関わらず、多くのユーザーのみなさんで賑わいました。2005年にベータ版をリリースしたBacklogは、おかげさまで11年目を迎えました。ヌーラボを長年支え続けている主力サービスでもあり、今回のBacklogUIの大幅なアップデートはヌーラボ史上のなかでも大きな転換期にあたります。
今回のイベントは、ユーザーのみなさまが抱くリニューアルに対する不安を少しでも軽減してもらうために開催しました。キーノートスピーチにはWebデザイナー中川裕二とソフトウェア開発者の藤田正訓が登壇し、リニューアルにいたる経緯やコンセプト、取り入れた技術についてお話ししました。イベント後には、ユーザーからの質問にBacklogチームがお答えする懇親会/質問会も実施しました。本記事では、当日のイベントの模様とキーノートの内容についてお届けします!
Backlog Refresh UI ~ Backlogはデザインを一新します ~
イベントのトップバッターを務めたのは、Backlogのソフトウェアを開発する藤田。なぜこのタイミングでBacklogのリニューアルを決意したのか、3つの理由を参加者に伝えました。
1.「ちょうど良いを提供するため」
藤田は、BacklogのUIについて、2004年のWebアプリケーションのトレンドデザインと2016年のUIデザインの変化を例に挙げました。Backlogは、旧トレンドデザインから影響を強く受けていました。リニューアル後は、要素間の間隔を大きくして、色数やボーダー数などは最小限に食い止めています。世の中の変化とともに変わっていく「ユーザーにとってのちょうど良い」を常に提供していく。それが今回のリニューアルUIのコンセプトです。
2.「機能追加/改善のための土台作り」
コラボレーションを促進して、チームでの仕事がより一層楽しくなるような機能を実装するためには、最新の機能に耐えられる土台作りが必要です。Backlogは、10年もの間、機能を継ぎ足し続けていたため、新しい機能が実装されても煩雑さを増してしまうだけで、ユーザーに届きづらいということが起きていました。そこで、もう一度全体を統一できるようにコンセプトを練り直し、新機能を実装するための土台となるUIが必要でした。
3.「その他の理由」
他にも、会社の規模が大きくなり、社内の開発者のリソースが増えたこと、グローバル戦略の本格化など、今後ヌーラボがさらに挑戦するための環境が必要だったことが挙げられます。
Backlog Refresh UIはどうやって進めたの?
では、こうしたコンセプトはどのように実行することができるのでしょうか?リニューアルUIのデザインのディレクションを担当した中川が語ります。
中川は、藤田が述べたリニューアルUIのコンセプトに基づいて作業を進めていくために、最初に「やること/やらないこと」を決めました。やることで決めたのは、画面をスッキリさせる(操作感)、モダンなUIにする(感覚)、というもの。逆に、やらないことで決めたのは、大規模な画面構成の変更および、既存機能の削除でした。
10年にも渡って継ぎ足した機能を削除することなく、デザインをスッキリさせてシンプルにするのは、Backlog Refresh UI デザインチームにとって、大きな挑戦でもありました。この障壁を乗り越えるために、導いた解決策は「優先度や配置を見直し」「主要目的以外の要素は隠す」というものでした。ドロップダウンや折りたたみ機能を活用して、複数の要素を隠すことで、見事に機能を削除しなくても画面や操作対象がスッキリ、分かりやすくなりました。
中川は「画面をスッキリさせたことで、主要な要素が際立たせられる。そして、作業に集中出来るような環境づくりが実現できました」とBacklog Refesh UIのコンセプトについてまとめました。
当日のイベント資料は下記のSpeakDeckからご覧下さい。
(※リニューアルに関してより詳細が知りたい方へ朗報です!今週、ヌーラボブログにてBacklog Rrefresh UIチームが執筆した記事を随時公開します。具体的にどういう機能が実装されるのか、またUIはどう変わったのかなどを技術的な部分も織り交ぜながら解説します。どうぞお楽しみに!)
Refresh UI 提供スケジュールのお知らせ
9月27日(火)からベータ版のリリースを開始して、スペースごとに順次提供を開始いたします。11月末の本リリースまで旧UIと新UIの相互切り替えが可能です!また大変恐れ入りますが、IE9、10へのサポートは11月末の本リリースから限定的にサポートを開始します。
新UIについて質問が飛び交った懇親会
懇親会では、ホワイトボードと付箋を用いて参加者からの質問にBacklogチームがお答えする、カジュアルな質問会を実施しました。
BacklogUIのリニューアルに関連する記事はこちら
https://nulab.com/ja/blog/backlog/update-design-2016/
https://nulab.com/ja/blog/backlog/backlog-new-ui-intro1/
https://nulab.com/ja/blog/backlog/backlog-new-ui-intro2/
(近日公開)ベータリリース開始!BacklogのUIアップデート (3)〜スッキリ、シンプルな新UIをβリリースしました〜
こちらもオススメ:
プロジェクト管理とは?目的や項目、管理手法について徹底解説! | Backlogブログ
プロジェクト管理の基本や主な項目を紹介。CCPMやWBSなどのプロジェクト管理の代表的な手法やプロジェクト管理全体の流れを解説。これからプロ…
backlog.com