アドビ、デザインシステム「Spectrum 2」を発表、アドビアプリケーションにおけるユーザーエクスペリエンスを再構築

複数のアドビツールを使ったことがあるユーザーは、どのアプリケーションでも、レイアウト、アイコンのデザイン、カラーパレットなどのデザインで共通性を感じたことがあるかと思います。それは10年以上前に初めてアドビが導入したデザインシステム「Spectrum」によるもので、このシステムによって、アドビ体験のすべてが「アドビらしく」感じられるようになっています。

そして本日、アドビはこのデザインシステムを大幅にアップデートした「Spectrum 2」を発表しました。生成AI「Adobe Firerfly」によって、アドビのコアユーザー層の幅は広がり、新規ユーザーへのリーチも拡大しています。一方で、アドビは、クリエイティブやマーケティングをはじめとした、さまざまな仕事に携わるプロフェッショナルが求めるツールも提供し続けています。Spectrum 2は、「Creativity for All: すべての人に『つくる力』を」というアドビのミッションをサポートしつつ、アドビツールをより直感的かつ包括的に、プラットフォームを超えて楽しく使えるようにすることを目的としています。

この記事では、デザインシステムをなぜ今アップデートするのか、そして2024年にアドビのエクスペリエンス全体に展開を予定しているSpectrum 2がもたらす変化についてご紹介します。

Spectrumの始まりと今回のアップデートの理由

2013年にアドビ製品とエクスペリエンス全体にSpectrumを初導入してからこれまでに多くの変化がありました。Adobe Creative Cloudは現在、ウェブ、モバイル、デスクトップ、Mixed Reality（複合現実）などのマルチプラットフォームに対応しています。例えば、Adobe Expressは、教育関係者からSNSインフルエンサーまで、すべての人の創造性を活性化するオールインワンの制作ツールを提供しています。また、Adobe Document CloudとAdobe Experience Cloudについては、いずれも製品自体を変化させ、顧客層もより広げています。

そして、高度な生成AI機能を搭載したAdobe Fireflyのリリースにより、アドビアプリケーションのワークフローに変革が起きています。つまり、私たちは10年前よりもはるかに幅広いユーザーにサービスを提供しているのです。このようなアドビの進化に合わせ、デザインシステムも進化させる必要がありました。

Spectrum 2は、アイコン、タイポグラフィ、カラー、ブランド、イラスト、アクセシビリティ、プロダクト・エクイティ、パーソナライゼーション、データビジュアライゼーションなど、あらゆるデザイン要素をカバーする包括的なアップデートです。このアップデートでは、ユーザーに対して大きな改善点が3つあります。アドビ製品をより包括的で便利にすること、より親しみやすく表現豊かにすること、そしてどのプラットフォームも「慣れ親しんだ」ものにすることです。

最初のアップデートは、2024年初頭にアドビのウェブ版製品全体に展開される予定です。

より包括的で便利なツールに

Spectrum 2では、可能な限り多くの方がアドビのツールを使用できるように、高いアクセシビリティ基準を満たす必要がありました。世界保健機関（WHO）は、世界中で22億人が何らかの視覚障害に苦しんでいると推定しています。Spectrum 2において、ウェブツールをより包括的で便利なものにするにあたり、私たちの出発点となったのは、これまでもアドビが参考にしてきたWeb コンテンツ・アクセシビリティ・ガイドライン（WCAG）です。

アクセシビリティを高めるためのアプローチはいくつもあります。背景に対するテキストやコントロール、コンテナのコントラスト比、アクセシビリティタグやキーボードコントロールの実装、フォーカス状態の明示、その他の細かい実装などです。基本的なアクセシビリティ要件を満たすことは大事な最初の一歩となりましたが、私たちは、さらに上を目指しており、将来的にはアドビ製品が一人ひとりのニーズや好みに合わせて柔軟に対応できるようにしたいと考えています。

私たちがSpectrum 2で注力したのは、以下の3つの主要な分野です。

● より機能的なコントラストと明るさ：アダプティブパレットを使用して、好みに合ったカラーをリアルタイムで生成し、ユーザーが自分好みのインターフェイスを選択できるようにします。

●より多くの人が利用できるカラー：様々な色覚障がいに対応できるよう、データビジュアライゼーションに使用するカラーの見直しや、2つ以上のカラーが同じ名前で呼ばれる可能性がある場合、競合するカラー名（例：ピーチ、オレンジ、サーモン）の排除などを行います。

● 視覚的要素を優先順位付けするアテンション階層：ハイライトカラーの使用を最も重要なアクションだけに限定し、一般的なコントロール部分からは削除しました。また、ナビゲーションゾーンとコンテンツゾーンを分離し、奥行きと段組みを加えました。

