WebページやスマホアプリのUIデザイン・モックアップが簡単に!Adobe XDのプラグイン「Spectrum」が便利

WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。

UIデザイン・モックアップが簡単に作成・管理できるAdobe XDのプラグイン「Spectrum」

Spectrum for Adobe XD: Adobe’s design language in its experience design tool
by Jacob Frank

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

アドビのデザインシステムであるSpectrumは、5年前に社内で導入されて以来、社内のすべてのデザインチームに欠かせないものとなっています。そして本日、Adobe XDのプラグインとして利用できるようになりました。コミュニティにプラグインを公開し、Spectrumが提供するすべての機能が誰でも簡単に利用できます。

また、ワークフローを合理化するためのデザインシステムのツールのモデルを共有したいと考えているため、Spectrumを広く利用できるようにしています。このプラグインはきっと、あなたにも役立つでしょう。

あなたの組織でデザインシステムを使用しているなら、このプラグインはデザインシステムの作成・メンテナンスに良い影響を与えると思います。

Spectrumのインターフェイス

Spectrumの機能と開発した経緯

アドビのプロダクトエコシステムは非常に多様性に富んでおり、プロダクトデザインチームにとって一貫性を保つことが長年の課題となっていました。Spectrumを導入する前は、チームはデザインにコンポーネントを追加するためにステッカーシートをダウンロードするためにSpectrumのドキュメントサイトを使用していました。しかし、デザイナーが異なるバージョンのステッカーシートで作業することがあり、デザインと実装に一貫性の問題が生じていました。

また、さまざまなプラットフォーム、カラーテーマ、コンポーネントのバリエーション、スケール、ステータスの中から適切なコンポーネントを見つけることは時間がかかり、デザイナーにとって大きな問題でした。当社のデザインシステムでは、テキストフィールドやボタンのようなシンプルなコンポーネントは、何百・何千ものバリエーションがあります。異なるスケース、プラットフォーム、テーマに合わせてインターフェイスを再設計するには、かなりの重複作業が必要になります。

大規模な設計をするためにより良いソリューションが必要でした。不必要な作業や矛盾するリソースを軽減するためです。ライブラリとXDのクラウドドキュメントはステッカーシートの問題の多くを解決することができましたが、わたし達の目標は不要なものを一切排除し、Spectrumの進化に合わせて常に最新の状態に保つことです。

プラグインはシンボルやレンディションに依存せずに構築し、代わりにSpectrumの階層的なトークンデザインシステムに基づいてコンポーネントを動的に描画します。実際のデザインに合わせてステッカーシートから提供される表現を手動で調整するのではなく、基本的なコンポーネントをプログラムで設計するためのツールを提供しています。また、このトークンシステムは、SpectrumのCSSやその他のリソースを生成し、エンジニアチームがSpectrumを最新の状態に保つために使用しています。このシステムはデザイナーがチームの仕事をサポートすることを確信できるようにしてくれます。

つまり、デザインの調整に多くの時間を費やす必要がなくなりました。

ダークモードのデザインも簡単

このプラグインを使用すると、ドキュメントへの直接アクセスとともに特定のコンポーネントのすべてのバリアントとプロパティを探索することができます。また、個々のコンポーネントやデザイン全体のハイレベルな側面を簡単に変更できます。

ホバー、クワイエット、ダークカラーテーマ、アイコンなどの特定のプロパティを使用したコンポーネントを作成する場合、もはやピクセルのプッシュは不要になり、コンポーネントのインスペクタで簡単に変更できます。

変更は、コンポーネントのインスペクタで簡単

私はこのプラグインが大好きです。ドロップダウンの「ピッカーメニューコンポーネント」を使用すると、時間を大幅に節約できます。これにより、プロセスが大幅にスピードアップします。
Shannon Rhodes -Adobe社シニアエクスペリエンスデザイナー

Adobe XDでSpectrumを使用することで、デベロッパーをはじめ、プロジェクトマネージャー、プロトタイプ作成者などチームのメンバーがデザインシステムの使用方法を理解しやすくなり、デザインシステムの仕組みを把握できるようになります。

Spectrumを使用した結果

このプラグインがアドビすべての人々にどのように役立つかを見てきました。Spectrumを導入したことで、新しく入ったデザイナーも実践的な方法ですぐにデザインシステムを使い始めることができるようになりました。また、他のデザインやデベロッパーのロールのための新しいワークフローもオープンになりました。

私はUXライティングとプロダクトコンテンツストラテジーの仕事で常にSpectrumを使用しています。実際のUIコンポーネントで文字列がどのように表示されるかを簡単に確認でき、どのように機能するのか自由に確認できるので、このプラグインを使うことをとても気に入っています。
Jess Sattell -Adobe社シニアエクスペリエンスコンテンツストラテジスト

階層化されたデザインのトークンシステムにより、ユーザーはすべてが最新の状態であることを確信できます。また、このプラグインが堅牢なアクセシビリティ標準に検証済みの事前に構築されたオプションやコンポーネントを通じて、インターフェイスに組み込まれることを確認するのにも役立ちます。

さまざまなコンポーネントを簡単に利用できる

私のワークフローは劇的に変わりました。Spectrumのおかげで、最新のWebサイトに遅れずについていく必要がなくなり、ダウンロードするテンプレートを把握する必要もありません。間違いなく時間を節約できます。Spectrumのチームが、すべてのコンポーネントが正しく同期されていることを確認できるので、負担はかなり軽減されます。
Micheal Lin -Adobe社シニアエクスペリエンスデザイナー

最後に、このプラグインはデザインチーム全体がより良いコラボレーションとコミュニケーションを行うための標準的なツールとして言語を提供してくれます。Adobe XDにSpectrumをインストールすることで、デザインプロセスのツールがさらに民主化され、人々がより良く、よりアクセスしやすいデザインを作成できるようになることを期待しています。

Spectrumのインストール方法

Spectrumは無料で利用できるAdobe XDのプラグインです。
下記ページにアクセスすると、簡単にインストールできます。

サイトのキャプチャ

Spectrum for Adobe XD

「Adobe XDで開くことを許可しますか?」と表示されるので、「許可」をクリックします。

Adobe XDで開いたら、「インストール」をクリックするだけです。

Adobe XDのキャプチャ

Adobe XDで開いたところ

または、下記ページからもダウンロードできます。

Spectrumの今後の機能

Spectrum for Adobe XDは、一連のツールの一部として構想されています。わたし達は、レッドライニングプロセスの自動化ステップと、エンジニアにコンポーネント実装情報を提供することを検討しています。

わたし達は、Spectrumの機能をさらに開発し続け、Spectrumの成長に合わせてプラグインを成長させています。さらに、コンポーネントを追加することに加えて、将来的にはコンポーネントのコンテンツ交換、検索、整理できるワークフローの機能が追加されるかもしれません。

ご意見をお聞かせください

Spectrumがあなたの役に立つことを願っています。
お気軽にフィーバックやご意見をContact usからお寄せください。

sponsors

top of page

©2020 coliss