Jira にダークモード登場!

最もリクエストの多かった機能実現への取り組み

Jira ダークモード

本ブログは、こちらに掲載されている英文ブログの意訳です。内容に相違がある場合は、原文が優先されます。

2022年3月23日にアトラシアンは創立20周年を迎えました。この20年間、「あらゆるチームの可能性を解き放つ」ミッションに向けて、必要とされる機能を提供すべくユーザーの声に耳を傾け、最良の製品をお届けできるよう、日々開発に取り組んできました。

20年を経ても対応すべき積み残しがあり、これらの課題に挑み続けているのですが、その中でも記念日を迎えた直後に取り組むことになったのが、ユーザーから最も多くリクエストが寄せられていた「ダークモード」でした。

Gif 制作:Angelica Bocanegra

始まり

ここだけの話ですが、アトラシアンでは過去にも Jira のダークモードをリリースしようと試みたものの、その時は我々自身が設置したハードルを越えることができませんでした。というのも、Jira が開発された当初、その頃市場に出回っていた他のデジタル製品と同様に、共有コンポーネントを十分に活用する手法が採られておらず、配色を指定するための 16 進数のカラーコードが Jira 製品全体にハードコーディングされていました。製品が急成長するのに伴い、コンポーネントライブラリを構築してきたものの、今回 Atlassian Design System のチームが戦略を見直し、デザイントークンを導入するまで、製品内で使用される色に対するアプローチは変わっていませんでした。ところで、このトークンとは何でしょう。

デザイントークンの導入

デザイントークンとは、配色を含むデザイン上の決定事項に名前を付け保存するもので、信頼できる唯一の情報源 (single source of truth) となります。ダークモードに取り組むにあたり、従来行われてきた、コード内に 16 進数の値で色を指定する代わりに、このデザイントークンの採用が決まりました。Design System チームによって各トークンの色がシステムレベルに格納されるようになったので、例えば Jira Software のボタンの色を変更する際に、製品全体にわたって配置された何千ものボタンを手動で更新するのではなく、1 つのトークンを更新するだけで変更が反映されます。

導入プロセスの次のステップでは、このトークンという素晴らしい手法を製品全体に実装するのですが、これが非常に骨の折れる作業でした。それは、あらゆる影響範囲を考慮する必要があったためです。トークンはアトラシアン製品で動作するだけでなく、Marketplace のアプリや Jira と統合された他の製品でも動作する必要があります。下の画像はその規模感を示すものですが、「Platform UI」と「Product UI」の部分はアトラシアン、そして「Ecosystem UI」はアトラシアン認定パートナー、さらに「3P UI」 は当社のソフトウェアにシームレスに統合するサードパーティのアプリを表しています。

画像制作:Jennie Yip

いずれにしろ、これは着手せずには進めないものであったため、Design System チームはスクリプトを作成し、あらゆる 16 進数値の検出とこれらのトークンへの変換を自動化することで人的作業の 90% を削減しました。

大半の作業はアトラシアンのツールを使って行われたものの、人手を必要とする作業はありました。25 を超えるチームが 10 億単位にも感じられるほどの数の画面のレビューを行った後、我々はついにやり遂げたと確信しました!トークンはすべての Jira 製品に実装され、並行して対応していたいくつかの問題点も解消されました。ここまで来れば、あとはスイッチを切り替えるようにダークモードの提供を開始するだけだと感じられました。しかし、そうではなかったのです。このソリューションを、製品内で使われているその他の画像やあまり目立たない機能にも拡張し、さらに数千におよぶ Marketplace のアプリが迅速にこの変更を適用し、新しい外観と互換性を保てるようにするための作業がありました。

アルファ版のリリースと早期アクセスプログラム

トークンが全 Jira 製品で機能するようになったおかげで、作業中のラフバージョンのダークモードと、これに合わせてコントラストを改善した新しいライトモードが準備できました。この段階で、Jira 製品の大半の箇所で画面モードを切り替えるテーマが機能するようになったと考えられていたものの、そう簡単ではありませんでした。アトラシアンの取り組みのひとつは、あらゆるチームに対応できるカスタマイズ性の高い製品を作ることです。言うまでもなく、アトラシアン エコシステムのパートナーによって作成された何千もの Marketplace アプリがあり、Jira での体験をよりカスタマイズすることができます。こうした背景から Jira が数百万人のユーザーそれぞれの環境で、どう表示されるかを正確に把握するのは至難の技です。そこで、「Jira ラボ」と呼ばれるリリース方法を通して本番稼動を開始することにしました。