私たちの取り組みは、Adobe Designによる「プロダクト・エクイティ（製品の公平性）」の実践と連携しています。デザイン、製品、エンジニアリングの各チームとのより深いパートナーシップのもと、誰もが偏見や制限を感じず、傷つけられることなく、アドビ製品のすべての機能にアクセスし、活用できるようにすることを目指しています。

より親しみやすく、表現力豊かに

Spectrumの最初のバージョンは、グレーを基調としたミニマルなデザインでした。Spectrum 2では、アイコンやタイポグラフィなどを再構築し、アドビのエクスペリエンスをより親しみやすく、印象に残るデザインにしています。

Spectrumチームはまず、幅広いユーザーに使用されているオールインワンツールであるAdobe Expressで、より親しみやすいデザインの実験を開始しました。Adobe Expressのデザインチームとの連携のもと、Spectrum 2の主要コンポーネントの先行実装として新しいUIテーマを作成しました。新しくなったAdobe Expressでは、アイコンとタイポグラフィはよりフレンドリーな印象にし、ストロークは少し太く、色は明るくすることで、全体的に親しみやすくなるように心がけました。

こうした変更の総和がユーザーのアプリケーションの見え方や感じ方に与えたインパクトはとても大きく、Adobe Expressの変化は、Spectrum 2の新しいデザイン原則につながる重要な出発点となりました。より表現力豊かで親しみやすい、これらのデザイン要素は、2024年にSpectrum 2を広く展開するにあたり、アドビのアプリケーション全体の基礎となっています。

どのプラットフォームでも「慣れ親しんだモノ」と感じさせるには

Spectrum 2は、プラットフォーム（OSX、Windows、iOS、Android、webなど）ごとに異なる外観を表示します。アドビは、さまざまなプラットフォーム向けに製品を開発しているため、クロスプラットフォームの一貫性（あるプラットフォームで学んだツールの使い方を別のプラットフォームにも適用できる）と、各プラットフォームごとの使用感との適切なバランスについて、熟慮を重ねてきました。例えば、Adobe Lightroomの場合、仕事用のMacBookと個人用のAndroid携帯で多少の違いはあっても、やはりどちらでもLightroomを使っていると感じられなければなりません。

Spectrumが最初に設計されたとき、モバイルプラットフォームの進化は急速で、同じアプリでもOSによってユーザーエクスペリエンスが異なるのが一般的でした。そこで私たちは、可能な限りどのプラットフォームでも一貫性を維持する方針でSpectrumをデザインしました。一方、Spectrum 2では、ユーザーが好みのデバイスやプラットフォームでアドビツールを「慣れ親しんだ」方法で使えるように、各プラットフォームに特化したデザインをあらかじめ提供します。

アイコン、カラー、イラスト、シェイプの再考

Spectrum 2のビジョンを実現するために、デザインシステムの基礎となるコンポーネントにいくつか変更を加えました。アイコンをよりクリーンで親しみやすく、柔軟で遊び心がある、馴染みやすいものに進化させたのもその一環です。

そして、グレーシステムにより明確な階調差を導入し、アドビのブランドカラーを元にカラーシステムを再構築しました。ブランドカラーを基調としたSpectrum 2のカラーシステムを使うことで、製品間でインターフェイスを調和させることが簡単になりました

アドビのエクスペリエンスでは、シンプルな線画から、製品のブランドカラーを反映したより緻密なフルカラーのエディトリアルスタイルまで、さまざまなイラストレーションを活用しています。ブランドデザインチームは、イラスト、バナー、その他のアセットの作成に使える、無限の組み合わせが可能な幾何学的シェイプの新しいツールキットを開発しました。

Spectrum 2がもたらす効果

Spectrum 2は、ウェブ版製品を皮切りに、2024年以降アドビのツールやエクスペリエンス全体に展開される予定です。私たちのビジョンをSpectrum 2として形にするまで努力を積み重ねてきましたが、これはほんの始まりに過ぎません。どんなデザインシステムもそうですが、Spectrumもたゆまずに進化を続けていきます。現在私たちは、デスクトップとモバイル製品それぞれに特化したバージョンのSpectrumを展開していくための準備に全力で取り組んでいるところです。

Spectrum 2のサイトでは、Spectrumのシステムや今後の展開について詳細な情報を提供していますが、ここでその一部をご紹介します。

この記事は2023年12月12日（米国時間）に公開された   Adobe unveils Spectrum 2 design system, reimagining user experience for Adobe applications の抄訳です