Jira ラボは、アトラシアンが実験的な機能をリリースする場所で、ユーザーの協力を得ながらライブテストを行い、フィードバックを基にイテレーションを回します。Jira ラボは、Jira の右上のユーザーアイコンから個人設定を選択した画面で確認いただけます。

いくつかのバグがあることは予想しながらも、Jira ラボを通してテーマ機能でできることがユーザーに十分に伝わるかを確認する目的がありました。そこで、製品内で大々的に案内するのではなく、昨年 12 月に Atlassian Community に公開した記事で控えめにお知らせしました。

予想に反して、アルファ版のリリースは爆発的に知れ渡りました。YouTube 動画も投稿され、多くの熱心なユーザーが、この実験的な機能を試し、たくさんのフィードバックを寄せてくださいました。

フィードバックを取り入れる

アトラシアンではフィードバックを大切にしています。フィードバックによって進むべき方向性を見出したり、うまくいったことを把握できるだけでなく、改善に向けて何にフォーカスすべきかを確認できます。Jira ラボに公開した当初は、週に約 700 件ものフィードバックが寄せられましたが、継続的な改善により、その数は 17 件前後にまで減少しました。Jira でアルファ版として テーマ機能をリリースした際には、合計で 5,176 件を超えるフィードバックがありました。約 5 か月かけて、フィードバックを精査し、監査とユーザビリティテストを繰り返し行い、数百におよぶ大小さまざまなバグを修正することで、テーマ機能のエクスペリエンスを改善しました。

Jira ラボでのテスト期間で最も完了させたかった大きな改善の 1 つは、新しいテーマを適用しても、Marketplace のアプリが Jira と互換性を維持できるようにすることでした。アトラシアンのカンパニーバリューのひとつに「Open Company, No Bullshit (オープンな企業文化、デタラメはなし) 」というものがあります。そしてアトラシアンはこのバリューに基づいて秘密裏に物事を進めることなく、パートナーをサポートすることを心がけてきました。そこで、社内で作業に着手する前に、デザイン戦略の見直しをする計画をパートナーの皆さんに共有しました。そして、できる限り早く、アトラシアンのオープンデザインシステムにトークンを公開し、API をパートナーに共有することで彼らのアプリの外観がユーザーのテーマの選択に基づいて同期できるよう手配しました。

現状

ここまで、テーマ機能の実現のため、そしてこの機能の体験がユーザーにとって最良のものとなるように、抜本的に手法を見直し、たゆまぬ努力を続けてきました。そしてようやく、この労力が報われます。

ベータ版の開始

今年の4月に、この新しいテーマ機能を Jira ラボから本機能に移行しました。本ブログの英語版が執筆された時点では、まだこの機能について広く告知をしていなかったにも関わらず、約 35 万人ものユーザーが利用されていました。

ただし、ベータ版というのは最終版ではありません。終わりに近づいてはいるものの、いくつかの問題を解決しながら、引き続きユーザーの皆さまからのフィードバックを受け付けています。

画像制作:Candice Lloyd

作業中のアイテム

ベータ版のダークモードを試す際に、1 点お気付きになることがあるかと思います。それは、小さなアイコンやイラストをはじめとする、Jira 全体に表示されるいくつかの画像が正しく表示されないということです。これらの画像は 16 進数の値を使用しないため、ダークモードで完全な互換性を保つためにはさらなる作業が必要とされます。

再度、一部の開発者が集まり、Jira 全体で使用される 1,200 以上の画像を検出し、照合する新しいスクリプトを作成しました。これらの画像は 60 以上のチームがオーナーシップを持つもので、アトラシアンのデザインチームとブランドチームはそれぞれ、新しいモードに対応する画像の制作を開始しています。

まもなく迎えるゴールと今後

現在、ベータ版の段階を経て最終版を世に送り出すことを目指していますが、ここまで多くのハードルを乗り越えられたことを嬉しく思います。

最もリクエストされた機能を実現するのは大変なことですが、(20年経った今でも) こうした課題に直面した際、アトラシアンには精力的に取り組む姿勢があることを自信を持ってお伝えできます。これからも引き続き、多くの素晴らしい機能を提供しながら、あらゆるチームの可能性を解き放つべく邁進してまいります。